原生JS实现微信通讯录


Posted in Javascript onJune 18, 2020

最近工作当中再一次遇到要实现一个车辆列表,要求能够像微信通讯录一样,实现右侧滑动,点击功能,并且滑动过程中,能够有提示。原来用jquery实现过一次,为了精简代码,现在用原生的实现一次。想必工作中大家都能用上,所以就临时谢了一个小案例,分享给大家。本案例重在分享移动端的实现思路,代码和样式可能没有优化,大家见谅。

原本微信通讯录效果:

原生JS实现微信通讯录

本案例效果图:

原生JS实现微信通讯录

实际工作中可以实现类似于城市列表,产品字母排序这种需求:

原生JS实现微信通讯录

代码展示

Dom

Dom结构仅供参考,实际情况看自己需求,比如我现在工作当中使用的React框架,这个静态的dom结构肯定不适用,不过万变不离其宗,原理都是通过id实现的。

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <script src="./js/flexible_css.js"></script>
 <script src="./js/flexible.js"></script>
 <link rel="stylesheet" href="css/index.css" rel="external nofollow" >
 <title>原生js仿照微信通讯录</title>
</head>

<body>
<!-- 右侧|字母列表 -->
<ul id="letters">
 <li class="letter-item">A</li>
 <li class="letter-item">B</li>
 <li class="letter-item">C</li>
 <li class="letter-item">D</li>
 <li class="letter-item">E</li>
 ...
</ul>
<!-- 人名单列表 -->
<div class="list-container">
 <dl id="namesList">
 <dt id='a'>A</dt>
 <dd>aaa</dd>
 <dd>aaa</dd>
 ...
 <dt id="b">B</dt>
 <dd>bbb</dd>
 <dd>bbb</dd>
 <dd>bbb</dd>
 ...
 <dt id="c">C</dt>
 <dd>cccc</dd>
 <dd>cccc</dd>
 <dd>cccc</dd>
 <dd>cccc</dd>
 ...
 <dt id="d">D</dt>
 <dd>dddd</dd>
 <dd>dddd</dd>
 <dd>dddd</dd>
 ...
 </dl>
</div>
<!--提示字母框-->
<div class="tip">A</div>
</body>

</html>

css

#letters {
 width: 0.3rem;
 position: fixed; //固定定位很关键,一般右侧都是固定的
 right: 0.2rem;
 top: 50%;
 z-index: 999;
 -webkit-transform: translateY(-50%);
 -moz-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 -o-transform: translateY(-50%);
 transform: translateY(-50%);
 color: #B2B2B2;
 -webkit-border-radius: 0.1rem;
 -moz-border-radius: 0.1rem;
 border-radius: 0.1rem;
 background-color: #efefef; }
 #letters li {
 background-color: #efefef;
 display: block;
 text-align: center;
 width: 0.4rem;
 height: 0.4rem;
 line-height: 0.4rem;
 font-size: 0.3rem;
 text-align: center; }

.list-container #namesList dt {
 font-size: 0.65rem;
 background-image: linear-gradient(-90deg, #ffffff 0%, #F1F3F6 100%);
 padding-left: 0.2rem; }
.list-container #namesList dd {
 padding-left: 0.2rem;
 line-height: 0.8rem;
 font-size: 0.46rem; }

.tip {
 width: 1rem;
 height: 1rem;
 line-height: 1rem;
 text-align: center;
 position: fixed;
 margin: 0 auto;
 z-index: 999;
 left: 50%;
 top: 50%;
 -webkit-transform: translate(-50%, -50%);
 -moz-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 -o-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 background-color: rgba(0, 0, 0, 0.38);
 -webkit-border-radius: 0.2rem;
 -moz-border-radius: 0.2rem;
 border-radius: 0.2rem;
 font-size: 0.6rem;
 color: #ffffff;
 display: none; }

JS

这里的点击跳转并没有用a标签的跳转实现,而是使用了 element.scrollIntoView() 的方式实现,这样可以有效的避免点击后url上添加#的尴尬。

<script>
 let tipDom = document.querySelector(".tip")
 // 获取右侧字母DOM
 let letterDom = document.querySelector("#letters")

 // 右侧字母触摸判断逻辑
 letterDom.addEventListener('touchmove', function (e) {
 e.preventDefault()
 //坐标(获取当前触控点的坐标)
 let y = e.touches[0].clientY
 let x = e.touches[0].clientX
 //根据当前纵向坐标控制内容的位置
 let MaxL = letterDom.getBoundingClientRect().left;
 let MaxR = letterDom.getBoundingClientRect().right;
 let MaxT = letterDom.getBoundingClientRect().top
 let MaxB = letterDom.getBoundingClientRect().top + letterDom.getBoundingClientRect().height;
 // 判断是否从一个字母到另一个字母
 if ((x >= MaxL && x <= MaxR) && (y >= MaxT && y <= MaxB) && x && y) {
 let ele = document.elementFromPoint(x, y)
 let eleContent = ele.innerHTML
 clickLetter(eleContent)
 tipDom.innerHTML = eleContent
 tipDom.style.display = 'block'
 letterDom.style.background = "#B2B2B2"
 letterDom.style.color = "#fff"
 }
 letterDom.removeEventListener("touchend", this, false)
 })

 letterDom.addEventListener("touchend", function (e) {
 tipDom.style.display = "none"
 letterDom.style.background = ""
 letterDom.style.color = "#B2B2B2"
 letterDom.removeEventListener("touchmove", this, false)
 })

 let letterDoms = document.querySelectorAll('#letters>.letter-item')

 for (let i = 0; i < letterDoms.length; i++) {
 const letterDom = letterDoms[i];
 let letterTmp = letterDom.innerHTML
 letterDom.addEventListener('click',function () {
 clickLetter(letterTmp)
 })
 }

 // 右侧字母点击事件
 function clickLetter(letter) {
 let tmpLetter = letter.toLowerCase()
 let element = window.document.getElementById(tmpLetter)
 element.scrollIntoView()
 }

</script>

详细源码GitHub地址:WeChatAddressList

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用一段js程序来实现动画功能
Mar 06 Javascript
JavaScript 图片预览效果 推荐
Dec 22 Javascript
JSON.parse 解析字符串出错的解决方法
Jul 08 Javascript
基于jQuery的投票系统显示结果插件
Aug 12 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
Sep 05 Javascript
Sortable.js拖拽排序使用方法解析
Nov 04 Javascript
vue2.0实战之基础入门(1)
Mar 27 Javascript
AngularJS自定义指令详解(有分页插件代码)
Jun 12 Javascript
JS实现可针对算术表达式求值的计算器功能示例
Sep 04 Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 Javascript
详解微信小程序-canvas绘制文字实现自动换行
Apr 26 Javascript
js canvas实现五子棋小游戏
Jan 22 Javascript
vue+element-ui表格封装tag标签使用插槽
Jun 18 #Javascript
js实现ajax的用户简单登入功能
Jun 18 #Javascript
JS实现躲避粒子小游戏
Jun 18 #Javascript
html-webpack-plugin修改页面的title的方法
Jun 18 #Javascript
vue实现购物车结算功能
Jun 18 #Javascript
vue-cli4.x创建企业级项目的方法步骤
Jun 18 #Javascript
javascript实现文字跑马灯效果
Jun 18 #Javascript
You might like
PHP面向对象分析设计的61条军规小结
2010/07/17 PHP
一些php技巧与注意事项分析
2011/02/03 PHP
Zend Framework开发入门经典教程
2016/03/23 PHP
Laravel框架中自定义模板指令总结
2017/12/17 PHP
PHP封装的数据库模型Model类完整示例【基于PDO】
2019/03/14 PHP
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
2009/12/04 Javascript
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
js里取容器大小、定位、距离等属性搜集整理
2013/08/19 Javascript
js中的布尔运算符使用介绍
2013/11/20 Javascript
JS 获取浏览器和屏幕宽高等信息代码
2014/03/31 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
2016/06/06 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
socket.io学习教程之基础介绍(一)
2017/04/29 Javascript
JavaScript基础进阶之数组方法总结(推荐)
2017/09/04 Javascript
详解小程序设置缓存并且不覆盖原有数据
2019/04/15 Javascript
pytyon 带有重复的全排列
2013/08/13 Python
Python中设置变量作为默认值时容易遇到的错误
2015/04/03 Python
Python将DataFrame的某一列作为index的方法
2018/04/08 Python
python实现拉普拉斯特征图降维示例
2019/11/25 Python
keras 读取多标签图像数据方式
2020/06/12 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
Sixt美国租车:高端豪华车型自驾体验
2017/09/02 全球购物
老板电器官方购物商城:老板油烟机、燃气灶、消毒柜、电烤箱
2018/05/30 全球购物
C/C++ 笔试、面试题目大汇总
2015/11/21 面试题
过程装备与控制工程专业个人的求职信
2013/12/01 职场文书
财政局长自荐信范文
2013/12/22 职场文书
房屋公证委托书
2014/04/03 职场文书
2014年售后服务工作总结
2014/11/18 职场文书
出纳岗位职责
2015/01/31 职场文书
教师节座谈会主持词
2015/07/03 职场文书
小学运动会开幕词
2016/03/04 职场文书
Python答题卡识别并给出分数的实现代码
2021/06/22 Python
详解nginx location指令
2022/01/18 Servers