微信通讯录java实现_原生JS实现微信通讯录
最近工作当中再一次遇到要实现一个车辆列表,要求能够像微信通讯录一样,实现右侧滑动,点击功能,并且滑动过程中,能够有提示。原来用jquery实现过一次,为了精简代码,现在用原生的实现一次。想必工作中大家都能用上,所以就临时谢了一个小案例,分享给大家。本案例重在分享移动端的实现思路,代码和样式可能没有优化,大家见谅。
原本微信通讯录效果:
本案例效果图:
实际工作中可以实现类似于城市列表,产品字母排序这种需求:
代码展示
Dom
Dom结构仅供参考,实际情况看自己需求,比如我现在工作当中使用的React框架,这个静态的dom结构肯定不适用,不过万变不离其宗,原理都是通过id实现的。
原生js仿照微信通讯录
- A
- B
- C
- D
- E
...
- A
- aaa
- aaa
...
Bbbbbbbbbb
...
Ccccccccccccccccc
...
Ddddddddddddd
...
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上添加#的尴尬。
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()
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
微信通讯录java实现_原生JS实现微信通讯录相关推荐
- 视频教程-企业微信支付JAVA版_向员工收款-微信开发
企业微信支付JAVA版_向员工收款 微信企业号星级会员.10多年软件从业经历,国家级软件项目负责人,主要从事软件研发.软件企业员工技能培训.已经取得计算机技术与软件资格考试(软考)--"信息 ...
- 原生JS实现微信通讯录
原生JS实现微信通讯录 最近工作当中再一次遇到要实现一个车辆列表,要求能够像微信通讯录一样,实现右侧滑动,点击功能,并且滑动过程中,能够有提示.原来用jquery实现过一次,为了精简代码,现在用原生的 ...
- html下拉加载原理,GitHub - gavinjzx/wxPull: 原生JS实现微信公众号或网页使用下拉加载和上拉刷新...
原生JS实现微信公众号或网页使用下拉加载和上拉刷新 微信浏览器打开网页显示网址安全信息解决办法,网上很多办法,也找了很久,但是最新的很多用不了. 先看看效果,是不是亲想要的,可以跳过,以免浪费宝贵时间 ...
- html下拉加载实现原理,GitHub - sybiele/wxPull: 原生JS实现微信公众号或网页使用下拉加载和上拉刷新...
原生JS实现微信公众号或网页使用下拉加载和上拉刷新 微信浏览器打开网页显示网址安全信息解决办法,网上很多办法,也找了很久,但是最新的很多用不了. 先看看效果,是不是亲想要的,可以跳过,以免浪费宝贵时间 ...
- java实现选项卡定时轮播_原生js面向对象编程-选项卡(自动轮播)
原生js面向对象编程-选项卡(自动轮播) }#div1 input{color:#fff;width:100px;height:40px;background:darkseagreen;border: ...
- java循环购物车结算系统_原生JS实现购物车结算功能代码
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD ...
- java使用重绘实现拖动_原生JS使用Canvas实现拖拽式绘图功能
一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包含圆心坐标点和半径)等实体 2.原生JavaScript实现,不依赖任何第三方j ...
- 根据id删除localstorage数据_原生js利用localstorage实现简易TODO list应用
前言:小生不才,只懂得一些皮毛,我努力以最简单的语言将心中的想法表述出来,让更多人能够很轻松的弄明白.文章里面有不足之处望各位大牛指出,使得后面的文章能够朝着更好的方向发展.另外,大家记得点赞哟! 欢 ...
- js事件里面套事件怎么不管用_原生js利用localstorage实现简易TODO list应用
前言:小生不才,只懂得一些皮毛,我努力以最简单的语言将心中的想法表述出来,让更多人能够很轻松的弄明白.文章里面有不足之处望各位大牛指出,使得后面的文章能够朝着更好的方向发展.另外,大家记得点赞哟! 欢 ...
最新文章
- linux服务器安装mysql并配置外网访问
- php代码审计2全局变量和超全局变量
- 如何评价三国里的袁绍
- JAVASE——File类
- 【研究院】浅析小米与它的AI生态
- C++全局函数做友元
- linux ping库函数,Linux 常用基本命令 ping ifconfig
- CBOW模型正向传播、矩阵乘积层实现
- 再见,余!额!宝!!!
- 【复赛前排分享(一)】上分有路勤为径,大神教你剖析提分点
- 不再支持Postman集合v1格式,无法直接导入
- ftp客户端flashfxp破解教程
- 概率论与数理统计浙大第五版 第一章 部分习题+R代码
- 向深海微生物学习,提高太阳能转换效率
- Servlet常见错误 404错误 405错误 500错误等。解决方法
- warn]: Component inside Transition renders non-element root node that cannot be animated.
- 明码(C语言)——罡罡同学
- sqlserver官方网站地址
- 2015年职称计算机考试宝典,2015年度职称计算机考试宝典.doc
- pushd和popd批处理_提示以及PushD和PopD
热门文章
- matlab转差频率控制,异步电动机转差频率间接矢量控制matlab仿真(毕业设计).doc
- kuangbin专题十二 基础DP
- 2012nbsp;百度实习生招聘nbsp;笔试试题
- 电脑故障3000实例排查大全! 计算机报错大全
- 淘宝运营是什么意思?运营要学习的内容有哪些?
- 统计频次:统计数组中每种模的频次
- win10系统.android是什么文件夹,d盘文件不见了怎么恢复?Windows10增加安卓程序运行...
- java 串口 dtr rts_【整理】串口(RS232/RS485等)通讯中RTS/CTS,DTR/DSR的含义详解
- 基于Windows8与Visual Studio11开发第一个内核驱动程序
- 第九篇 绘图和可视化