better-scroll是一个用于移动端滚动的插件，它的重点解决移动端（已支持 PC）各种滚动场景需求。better-scroll是使用纯 JavaScript 实现的，没有任何第三方无依赖。
使用方法
以下是如何在Vue项目中使用better-scroll。
安装
在项目中使用npm安装better-scroll插件，命令如下：
npm install --save better-scroll
使用
在需要使用的组件中，使用import语句引入better-scroll插件，如下：
import BScroll from 'better-scroll'
在外部包裹一层div。根据better-scroll官方要求，在需要滚动的组件外，必须要包裹一层div，如下：
<div class="wrapper">
<div class="content">
<!-- 这里是需要滚动的内容 -->
</div>
</div>
在mounted生命周期中初始化better-scroll。在需要滚动的组件中，在mounted生命周期中使用new BScroll()初始化better-scroll，如下：
mounted() {
this.scroll = new BScroll(this.$refs.wrapper, {
// 这里是一些配置参数，如probeType等
})
}
以上就是使用better-scroll在Vue项目中实现滚动的步骤。需要注意的是，better-scroll的配置参数和具体使用方法还有很多。
配置参数
better-scroll常用配置参数：
- startX: 默认值:0。 表示X轴方向初始化位置。
- startY: 默认值:0。 表示Y轴方向初始化位置。
- scrollY: 默认值:false。当设置为 true 的时候，可以开启纵向滚动。当设置 eventPassthrough 为 'horizontal' 的时候，该配置无效。
- scrollX: 默认值:true。 当设置为 true 的时候，可以开启横向滚动。当设置 eventPassthrough 为 'horizontal' 的时候，该配置无效。
- freeScroll: 默认值:false。在默认情况下，由于人的手指无法做到绝对垂直或者水平的运动，因此在一次手指操作的过程中，都会存在横向以及纵向的偏移量，内部默认会摒弃偏移量较小的一个方向，保留另一个方向的滚动。但是在某些场景我们需要同时计算横向以及纵向的手指偏移距离，而不是只计算偏移量较大的一个方向，这个时候我们只要设置 freeScroll 为 true 即可。当设置 eventPassthrough 不为空的时候，该配置无效。
- directionLockThreshold: 默认值为5，当 freeScroll 为 false 的情况，我们需要锁定只滚动一个方向的时候，我们在初始滚动的时候根据横轴和纵轴滚动的绝对值做差，当差值大于 directionLockThreshold 的时候来决定滚动锁定的方向。当设置 eventPassthrough 的时候，directionLockThreshold 设置无效，始终为 0。
- eventPassthrough：默认值为
''。可选值：'vertical' | 'horizontal'。有时候我们使用 BetterScroll 在某个方向模拟滚动的时候，希望在另一个方向保留原生的滚动（比如轮播图，我们希望横向模拟横向滚动，而纵向的滚动还是保留原生滚动，我们可以设置 eventPassthrough 为 vertical；相应的，如果我们希望保留横向的原生滚动，可以设置eventPassthrough为 horizontal）。 - click：默认值为 false。BetterScroll 默认会阻止浏览器的原生 click 事件。当设置为 true，BetterScroll 会派发一个 click 事件。
- dblclick：默认值为 false。派发双击点击事件。当配置成 true 的时候，默认 2 次点击的延时为 300 ms，如果配置成对象可以修改 delay。
- tap：默认值为
''。因为 BetterScroll 会阻止原生的 click 事件，我们可以设置 tap 为 'tap'，它会在区域被点击的时候派发一个 tap 事件，你可以像监听原生事件那样去监听它。 - probeType：默认值为0，可选值为1/2/3。它决定是否派发 scroll 事件，对页面的性能有影响，尤其是在 useTransition 为 true 的模式下。派发 scroll 的场景分为两种：
- 1. 手指作用在滚动区域（content DOM）上;
- 2. 调用 scrollTo 方法或者触发 momentum 滚动动画（其实底层还是调用 scrollTo 方法）
对于 v2.1.0 版本，对 probeType 做了一次统一:
- 1. probeType 为 0，在任何时候都不派发 scroll 事件，
- 2. probeType 为 1，仅仅当手指按在滚动区域上，每隔 momentumLimitTime 毫秒派发一次 scroll 事件，
- 3. probeType 为 2，仅仅当手指按在滚动区域上，一直派发 scroll 事件，
- 4. probeType 为 3，任何时候都派发 scroll 事件，包括调用 scrollTo 或者触发 momentum 滚动动画
更多的配置参数请参考：https://better-scroll.github.io/docs/zh-CN/guide/base-scroll-options.html
常用方法
refresh()：重新计算 BetterScroll，当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常。scrollTo(x, y, time, easing, extraTransform)：相对于当前位置偏移滚动 x,y 的距离。x: X轴位置;y: Y轴位置;time: 到达指定位置所需时间，单位ms;easing: 动画函数。scrollBy(x, y, time, easing)：相对于当前位置偏移滚动 x,y 的距离。x: 当前位置偏移X轴的距离；y: 当前位置偏移Y轴的距离；time: 到达偏移位置所需时间，单位ms ；easing: 动画函数。scrollToElement(el, time, offsetX, offsetY, easing)：滚动到指定的目标元素。 el: 目标元素；time: 到达目标元素所需时间，单位ms； offsetX: 距离目标元素所偏移X轴的距离;设置为true时，到达目标元素中心位置；offsetY: 距离目标元素所偏移Y轴的距离;设置为true时，到达目标元素中心位置；easing: 动画函数。
