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


Posted in Javascript onAugust 16, 2017

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

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; 
 }

然后是跳转锚点

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())
 }

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

Javascript 相关文章推荐
永不消失的title提示代码
Feb 15 Javascript
javascript两种function的定义介绍及区别说明
May 02 Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 Javascript
jqGrid用法汇总(全经典)
Jun 28 Javascript
浅谈JavaScript中的分支结构
Jul 01 Javascript
基于JavaScript实现轮播图代码
Jul 14 Javascript
ReactNative实现Toast的示例
Dec 31 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
Nov 25 Javascript
js面向对象之实现淘宝放大镜
Jan 15 Javascript
Javascript模块化机制实现原理详解
Apr 02 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 Javascript
三剑客:offset、client和scroll还傻傻分不清?
Dec 04 Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 #Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
Aug 16 #Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
Aug 16 #Javascript
vue实现留言板todolist功能
Aug 16 #Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
Aug 16 #Javascript
vue的事件绑定与方法详解
Aug 16 #Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 #Javascript
You might like
php自定义session示例分享
2014/04/22 PHP
30个php操作redis常用方法代码例子
2014/07/05 PHP
PHP基于yii框架实现生成ICO图标
2015/11/13 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
js 数组克隆方法 小结
2010/03/20 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
jquery实现顶部向右伸缩的导航区域代码
2015/09/02 Javascript
深入理解ECMAScript的几个关键语句
2016/06/01 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
2017/09/30 Javascript
React.js绑定this的5种方法(小结)
2018/06/05 Javascript
javascript中的相等操作符(==与===区别)
2019/12/21 Javascript
[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT
2014/05/23 DOTA
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
python中函数传参详解
2016/07/03 Python
使用Python脚本和ADB命令实现卸载App
2017/02/10 Python
python @property的用法及含义全面解析
2018/02/01 Python
详解python tkinter教程-事件绑定
2019/03/28 Python
Django中多种重定向方法使用详解
2019/07/17 Python
使用Matplotlib 绘制精美的数学图形例子
2019/12/13 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
求最大连续递增数字串(如"ads3sl456789DF3456ld345AA"中的"456789")
2015/09/11 面试题
《菜园里》教学反思
2014/04/17 职场文书
写求职信有哪些注意事项
2014/05/08 职场文书
检查机关党的群众路线个人整改措施
2014/10/04 职场文书
课堂打架检讨书200字
2014/11/21 职场文书
小学一年级语文教学反思
2016/03/03 职场文书
励志语录:你若不勇敢,谁替你坚强
2019/11/08 职场文书
python批量创建变量并赋值操作
2021/06/03 Python
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL