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

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
    }

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