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

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

 // 侧边栏   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;  }

 // 跳转锚点 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)) }

// 滑动结束 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()) }