饿了么vue，项目创建流程代码篇（beterr-scroll基本使用）

惯例插件安装导入 npm install --save-dev better-scroll

---

使用的基本流程
1.给要滚动的内容区域div等，定义一个可做标识的class类，这里使用xx-xx-hook
2.惯例导入插件 import xx from 'better-scroll',此处这里的别名将作为实例化对象的构造类
3.实例对象，传入滚动内容元素，因为要监听内容区域的高度，所以初始化应在created过程中去监听，这里是在$nextTick对象中进行触发检测
4.逻辑判断

created() {
this.$http.get('/api/goods').then((res) => {
res = res.body;
if (res.errno === ERR_OK) {
this.goods = res.data;
//          当数据已经加载完成是无法计算高度的，只有到同步执行的方法 nextTick同步执行才行
//          拿到数据以后，dom更新，进行高度的计算，在下方回调
this.$nextTick(() => {
this._initScroll();
this._caculateHeight();
});
}
});
},

methods: {
      selectMenu(index, event) {
//        pc端没有_constructed的属性，当成立时，阻断它向下的步骤
        if (!event._constructed) {
          return;
        }
        ;
        let foodList = this.$els.foodsWrapper.getElementsByClassName('food-list-hook');
        let el = foodList[index];
//        插件的方法，将滚动区域内滚动到某个元素位置，经历300s
        this.foodsScroll.scrollToElement(el, 300);
      },
      _initScroll() {
//        实例化better-scroll插件，传入要滚动的dom对象
        this.meunScroll = new BScroll(this.$els.menuWrapper, {
//          better-scroll初始化的时候会 preventDefault 阻止默认行为，声明click为true,表示映射一个点击，这里注意点击在非移动
//          端会有两次点击,解决办法 在dom中绑定事件@click=‘selectMenu($index,$ event)’传入event,非移动端下event没有        
//             _constructed属性
          'click': true
        });
        this.foodsScroll = new BScroll(this.$els.foodsWrapper, {
 //      传递类型，告诉插件需要实时检测高度坐标
          probeType: 3
        });
//        添加监听滚动事件,判断位置在哪个高度坐标中
        this.foodsScroll.on('scroll', (pos) => {
          this.scrollY = Math.abs(Math.round(pos.y));
        });
      },

逻辑判断基本思路

//methods属性中
// 根据li标签的个数，在v-for执行时，将每一个li的高度的顶部值传入数组中
  _caculateHeight() {
        let foodList = this.$els.foodsWrapper.getElementsByClassName('food-list-hook');
        let height = 0;
        this.listHeight.push(height);
        for (let i = 0; i < foodList.length; i++) {
          let item = foodList[i];
          height += item.clientHeight;
          this.listHeight.push(height);
        }
      }

// 计算属性computed中
// 根据间隔分析传入的高度间隔，i值为第几个li，即对应左侧的菜单项
   currentIndex() {
        for (let i = 0; i < this.listHeight.length; i++) {
          let height1 = this.listHeight[i];
          let height2 = this.listHeight[i + 1];
          if (!height2 || (this.scrollY > height1 && this.scrollY < height2)) {
            return i;
          }
        }
        return 0;
      }