vue better-scroll 的使用

1、下载

npm install better-scroll --save

2、引入 

import BScroll from 'better-scroll'

3、使用

/*
                文档地址 ： https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/

                probeType:   滚动过程中会派发事件  0：不派发  1 :会截流  2 ：实时派发 3：不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件
                startY : 纵轴方向初始化位置
                startX : 横轴方向初始化位置
                scrollX : true   开启横向滚动  默认值: false
                scrollY : true   开启纵向滚动 默认值: true
                freeScroll : true 同时开户横纵向
                click : true  内容里是否要点击事件   默认值: false
                dblclick : true   是否要双击事件   默认值: false
            */
            let config = {
                    probeType : 1,
                    click : true,
                }
                this.scroll = new BScroll(this.$refs.wrapper,config);


                // 滚动监听
                this.scroll.on('scroll', pos => {
                    this.$emit('listenScroll');
                })

            // 手指放开后
            this.scroll.on('touchEnd', (pos) => {
                if (pos.y > 50) {
                     // 下拉加载数据
                        
                }
                if (pos.y < (this.scroll.maxScrollY - 50)) {
                     //上拉加载数据
                        
                }
            })

            //滚动停止后
            this.scroll.on('scrollEnd', (pos) => {
                if (pos.y < (this.scroll.maxScrollY + 50) && !this.isLoading) {
                    //到底部自动加载数据
                    
                }
            })

            // 开始滚动前判断
            if (this.beforeScroll) {
                this.scroll.on('beforeScrollStart', () => {
                    this.$emit('beforeScroll')
                })
            }

4、html

    <div class="wrapper" ref="wrapper">
        <div class="content">
            <slot></slot>
        </div>
    <!-- 这里可以放一些其它的 DOM，但不会影响滚动 -->
    </div>

5、css 要注意的地方是 wrapper 要有固定的高度，，见很多人都给了定位，如果不行就加个定位吧