BetterScroll是一款重点解决移动端各种滚动场景需求的开源插件，适用于滚动列表、选择器、轮播图、索引列表、开屏引导等应用场景。在移动端使用可以开发出更好更炫的滑动效果。
中文文档：better-scroll
下面介绍在vue项目中，如何使用better-scroll和进行简单封装
- 安装
npm install better-scroll --save
- 在需要的组件引用
import BScroll from 'better-scroll'
- 然后需要一个容器，需要注意的是，better-scroll容器只会使第一个子元素滚动，所以推荐使用下面这种结构：
<div ref="wrapper" class="wrapper"> //better-scroll容器
<div>
<!-- 要放的元素 -->
</div>
</div>
- 接下来就是初始化better-scroll，这里有一个需要注意的地方，better-scroll初始化必须在dom元素加载完毕后才能初始化成功，所以一般都放在mounted这个钩子函数去执行，但有时候页面加载比较慢，还是会出现错误，所以下面推荐两种比较简单也是最常用的方法：
mounted() {
setTimeout(() => {
if(!this.$refs.wrapper)
{
return //再加一次判断，防止dom没有加载出来而报错
}
this.scroll = new BScroll(this.$refs.wrapper,{})
// better-scroll的初始化接收两个参数，第一个是dom元素，第二个是配置项对象，可以不传
},20)
}
第二种方法和上面类似，不使用setTimeout，使用vue中的$nextTick函数,在这个函数里初始化。
- 到这里初始化就完成了，但！很容易忽略的一个点，注意到我上面给容器加了一个class吗，如果不给这个容器设置高度，这个better-scroll是无效的，而且需要加上overflow:hidden属性,一般移动端的需求是整屏的高度或者整屏去掉头尾的高度，可以这样写:
.wrapper{
overflow:hidden;
position:fixed;
top: xxxxxx //看你具体需求
bottom: xxxxxx //同上
}
下面是我自己封装一个scroll组件的方法:
<template>
<div ref="wrapper" class="wrapper">
<slot></slot>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
props: { //外部组件引用时，可以传入相关的配置属性，下面简单使用一个
click: {
type: Boolean,
default: true //因为better-scroll默认会掩盖里面元素的点击事件，所以一般设置点击为TRUE
},
data: { //外部传过来的数据，主要是监听数据的变化，刷新容器的计算,因为vue是数据渲染dom
type: Array,
default: null
}
},
mounted() {
setTimeout(() => {
if(!this.$refs.wrapper){
return
}
this.scroll = new BScroll( this.$refs.wrapper,{
click: this.click
}),20)
},
methods: {
// 作用：重新计算 better-scroll，当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常。
refresh() {
this.scroll && this.scroll.refresh()
}
},
watch: {
data() { //监听外面数据的变化，重新计算 better-scroll
this.refresh()
}
}
}
这就简单封装了一个scroll组件，使用的时候要需要滚动的元素放在这个组件里面就可以，自己根据官方的文档看需要什么配置，在props定义好，使用的时候传就可以。可以简单达到组件复用和代码抽象的效果。
