首页 > 代码库 > JS模拟左滑删除

JS模拟左滑删除

接触前端有半年的时间了,不会的都会去搜索别人的代码,这是本人第一篇博客,也是因为在搜索了很多关于左滑删除的例子,但是结果并不是很好,虽然样式上面实现了,但是大多数都会有无法点击删除或是无法控制事件的困扰,所以简单整理一种写法,菜鸟一只,只求不喷~

先简单说一下思路,在一个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="http://www.mamicode.com/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="http://www.mamicode.com/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>

 

JS模拟左滑删除