怎么在vue2.0中使用better-scroll實現(xiàn)一個移動端滑動-創(chuàng)新互聯(lián)
怎么在vue2.0中使用better-scroll 實現(xiàn)一個移動端滑動？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。
滑動右邊使左邊聯(lián)動的大概的思路：
1）要知道右側(cè)的列表中，每一個分欄所占的高度，存進一個數(shù)組中。
2）實現(xiàn)左邊聯(lián)動，則必須要監(jiān)控 “scroll”事件，獲取其高度
3）將scroll 的高度與右側(cè)分欄的高度進行比較，獲得其 index 值
4）左側(cè)的分類中，使與 index 相應(yīng)的分欄高亮即可~
余留的問題：額，左側(cè)怎么跟著一起滾動？應(yīng)該還需要判斷一下當前左側(cè)欄中的scroll的位置，然后使之跟隨變化，但是不同尺寸的手機，高度不一，怎么解決？？？我不知道……
點擊左邊時，右邊實現(xiàn)自動定位的大概思路：
1）首先要使點擊有效，因為 better-scroll將默認事件都阻止了
2）為左側(cè)的分欄綁定點擊事件，并獲取 index ，然后使右邊的相應(yīng) index 分類滾動就行了~so easy ....but!!!
怎么下手？?。?/p>
1. 先實現(xiàn)滑動右邊觸發(fā)左邊的功能：
做法：
（1）定義變量先~ 在data中加入一個 listHight: [] 數(shù)組；一個變量scrollY ： 0，用來裝目前的scroll的y位置坐標
（2）在methods 中定義一個函數(shù)計算高度，此處還要用到一個知識點（如何獲取 分類列表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 中，來比較數(shù)組中的高度值與當前的 scroll 的y坐標值，返回的是當前所在高度的index值：
在執(zhí)行這一步時，scrollY的值，要怎么得到？（通過better-scroll 檢測“scroll”事件得到，此時，需要給其加上相應(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è)的列表分欄中，并指定一個類名，叫 current，如下圖中的 畫紅線的部分：
（5）在style中，將相應(yīng)的current 類加上相應(yīng)的樣式即可：
2. 再來實現(xiàn)點擊左邊，右邊聯(lián)動的效果
（1）使 左邊欄 點擊有效，如下圖紅線標注所示：
（2）為左側(cè)欄 添加相應(yīng)的點擊事件：
（3）在methods 中編寫點擊觸發(fā)的事件 selectMenu()方法，利用 獲取的 $index 使右邊進行相應(yīng)的滾動，其中 300ms是加上了一個過渡效果：
看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司的支持。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
當前名稱：怎么在vue2.0中使用better-scroll實現(xiàn)一個移動端滑動-創(chuàng)新互聯(lián)
文章地址：http://m.jiaotiyi.com/article/dhcdgd.html