关于vue.js:BetterScroll插件的基本使用及滚动思路

【Y轴滑动-根本流程】：

1.定义初始化Y坐标和滚动数组：

scrollY: 0, //初始化Y坐标（用来装以后Y坐标）
tops:[] //初始化滚动li数组（用来装右侧菜单每个子元素的高度，滑动右侧菜单>更新左侧菜单分类）

2.定义初始化滚动办法：

    // 初始化滚动
    initScrollY() {
        // 因为数据是异步，所以须要列表显示后再创立
        let menu_wrapperY = new BScroll('.menu-wrapperY')
        let foodScrollY = new BScroll('.food-wrapperY',{
        // probeType 是定义scroll触发的机会，值可设置0/1/2/3，默认是0即为不触发，1/2是滑动触发，3是蕴含惯性滑动触发
          probeType: 2
        })
        // on是监听
        // 给右侧列表绑定'scroll'事件
        foodScrollY.on('scroll',({x,y})=>{
          // scroll为事件名：滚动的实时坐标
          // 坐标取绝对值，获取以后坐标并赋值
          this.scrollY = Math.abs(y);
        })
         // 如果probeType是3 则不须要定义scrollEnd
         // 给右侧列表绑定'scrollEnd'事件（为解决惯性滑动）
         foodScrollY.on('scrollEnd',({x,y})=>{
         // scrollEnd为事件名：滚动的完结坐标
         // 坐标取绝对值，获取以后坐标并赋值
          this.scrollY = Math.abs(y);
        })
    }

3.定义初始化tops办法：

    // 初始化tops li
    //【留神：获取dom办法必须等界面更新后再执行】
    initTops() {
      // 1.初始化tops
      let initTops = []
      let top = 0
      initTops.push(top)
      // 2.收集lis伪数组转为数组
      let lis = this.$refs.foodsTops.getElementsByClassName('food-list');
      [...lis].forEach(li => {
        top += li.clientHeight
        initTops.push(top)
      })
      // 3.更新数据
      this.tops = initTops
    }

4.调用初始化滚动/tops办法：

  mounted(){
    this.$store.dispatch('shop/shopGoods').then((response)=>{
      this.shopList = response;
      // $nextTick 回调函数在界面更新之后立刻执行
        this.$nextTick(() => { 
          this.initScrollY()
          this.initTops()
        })
    })
  }

5.获取左侧菜单对应的数组下标：

    currentIndex() {
      let {scrollY, tops} = this
      let index = tops.findIndex((top,index)=> {
      // top = ['每次遍历li的高度']
      // 通过以后绝对值Y坐标来判断 从而得出菜单数组索引
        return scrollY >= top && scrollY < tops[index+1]
      })
      return index
    }