better-scroll的使用

better-scroll的使用

安装： npm install better-scroll
引入： import Bscroll form ‘better-scroll’
使用：

左侧menu 右侧foods

this.menuBscoll= new Bscroll(this.$refs.menu，{
   click: true //网页端点击
})
this.foodsBscroll = new Bscroll(this.$refs.foods, {
    probeType: 3 // 触发滚动事件
})
//滚动监听事件
this.menuBacroll.on(‘scroll’,(pos)=>{
this.scrollY = Math.abs(Math.round(pos.y))
})

//计算foods容器的高度
_calculateHeight () {
      let foodHeight = this.$refs.foods.getElementsByClassName('food-list-hook')
      let height = 0
      this.listHeight.push(height)
      for (let i = 0; i < foodHeight.length; i++) {
        const item = foodHeight[i]
        height += item.clientHeight
        this.listHeight.push(height)
      }
 }
 //使用计算属性找到高亮显示模块
 computed: {
    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
    }
  }
}
// menu中点击跳转
  clickJump (i, e) {
      if (!e._constructed) {
        return
      }
      let foodList = this.$refs.foods.getElementsByClassName('food-list-hook')
      let el = foodList[i]
      this.foodsBscroll.scrollToElement(el, 300)
 }

容器内滑动点击跳转完成！