一、安装 npm install better-scroll --save
这个步骤非常重要，之前是通过npm install better-scroll --save 来安装，这样安装的是最新版本。但是，实战过程中发现了一个非常严重的bug，多次通过路由切换组件页面滚动会无效，困扰了我很久很久。
于是，百度一下，发现根本没有出现类似情况。
然后，猜测是版本问题而导致的，最后在package.json里手动安装0.1.15版本，解决了这个问题。
//package.json
"dependencies": {
"better-scroll": "0.1.15"
}
//终端
npm install
二、html结构
div.wrapper > div.content > ul > li
在这里，分成4层结构。最外层一定要设置宽度以及定位，外层高度要100%，只能滚动第一个li，因此我们把元素全放到li标签里即可。子元素可以有多个同级，但是子元素高度一定要大于父元素，这个是产生滚动的必要条件。
.wrapper{
width: 100%;
position: absolute;
top: 45px;
bottom: 50px; /*关键*/
overflow: hidden;
z-index: 1;
}
三、初始化
首先要引入组件，需要dom结构加载完成时才执行初始化（$nextTick）。因此，需要用上钩子函数created()或者mounted()。
<div class="wrapper" ref="wrapper">
<div class="content">
<ul>
<li></li>
</ul>
</div>
</div>
import BScroll from 'better-scroll'
mounted() {
this.$nextTick(() => {
//$refs绑定元素
if(!this.scroll){
this.scroll = new BScroll(this.$refs.wrapper, {
//开启点击事件 默认为false
click:true
})
// console.log(this.scroll)
}else if(!this.$refs.wrapper){
return
}
else{
this.scroll.refresh()
}
})
}
四、优点
1.体验像原生：滚动非常流畅，而且没有滚动条。
2.记录当前路由滚动位置：在vue中通过路由切换页面时组件会自动滚动到顶部，需要监听滚动行为才能让滚动位置固定，better-scroll解决了这个问题。
五丶效果图
喜欢收藏哦！
