better-scroll使用的简易demo

个人感觉better-scroll用于移动的端的上拉加载和下拉刷新体验真的非常流畅，用于混合App开发非常合适。废话不多说，直接上demo。

<template>
<template>
    <div class="wrapper" ref="wrapper">
        <div>
            <slot></slot>
            <div class="loaddingText" v-if="isLoading">{{ bottomPullText }}</div>
        </div>
    </div>
</template>

<script>
import BScroll from "better-scroll"

export default {
    props: {
        // 显示文字
        bottomPullText: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            wrapScroll: '', //滚动容器对象
            isLoading: false,
            // 记录起始位置，防止上拉加载后回滚到顶；
            satrY: 0
        }
    },
    methods: {
        // 上拉加载
        uploadMore() {
            this.$emit('bottom-method')
            this.refresh()
        }, 
        // 加载完毕
        finishedUpload() {
            this.wrapScroll.finishPullUp()
        },
        // 刷新组件 （每次内容变化都要调用刷新，否则会出现无法滑动）
        refresh() {
            if(this.wrapScroll) {
                this.wrapScroll.refresh()
            }
        } 
    },
    mounted() {
        if(this.wrapScroll) {
            // this.refresh()
        }else {
            this.$nextTick(()=> {
                this.wrapScroll = new BScroll(this.$refs.wrapper, {
                    // 是否允许上下滑动（是 true, 否 false）
                    scrollY: true,
                    // 是否允许左右滑动（是 true, 否 false）
                    scrollX: false,
                    // 上下滑动的起始点
                    startY: this.satrY,
                    probeType: 1,
                    // 是否允许散发点击事件（是 true, 否 false）
                    click: true,
                    pullUpLoad: true
                })
                this.wrapScroll.on('scroll', (pos) => {
                    if((this.wrapScroll.maxScrollY - pos.y) > 30) {
                        this.isLoading = true
                    }else {
                        this.isLoading = false
                    }
                })
                this.wrapScroll.on('touchEnd', (pos) => {
                    // 上拉距离大于30   发布上拉加载事件
                    if((this.wrapScroll.maxScrollY - pos.y) > 30) {
                        this.startY = this.wrapScroll.startY
                        this.$emit('bottom-method')
                    }
                })
            })
        }
    }
}
</script>

<style >
/* .menu {
    position: fixed;
    width: 200px;
    background-color: #eee;
} */
.wrapper {
    height: 100%;
    /* background-color: #999; */
    overflow: hidden;
    .loadmore-text-container {
        text-align: center;
        font-size: 14px;
        color: #ccc;
    }
    .loaddingText {
        text-align: center;
        line-height: 50px;
        // color: #ccc;
    }
}
</style>


           

使用如下：

<div class="testloadmorecontainer">
	<loader-more @bottom-method="bottomLoadEvt">
		内容区域，最好多一点，方便看效果。。。。。。。。。。。。。。。。。
	</loader-more>
</div>
           

注意： 父盒子设置高度。

.testloadmorecontainer {
        height: 300px;
        overflow: hidden;
}
           

上拉加载功能该demo中未体现，因为我本人用不到，如果有需要的可以参考better-scroll文档在本demo上调整。文档地址：better-scroll