用Vue擼一個『A-Z字母滑動檢索菜單』

最近用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
子組件的實現直接移步項目源碼吧，實現比較簡單就不貼代碼了,有須要的能夠直接拿去用，作點小修改便可

源碼地址

Github源碼

原文地址：行無忌的成長小屋：用Vue擼一個『A-Z字母滑動檢索菜單』