better-scroll

 

 

<template>
    <div class="wrapper" ref="wrapper">
        <div class="content">
            <slot></slot>
            <!--上拉加载-->
            <div v-if="BtomPullUpLoad" class="pullup-tips">
                <div v-if="!isPullUpLoad" class="before-trigger">
                    <span class="pullup-txt">Pull up and load more</span>
                </div>
                <div v-else class="after-trigger">
                    <span class="pullup-txt">Loading...</span>
                </div>
            </div>
<!--上拉加载结束-->
        </div>
    </div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
    name: 'betterScroll',
    props: {
        BtomPullUpLoad: { // 底部消息提示
            type: Boolean,
            default: false
        },
        probeType: { // 1 滚动的时候会派发scroll事件，会截流。2滚动的时候实时派发scroll事件，不会截流。 3除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
            type: Number,
            default: 3
        },
        click: { //  点击列表是否派发click事件
            type: Boolean,
            default: true
        },
        scrollX: { //  是否开启横向滚动
            type: Boolean,
            default: false
        },
        scrollY: { //  是否开启横向滚动
            type: Boolean,
            default: false
        },
        pullDownRefresh: { // 配置顶部下拉的距离 回弹停留的距离
            type: Object,
            default: () => {
                return {
                    threshold: 90,
                    stop: 40
                }
            }
        },
        pullUpLoad: { // 配置上拉距离
            type: Object,
            default: () => {
                return {
                    threshold: -100
                }
            }
        },
        bounce: {
            type: Object,
            default: () => {
                return {
                    top: true,
                    bottom: true,
                    left: true,
                    right: true
                }
            }
        }
    },
    data () {
        return {
            isPullUpLoad: false // 底部加载提示信息
        }
    },
    mounted () {
        this.$nextTick(() => {
            this.initScroll()
        })
    },
    methods: {
        initScroll () {
            this.scroll = new BScroll(this.$refs.wrapper, {
                stopPropagation: true, // 组织冒泡
                probeType: this.probeType,
                click: this.click,
                scrollX: this.scrollX,
                scrollY: this.scrollY,
                pullDownRefresh: this.pullDownRefresh,
                pullUpLoad: this.pullUpLoad,
                bounce: this.bounce
            })
            this.scroll.on('pullingDown', () => {
                console.log('下拉刷新')
                this.scroll.finishPullDown() // 结束下拉刷新行为。
            })
            this.scroll.on('pullingUp', () => {
                console.log('上拉加载')
                this.isPullUpLoad = true
                this.axiousM() // 请求数据
            })
        },
        refreshM () {
            this.scroll.refresh()
        },
        finishPullUpM () {
            this.scroll.finishPullUp() // 结束上拉加载行为。
        },
        axiousM () {
            setTimeout(() => {
                this.isPullUpLoad = false
                this.finishPullUpM()// 结束上拉加载行为。
                setTimeout(() => {
                    this.refreshM()
                }, 20)
            }, 1500)
        }
    }
}
</script>
<style lang="less" scoped>
.wrapper{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    overflow: hidden;
}
.content{
}
.pullup-tips{
    padding: 20px;
    text-align: center;
    color: #999
}
</style>

 

 

 

better-scroll 设置滚动条位置

   el : 代表元素，  better-scroll会滚动的 el元素的位置

this.scroll.scrollToElement(el, 0, 0)