移動端列表索引效果

2018-4-19    藍(lán)藍(lán)設(shè)計(jì)的小編

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點(diǎn)這里

移動端列表索引效果非常實(shí)用,比如:手機(jī)通訊錄。你可以根據(jù)字母來查找對應(yīng)的內(nèi)容。下面這個例子我是參考了 MUI 里的列表索引效果,寫出來的代碼,代碼的結(jié)構(gòu)基本一樣,但功能會少一些,去掉了搜索框搜索,只有單純的字母索引,不過這也基本夠用了。這個效果是基于 jQuery 庫的,所以在用的時(shí)候就記得引入 jQuery 庫。

移動端列表索引效果非常實(shí)用,比如:手機(jī)通訊錄。你可以根據(jù)字母來查找對應(yīng)的內(nèi)容。下面這個例子我是參考了 MUI 里的列表索引效果,寫出來的代碼,代碼的結(jié)構(gòu)基本一樣,但功能會少一些,去掉了搜索框搜索,只有單純的字母索引,不過這也基本夠用了。這個效果是基于 jQuery 庫的,所以在用的時(shí)候就記得引入 jQuery 庫。

移動端列表索引效果

效果圖

為了版面美觀我專門用橫屏截了個圖,正如你所看到的,樣板還是挺好看的,那功能怎么樣呢?效果演示地址:http://yunkus.com/demo/indexlist/index.html ,注意 PC 端要切換到手機(jī)模式下瀏覽,如果是手機(jī)瀏覽就直接出效果了。

思路:

  • 1.布局好頁面(包括列表內(nèi)容,A~Z字母索引導(dǎo)航),右側(cè)導(dǎo)航盒子(index-bar)的高度及每個字母父盒子(a 標(biāo)簽)的高度都通過 JavaScript 來動態(tài)控制,因?yàn)椴煌謾C(jī)屏幕高度不一樣,在這里你也可以多做一步,比如:當(dāng)手機(jī)從豎屏換到橫屏?xí)r自動更新元素的樣式,以達(dá)到不刷新頁面就可以達(dá)到很好的效果,或者可以直接禁止橫屏。

  • 2.手指在索引導(dǎo)航上點(diǎn)擊或者滑動時(shí),內(nèi)容列表對應(yīng)滾動到視窗頂部。

  • 3.第個字母對應(yīng)的內(nèi)容滾動距離可以通過字母離父元素里的距離來獲取。

自己在做這個的時(shí)候,也遇到了一些自己也無法理解的問題。比如:


_this.indexBar.bind('touchstart',function() {

indexStart(event);

});


為什么我給匿名函數(shù)傳個 event 就會出問題,只能像上面那樣在 indexStart() 方法里傳?


// 這樣就會出問題

_this.indexBar.bind('touchstart',function(event) {

indexStart(event);

});


不過通過研究 MUI 里的索引列表效果,也讓我學(xué)到了不少。比如:document.elementFromPoint(x,y)方法,這個方法還是挺有用的,可以通過一個點(diǎn)坐標(biāo)來獲取到頁面中的元素。例子中的通過手指不離屏向下滑動查看內(nèi)容就是通過這個方法來實(shí)現(xiàn)的。

這里還有一個好東西想分享下給大家,錘子手機(jī)里頭的通訊錄的這個效果功能更強(qiáng)大,體驗(yàn)更貼心。如果你沒手這款手機(jī),可以看下面的這個截圖。如果你,我想你應(yīng)該也知道了。這個效果確實(shí)更符合國情。

移動端列表索引效果

不一樣的錘子風(fēng)格

圖片有點(diǎn)高,本來想截個橫屏的圖,但發(fā)現(xiàn)錘子手機(jī)禁止了橫屏操作,也就是我們前面提到的方案。

這個功能的強(qiáng)大之處在于,你不權(quán)可以像上面那樣通過右側(cè)的字母索引列表來索引,你還可以把手指放在右側(cè)字母索引列表上,然后向左滑動,就會出現(xiàn)一個更大的字母索引26宮格,你可以點(diǎn)擊字母或者長按字母,字母上就會彈出對應(yīng)的內(nèi)容。

這個效果在 Iphone 下的 safari 瀏覽器或者某些 android 機(jī)下瀏覽時(shí)會出現(xiàn)滾動卡頓或者滾動滾起不舒暢的現(xiàn)象,要解決這個問題也非常簡單,給添加了overflow-y: auto; CSS屬性的元素追加-webkit-overflow-scrolling: touch; 樣式。


藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ù)

日歷

鏈接

個人資料

存檔