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 设计模式之组合模式解析
Apr 09 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
Dec 06 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
Dec 17 Javascript
jQuery中:disabled选择器用法实例
Jan 04 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
Mar 04 Javascript
莱鸟介绍javascript onclick事件
Jan 06 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 Javascript
基于Vue.js实现数字拼图游戏
Aug 02 Javascript
vue初始化动画加载的实例
Sep 01 Javascript
Vue实现简单分页器
Dec 29 Javascript
WebSocket的简单介绍及应用
May 23 Javascript
微信小程序错误this.setData报错及解决过程
Sep 18 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
谈一谈收音机的高放电路
2021/03/02 无线电
用PHP和ACCESS写聊天室(一)
2006/10/09 PHP
php采用file_get_contents代替使用curl实例
2014/11/07 PHP
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
php编程每天必学之验证码
2016/03/03 PHP
PHP编写的图片验证码类文件分享
2016/06/06 PHP
php微信公众号开发之二级菜单
2018/10/20 PHP
this[] 指的是什么内容 讨论
2007/03/24 Javascript
JavaScript极简入门教程(三):数组
2014/10/25 Javascript
Javascript获取图片原始宽度和高度的方法详解
2016/09/20 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
浅谈Emergence.js 检测元素可见性的 js 插件
2017/11/18 Javascript
使用ECharts实现状态区间图
2018/10/25 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
python实现自动更换ip的方法
2015/05/05 Python
Python 十六进制整数与ASCii编码字符串相互转换方法
2018/07/09 Python
python爬虫之遍历单个域名
2019/11/20 Python
python打印异常信息的两种实现方式
2019/12/24 Python
基于pytorch的lstm参数使用详解
2020/01/14 Python
PyInstaller的安装和使用的详细步骤
2020/06/02 Python
如何用python处理excel表格
2020/06/09 Python
使用Python实现NBA球员数据查询小程序功能
2020/11/09 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
CSS3制作缩略图的详细过程
2016/07/08 HTML / CSS
Hotels.com拉丁美洲:从豪华酒店到经济型酒店的预定优惠和折扣
2019/12/09 全球购物
法学函授自我鉴定
2014/02/06 职场文书
自动化专业毕业生求职信
2014/06/18 职场文书
承诺书样本
2014/08/30 职场文书
优秀班集体申报材料
2014/12/25 职场文书
写给医生的感谢信
2015/01/22 职场文书
吧主申请感言怎么写
2015/08/03 职场文书
运动会广播稿50字
2015/08/19 职场文书
详解JavaScript中的执行上下文及调用堆栈
2021/04/29 Javascript
JS class语法糖的深入剖析
2022/07/07 Javascript