最近用vue仿寫途牛旅行APP 遇到了這樣的城市列表選擇頁面，花了些時間，用Vue實現了一下並讓它體驗的接近 安卓/IOS 原生元件
很多地方都會有這樣的側邊欄字母列表選單，可以滑動實現內容列表聯動。
比如手機通訊錄，城市切換頁面都會用到
實現效果
線上體驗：http://hx-dl.top/a-z_menu/#/city
技術點
- better-scroll 實現城市列表滑動
- evnetBus匯流排機制實現兄弟元件通訊
- axios請求城市列表資料
- stylus實現高效css編寫
- 函式節流減少滑動事件開銷
頁面結構
頁面主要由三個子元件拼裝而成
t-header
t-list
t-alphabet
<div class="city">
<t-header></t-header>
<t-list :cities="cities" :hotCities="hotCities"></t-list>
<t-alphabet :cities="cities"></t-alphabet>
</div>t-list，t-alphabet
子元件的實現直接移步專案原始碼吧，實現比較簡單就不貼程式碼了,有需要的可以直接拿去用，做點小修改即可