站点图标 独书先生

JS滑动删除列表项：左滑出现删除按钮交互特效 | 移动端

Alexads

需求：

移动端类似通讯录、短信列表中实现左滑出现删除按钮，右滑或点击空白处隐藏删除按钮。

分析：

可直接使用手势插件处理可能会更方便，考虑到功能单一，可用监听原生touchstart，touchmove事件实现

效果：

代码：

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <title>JS Bin</title>
</head>
<body>
<ul>
  <li class="list-li">
    <div>这是一个滑动删除功能</div>
    <div class="btn">删除</div>
  </li>

  <li class="list-li">
    <div>使用原生touchstart,touchmove</div>
    <div class="btn">删除</div>
  </li>

  <li class="list-li">
    <div>滑动展开后点击可隐藏</div>
    <div class="btn">删除</div>
  </li>

  <li class="list-li">
    <div>更多实例欢迎访问DuShuSir.com</div>
    <div class="btn">删除</div>
  </li>

  <li class="list-li">
    <div>感谢！</div>
    <div class="btn">删除</div>
  </li>
</ul>
</body>
</html>

CSS:

/*设置ul样式*/
body{font:16px/1.4 "Microsoft Yahei",Arial,Helvetica,sans-serif;}
body,ul,li,div{padding:0;margin:0;}
ul,li{overflow:hidden;list-style:none;}
ul li{
width:120%;
background:#ccc;
position:relative;
margin:1% 0;
position:relative;
-webkit-transition:all 0.2s linear;transition:all 0.2s linear;
}
ul li div:first-of-type{
float:left;
width:80%;
}
ul li .btn{
float:right;
padding:5% 0;
width:15%;
background:#ff0000;
}
/*设置移动效果*/

.moveleft{
transform:translateX(-15%);
-webkit-transform:translateX(-15%);
}

JS:

window.onload=function(){

//侧滑显示删除按钮

var open = null;//open初始化，判断是否是已展开元素
var list = document.getElementsByClassName("list-li");//list获取所有的待展开框
for(var i = 0;i < list.length; i++){
var x,y,X,Y,moveX,moveY;
list[i].addEventListener('touchstart',function(e){
/*获取最初的触摸位置*/
x = e.changedTouches[0].pageX;
y = e.changedTouches[0].pageY;
moveX = true;
moveY = true;
});

list[i].addEventListener('touchmove',function(e){
X = e.changedTouches[0].pageX;
Y = e.changedTouches[0].pageY;

//左右滑动
if(moveX && Math.abs(X - x) - Math.abs(Y -y) > 0){
e.stopPropagation();//阻止冒泡事件
//右滑收起删除按钮
if(X - x > 10){
e.preventDefault();
this.classList.remove("moveleft");
}
//左滑显示删除按钮
if(x - X > 10){
e.preventDefault();
this.classList.add("moveleft");
open = this;//存入展开的li元素
}
moveY = false;//左右滑动时不执行上下滑动时的事件
}

//上下滑动
if(moveY && Math.abs(X - x) - Math.abs(Y - y) < 0){
moveX = false;//上下滑动时不执行左右滑动时的事件
}
});

list[i].addEventListener('click',function(e){
//在已展开的元素中执行操作
if(open){
var obj = e.target;
var objli = e.target.closest(".list-li");

//点击li元素里不是删除按钮的部分，li元素收起
if(obj.className != "btn"){
open.classList.remove("moveleft");
}else if(obj.className == "btn"){//点击删除按钮执行删除
var objp = obj.parentNode;
var objpp = obj.parentNode.parentNode;
objpp.removeChild(objp);
}
}
});

}
}

 

Swipe Delete DEMO

 

退出移动版