一、下载和引入
这玩意升级到2.x后有2种下载版本。一个是带插件的完整版（推荐）。一个是不到插件的。
不同版本的安装和使用方式都不一样，完整版更方便
完整版安装命令：npm install better-scroll --save
官网写的很清楚。更多版本的安装可去查看
官方网站
二、基本的使用
- 引入
- 初始化
如果子啊vue组件里使用，需要在vue实例的mounted函数里定义初始化内容，并赋值给一个变量。
this.scroll = new bs(this.$refs.wrapper, {click: true,probeType: 3, //监听位置，1 表示不监听 2 表示只监听鼠标在页面时候 3 表示任何滑动的时候pullUpLoad: true, //上拉加载更多})
- 监听函数
this.bs.on(''xxx'' ,function(){})
- 使用格式问题
这个官网有图，wrapper里面要有一个content包裹真实数据
import BScroll from 'better-scroll' //引入let bs = new BScroll('.wrapper', {pullUpLoad: true, //允许下拉到底部的监听probetypeL:1,//默认是0不监听，1表示不监听、2表示只监听手指触摸时 3表示监听所有滑动scrollbar: true,// and so on
})bs.on('scroll',(position)=>{console.log(position)//页面的位置
)
三、实现的功能
1、实现回到顶部
totop() {// scroll.scrollTo(x,y[时间 ms,behavior])// behavior的取值： smooth(平滑滚动),instant(瞬间滚动),默认值auto,实测效果等同于instant// 时间 毫秒this.scroll.scrollTo(0, 0, 1000)},
2、实现下拉加载更多
//mounted里面// 实现功能：0、监听pullingUp事件// 1、当拉到底部的时候，通过emit通知home 并调用加载更多的方法// 2、数据加载完后，调用scroll.finishPullUp()this.scroll.on('pullingUp', () => {console.log('scroll pull up')this.$emit('loadMore')})-----------------------------// methods：里面// 实现一个页面多次上拉加载更多finishpullup() {this.scroll.finishPullUp()},
四、遇到的问题
1、better-scroll mac的触控板上无法双指滑动滚动
解决办法：
1、首先在浏览器上切换一下手机型号
2、只能拖拽滚动，不能双指滑动。即只能单个手指按住触摸板，然后上下滑动。
「气死我了找了半天的原因。偶然试出来的。」