源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2020-09-22 23:15 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
今天做到了一个联系人列表的需求, 要求和微信的一样! 写出来分享给大家, 使用了jq和doT模版引擎 [img]http://files.jb51.net/file_images/article/201708/2017816102056955.gif?2017716102123[/img] [b]首先对数据源进行数据排序[/b]
// 数据排序
 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; 
 }
[b]然后是跳转锚点[/b] 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
  }
 }
[b]手指滑动, 页面跳转[/b]
// 手指滑动
 function move() {
  // 阻止默认事件, 页面滑动
  event.preventDefault();
  anchorJump(document.elementFromPoint(event.changedTouches[0].clientX,event.changedTouches[0].clientY))
 }
[code]document.elementFromPoint(x,y) 获取指定坐标的顶层元素[/code] [b]最后滑动结束, 手指离开屏幕[/b]
// 滑动结束
 function touchEnd() {
  var opcityNum = 1;
  setInterval(function () {
   opcityNum -= 0.1;
   if (opcityNum > 0) {
    $('.letter').css({'opacity': opcityNum})
   } else {
    clearInterval();
   }
  },50)
 }
[b]点击每条数据[/b]
// 点击事件
 function clickInfo(ele) {
  alert($(ele).find('.name').text())
 }
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流,谢谢大家对编程素材网的支持!
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部