原生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 相关文章推荐
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
Jun 18 Javascript
改写一个简单的菜单 弹性大小
Dec 02 Javascript
特殊情况下如何获取span里面的值
May 20 Javascript
JQuery解析XML数据的几个简单实例
May 18 Javascript
使用JSON作为函数的参数的优缺点
Oct 27 Javascript
JQuery学习总结【一】
Dec 01 Javascript
详解node Async/Await 更好的异步编程解决方案
May 10 Javascript
如何把vuejs打包出来的文件整合到springboot里
Jul 26 Javascript
Vue.js 中的 v-cloak 指令及使用详解
Nov 19 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
Jul 15 Javascript
javascript this指向相关问题及改变方法
Nov 19 Javascript
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
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预定义常量
2006/12/25 PHP
php+mysql写的简单留言本实例代码
2008/07/25 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
微信公众号实现扫码获取微信用户信息(网页授权)
2019/04/09 PHP
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
自动设置iframe大小的jQuery代码
2013/09/11 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
JS 使用for循环遍历子节点查找元素
2014/09/06 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
Angularjs 滚动加载更多数据
2016/03/17 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
概述一个页面从输入URL到页面加载完的过程
2016/12/16 Javascript
微信小程序之picker日期和时间选择器
2017/02/09 Javascript
Bootstrap 响应式实用工具实例详解
2017/03/29 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
2017/05/05 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
解决vuex刷新状态初始化的方法实现
2019/08/15 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
小程序实现点击tab切换左右滑动
2020/11/16 Javascript
使用python实现rsa算法代码
2016/02/17 Python
Python实现的查询mysql数据库并通过邮件发送信息功能
2018/05/17 Python
python3 实现一行输入,空格隔开的示例
2018/11/14 Python
使用python模拟命令行终端的示例
2019/08/13 Python
Django 实现Admin自动填充当前用户的示例代码
2019/11/18 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
css背景图片的背景裁切、背景透明度、背景变换等效果运用
2012/12/24 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
Vision Directa智利眼镜网:框架眼镜、隐形眼镜和名牌太阳眼镜
2016/11/23 全球购物
Ralph Lauren意大利官方网站:时尚界最负盛名的品牌之一
2018/10/18 全球购物
办公室主任先进事迹
2014/01/18 职场文书
Java 定时任务技术趋势简介
2022/05/04 Java/Android