VUE中的better-scroll

安装：

npm install better-scroll --save

使用;

import Bscroll from 'better-scroll'
this.$nextTick(() => {
          // 初始化滚动
          this._initScroll()
          // 初始化tops
          this._initTops()
      })
//初始化滚动
    _initScroll(){
       new Bscroll('.menu-wrapper',{
         click: true //响应点击
       })
       // 监视滑动过程
        this.foodsScroll =  new Bscroll('.foods-wrapper',{
           click: true, //响应点击
          probeType:3//因惯性滑动不会派发scroll事件
        })
        this.foodsScroll.on('scroll',({x,y})=>{
           this.scrollY = Math.abs(y)
        })
      // 监视滑动结束
        this.foodsScroll.on('scrollEnd',({x,y}) => {
          //console.log('滑动结束', y)
          this.scrollY = Math.abs(y)  // 解决惯性滑动更新
        })
    },
    _initTops(){
      //初始化tops
      const tops = []
      let top = 0
      tops.push(top)
      //找到所有分类li
      //const lis = document.getElementsByClassName('food-ist-hook')
      const  lis = this.$refs.foodsUl.getElementsByClassName('food-list-hook')
      Array.prototype.slice.call(lis).forEach((li) =>{
        top += li.clientHeight;
        tops.push(top)
      })
      this.tops = tops
    },
    clickMenuItem(index){
      //使右侧列表滑动到相应的位置
      const y = this.tops[index]
      this.scrollY = y
      this.foodsScroll.scrollTo(0,-y,300)
    }
  }