vue右侧滚动，左侧联动联动，以及点击左侧，右侧滚东到相应区域的做法！！！

vue右侧滚动，左侧联动联动

1.首先要保证你的 ul 可以滑动， 这里借助第三方 滑动库  better-scroll.js  

使用方法：

npm install better-scroll

import BScroll from 'better-scroll'

new BScroll('.包裹ul的容器class')  【https://www.awesomes.cn/repo/ustbhuangyi/better-scroll】

 

 

2.获得所有 ul 下面的li 离 滑动条顶部的距离 数组 tops

　　通过累加 li的  clientHeight 到一个 数组中

_initTops () {
      let tops = [];
      let top = 0;
      tops.push(top)
      let lis = this.$refs.foodsUl.querySelectorAll('.food-list-hook');
      [...lis].forEach((li) => {
        top += li.clientHeight
        tops.push(top)
      })
      this.tops = tops // tops 定义在vue实例data属性上
    },

3.获得滚动条滑动距离

　　better-scroll 提供了 获取滚掉条滚动距离的函数

 　　　　const fBS = new BScroll('.foods-wrapper', {probeType: 2}) // 第一个参数为包裹ul容器class  传递第二个配置参数 
      /* 
      probeType: 2  表示允许获取y轴滑动距离
      
      */
      fBS.on('scroll', ({x, y}) => { // 需要借助 better-scroll 提供的on 函数来绑定滑动事件, 回调函数中 x,y 分别表示 滑动的x y轴距离
        this.scrollY = Math.abs(y)     //vue 实例data 属性上 初始化 scrollY，然后将滚动条滚动距离实时传递给scrollY 
      })

4.将scrollY与tops中的元素比较，在那个范围内就返回这个元素索引值， 用于 动态加载 高亮类 current表示当前是在这个区域

computed : {
    
    currentIndex () { //v-for 渲染时 的 index和 这里返回的index 比较  如果 相等 就给 li加上 相应高亮类【

<li class="menu-item" v-for="(good, index) in store" :key="index"

              :class="{current: index===currentIndex}" @click="clickMenuItem(index)">

】
      const {scrollY, tops} = this
      const index = [...tops].findIndex((top, index) => {
        return scrollY >= top && scrollY < tops[index + 1]
      })
      console.log(index)
      return index
    }
  },

5. 快速滑动，利用惯性 滑动时，左侧nav不变化， =》 better-scroll 提供了 监听 滚动结束的事件  scrollEnd

绑定这个事件，将 结束位置的滚动条移动距离赋值给 scrollY即可！！！

 

点击左侧，右侧滚东到相应区域

需要主义的是  better。scroll 默认会阻止元素的点击事件， 需要通过配置 better-scroll 实例来统一分发点击事件

【click: true】

<li class="menu-item" v-for="(good, index) in store" :key="index" :class="{current: index===currentIndex}" @click="clickMenuItem(index)">

　　methods

　　

clickMenuItem (index) {
      this.scrollY = this.tops[index];
      this.fBS.scrollTo(0,-this.tops[index], 200) // this.FBS 为 better-scroll实例对象
　　　　// scrollTo（） 为better-scroll 提供函数， 表示滑动到那个位置  scrollTo（x,y,time, type）  xy位置，time：动画事件， type:滑动方式（先快后满，匀速。。。）
　　　　
　　　　

　　

【还有和scrollToElement】

　　scrollToElement(el, time, offsetX, offsetY, easing)

• 参数：
  • {DOM | String} el 滚动到的目标元素, 如果是字符串，则内部会尝试调用 querySelector 转换成 DOM 对象。
  • {Number} time 滚动动画执行的时长（单位 ms）
  • {Number | Boolean} offsetX 相对于目标元素的横轴偏移量，如果设置为 true，则滚到目标元素的中心位置
  • {Number | Boolean} offsetY 相对于目标元素的纵轴偏移量，如果设置为 true，则滚到目标元素的中心位置
  • {Object} easing 缓动函数，一般不建议修改，如果想修改，参考源码中的 ease.js 里的写法
• 返回值：无
• 作用：滚动到指定的目标元素。

    }