原生JS实现微信通讯录

2024-10-02 14:29:25

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

原本微信通讯录效果：

本案例效果图：

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

< p>代码展示

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; }

这里的点击跳转并没有用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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

js实现做通讯录的索引滑动显示效果和滑动显示锚点效果

只做实现..完全没考虑性能优化.所以我实现了以后特别卡. 第一个是在通讯录右边的索引条上进行滑动,滑动到相应字母就跳转到相应字母的锚点上. 思路:监听touchmove事件,获取clientX和clientY,传入到elementFromPoint,然后获取到元素以后执行click()即可. 这里会有个问题,就是如果你的页面中有遮罩层这一类的顶层元素的话,请将其pointer-events:none,就算这个元素的display:none;也没用,实践出真知.可以去试下. index为索引div
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录

一.闲扯有一天班长说了,同学们希望我开发一个可以共享位置的通讯录,于是自己简单设计了下功能.包括用户角色.发表微博.共享位置等等.这次也是有点私心的,为了锻炼最近看的angularjs,于是果断选择Node.js + MongoDB + angular.js的方案.当然,开发Node.js的体会越来越深刻.记得,去年leader告诉我说尽量让node的每一个服务只支撑一个业务功能,这样才能更方便的维护.当时特别想把一个Node服务做的特别强大.现在看来leader的做法是对的,我更加倾向于把n
基于aotu.js实现微信自动添加通讯录中的联系人功能

什么是Auto.JS? Auto.JS是Android平台上的JavaScript自动化工具. 它的本质是可执行自己编写的简易Javascript脚本的,尤其可以在开启"无障碍模式"的情况下对其他App进行一些操作的一个Android App,便于进行自动化操作.学习成本非常低. Auto.JS已被黑产广泛使用,以至于作者关闭了官方下载通道. 官网:https://github.com/hyb1996/Auto.js 下面通过代码给大家介绍下基于aotu.js实现微信自动添加通讯录中的
原生JS实现微信通讯录

最近工作当中再一次遇到要实现一个车辆列表,要求能够像微信通讯录一样,实现右侧滑动,点击功能,并且滑动过程中,能够有提示.原来用jquery实现过一次,为了精简代码,现在用原生的实现一次.想必工作中大家都能用上,所以就临时谢了一个小案例,分享给大家.本案例重在分享移动端的实现思路,代码和样式可能没有优化,大家见谅. 原本微信通讯录效果: 本案例效果图: 实际工作中可以实现类似于城市列表,产品字母排序这种需求: < p>代码展示 Dom Dom结构仅供参考,实际情况看自己需求,比如我现在工作当中使
原生JS实现自定义下拉单选选择框功能

浏览器自带的原生下拉框不太美观,而且各个浏览器表现也不一致,UI一般给的下拉框也是和原生的下拉框差别比较大的,这就需要自己写一个基本功能的下拉菜单/下拉选择框了.最近,把项目中用到的下拉框组件重新封装了一下,以构造函数的方式进行封装,主要方法和事件定义在原型上,下面是主要的实现代码并添加了比较详细的注释,分享出来供大家参考.代码用了ES6部分写法如需兼容低版本浏览器请把相关代码转成es5写法,或者直接bable转下. 先放个预览图吧,后面有最终的动态效果图:(样式和交互参考了阿里和Iview U
原生js实现的移动端可拖动进度条插件功能详解

本文实例讲述了原生js实现的移动端可拖动进度条插件功能.分享给大家供大家参考,具体如下: 该插件最初的想法来自网上的一篇文章,直达链接://www.jb51.net/article/167717.htm 笔者因为业务需要寻找到这个插件,然后拿来用之,发现各种不方便,然后便开始了改造之路. 上代码: <script> function dragSlide(id) { this.minDiv =document.getElementById(id); //小方块 this.width = pars
原生JS实现的跳一跳小游戏完整实例

本文实例讲述了原生JS实现的跳一跳小游戏.分享给大家供大家参考,具体如下: 以下说的是闲暇编写的一个小游戏--跳一跳,类似于微信的跳一跳,大体实现功能有: 1.先随机生成地图: 2.按住按钮释放后完成动作并进行判断: 首先po一下代码: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vie
原生JS实现顶部导航栏显示按钮+搜索框功能

根据点击导航栏,搜索框的内容会随之变动话不多说,先上图 HTML代码段 <div class="bar"> <ul id="menu" class="menu"> <li class="active">搜店</li> <li class="gradient">地址</li> <li class="gradient&qu
原生js封装添加class,删除class的实例

一.添加class function addClass(ele,cName) { var arr = ele.className.split(' ').concat(cName.split(" ")); for(var i=0;i<arr.length;i++){ for(var k=arr.length-1;k>i;k--){ (arr[k]==="")&&arr.splice(k,1); (arr[i]===arr[k])&&
利用Angularjs和原生JS分别实现动态效果的输入框

在刚开始没有给输入框添加焦点之前,没有任何效果.见下图: 然后点击其中任何一个,焦点就会触发一个动画,动画的结果见图二: 中间的输入登录密码文字,会自动添加到顶部(原谅我没有截取到动画过程的图片). 我测试了一下,这样的效果只有高级浏览器支持(IE只有IE10.IE11.Edge支持). 下面我来把代码贴上来,原理很简单,就是通过事件触发类名的增加和删除.具体的动画由CSS3来实现,这也是为什么低级浏览器不支持的原因. 原生JS实现示例: <!DOCTYPE html> <html la
原生js的ajax和解决跨域的jsonp(实例讲解)

最近慢慢感觉,学再多框架,库,都不如老老实实先把基础弄扎实了. 不说废话,先上一个用ajax请求下本地的一个.txt文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload =function(){ var oBtn = d
原生JS实现的放大镜效果实例代码

这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML> <html> <head> <title>js放大镜效果</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style

原生JS实现微信通讯录

相关推荐

随机推荐