180 lines
4.8 KiB
HTML
180 lines
4.8 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>侧滑</title>
|
|
<style>
|
|
body,
|
|
ul,
|
|
li {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.main {}
|
|
|
|
.main ul {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.main ul li {
|
|
display: flex;
|
|
height: 45px;
|
|
align-items: center;
|
|
position: relative;
|
|
padding: 0 15px;
|
|
border-bottom: 1px solid #f4f0f0;
|
|
transition-duration: 0.3s;
|
|
}
|
|
|
|
.main .item {
|
|
width: 100%;
|
|
}
|
|
|
|
.main .action {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
position: absolute;
|
|
right: -180px;
|
|
}
|
|
|
|
.main .action .item {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 14px;
|
|
color: #fff;
|
|
}
|
|
|
|
.action .top {
|
|
background: #c8c7cd;
|
|
}
|
|
|
|
.action .read {
|
|
background: #ff9c00;
|
|
}
|
|
|
|
.action .delete {
|
|
background: #ff3a31;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="main">
|
|
<ul>
|
|
<li>
|
|
<div class="item">新闻1</div>
|
|
<div class="action">
|
|
<div class="item top">置顶</div>
|
|
<div class="item read">未读</div>
|
|
<div class="item delete">删除</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="item">新闻2</div>
|
|
<div class="action">
|
|
<div class="item top">置顶</div>
|
|
<div class="item read">未读</div>
|
|
<div class="item delete">删除</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="item">新闻3</div>
|
|
<div class="action">
|
|
<div class="item top">置顶</div>
|
|
<div class="item read">未读</div>
|
|
<div class="item delete">删除</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</body>9
|
|
|
|
<script>
|
|
var startX = 0;
|
|
|
|
_(".main li").forEach((v, i) => {
|
|
// v.open = false
|
|
|
|
v.addEventListener('touchstart', (e) => {
|
|
|
|
startX = e.targetTouches[0].screenX;
|
|
|
|
_(".main li").forEach((j, index) => {
|
|
if (index != i) {
|
|
j.style.transform = `translateX(0px)`;
|
|
}
|
|
})
|
|
console.log("startX: ", startX);
|
|
})
|
|
|
|
v.addEventListener('touchmove', (e) => {
|
|
var moveX = e.targetTouches[0].screenX;
|
|
console.log('moveX',moveX);
|
|
// 左滑
|
|
if (startX > moveX) {
|
|
if (!v.open) {
|
|
var x = moveX - startX
|
|
console.log("左滑：",);
|
|
v.style.transform = `translateX(${x < -180 ? -180 : x}px)`;
|
|
v.open = true
|
|
}
|
|
|
|
} else {
|
|
if (v.open) {
|
|
var newX = -180 + (moveX - startX)
|
|
v.style.transform = `translateX(${newX <= 0 ? newX : 0}px)`;
|
|
console.log("右滑");
|
|
}
|
|
}
|
|
})
|
|
|
|
v.addEventListener('touchend', (e) => {
|
|
var endX = e.changedTouches[0].screenX;
|
|
var ox = endX - startX;
|
|
console.log('endX',endX,);
|
|
// 左滑
|
|
if (startX > endX) {
|
|
|
|
if (ox > -60) {
|
|
v.style.transform = `translateX(0px)`;
|
|
v.open = false
|
|
|
|
} else {
|
|
v.style.transform = `translateX(-180px)`;
|
|
}
|
|
|
|
// 右滑
|
|
} else {
|
|
console.log("ox: ", ox);
|
|
if (ox > 60) {
|
|
v.style.transform = `translateX(0px)`;
|
|
v.open = false
|
|
|
|
} else {
|
|
v.style.transform = `translateX(-180px)`;
|
|
}
|
|
}
|
|
})
|
|
})
|
|
|
|
function $(className) {
|
|
return document.querySelector(className)
|
|
}
|
|
|
|
function _(className) {
|
|
return document.querySelectorAll(className)
|
|
}
|
|
</script>
|
|
|
|
</html>
|