245 lines
7.7 KiB
HTML
245 lines
7.7 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>Document</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>
|
||
<!-- 1 获取事件； 2 绑定事件； 3 事件处理函数。
|
||
|
||
思路：侧滑按钮，默认固定在屏幕右侧固定-180px，首先，要监听屏幕，获取x值，通过手指触摸屏幕的滑动距离来判断左滑、右滑，
|
||
|
||
该事件：标题的内容： 首先，通过循环words得到里面的对象和下标，设置相关属性后，把它放到html上；
|
||
内容的内容： 同上 激活态还是通过下标实现同步-->
|
||
<script>
|
||
// 事件的传递有两种方式：冒泡与捕获。
|
||
// 在冒泡中，内部元素的事件会先被触发，然后再触发外部元素； 【从里到外】
|
||
// 在捕获中，外部元素的事件会被先触发，然后才会触发内部元素的事件。【从外到里】
|
||
|
||
// 一、addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。
|
||
|
||
// 它们都接受3个参数：如 addEventListener("事件名" , "事件处理函数" , "布尔值"); (注：事件名不含"on",如“click”)
|
||
// 现在的版本可以省略第三个参数，默认值为false.
|
||
|
||
// 总结：
|
||
// 1：相同事件绑定和解除，需要使用共用函数；绑定和解除事件时 事件没有"on" 即onclick写成click
|
||
// 2：共用函数不能带参数；
|
||
|
||
|
||
// 二.addEventListener()与removeEventListener()的第三个参数详解
|
||
|
||
// 布尔值参数是true，表示在捕获阶段调用事件处理程序；就是最不具体的节点先接收事件，最具体的节点最后接收事件
|
||
|
||
// 如果是false，在冒泡阶段调用事件处理程序;则是先寻找指定的位置，由最具体的元素接收，然后逐级向上传播至最不具体的
|
||
// 元素的节点（文档）
|
||
|
||
// 总结：
|
||
// 1：true的触发顺序总是在false前面
|
||
// 2：如果多个均为true，则外层触发先于内层
|
||
// 3：如果多个均为false，则内层触发先于外层
|
||
|
||
// 触点坐标选取
|
||
|
||
// touchstart和touchmove使用: e.targetTouches[0].pageX 或 (jquery)e.originalEvent.targetTouches[0].pageX
|
||
|
||
// touchend使用: e.changedTouches[0].pageX 或 (jquery)e.originalEvent.changedTouches[0].pageX
|
||
|
||
|
||
//返回值
|
||
function $(className) {
|
||
return document.querySelector(className)
|
||
}
|
||
// 返回数组
|
||
function _(className) {
|
||
return document.querySelectorAll(className)
|
||
}
|
||
var mainli = _('.main ul li')
|
||
|
||
|
||
var startX = 0
|
||
mainli.forEach(function (value, index) {
|
||
|
||
value.addEventListener('touchstart', function (event) {
|
||
|
||
// console.log('event.targetTouches[0]', event.targetTouches[0].screenX);
|
||
|
||
startX = event.targetTouches[0].screenX;
|
||
|
||
mainli.forEach(function (V, i) {
|
||
if (i != index) {
|
||
V.style.transform = `translateX(0px)`;
|
||
}
|
||
})
|
||
})
|
||
|
||
|
||
|
||
value.addEventListener('touchmove', function (event) {
|
||
|
||
var moveX = event.targetTouches[0].screenX;
|
||
|
||
// 在没有任何操作的情况下，起始状态都是关上的即false，也就是open取反
|
||
// 先判断右滑还是左滑，再判断是打开状态还是关闭状态,(定义value.open,true是打开，false是关上)。
|
||
// 然后打开的情况下，x值的计算以及再关上的状态下x轴的计算。
|
||
|
||
|
||
// 左滑
|
||
if(moveX < startX){
|
||
// 状态默认关闭
|
||
if (!value.open){
|
||
var x = moveX - startX
|
||
|
||
// 左滑打开成功
|
||
if(x < -180){
|
||
value.style.transform =`translateX(-180px)`
|
||
}else{
|
||
// 左滑打开失败
|
||
value.style.transform =`translateX(${x}px)`
|
||
}
|
||
value.open = true
|
||
}
|
||
// 右滑(movex > startx)
|
||
}else{
|
||
// 状态默认打开
|
||
if (value.open){
|
||
var newX = (moveX - startX) + (-180)
|
||
// 右滑关闭失败
|
||
if (newX <= 0){
|
||
value.style.transform =`translateX(${newX})px`
|
||
}else{
|
||
// 右滑关闭成功
|
||
value.style.transform =`translateX(0px)`
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
})
|
||
|
||
|
||
|
||
value.addEventListener('touchend', function (event) {
|
||
console.log('event.targetTouches', event);
|
||
var endX = event.changedTouches[0].screenX;
|
||
// 阈值
|
||
var distenceX = endX - startX
|
||
|
||
// 左滑
|
||
if (startX > endX) {
|
||
|
||
// 打开成功
|
||
if (distenceX < -60) {
|
||
value.style.transform = `translateX(-180px)`;
|
||
// 打开失败
|
||
} else {
|
||
value.style.transform = `translateX(0px)`;
|
||
value.open = false
|
||
}
|
||
|
||
|
||
// 右滑
|
||
} else {
|
||
// 打开成功
|
||
if (distenceX > 60) {
|
||
value.style.transform = `translateX(0px)`;
|
||
// 打开失败
|
||
} else {
|
||
value.style.transform = `translateX(-180px)`;
|
||
value.open = false
|
||
}
|
||
}
|
||
})
|
||
})
|
||
</script>
|
||
|
||
</html> |