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

warnerwu 發布于2019-08-23 10:57 / 1444人閱讀

摘要：最近用仿寫途牛旅行遇到了這樣的城市列表選擇頁面，花了些時間，用實現了一下并讓它體驗的接近安卓原生組件很多地方都會有這樣的側邊欄字母列表菜單，可以滑動實現內容列表聯動。

最近用vue仿寫途牛旅行APP 遇到了這樣的城市列表選擇頁面，花了些時間，用Vue實現了一下并讓它體驗的接近安卓/IOS 原生組件

很多地方都會有這樣的側邊欄字母列表菜單，可以滑動實現內容列表聯動。

比如手機通訊錄，城市切換頁面都會用到

實現效果

在線體驗：http://hx-dl.top/a-z_menu/#/city

技術點

better-scroll 實現城市列表滑動

evnetBus總線機制實現兄弟組件通信

axios請求城市列表數據

stylus實現高效css編寫

函數節流減少滑動事件開銷

頁面結構

頁面主要由三個子組件拼裝而成

t-header

t-list

t-alphabet

t-list，t-alphabet
子組件的實現直接移步項目源碼吧，實現比較簡單就不貼代碼了,有需要的可以直接拿去用，做點小修改即可

源碼地址

Github源碼

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

GPU云服務器云服務器 js字母滑動索引橫向滑動菜單弧形滑動菜單滑動圖片菜單

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96846.html

干貨--手把手擼vue移動UI框架：側邊菜單

摘要：最后提醒下，代碼中使用而非的原因是為了啟動移動端手機的動畫加速，提升動畫流暢度。前言最近面試發現很多前端程序員都從來沒有寫過插件的經驗，基本上都是網上百度。所以打算寫一系列文章，手把手的教一些沒有寫過組件的兄弟們如何去寫插件。本系列文章都基于VUE，核心內容都一樣，會了之后大家可以快速的改寫成react、angular或者是小程序等組件。這篇文章是第一篇，寫的是一個類似QQ的側邊菜...

bergwhite 2019-08-22 15:11 評論0 收藏0
干貨--手把手擼vue移動UI框架：滑動輪播

摘要：其次父組件中負責通用的功能，以及輪播的整體架構，其結構如下。下面的是一種移動端的適配方案。接下來實現函數運用動畫切換到指定下標的子項到此為止，咱們就已經完成了一個初步的滑動切換輪播圖的功能了。前言昨天寫了一篇側邊菜單組件的文章，閱讀人數挺多的，內心很欣喜（偷著樂，第一篇文章有這么多人看）！乘著這股勁，今天在繼續寫一篇我們平時工作中更常用的滑動輪播組件的文章。效果展示老規矩，咱們...

MSchumi 2019-08-22 15:12 評論0 收藏0
干貨--手把手擼vue移動UI框架：滑動刪除

摘要：的結構如下樣式我們這里讓正文占據視圖的，然后按鈕容器靠右絕對定位，然后再把向右移動，這樣就剛好銜接在后面。當向左滑動的時候，向左移動，顯示出來。前言前幾天因為項目需要，用jquery寫了一個swiperOut組件，然后我就隨便把這個組件翻譯成基于Vue的了，有興趣的朋友可以看下。Github源碼（不麻煩的話幫忙start，請各位大爺賞個星星） demo展示效果展示老規矩，先上效...

MkkHou 2019-08-02 16:01 評論0 收藏0
干貨--手把手擼vue移動UI框架：滑動刪除

摘要：的結構如下樣式我們這里讓正文占據視圖的，然后按鈕容器靠右絕對定位，然后再把向右移動，這樣就剛好銜接在后面。當向左滑動的時候，向左移動，顯示出來。前言前幾天因為項目需要，用jquery寫了一個swiperOut組件，然后我就隨便把這個組件翻譯成基于Vue的了，有興趣的朋友可以看下。Github源碼（不麻煩的話幫忙start，請各位大爺賞個星星） demo展示效果展示老規矩，先上效...

trigkit4 2019-08-30 14:16 評論0 收藏0