JS实现移动端向左滑动出现删除按钮的功能

web前端|js教程 最近在做移动端项目时，需要实现一个列表页面的每一项item向左滑动时出现相应的删除按钮，其实实现此功能很简单的。这篇文章主要介绍了基于js实现移动端向左滑动出现删除按钮,需要的朋友可以参考下最近在做移动端项目时，需要实现一个列表页面的每一项item向左滑动时出现相应的删除按钮，本来想着直接使用zepto的touch.js插件，因为之前实现相同的功能时用过这个插件，当时还挺好用的，直接使用它的swipeLeft和swipeRight方法即可，可是今天又开始做这个功能时，却发现这两个方法在使用时毫无效果，一点反应都没有。上网查资料，又下载了最新版本的zepto和touch.js，都没有用，也不知为什么？所以就弃用了这个插件。下面是我后来实现后的代码，其实就是用了原生js的touch事件，再结合触摸点的坐标来判断左滑和右滑，

*{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();};

• 侧滑显示删除按钮1删除
• 侧滑显示删除按钮2删除
• 侧滑显示删除按钮3删除

//侧滑显示删除按钮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处理起来就显得有些力不从心了。

效果图如下：