182 lines
5.0 KiB
HTML
182 lines
5.0 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;
|
||
transition-duration: 0.1s;
|
||
transition-duration: 0.1s;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.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>
|
||
function $(name) {
|
||
return document.querySelector(name);
|
||
}
|
||
function _(name) {
|
||
return document.querySelectorAll(name);
|
||
}
|
||
|
||
_("ul li").forEach(function (v, i) {
|
||
let startx, leftXArr = [],entt;
|
||
//手指按下事件
|
||
v.ontouchstart = function (e) {
|
||
startx = e.touches[0].clientX;
|
||
console.log("屏幕按下坐标：" + startx)
|
||
|
||
_("ul li").forEach(function (item, j) {
|
||
if (i != j) {
|
||
item.style = `
|
||
transform: translateX(0px);
|
||
`
|
||
}
|
||
})
|
||
}
|
||
//手指移动事件
|
||
let pp = 0;
|
||
let eq = 0;
|
||
v.ontouchmove = function (e) {
|
||
let hmovex = e.touches[0].clientX;
|
||
leftXArr.push(hmovex);
|
||
// console.log("屏幕移动坐标：" + leftXArr);
|
||
let df = leftXArr[0] - leftXArr[leftXArr.length - 1];
|
||
// let df1=leftXArr[leftXArr.length-1]-leftXArr[leftXArr.length-2];
|
||
console.log("移动的px：" + df)
|
||
if (df >= 0 && df <= 165) {
|
||
v.style = `
|
||
transform: translateX(-${df}px);
|
||
`
|
||
} else if (df < 0) {
|
||
v.style = `
|
||
transform: translateX(0px);
|
||
`
|
||
leftXArr = []
|
||
}
|
||
else {
|
||
// pp+=1
|
||
// let dfx=(df-(df-165+pp));
|
||
// console.log("pp"+pp)
|
||
// // leftXArr = []
|
||
// if(leftXArr[leftXArr.length-1]>leftXArr[leftXArr.length-2]){
|
||
// console.log("值"+dfx)
|
||
// console.log("进来了")
|
||
// v.style = `
|
||
// transform: translateX(-${dfx}px);
|
||
// `
|
||
// }else{
|
||
v.style = `
|
||
transform: translateX(-165px);
|
||
`
|
||
// }
|
||
}
|
||
// console.log(leftXArr.length)
|
||
|
||
}
|
||
//手指拿起事件
|
||
v.ontouchend = function (e) {
|
||
entt= e.changedTouches[0].clientX
|
||
|
||
if (leftXArr[0] - leftXArr[leftXArr.length - 1] > 55 && leftXArr[leftXArr.length - 1] - leftXArr[leftXArr.length - 2] < 0&&startx!=entt) {
|
||
v.style = `
|
||
transform: translateX(-165px);
|
||
`
|
||
} else if (leftXArr[0] - leftXArr[leftXArr.length - 1] > 110) {
|
||
v.style = `
|
||
transform: translateX(-165px);
|
||
`
|
||
}
|
||
else {
|
||
v.style = `
|
||
transform: translateX(-0px);
|
||
`
|
||
leftXArr = []//数组清空
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
|
||
</html> |