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 相关文章推荐
javascript中直接引用Microsoft的COM生成Word
Jan 20 Javascript
javascript表单验证和Window详解
Dec 11 Javascript
js 截取或者替换字符串中的数字实现方法
Jun 13 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
Sep 08 Javascript
JavaScript与java语言有什么不同
Sep 22 Javascript
JS实现HTML标签转义及反转义
Apr 14 Javascript
angular分页指令操作
Jan 09 Javascript
浅析JavaScript中var that=this
Feb 17 Javascript
Vue2.0 组件传值通讯的示例代码
Aug 01 Javascript
AngularJs 延时器、计时器实例代码
Sep 16 Javascript
vue-router命名路由和编程式路由传参讲解
Jan 19 Javascript
微信小程序实现可长按移动控件
Nov 01 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 将excel导入mysql
2009/11/09 PHP
php 读取文件乱码问题
2010/02/20 PHP
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
php获取网页请求状态程序示例
2014/06/17 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
javascript Window及document对象详细整理
2011/01/12 Javascript
js 立即调用的函数表达式如何写
2014/01/12 Javascript
js实现点击左右按钮轮播图片效果实例
2015/01/29 Javascript
JavaScript使用Prototype实现面向对象的方法
2015/04/14 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
2016/10/08 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
vue 动态修改a标签的样式的方法
2018/01/18 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
vue项目中api接口管理总结
2018/04/20 Javascript
微信小程序嵌入腾讯视频源过程详解
2019/08/08 Javascript
ng-alain的sf如何自定义部件的流程
2020/06/12 Javascript
Vue中引入svg图标的两种方式
2021/01/14 Vue.js
[02:43]2018DOTA2亚洲邀请赛主赛事首日TOP5
2018/04/04 DOTA
python实现的登录和操作开心网脚本分享
2014/07/09 Python
Python中的ctime()方法使用教程
2015/05/22 Python
OpenCV 轮廓检测的实现方法
2019/07/03 Python
python实现的登录与提交表单数据功能示例
2019/09/25 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
Django admin管理工具TabularInline类用法详解
2020/05/14 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
Django-celery-beat动态添加周期性任务实现过程解析
2020/11/26 Python
经济管理专业自荐信
2013/12/30 职场文书
企业文化理念标语
2014/06/10 职场文书
环保标语口号
2014/06/13 职场文书
兽医医药专业求职信
2014/07/27 职场文书
计划生育证明格式范本
2014/09/12 职场文书
三人合伙协议书范本
2014/10/29 职场文书
群众路线教育实践活动调研报告
2014/11/03 职场文书
贷款担保书范本
2015/09/22 职场文书
广告策划的实习心得体会总结!
2019/07/22 职场文书
vue实现书本翻页动画效果实例详解
2022/04/08 Vue.js