BScroll

<template >
    <div ref="wrapper">
        <div class="content">
            <slot></slot>
        </div>
    </div>
</template>

<script>
    import BScroll from '@better-scroll/core'
    import Pullup from '@better-scroll/pull-up'
    BScroll.use(Pullup)
    export default {
        name: "Scroll",
        props:{
            probeType: {
                type: Number,
                default: 3
            },
            /**
             * 点击列表是否派发click事件
             */
            click: {
                type: Boolean,
                default: true
            },
            /**
             * 上拉加载更多
             */
            pullUpLoad: {
                type: Boolean,
                default: true
            },
            /**
             * 是否派发滚动事件
             */
            listenScroll: {
                type: Boolean,
                default: false
            },
            /**
             * 列表的数据
             */
            datalist: {
                type: Array,
                default: null
            },
            /**
             * 是否派发滚动到底部的事件，用于上拉加载
             */
            pullup: {
                type: Boolean,
                default: false
            },
            /**
             * 是否派发顶部下拉的事件，用于下拉刷新
             */
            pulldown: {
                type: Boolean,
                default: false
            },
            /**
             * 是否派发列表滚动开始的事件
             */
            beforeScroll: {
                type: Boolean,
                default: false
            },
            /**
             * 当数据更新后，刷新scroll的延时。
             */
            refreshDelay: {
                type: Number,
                default: 200
            }
        },
        data(){
            return{
                scroll:null,//BScroll 实例对象
            }
        },
        mounted() {
            let that=this;
            setTimeout(function(){
               that.initScroll()
            },20);
        },
        methods:{
            /**
             * 初始化Scroll
             */
            initScroll(){
                let that=this;

                that.scroll=new BScroll(that.$refs.wrapper,{
                        probeType:that.probeType,    //0,1，2，3
                        click:that.click,  //是否允许点击，默认false
                        pullUpLoad:that.pullUpLoad   //上拉加载更多,默认为false，不允许
                    })


                // 是否派发滚动事件
                if (that.listenScroll) {
                    that.scroll.on('scroll', (pos) => {
                        this.$emit('scroll', pos)
                    })
                }

                // 是否派发滚动到底部事件，用于上拉加载
                if (that.pullup) {
                    that.scroll.on('scrollEnd', () => {
                        // 滚动到底部
                        if (that.scroll.y <= (that.scroll.maxScrollY + 100)) {
                            that.$emit('scrollToEnd')
                        }
                    })
                }

                // 是否派发顶部下拉事件，用于下拉刷新
                if (that.pulldown) {
                    that.scroll.on('touchend', (pos) => {
                        // 下拉动作
                        if (pos.y > 50) {
                            that.$emit('pulldown')
                        }
                    })
                }

                // 是否派发列表滚动开始的事件
                if (that.beforeScroll) {
                    that.scroll.on('beforeScrollStart', () => {
                        that.$emit('beforeScroll')
                    })
                }

            },
            disable() {
                // 代理better-scroll的disable方法
                this.scroll && this.scroll.disable()
            },
            enable() {
                // 代理better-scroll的enable方法
                this.scroll && this.scroll.enable()
            },
            refresh() {
                // 代理better-scroll的refresh方法
                console.log('refresh')
                this.scroll && this.scroll.refresh()
            },
            scrollTo() {
                // 代理better-scroll的scrollTo方法
                this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
            },
            scrollToElement() {
                // 代理better-scroll的scrollToElement方法
                this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
            },
        },
        watch: {
            // 监听数据的变化，延时refreshDelay时间后调用refresh方法重新计算，保证滚动效果正常
            'datalist':function(){
                setTimeout(() => {
                    this.refresh()
                }, this.refreshDelay)
            }
        }
    }
</script>

<style scoped>
  .content{
     
  }

https://zhuanlan.zhihu.com/p/27407024知乎原贴