Vue使用better-scroll----城市組件實現字母聯動選擇


https://www.cnblogs.com/rmty/p/11040799.html

在之前通過Better-scroll實現了城市選擇頁面最基本的功能,接下來把這個頁面字母表聯動的過程記錄一下:

要實現的效果:

1.點擊右側字母表,頁面移動到對應城市字母開頭的地方

2.手指在右側字母表上滑動,頁面也會在對應城市字母開頭的地方滑動

 

頁面列表和頁面字母表是兩個在City.vue中的兄弟組件,當點擊CityAlphabet組件中的字母時,需要把點擊到的字母傳遞到父組件,再由父組件發送給子組件,這樣就實現了基本的兄弟組件傳值

首先在CityAlphabet組件中給循環出來的每個字母添加一個點擊事件

在methods中定義這個事件,把獲取到內容發送到父組件

父組件接收到這個事件

父組件添加這個handleLetterChange方法,傳遞給list子組件

 

在list組件中接收letter

接下來使用watch監聽器,監聽每次點擊傳遞過來letter的變化,再使用better-scroll的一個接口滾動到相應區域

(在循環體內給每個循環添加一個ref屬性,方便betterscroll去跳轉)

 到這里基本點擊跳轉的功能基本實現了

最后要實現右側字母表滾動的監聽:

在字母表組件中添加觸摸開始,觸摸移動,觸摸結束事件

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM