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去跳轉)
到這里基本點擊跳轉的功能基本實現了
最后要實現右側字母表滾動的監聽:
在字母表組件中添加觸摸開始,觸摸移動,觸摸結束事件