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 里的寫法
• 返回值：無
• 作用：滾動到指定的目標元素。

    }