JavaScript仿微信(電話)聯(lián)系人列表滑動(dòng)字母索引實(shí)例講解(推薦)
今天做到了一個(gè)聯(lián)系人列表的需求, 要求和微信的一樣! 寫出來(lái)分享給大家, 使用了jq和doT模版引擎
首先對(duì)數(shù)據(jù)源進(jìn)行數(shù)據(jù)排序
// 數(shù)據(jù)排序 function sortData(data) { var letterArr = []; for (var i = 0; i < data.length; i++) { for (var j = 0; j < data.length; j++) { if (data[i].flag < data[j].flag) { var temp = data[i]; data[i] = data[j]; data[j] = temp; } } } if (f_check_uppercase(data[0].flag)) { letterArr.push(data[0].flag) } else { letterArr.push('#') } for (var i = 0; i < data.length; i++) { if(f_check_uppercase(data[0].flag)) { data[0].flagLetter = data[0].flag } else { data[0].flagLetter = '#' } if (i>0) { if (data[i].flag !== data[i-1].flag) { if (f_check_uppercase(data[i].flag)) { data[i].flagLetter = data[i].flag; letterArr.push(data[i].flag) } else { data[i].flagLetter = '#'; letterArr.push('#') } } } }
// 側(cè)邊欄 var str = '' ; for (var i = 0; i < letterArr.length; i++) { str += '<a ontouchstart="anchorJump(this)" >'+ letterArr[i] +'</a>' } $('.slidePage div').html(str) $('.resultList').html(doT.template($('#listT').text())(data)) } // 判斷是否是字母 function f_check_uppercase(obj) { if (/[A-Z]/.test(obj)) { return true; } return false; }
然后是跳轉(zhuǎn)錨點(diǎn)
location.hash = '#id' 和a標(biāo)簽的作用相同, 跳轉(zhuǎn)到指定錨點(diǎn)
// 跳轉(zhuǎn)錨點(diǎn) function anchorJump(n) { var text = $(n).text(); if (text.length < 2) { $('.letter').text(text) $('.letter').css({'opacity':' 1'}) location.hash = '#' + text } }
手指滑動(dòng), 頁(yè)面跳轉(zhuǎn)
// 手指滑動(dòng) function move() { // 阻止默認(rèn)事件, 頁(yè)面滑動(dòng) event.preventDefault(); anchorJump(document.elementFromPoint(event.changedTouches[0].clientX,event.changedTouches[0].clientY)) }
document.elementFromPoint(x,y) 獲取指定坐標(biāo)的頂層元素
最后滑動(dòng)結(jié)束, 手指離開(kāi)屏幕
// 滑動(dòng)結(jié)束 function touchEnd() { var opcityNum = 1; setInterval(function () { opcityNum -= 0.1; if (opcityNum > 0) { $('.letter').css({'opacity': opcityNum}) } else { clearInterval(); } },50) }
點(diǎn)擊每條數(shù)據(jù)
// 點(diǎn)擊事件 function clickInfo(ele) { alert($(ele).find('.name').text()) }
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助~如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)腳本之家的支持!
相關(guān)文章
微信公眾號(hào)獲取用戶地理位置并列出附近的門店的示例代碼
這篇文章主要介紹了微信公眾號(hào)獲取用戶地理位置并列出附近的門店的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07功能強(qiáng)大的Bootstrap使用手冊(cè)(一)
這篇文章主要為大家詳細(xì)介紹了功能強(qiáng)大的Bootstrap使用手冊(cè),分享了Bootstrap使用步驟和常用用法,感興趣的小伙伴們可以參考一下2016-08-08Three.js中的紋理圖像應(yīng)用和屬性調(diào)整方法
在three.js中紋理貼圖是用來(lái)給物體表面添加圖案、顏色或者其他視覺(jué)效果的一種技術(shù),這篇文章主要給大家介紹了關(guān)于Three.js中紋理圖像應(yīng)用和屬性調(diào)整的相關(guān)資料,需要的朋友可以參考下2024-01-01javascript中setTimeout的問(wèn)題解決方法
這篇文章主要介紹了javascript中setTimeout的問(wèn)題以及對(duì)應(yīng)的解決方法,需要的朋友可以參考下2014-05-05微信小程序基于movable-view實(shí)現(xiàn)滑動(dòng)刪除效果
這篇文章主要介紹了微信小程序基于movable-view實(shí)現(xiàn)滑動(dòng)刪除效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01javascript驗(yàn)證完全方法具體實(shí)現(xiàn)
下面這段代碼完全實(shí)現(xiàn)了判斷是否合格.傳入號(hào)碼就行了,包括了算法,下面的是用Ext實(shí)現(xiàn)的,但是基于javascript的語(yǔ)法居多,基本都可以用2013-11-11