app左滑删除效果

最新推荐文章于 2023-08-14 21:56:04 发布

羽下佳人

最新推荐文章于 2023-08-14 21:56:04 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 移动端 - 微信开发 html css

本文链接：https://blog.youkuaiyun.com/zjl199303/article/details/69500294

js 同时被 3 个专栏收录

67 篇文章

订阅专栏

html

21 篇文章

订阅专栏

css

16 篇文章

订阅专栏

百度云：编程 --> 插件 --> 下载插件

编程 --> 项目 --> 新功能

效果图：

html:

<body>
<header>
<h2>消息列表</h2>
</header>
<section class="list">
<ul class="list-ul">
<li id="li" class="list-li">
<div class="con">
测试手机端左滑1
</div>
<div class="btn">删除</div>
</li>
<li class="list-li">
<div class="con">
测试手机端左滑2
</div>
<div class="btn">删除</div>
</li>
</ul>
</section>

</body>

css:

*{ padding:0; margin:0; list-style: none;}
header{ background: #f7483b; border-bottom: 1px solid #ccc}
header h2{ text-align: center; line-height: 54px; font-size: 16px; color: #fff}
.list-ul{ overflow: hidden}
.list-li{ line-height: 60px; border-bottom: 1px solid #fcfcfc; position:relative; color: #666;text-indent: 20px;
background: #f2f2f2;
-webkit-transform: translateX(0px);
}
.btn{ position: absolute; top: 0; right: -80px; text-align: center; background: #ffcb20; color: #fff; width: 80px}

js:

<script>
/*
* 作者：sokie
* qq：2048226123
* 描述：第一次上传资源，有点粗糙，以后有时间会优化的
*
*/
window.addEventListener('load',function(){
var initX;
var moveX;
var X = 0;
var objX = 0;
window.addEventListener('touchstart',function(event){
event.preventDefault();
var obj = event.target.parentNode;
if(obj.className == "list-li"){

initX = event.targetTouches[0].pageX;

objX =(obj.style.WebkitTransform.replace(/translateX\(/g,"").replace(/px\)/g,""))*1;

// 取到transform值，同时去掉translateX ，px, 最后结果就是：0 ,-80

}
if( objX == 0){
window.addEventListener('touchmove',function(event) {
event.preventDefault();
var obj = event.target.parentNode;
if (obj.className == "list-li") {
moveX = event.targetTouches[0].pageX;
X = moveX - initX;
if (X > 0) {
obj.style.WebkitTransform = "translateX(" + 0 + "px)";
}
else if (X < 0) {
var l = Math.abs(X);
obj.style.WebkitTransform = "translateX(" + -l + "px)";
if(l>80){
l=80;
obj.style.WebkitTransform = "translateX(" + -l + "px)";
}
}
}
});
}
else if(objX<0){
window.addEventListener('touchmove',function(event) {
event.preventDefault();
var obj = event.target.parentNode;
if (obj.className == "list-li") {
moveX = event.targetTouches[0].pageX;
X = moveX - initX;
if (X > 0) {
var r = -80 + Math.abs(X);
obj.style.WebkitTransform = "translateX(" + r + "px)";
if(r>0){
r=0;
obj.style.WebkitTransform = "translateX(" + r + "px)";
}
}
else { //向左滑动
obj.style.WebkitTransform = "translateX(" + -80 + "px)";
}
}
});

}

})
window.addEventListener('touchend',function(event){
event.preventDefault();
var obj = event.target.parentNode;
if(obj.className == "list-li"){
objX =(obj.style.WebkitTransform.replace(/translateX\(/g,"").replace(/px\)/g,""))*1;
if(objX>-40){
obj.style.WebkitTransform = "translateX(" + 0 + "px)";
}else{
obj.style.WebkitTransform = "translateX(" + -80 + "px)";
}
}

})

})

</script>