原生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的淡入淡出可自动切换的幻灯插件打包下载
Sep 15 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
May 28 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
JS &amp; JQuery 动态添加 select option
Jun 08 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
Sep 18 Javascript
详解jQuery中基本的动画方法
Dec 14 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
vue实现提示保存后退出的方法
Mar 15 Javascript
angular组件间通讯的实现方法示例
May 07 Javascript
NestJs使用Mongoose对MongoDB操作的方法
Feb 22 Javascript
JavaScript 事件捕获冒泡与捕获详情
Nov 11 Javascript
使用Ajax实现进度条的绘制
Apr 07 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图像处理类代码分享
2012/01/19 PHP
如何让CI框架支持service层
2014/10/29 PHP
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
详解PHP中foreach的用法和实例
2016/10/25 PHP
那些年,我还在学习jquery 学习笔记
2012/03/05 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
2013/03/18 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
javascript实现全角转半角的方法
2016/01/23 Javascript
JS动态加载脚本并执行回调操作
2016/08/24 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
AngularJS实现单一页面内设置跳转路由的方法
2017/06/28 Javascript
angular.extend方法的具体使用
2017/09/14 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
js实现购物车商品数量加减
2020/09/21 Javascript
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
Python正则简单实例分析
2017/03/21 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
python 使用递归的方式实现语义图片分割功能
2020/07/16 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
H&M美国官网:欧洲最大的服饰零售商
2016/09/07 全球购物
澳大利亚免息网上购物:Shop Zero
2016/09/17 全球购物
红色康乃馨酒店:Red Carnation Hotels
2017/06/22 全球购物
传播学毕业生求职信
2013/10/11 职场文书
班组长安全生产职责
2013/12/16 职场文书
大学生演讲稿范文
2014/01/11 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
股东授权委托书范文
2014/09/13 职场文书
高中教师个人工作总结
2015/02/10 职场文书
解除劳动合同通知书范本
2015/04/16 职场文书
2016同学毕业寄语大全
2015/12/04 职场文书
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python