JavaScript仿微信（电话)联系人列表滑动字母索引实例讲解（推荐)

今天做到了一个联系人列表的需求，要求和微信的一样！写出来分享给大家，使用了日本季刊日本季刊和点模版引擎

首先对数据源进行数据排序

//数据排序函数排序数据(data){ var letterArr=[]；for(var I=0；一。数据。长度；I){ for(var j=0；j数据。长度；j ) {如果(数据[i].标志数据[j].标志){ var temp=data[I]；数据[i]=数据[j]；数据[j]=温度；} } } if(f _ check _大写（数据[0]。flag)) { letterArr.push(数据[0]。flag)} else { letterarr。push(' # ')} for(var I=0；一。数据。长度；I){ if(f _ check _大写（数据[0])。标志){数据[0]。标志字母=数据[0]。flag } else { data[0].标志字母=' # ' } if(i0){ if(data[I]).旗帜！==数据[i-1].标志){ if(f _ check _大写(数据[i]).标志){数据[i].标志字母=数据[i].旗帜；letterArr.push(数据[i]).flag) } else { data[i].flag letter=' # letterarr . push(' # ')} } } }//侧边栏var str=for(var I=0；一、字母长度；I){ str=' a ontouchstart=' anchorJump(this)' ' letterArr[I]'/a ' } $(' .slidePage div ').html(字符串)$(' .结果列表')。html(DoT。模板)($(' # LiST ').text())(data)) } //判断是否是字母函数f _ check _大写{ if (/[A-Z]/.测试(obj))返回真}返回false}然后是跳转锚点

location.hash='#id '和a标签的作用相同，跳转到指定锚点

//跳转锚点函数主播跳转(n) { var text=$(n).text()；if (text.length 2) { $(' .字母')。文本(text) $(' .字母')。css({ '不透明度' :' 1'})位置。hash='#' text } }手指滑动，页面跳转

//手指滑动函数move() { //阻止默认事件，页面滑动事件。prevent default()；锚点跳转(文档。elementFromPoint(事件。changedTouchs[0]).clientX，event.changedTouches[0].clientY))}文档。来自点(x，y)的元素获取指定坐标的顶层元素

最后滑动结束，手指离开屏幕

//滑动结束函数TouchEnd(){ var Opcitynum=1；setInterval(function(){ OPcitynum-=0.1；if (opcityNum 0) { $(' .字母')。css({ '不透明度： OPcitynum })} else { ClearInterval()；} },50) }点击每条数据

//点击事件功能单击信息(电子邮件){警报($(电子邮件).查找('。名称')。text()) }以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流，谢谢大家对我们的支持！