web移动端左滑显示操作按钮
时间:2022-07-23
本文章向大家介绍web移动端左滑显示操作按钮,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
示例
2
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
padding: 0;
margin: 0 auto;
}
.container {
padding: 20px;
height: 100vh;
background: #efefef;
}
.item {
position: relative;
height: 50px;
margin-bottom: 20px;
overflow: hidden;
background: #fff;
}
.item .content {
position: absolute;
left: 0;
width: 100%;
height: 100%;
padding-left: 20px;
line-height: 50px;
z-index: 1;
box-sizing: border-box;
background: #fff;
border: 1px solid #ddd;
transition: all .5s ease;
}
.item .button-group {
position: absolute;
right: 0;
z-index: 0;
}
.item .button-group .del-btn {
height: 50px;
width: 60px;
border: 0;
color: #fff;
background: #da3d3d;
}
.item.active .content {
left: -60px;
}
</style>
</head>
<body>
<div class="container">
<!-- 0 默认状态, 1 左滑状态 -->
<div class="item" data-status='0'>
<div class="content">测试内容测试内容</div>
<div class="button-group">
<button class="del-btn">删除</button>
</div>
</div>
<div class="item" data-status='0'>
<div class="content">测试内容测试内容</div>
<div class="button-group">
<button class="del-btn">删除</button>
</div>
</div>
<div class="item" data-status='0'>
<div class="content">测试内容测试内容</div>
<div class="button-group">
<button class="del-btn">删除</button>
</div>
</div>
<div class="item" data-status='0'>
<div class="content">测试内容测试内容</div>
<div class="button-group">
<button class="del-btn">删除</button>
</div>
</div>
</div>
<script>
const items = document.querySelectorAll('.item')
items.forEach(item => {
let touchStart, touchEnd
// 滑动开始, 记录开始位置
item.addEventListener('touchstart', function (e) {
touchStart = e.touches[0].clientX
})
// 滑动结束
item.addEventListener('touchend', function (e) {
let currentEle = e.currentTarget
touchEnd = e.changedTouches[0].clientX
// 向左滑, 显示删除按钮
if (currentEle.dataset.status === '0' && touchEnd - touchStart < -30) {
currentEle.dataset.status = 1
currentEle.classList.add('active')
}
// 向右滑, 隐藏删除按钮
if (currentEle.dataset.status === '1' && touchEnd - touchStart > 30) {
currentEle.dataset.status = 0
currentEle.classList.remove('active')
}
})
})
const btns = document.querySelectorAll('.del-btn')
btns.forEach(btn => {
// 删除按钮点击事件
btn.addEventListener('click', function (e) {
btn.parentElement.parentElement.remove()
})
})
</script>
</body>
</html>
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Django的form,model自定制
- 排序算法与查找算法
- nginx学习(1): openresty安装
- 2020年8月26日更新WINDOWS服务器同时安装多个版本的MYSQL的方法,MQYSQL5和MQYSQL8的共存。
- python 自动化测试(3):数据库连接与使用
- 微信小程序实战开发二:微信小程序 WEUL组件之 画廊组件
- 关于Cookie和Session
- 微信小程序实战开发一:在小程序中使用useExtendedLib方法引入官方UI
- python 自动化测试(4):日志类封装
- 微信小程序实战开发三:小程序之全局配置APP.JSON之底部菜单栏tabBar
- python 自动化测试(5):页面基类封装
- 微信小程序实战开发四:小程序获取用户信息流程及信息存储方式解析
- python 自动化测试(6):jar包调用
- 微信小程序实战开发五:使用自定义组件配置一个通用的图片轮播组件。
- 亿级流量系统如何玩转 JVM