146 lines
4.0 KiB
HTML
146 lines
4.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>
|
|
<link rel="stylesheet" href="./css/clear.css">
|
|
<link rel="stylesheet" href="./css/cell.css">
|
|
</head>
|
|
<body>
|
|
<div class="main">
|
|
<ul>
|
|
<li>
|
|
<div class="left">
|
|
测试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="left">
|
|
测试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="left">
|
|
测试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>
|
|
<script>
|
|
|
|
|
|
var Li = _(".main ul li");
|
|
|
|
Li.forEach((v, i) => {
|
|
|
|
// 所有li标签未打开
|
|
v.isOpen = false;
|
|
|
|
// 手指按下
|
|
v.ontouchstart = (e) => {
|
|
console.log('ontouchstart',e);
|
|
// 保存你按下的坐标X点
|
|
var { pageX } = e.touches[0];
|
|
v.startX = pageX
|
|
|
|
Li.forEach((item,index) => {
|
|
if (index != i) {
|
|
item.style = `
|
|
transform: translateX(0px);
|
|
`
|
|
}
|
|
})
|
|
}
|
|
|
|
// 手指按下并移动
|
|
v.ontouchmove = (e) => {
|
|
console.log('ontouchmove',e);
|
|
|
|
var {pageX} = e.touches[0];
|
|
// 把滑动距离 toFixed 进行四舍五入，但是 toFixed 返回的是 string
|
|
// Number 进行 string 转 number
|
|
var translateX = Number((pageX - v.startX).toFixed())
|
|
// 左滑 打开
|
|
if (pageX < v.startX) {
|
|
v.style = `
|
|
transform: translateX(${translateX >= -180 ? translateX : -180}px);
|
|
`
|
|
v.isOpen = true
|
|
|
|
// 右滑 关闭
|
|
} else if (pageX > v.startX) {
|
|
var newX = -180 + translateX
|
|
if (v.isOpen) {
|
|
v.style = `
|
|
transform: translateX(${newX <= 0 ? newX : 0}px);
|
|
`
|
|
}
|
|
}
|
|
}
|
|
|
|
// 手指离开屏幕
|
|
v.ontouchend = (e) => {
|
|
console.log('ontouchend',e);
|
|
|
|
var endX = e.changedTouches[0].pageX;
|
|
// 左滑 打开
|
|
if (endX < v.startX) {
|
|
var ss = v.startX - endX
|
|
if (ss < 60) {
|
|
v.style = `
|
|
transform: translateX(0px);
|
|
`
|
|
v.isOpen = false
|
|
} else {
|
|
v.style = `
|
|
transform: translateX(-180px);
|
|
`
|
|
}
|
|
// 右滑 关闭
|
|
} else if (endX > v.startX) {
|
|
var ss = endX - v.startX
|
|
if (ss < 60) {
|
|
v.style = `
|
|
transform: translateX(-180px);
|
|
`
|
|
} else {
|
|
v.style = `
|
|
transform: translateX(0px);
|
|
`
|
|
v.isOpen = false
|
|
}
|
|
console.log("右滑 打开")
|
|
}
|
|
}
|
|
})
|
|
|
|
// 获取单个标签
|
|
function $(className) {
|
|
return document.querySelector(className)
|
|
}
|
|
|
|
// 获取多个标签
|
|
function _(className) {
|
|
return document.querySelectorAll(className)
|
|
}
|
|
</script>
|
|
</html>
|