最近在做移动端项目时，需要实现一个列表页面的每一项item向左滑动时出现相应的删除按钮，其实实现此功能很简单的。这篇文章主要介绍了基于js实现移动端向左滑动出现删除按钮,需要的朋友可以参考下
最近在做移动端项目时，需要实现一个列表页面的每一项item向左滑动时出现相应的删除按钮，本来想着直接使用zepto的touch.js插件，因为之前实现相同的功能时用过这个插件，当时还挺好用的，直接使用它的swipeLeft和swipeRight方法即可，可是今天又开始做这个功能时，却发现这两个方法在使用时毫无效果，一点反应都没有。上网查资料，又下载了最新版本的zepto和touch.js，都没有用，也不知为什么？所以就弃用了这个插件。
下面是我后来实现后的代码，其实就是用了原生js的touch事件，再结合触摸点的坐标来判断左滑和右滑，
nbsp;html>js侧滑显示删除按钮 *{margin:0;padding:0;}body{font-size:.14rem;}li{list-style:none;}i{font-style:normal;}a{color:#393939;text-decoration:none;}.list{overflow:hidden;margin-top:.2rem;padding-left:.3rem;border-top:1px solid #ddd;}.list li{overflow:hidden;width:120%;border-bottom:1px solid #ddd;}.list li a{display:block;height:.88rem;line-height:.88rem;-webkit-transition:all 0.3s linear;transition:all 0.3s linear;}.list li i{float:right;width:15%;text-align:center;background:#E2421B;color:#fff;}.swipeleft{transform:translateX(-15%);-webkit-transform:translateX(-15%);}//计算根节点HTML的字体大小function resizeRoot(){ var deviceWidth = document.documentElement.clientWidth, num = 750, num1 = num / 100; if(deviceWidth > num){ deviceWidth = num; } document.documentElement.style.fontSize = deviceWidth / num1 + "px";}//根节点HTML的字体大小初始化resizeRoot();window.onresize = function(){ resizeRoot();};//侧滑显示删除按钮var expansion = null; //是否存在展开的listvar container = document.querySelectorAll('.list li a');for(var i = 0; i 0){ // 阻止事件冒泡 event.stopPropagation(); if(X - x > 10){ //右滑 event.preventDefault(); this.className = ""; //右滑收起 } if(x - X > 10){ //左滑 event.preventDefault(); this.className = "swipeleft"; //左滑展开 expansion = this; } swipeY = false; } // 上下滑动 if(swipeY && Math.abs(X - x) - Math.abs(Y - y) < 0) { swipeX = false; } });}
登录后复制
也许大家也注意到了，在页面最开始部分加入了原生js对移动端自适应的实现，主要为了方便移动端页面在不同尺寸屏幕上的更好的展现，也是为了在误差很小的情况下能更好的将设计稿近乎完美的呈现在不同尺寸的屏幕上，主要使用到的单位是rem。
移动端自适应js
//计算根节点HTML的字体大小function resizeRoot(){ var deviceWidth = document.documentElement.clientWidth, num = 750, num1 = num / 100; if(deviceWidth > num){ deviceWidth = num; } document.documentElement.style.fontSize = deviceWidth / num1 + "px";}//根节点HTML的字体大小初始化resizeRoot();window.onresize = function(){ resizeRoot();};登录后复制
原理其实很简单，就是根据不同屏幕来计算根节点html的font-size，再利用rem相对于根节点html的font-size来计算的原理来实现不同元素的大小、间距等。
也有人说其实不用这样的js来判断，直接用css3的响应式@media screen也可以，其实我认为在各种尺寸的安卓屏幕如此活跃的当下，@media screen处理起来就显得有些力不从心了。
效果图如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
如何利用js实现横向拖拽导航条功能
js中实现限制uploadify的上传个数
以上就是JS实现移动端向左滑动出现删除按钮的功能的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2748631.html
