初試 vue2.0——9.項目開發_better-scroll 實現移動端滑動2

寫在前面的話：

　　上一篇文章實現了滑動效果，這部分來試試左右聯動效果的實現方法吧

九、better-scroll + vue2.0 實現移動端滑動2——左右聯動

　　效果：滑動右側時，左側也能有相應的變化；點擊左側時，右側也能自動定位到相應的位置。

如下圖所示界面，左側為分欄，右側為分欄詳情。

　　　　

　　滑動右邊使左邊聯動的大概的思路：

　　　　　　1）要知道右側的列表中，每一個分欄所占的高度，存進一個數組中。

　　　　　　2）實現左邊聯動，則必須要監控 “scroll”事件，獲取其高度

　　　　　　3）將scroll 的高度與右側分欄的高度進行比較，獲得其 index 值

　　　　　　4）左側的分類中，使與 index 相應的分欄高亮即可~

　　　　余留的問題：額，左側怎么跟着一起滾動？應該還需要判斷一下當前左側欄中的scroll的位置，然后使之跟隨變化，但是不同尺寸的手機，高度不一，怎么解決？？？我不知道……

　　點擊左邊時，右邊實現自動定位的大概思路：

　　　　　　1）首先要使點擊有效，因為 better-scroll將默認事件都阻止了

　　　　　　2）為左側的分欄綁定點擊事件，並獲取 index ，然后使右邊的相應 index 分類滾動就行了~so easy   ....but!!!

　　　怎么下手？！！

1. 先實現滑動右邊觸發左邊的功能：

做法：

　　（1）定義變量先~ 在data中加入一個 listHight: [] 數組；一個變量scrollY ： 0，用來裝目前的scroll的y位置坐標

　　（2）在methods 中定義一個函數計算高度，此處還要用到一個知識點（如何獲取 分類列表dom元素？）還記得上一篇中使用到的 this.$refs 嗎？

　　　　我們先給要獲取高度的那個元素取個類名，名字叫：“food-list-hook”：

　　　　let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook')   這樣就獲取了所有分類列表啦，計算方法定義如下：

_calculateHeight () {
        // console.log(this)
        let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook')
        let height = 0
        this.listHight.push(height)
        for (let i = 0; i < foodList.length; i++) {
          let item = foodList[i]
          height += item.clientHeight
          this.listHight.push(height)
        }
}

　  （3）然后在計算屬性computed 中，來比較數組中的高度值與當前的 scroll 的y坐標值，返回的是當前所在高度的index值：

在執行這一步時，scrollY的值，要怎么得到？（通過better-scroll 檢測“scroll”事件得到，此時，需要給其加上相應的參數，做法如截圖中畫紅線處所示）

　　　　

currentIndex () {
        for (let i = 0; i < this.listHight.length; i++) {
          let height1 = this.listHight[i]
          let height2 = this.listHight[i + 1]
          if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
            return i
          }
        }
        return 0
      }
 }　　

　　（4）在 template 中，將此index 值綁定到index 值相等的左側的列表分欄中，並指定一個類名，叫 current，如下圖中的 畫紅線的部分：

　　　　　

　 （5）在style中，將相應的current 類加上相應的樣式即可：

　　　　

 

2. 再來實現點擊左邊，右邊聯動的效果

　　（1）使 左邊欄 點擊有效，如下圖紅線標注所示：

　　　　

　　（2）為左側欄 添加相應的點擊事件：

　　　　

　　（3）在methods 中編寫點擊觸發的事件 selectMenu()方法，利用 獲取的 $index 使右邊進行相應的滾動，其中 300ms是加上了一個過渡效果：

　　　　

 

試試吧~