JavaScript仿微信(電話)聯(lián)系人列表滑動(dòng)字母索引實(shí)例講解(推薦)
今天做到了一個(gè)聯(lián)系人列表的需求, 要求和微信的一樣! 寫出來分享給大家, 使用了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), 頁面跳轉(zhuǎn)
// 手指滑動(dòng)
function move() {
// 阻止默認(rèn)事件, 頁面滑動(dòng)
event.preventDefault();
anchorJump(document.elementFromPoint(event.changedTouches[0].clientX,event.changedTouches[0].clientY))
}
document.elementFromPoint(x,y) 獲取指定坐標(biāo)的頂層元素
最后滑動(dòng)結(jié)束, 手指離開屏幕
// 滑動(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())
}
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助~如果有疑問大家可以留言交流,謝謝大家對(duì)腳本之家的支持!
相關(guān)文章
JavaScript利用normalizr實(shí)現(xiàn)復(fù)雜數(shù)據(jù)轉(zhuǎn)換
當(dāng)我們需要進(jìn)行數(shù)據(jù)轉(zhuǎn)換以便拆分和維護(hù)時(shí),可以使用redux作者 Dan Abramov 編寫的normalizr來處理數(shù)據(jù),本文將為大家詳細(xì)講講其用法,感興趣的可以了解一下2022-07-07
基于JS實(shí)現(xiàn)01支付后的10秒倒計(jì)時(shí)
這是一個(gè)通過js實(shí)現(xiàn)的支付后的頁面,點(diǎn)擊支付會(huì)跳出一個(gè)彈窗,提示你是否要確定支付,確定后進(jìn)入付后界面,該頁面有著10秒倒計(jì)時(shí),計(jì)時(shí)結(jié)束后便會(huì)返回原界面,也可以選擇立刻返回,來返回主頁面,這篇文章主要介紹了基于JS實(shí)現(xiàn)01支付后的10秒倒計(jì)時(shí),需要的朋友可以參考下2023-03-03
js檢測標(biāo)題與描述中的關(guān)鍵詞發(fā)現(xiàn)就替換或跳轉(zhuǎn)到別的頁面
這篇文章主要介紹了js檢測標(biāo)題與描述中的關(guān)鍵詞發(fā)現(xiàn)就替換或跳轉(zhuǎn)到別的頁面的實(shí)現(xiàn)方法,主要是分享它的編程思路與加密方法2021-06-06
JavaScript實(shí)現(xiàn)網(wǎng)頁計(jì)算器
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)網(wǎng)頁計(jì)算器功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07
微信小程序?qū)崿F(xiàn)地區(qū)選擇偽五級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)地區(qū)選擇偽五級(jí)聯(lián)動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07

