关于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    }