饿了么vue，项目创建流程代码篇（beterr-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;
      }