<li id="g3zqm"></li>
2018-4-19 藍藍設計的小編
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
移動端列表索引效果非常實用，比如：手機通訊錄。你可以根據字母來查找對應的內容。下面這個例子我是參考了 MUI 里的列表索引效果，寫出來的代碼，代碼的結構基本一樣，但功能會少一些，去掉了搜索框搜索，只有單純的字母索引，不過這也基本夠用了。這個效果是基于 jQuery 庫的，所以在用的時候就記得引入 jQuery 庫。
移動端列表索引效果非常實用，比如：手機通訊錄。你可以根據字母來查找對應的內容。下面這個例子我是參考了 MUI 里的列表索引效果，寫出來的代碼，代碼的結構基本一樣，但功能會少一些，去掉了搜索框搜索，只有單純的字母索引，不過這也基本夠用了。這個效果是基于 jQuery 庫的，所以在用的時候就記得引入 jQuery 庫。
效果圖
為了版面美觀我專門用橫屏截了個圖，正如你所看到的，樣板還是挺好看的，那功能怎么樣呢？效果演示地址：http://yunkus.com/demo/indexlist/index.html ，注意 PC 端要切換到手機模式下瀏覽，如果是手機瀏覽就直接出效果了。
思路：
1.布局好頁面（包括列表內容，A~Z字母索引導航），右側導航盒子（index-bar）的高度及每個字母父盒子（a 標簽）的高度都通過 JavaScript 來動態控制，因為不同手機屏幕高度不一樣，在這里你也可以多做一步，比如：當手機從豎屏換到橫屏時自動更新元素的樣式，以達到不刷新頁面就可以達到很好的效果，或者可以直接禁止橫屏。
2.手指在索引導航上點擊或者滑動時，內容列表對應滾動到視窗頂部。
3.第個字母對應的內容滾動距離可以通過字母離父元素里的距離來獲取。
自己在做這個的時候，也遇到了一些自己也無法理解的問題。比如：
_this.indexBar.bind('touchstart',function() {
indexStart(event);
});
為什么我給匿名函數傳個 event 就會出問題，只能像上面那樣在 indexStart() 方法里傳？
// 這樣就會出問題
_this.indexBar.bind('touchstart',function(event) {
indexStart(event);
});
不過通過研究 MUI 里的索引列表效果，也讓我學到了不少。比如：document.elementFromPoint(x,y)方法，這個方法還是挺有用的，可以通過一個點坐標來獲取到頁面中的元素。例子中的通過手指不離屏向下滑動查看內容就是通過這個方法來實現的。
這里還有一個好東西想分享下給大家，錘子手機里頭的通訊錄的這個效果功能更強大，體驗更貼心。如果你沒手這款手機，可以看下面的這個截圖。如果你，我想你應該也知道了。這個效果確實更符合國情。
不一樣的錘子風格
圖片有點高，本來想截個橫屏的圖，但發現錘子手機禁止了橫屏操作，也就是我們前面提到的方案。
這個功能的強大之處在于，你不權可以像上面那樣通過右側的字母索引列表來索引，你還可以把手指放在右側字母索引列表上，然后向左滑動，就會出現一個更大的字母索引26宮格，你可以點擊字母或者長按字母，字母上就會彈出對應的內容。
這個效果在 Iphone 下的 safari 瀏覽器或者某些 android 機下瀏覽時會出現滾動卡頓或者滾動滾起不舒暢的現象，要解決這個問題也非常簡單，給添加了overflow-y: auto; CSS屬性的元素追加-webkit-overflow-scrolling: touch; 樣式。
藍藍設計( m.hengshangtqd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務