今天做到了一个联系人列表的需求,要求和微信的一样! 写出来分享给大家,使用了jq和doT模版引擎
首先对数据源进行数据排序
rush:js;">
// 数据排序
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('#')
}
}
}
}
rush:js;">
// 侧边栏
var str = '' ;
for (var i = 0; i < letterarr.length; i++) {
str += ''+ letterArr[i] +''
}
$('.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;
}
然后是跳转锚点
location.hash = '#id' 和a标签的作用相同,跳转到指定锚点
rush:js;">
// 跳转锚点
function anchorJump(n) {
var text = $(n).text();
if (text.length < 2) {
$('.letter').text(text)
$('.letter').css({'opacity':' 1'})
location.hash = '#' + text
}
}
rush:js;">
// 手指滑动
function move() {
// 阻止默认事件,页面滑动
event.preventDefault();
anchorJump(document.elementFromPoint(event.changedtouches[0].clientX,event.changedtouches[0].clientY))
}
document.elementFromPoint(x,y) 获取指定坐标的顶层元素
最后滑动结束,手指离开屏幕
0) {
$('.letter').css({'opacity': opcityNum})
} else {
clearInterval();
}
},50)
}
点击每条数据
rush:js;">
// 点击事件
function clickInfo(ele) {
alert($(ele).find('.name').text())
}
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流，谢谢大家对编程之家的支持!
