移动端左滑出现删除按钮练习_angualr8 左滑删除-CSDN博客

本文链接：https://blog.csdn.net/qq_41648452/article/details/79107613

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<title>Document</title>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.contents{
position: relative;
height: 4rem;
border-bottom: .01rem solid #ccc;
margin-bottom: .2rem;
overflow: hidden;
}
.w115{
width: 130%;

}
.package{
height: 4rem;
-webkit-transition:all 0.3s linear;
transition:all 0.3s linear;
}
.lefti{
width: 15%;
position: absolute;
top: 0;
left: 0;
}
.leftimg{
display: block;
font-style: normal;
margin: 1.3rem auto;
height: 1.7rem;
width: 1.7rem;
border: .01rem solid #435057;
background: #99beee;
border-radius: 50%;
line-height: 1.7rem;
font-size: .13rem;
color: #7a95a3;
text-align: center;
}
.text{
position: absolute;
top: 0;
left: 15%;
width: 74%;
height: 4rem;
color: #7a95a3;
font-family: "幼圆";
font-size: .22rem;
line-height: 4rem;
}
.delete{
position: absolute;
top: 0;
right: -15%;
width: 15%;
font-size: .22rem;
text-align: center;
line-height: 4rem;
color:#fff;
height: 4rem;
background: red;
-webkit-transition:all 0.3s linear;
transition:all 0.3s linear;
}
.swipeleft{
-webkit-transition:all 0.3s linear;
transition:all 0.3s linear;
transform:translateX(-15%);
-webkit-transform:translateX(-15%);
}
.swiperight{
-webkit-transition:all 0.3s linear;
transition:all 0.3s linear;
transform:translateX(0%);
-webkit-transform:translateX(0%);
}
</style>
</head>
<body>
<div class="contents ">
<div class="package w115">
<div class="lefti"><i class="leftimg">左滑</i></div>
<div class="text">左滑显示删除按钮左滑显示删除按钮</div>
<div class="delete">删除</div>
</div>
</div>
<div class="contents ">
<div class="package w115">
<div class="lefti"><i class="leftimg">左滑</i></div>
<div class="text">左滑显示删除按钮左滑显示删除按钮</div>
<div class="delete">删除</div>
</div>
</div>
<div class="contents ">
<div class="package w115">
<div class="lefti"><i class="leftimg">左滑</i></div>
<div class="text">左滑显示删除按钮左滑显示删除按钮</div>
<div class="delete">删除</div>
</div>
</div>
<script>
var expansion = null; //是否存在展开的contents
var container = document.querySelectorAll('.contents .package');//找到所有的左滑盒子
for (var index = 0; index < container.length; index++) {
var x, y, X, Y, swipeX, swipeY;
//监听左滑盒子的触摸事件
container[index].addEventListener('touchstart', function (event) {
//获取触摸点的坐标targetTouches[0].pageX,Y
x = event.changedTouches[0].pageX;
y = event.changedTouches[0].pageY;
swipeX = true;
swipeY = true;
if (expansion) {
//判断是否展开，如果展开则收起
expansion.className = "swiperight";
}
});
//监听左滑盒子的屏幕上滑动事件 touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。
container[index].addEventListener('touchmove', function (event) {
X = event.changedTouches[0].pageX;
Y = event.changedTouches[0].pageY;
//console.log(X,Y);
//判断左右滑动
if (swipeX && Math.abs(X - x) - Math.abs(Y - y) > 0) {
// 阻止事件冒泡
event.stopPropagation();
if (X - x > 10){ //右滑
event.preventDefault(); // 取消事件的默认动作
this.className = "swiperight";
}
if (x - X > 10) { //左滑
event.preventDefault();
this.className = "swipeleft"; //左滑展开
expansion = this;
}
swipeY = false;
}
// 上下滑动
if (swipeY && Math.abs(X - x) - Math.abs(Y - y) < 0) {
swipeX = false;
}
})
}
</script>
</body>
</html>