最近在做移动端项目时,需要实现一个列表页面的每一项item向左滑动时出现相应的删除按钮,本来想着直接使用zepto的touch.js插件,因为之前实现相同的功能时用过这个插件,当时还挺好用的,直接使用它的swipeLeft和swipeRight方法即可,可是今天又开始做这个功能时,却发现这两个方法在使用时毫无效果,一点反应都没有。上网查资料,又下载了最新版本的zepto和touch.js,都没有用,也不知为什么?所以就弃用了这个插件。
下面是我后来实现后的代码,其实就是用了原生js的touch事件,再结合触摸点的坐标来判断左滑和右滑,
html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>js侧滑显示删除按钮title> <style> *{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%);} style> <script> //计算根节点HTML的字体大小 function resizeRoot(){ var deviceWidth = document.documentElement.clientWidth, num = 750, num1 = num /