原生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 相关文章推荐
jquery tab标签页的制作
May 10 Javascript
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
js实现网站首页图片滚动显示
Feb 04 Javascript
禁止按回车键提交表单的方法
Jun 11 Javascript
跟我学习javascript的call(),apply(),bind()与回调
Nov 16 Javascript
JavaScript实现简单的拖动效果
Jul 02 Javascript
JS实现上传图片的三种方法并实现预览图片功能
Jul 14 Javascript
JavaScript实现动态添加Form表单元素的方法示例
Aug 14 Javascript
详解http访问解析流程原理
Oct 18 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
Jan 16 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
May 24 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
Jul 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
咖啡产品发展的三大浪潮
2021/03/04 咖啡文化
php函数指定默认值方法的小例子
2013/12/04 PHP
php stripslashes和addslashes的区别
2014/02/03 PHP
一个PHP针对数字的加密解密类
2014/03/20 PHP
简单谈谈 php 文件锁
2017/02/19 PHP
this[] 指的是什么内容 讨论
2007/03/24 Javascript
javascript实现上传图片并预览的效果实现代码
2011/04/11 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
2015/01/13 Javascript
JS简单限制textarea内输入字符数量的方法
2015/10/14 Javascript
jQuery基于扩展简单实现倒计时功能的方法
2016/05/14 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
2016/10/17 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
HTML5 js实现拖拉上传文件功能
2020/11/20 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
2018/02/23 Javascript
深入浅析var,let,const的异同点
2018/08/07 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
2019/12/23 Javascript
python连接MySQL、MongoDB、Redis、memcache等数据库的方法
2013/11/15 Python
python中引用与复制用法实例分析
2015/06/04 Python
使用Python的Tornado框架实现一个Web端图书展示页面
2016/07/11 Python
Python编程pygame模块实现移动的小车示例代码
2018/01/03 Python
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
python导入模块交叉引用的方法
2019/01/19 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
Flask处理Web表单的实现方法
2021/01/31 Python
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
英国床垫在线:Mattress Online
2016/12/07 全球购物
师范教师大学生职业生涯规划范文
2014/01/05 职场文书
最新会计专业求职信范文
2014/01/28 职场文书
店长职务说明书
2014/02/04 职场文书
元旦活动感言
2014/03/08 职场文书
导游个人求职信范文
2014/03/23 职场文书
供电工程专业求职信
2014/08/09 职场文书
毕业生就业推荐表导师评语
2014/12/31 职场文书
60句有关成长的名言
2019/09/04 职场文书
导游词之贵州织金洞
2019/10/12 职场文书
MySQL8.0 Undo Tablespace管理详解
2022/06/16 MySQL