怎么开发小程序_JavaScript仿微信（德律风）联络人

JavaScript仿微信（电话）联系人列表滑动字母索引实例讲解（推荐）       这篇文章主要介绍了仿微信（电话）联系人列表滑动字母索引实例,通过for循环进行判断，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。

今天做到了一个联系人列表的需求, 要求和微信的一样! 写出来分享给大家, 使用了jq和doT模版引擎

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

// 数据排序
 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('#')

for (var i = 0; i letterArr.length; i++) { str += ' a ontouchstart="anchorJump(this)" '+ letterArr[i] +' /a ' $('.(str) $('.(doT.template($('#listT').text())(data)) // 判断是否是字母 function f_check_uppercase(obj) { if (/[A-Z]/.test(obj)) { return true; return false;

然后是跳转锚点

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

 // 跳转锚点
 function anchorJump(n) {
 var text = $(n).text();
 if (text.length 2) {
 $('.letter').text(text)
 $('.letter').css({'opacity':' 1'})
 location.hash = '#' + text
 }

手指滑动, 页面跳转

// 手指滑动
 function move() {
 // 阻止默认事件, 页面滑动
 event.preventDefault();
 anchorJump(document.elementFromPoint(event.changedTouches[0].clientX,event.changedTouches[0].clientY))
 }

document.elementFromPoint(x,y) 获取指定坐标的顶层元素

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

// 滑动结束
 function touchEnd() {
 var opcityNum = 1;
 setInterval(function () {
 opcityNum -= 0.1;
 if (opcityNum 0) {
 $('.letter').css({'opacity': opcityNum})
 } else {
 clearInterval();
 },50)
 }

点击每条数据

// 点击事件
 function clickInfo(ele) {
 alert($(ele).find('.name').text())

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流，谢谢大家对凡科的支持!