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