怎么在vue2.0中使用better-scroll 實(shí)現(xiàn)一個(gè)移動(dòng)端滑動(dòng)？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

專注于為中小企業(yè)提供成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)尖草坪免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千多家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

滑動(dòng)右邊使左邊聯(lián)動(dòng)的大概的思路：

1）要知道右側(cè)的列表中，每一個(gè)分欄所占的高度，存進(jìn)一個(gè)數(shù)組中。

2）實(shí)現(xiàn)左邊聯(lián)動(dòng)，則必須要監(jiān)控 “scroll”事件，獲取其高度

3）將scroll 的高度與右側(cè)分欄的高度進(jìn)行比較，獲得其 index 值

4）左側(cè)的分類中，使與 index 相應(yīng)的分欄高亮即可~

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

點(diǎn)擊左邊時(shí)，右邊實(shí)現(xiàn)自動(dòng)定位的大概思路：

1）首先要使點(diǎn)擊有效，因?yàn)?better-scroll將默認(rèn)事件都阻止了

2）為左側(cè)的分欄綁定點(diǎn)擊事件，并獲取 index ，然后使右邊的相應(yīng) index 分類滾動(dòng)就行了~so easy ....but!!!

怎么下手？?。?/p>

1. 先實(shí)現(xiàn)滑動(dòng)右邊觸發(fā)左邊的功能：

做法：

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

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

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

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

_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）然后在計(jì)算屬性computed 中，來比較數(shù)組中的高度值與當(dāng)前的 scroll 的y坐標(biāo)值，返回的是當(dāng)前所在高度的index值：

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

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 值相等的左側(cè)的列表分欄中，并指定一個(gè)類名，叫 current，如下圖中的 畫紅線的部分：

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

2. 再來實(shí)現(xiàn)點(diǎn)擊左邊，右邊聯(lián)動(dòng)的效果

（1）使 左邊欄 點(diǎn)擊有效，如下圖紅線標(biāo)注所示：

（2）為左側(cè)欄 添加相應(yīng)的點(diǎn)擊事件：

（3）在methods 中編寫點(diǎn)擊觸發(fā)的事件 selectMenu()方法，利用 獲取的 $index 使右邊進(jìn)行相應(yīng)的滾動(dòng)，其中 300ms是加上了一個(gè)過渡效果：

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。