伊人久久大香线蕉综合影视_日韩精品少妇无码受不了_71pao成人国产永久免费视频_国产伦片中文免费观看_国产高清无码麻豆精品_九色综合伊人久久富二代_日韩黄色精品_日韩A∨精品日韩精品无码

移動(dòng)端列表索引效果

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

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

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

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

移動(dòng)端列表索引效果

效果圖

為了版面美觀我專門用橫屏截了個(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)容列表對應(yīng)滾動(dòng)到視窗頂部。

  • 3.第個(gè)字母對應(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í)更符合國情。

移動(dòng)端列表索引效果

不一樣的錘子風(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)擊字母或者長按字母,字母上就會(huì)彈出對應(yīng)的內(nèi)容。

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


藍(lán)藍(lán)設(shè)計(jì)cqzjtgb.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ù)

日歷

鏈接

個(gè)人資料

存檔

隆尧县| 石家庄市| 台中县| 天峨县| 道真| 嘉兴市| 玛曲县| 勐海县| 玉屏| 沛县| 奇台县| 淮南市| 四川省| 龙井市| 阿合奇县| 沐川县| 应城市| 石柱| 隆回县| 镇平县| 县级市| 锦屏县| 道孚县| 社旗县| 永川市| 鹤岗市| 丹棱县| 古蔺县| 甘洛县| 景谷| 云安县| 泗水县| 奉贤区| 抚松县| 孝义市| 安西县| 和林格尔县| 晴隆县| 文登市| 乐清市| 府谷县|