一、better-scroll是什么？
better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。
better-scroll 是基于原生 JS 实现的，不依赖任何框架。它编译后的代码大小是 63kb，压缩后是 35kb，gzip 后仅有 9kb，是一款非常轻量的 JS lib。
二、在vue中使用better-scroll的方法
- 引入better-scroll文件
import BScroll from 'better-scroll';
- 编写初始化代码（在此将初始化代码封装为了一个_initScroll方法）
有一个需要注意的点：可滚动的部分必须包含在同一个html标签中，即不能有同级标签。
<!-- HTML -->
<div class="menu-wrapper" ref="menuWrapper">
<div class="content">
...
</div>
</div>
<div class="menu-wrapper" ref="foodsWrapper">
<div class="content">
...
</div>
</div>
/* JS */
methods: {
_initScroll() {
this.menuScroll = new BScroll(this.$refs.menuWrapper, {});
this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {});
}
}
另：上述代码中，使用ref获取了相关的dom元素
- 在created()钩子函数中调用初始化方法
created() {
this.$nextTick(() => {
this._initScroll();
})
};
注意：
如果在created中调用初始化方法，则必须在$nextStick函数中。
# Vue.nextStick([callback, context])：
用法：在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。
