200 lines
5.1 KiB
HTML
200 lines
5.1 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;
|
||
list-style: none;
|
||
}
|
||
|
||
ul {
|
||
overflow: hidden;
|
||
}
|
||
|
||
li {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 50px;
|
||
border-bottom: 1px solid #ebe8e8;
|
||
padding: 0 10px;
|
||
box-sizing: border-box;
|
||
font-size: 14px;
|
||
position: relative;
|
||
|
||
}
|
||
|
||
.action {
|
||
color: #fff;
|
||
font-size: 14px;
|
||
width: 165px;
|
||
display: flex;
|
||
height: 100%;
|
||
position: absolute;
|
||
right: -165px;
|
||
}
|
||
|
||
.action div {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.action .top {
|
||
background: #009bfe;
|
||
}
|
||
|
||
.action .read {
|
||
background: #fe8d3f;
|
||
}
|
||
|
||
.action .delt {
|
||
background: #ff5967;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<ul>
|
||
<li>
|
||
测试1
|
||
<div class="action">
|
||
<div class="top">置顶</div>
|
||
<div class="read">未读</div>
|
||
<div class="delt">删除</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
测试2
|
||
<div class="action">
|
||
<div class="top">置顶</div>
|
||
<div class="read">未读</div>
|
||
<div class="delt">删除</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
测试3
|
||
<div class="action">
|
||
<div class="top">置顶</div>
|
||
<div class="read">未读</div>
|
||
<div class="delt">删除</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</body>
|
||
<script>
|
||
// 0 关闭状态 -165 打开状态
|
||
let startX = 0, leftXArr = [];
|
||
_("ul li").forEach(function (v, i) {
|
||
v.ontouchstart = function (e) {
|
||
|
||
startX = e.touches[0].clientX
|
||
_("ul li").forEach(function (item, j) {
|
||
if (i != j) {
|
||
item.style = `
|
||
transform: translateX(0px);
|
||
`
|
||
}
|
||
})
|
||
}
|
||
|
||
|
||
v.ontouchmove = function (e) {
|
||
|
||
let moveX = e.touches[0].clientX
|
||
// 左滑moveX 小于 startX， 右滑 大于
|
||
// 左滑
|
||
if (determineDirection(moveX, startX)) {
|
||
// console.log("左滑: ", moveX);
|
||
|
||
let currentX = v.style.transform.replace(/[^0-9]/ig, '')
|
||
|
||
if (-currentX != -165) {
|
||
console.log(222);
|
||
v.style = `
|
||
transform: translateX(-${startX - moveX > 165 ? '165' : startX - moveX}px);
|
||
`
|
||
} else {
|
||
leftXArr.push(moveX)
|
||
|
||
console.log("leftXArr: ", leftXArr);
|
||
if (leftXArr[leftXArr.length - 1] > leftXArr[leftXArr.length - 2]) {
|
||
leftXArr = []
|
||
console.log("左边的右滑动");
|
||
let x = -165 + (leftXArr[leftXArr.length - 1] - leftXArr[0]);
|
||
v.style = `
|
||
transform: translateX(${x}px);
|
||
`
|
||
|
||
} else {
|
||
console.log("左边的左滑动");
|
||
}
|
||
|
||
}
|
||
|
||
v.open = true
|
||
} else {
|
||
console.log("右滑");
|
||
if (v.open) {
|
||
let x = -165 + (moveX - startX);
|
||
v.style = `
|
||
transform: translateX(${x > 0 ? 0 : x}px);
|
||
`
|
||
}
|
||
}
|
||
}
|
||
|
||
v.ontouchend = function (e) {
|
||
let endX = e.changedTouches[0].clientX
|
||
if (determineDirection(endX, startX)) {
|
||
if ((startX - endX) < 55) {
|
||
v.style = `
|
||
transform: translateX(0px);
|
||
`;
|
||
v.open = false
|
||
|
||
} else {
|
||
v.style = `
|
||
transform: translateX(-165px);
|
||
`
|
||
}
|
||
} else {
|
||
if ((endX - startX) < 55 && endX != startX) {
|
||
v.style = `
|
||
transform: translateX(-165px);
|
||
`
|
||
} else {
|
||
v.style = `
|
||
transform: translateX(0px);
|
||
`
|
||
v.open = false
|
||
|
||
}
|
||
}
|
||
}
|
||
})
|
||
|
||
// x1 moveX x2 startX true 左滑 false 右滑
|
||
function determineDirection(x1, x2) {
|
||
return x1 < x2 ? true : false
|
||
}
|
||
|
||
function $(className) {
|
||
return document.querySelector(className);
|
||
}
|
||
|
||
function _(className) {
|
||
return document.querySelectorAll(className);
|
||
}
|
||
</script>
|
||
|
||
</html> |