接触前端有半年的时间了，不会的都会去搜索别人的代码，这是本人第一篇博客，也是因为在搜索了很多关于左滑删除的例子，但是结果并不是很好，虽然样式上面实现了，但是大多数都会有无法点击删除或是无法控制事件的困扰，所以简单整理一种写法，菜鸟一只，只求不喷~
先简单说一下思路，在一个container容器里面，定义两个平级的标签 【显示内容+删除按钮】，，按钮绝对定位在右侧，z-index 在后方，需要固定宽度，当滑动显示内容的部分，按钮显示出来。通过 active 的添加和删除实现，下面是代码部分：
首先，HTML部分，很简单，一个简单的内容，一个delete按键
<body><ul data-role="listview" class="swipe-delete"> <li> <div class="behind" data-touch="true">左滑删除</div> <span>Delete</span> </li>
<li> <div class="behind" data-touch="true">左滑删除</div> <span>Delete</span> </li>
</ul></body>
加上简单的CSS样式（微丑）
<style> *{ margin:0; padding:0; list-style: none; } .swipe-delete{ margin:0 auto; } li{ position: relative; border-bottom:1px solid red; } .behind { position:relative; width: 100%; height: 60px; line-height: 60px; z-index: 10; background: #ffffff;
transition: all 0.3s ease; -webkit-transition: all 0.30s ease; } .active{ transform: translate(-60px,0) translateZ(0); -webkit-transform: translate(-60px,0) translateZ(0); } span{ position: absolute; right:0; bottom:0; top:0; width:60px; color:#ffffff; text-align: center; background: red; font-size: 20px; line-height: 60px; z-index: 1; }</style>
效果如下：
js来喽~ 【注】需要引入zepto.js
<script src="zepto.js"></script><script type="text/javascript"> $(function() {
var oBody = $(document.body), X, Y,startX,startY,moveEndX,moveEndY;//第一步：获取触碰的位置坐标 oBody.on("touchstart", "li", function (e) { startX = e.originalEvent.changedTouches[0].pageX; startY = e.originalEvent.changedTouches[0].pageY; });//abs()是取到元素的绝对值，下面是通过判断touch坐标来决定滑动方向
oBody.on("touchmove", "li", function (e) { e.preventDefault(); moveEndX = e.originalEvent.changedTouches[0].pageX; moveEndY = e.originalEvent.changedTouches[0].pageY; X = moveEndX - startX; Y = moveEndY - startY; var $touchDoom = $(this).children(".behind");//X轴的绝对值大于Y轴的绝对值并且x<0,是向左滑动 if (Math.abs(X) > Math.abs(Y) && X < 0) {//给每一个默认滑动的元素增加默认属性data-touch ，data-touch == ‘true‘,表示可以滑动
if($touchDoom.attr("data-touch") == ‘true‘){ $(this).siblings(‘li‘).find(".behind").attr("data-touch","true").removeClass("active"); $touchDoom.addClass("active"); $touchDoom.attr("data-touch","false"); } }//反之...... else if (Math.abs(X) > Math.abs(Y) && X > 0) { if($touchDoom.attr("data-touch") == ‘false‘){ $touchDoom.removeClass("active"); $touchDoom.attr("data-touch","true"); } } });
//点击删除
oBody.on("click", "li span", function () { var parent = $(this).parent("li"); $(this).parent("li").hide(200,function(){ parent.remove(); }); }); });</script>
附上完整代码，仅供参考
<!DOCTYPE html><html>
<head> <title>JQM Swipe Delete</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes"> <style> *{ margin:0; padding:0; list-style: none; } .swipe-delete{ margin:0 auto; } li{ position: relative; border-bottom:1px solid red; } .behind { position:relative; width: 100%; height: 60px; line-height: 60px; z-index: 10; background: #ffffff;
transition: all 0.3s ease; -webkit-transition: all 0.30s ease; } .active{ transform: translate(-60px,0) translateZ(0); -webkit-transform: translate(-60px,0) translateZ(0); } span{ position: absolute; right:0; bottom:0; top:0; width:60px; color:#ffffff; text-align: center; background: red; font-size: 20px; line-height: 60px; z-index: 1; } </style></head>
<body><ul data-role="listview" class="swipe-delete"> <li> <div class="behind" data-touch="true">左滑删除</div> <span>Delete</span> </li> <li> <div class="behind" data-touch="true">左滑删除</div> <span>Delete</span> </li> <li> <div class="behind" data-touch="true">左滑删除</div> <span>Delete</span> </li><li> <div class="behind" data-touch="true">左滑删除</div> <span>Delete</span></li> <li> <div class="behind" data-touch="true">左滑删除</div> <span>Delete</span> </li>
</ul></body>
<script src="zepto.js"></script><script type="text/javascript"> $(function() {
var oBody = $(document.body), X, Y,startX,startY,moveEndX,moveEndY;
oBody.on("touchstart", "li", function (e) { startX = e.originalEvent.changedTouches[0].pageX; startY = e.originalEvent.changedTouches[0].pageY; });
oBody.on("touchmove", "li", function (e) { e.preventDefault(); moveEndX = e.originalEvent.changedTouches[0].pageX; moveEndY = e.originalEvent.changedTouches[0].pageY; X = moveEndX - startX; Y = moveEndY - startY; var $touchDoom = $(this).children(".behind"); if (Math.abs(X) > Math.abs(Y) && X < 0) { if($touchDoom.attr("data-touch") == ‘true‘){ $(this).siblings(‘li‘).find(".behind").attr("data-touch","true").removeClass("active"); $touchDoom.addClass("active"); $touchDoom.attr("data-touch","false"); } } else if (Math.abs(X) > Math.abs(Y) && X > 0) { if($touchDoom.attr("data-touch") == ‘false‘){ $touchDoom.removeClass("active"); $touchDoom.attr("data-touch","true"); } } });
oBody.on("click", "li span", function () { var parent = $(this).parent("li"); $(this).parent("li").hide(200,function(){ parent.remove(); }); }); });</script>
</html>
时间： 2024-08-04 03:38:22