在vue2.0中使用better-scroll如何實現行動端滑動

本篇文章主要介紹了vue2.0 better-scroll 實作行動端滑動的範例程式碼，具有一定的參考價值，有興趣的小夥伴們可以參考一下。

寫在前面的話：

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

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

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

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

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是加上了一個過渡效果：

#上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：#########使用百度地圖如何實現地圖網格#############在nodejs中Express與Koa2對比區分（詳細教學） ############JS中的單例模式實作對資料增刪改查############js中的閉包（詳細教學）##### #

以上是在vue2.0中使用better-scroll如何實現行動端滑動的詳細內容。更多資訊請關注PHP中文網其他相關文章！