在vue中使用better-scroll & $nextStic

一、better-scroll是什么？

better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。

better-scroll 是基于原生 JS 实现的，不依赖任何框架。它编译后的代码大小是 63kb，压缩后是 35kb，gzip 后仅有 9kb，是一款非常轻量的 JS lib。

二、在vue中使用better-scroll的方法

1. 引入better-scroll文件

import BScroll from 'better-scroll';

2. 编写初始化代码（在此将初始化代码封装为了一个_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元素

3. 在created()钩子函数中调用初始化方法

created() {
    this.$nextTick(() => {
      this._initScroll();
  })
};

注意：
如果在created中调用初始化方法，则必须在$nextStick函数中。

# Vue.nextStick([callback, context])：

用法：在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。