当前位置：首页 > news >正文

js侧滑显示删除按钮

news 2026/2/7 13:33:28

效果图：
在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>js侧滑显示删除按钮</title><style>* {margin: 0;padding: 0;}html,body {height: 100%;font-size: .14rem;background: #e9e9e9;}li {list-style: none;}i {font-style: normal;}a {color: #393939;text-decoration: none;}.list_box{overflow: auto;height: 92vh;}.list {overflow: hidden;margin-top: .2rem;margin: .3rem;}.list .list_img {width: 1.8rem;height: 1.8rem;float: left;background: #000;}.list li {overflow: hidden;width: 128%;height: 1.8rem;border-bottom: 1px solid #eee;background: #fff;/* padding-left: 0.2rem; */}.list li a {display: block;height: 1.4rem;/* line-height: 1.4rem; */-webkit-transition: all 0.3s linear;transition: all 0.3s linear;}.list li i {float: right;width: 1.8rem;height: 1.9rem;line-height: 1.9rem;background: #E2421B;color: #fff;text-indent: 0.38rem;}.swipeleft {transform: translateX(-15%);-webkit-transform: translateX(-15%);}.top_box {height: 0.9rem;display: flex;justify-content: space-around;align-items: center;background: #fff;}.top_box span {display: inline-block;height: 0.8rem;line-height: 0.8rem;padding: 0 2px;font-family: Microsoft Yahei, sans-serif;font-size: 14px;}.text_size {float: left;width: 55%;font-size: 14px;padding: 10px 5px 0 5px;}.text_size .span {width: 100%;display: inline-block;font-weight: bold;overflow: hidden;text-overflow: ellipsis;/* 将对象作为弹性伸缩盒子模型显示 */display: -webkit-box;/* 限制在一个块元素显示的文本的行数 *//* -webkit-line-clamp 其实是一个不规范属性，使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；*/-webkit-line-clamp: 2;/* 设置或检索伸缩盒对象的子元素的排列方式 */-webkit-box-orient: vertical;}.text_size p {padding-top: 10px;}</style><script>//计算根节点HTML的字体大小function resizeRoot() {var deviceWidth = document.documentElement.clientWidth,num = 750,num1 = num / 100;if (deviceWidth > num) {deviceWidth = num;}document.documentElement.style.fontSize = deviceWidth / num1 + "px";}//根节点HTML的字体大小初始化resizeRoot();window.onresize = function () {resizeRoot();};</script>
</head><body><div class="top_box"><span class="top_box_l">商品收藏</span><span class="top_box_r" style="border-bottom: 2px solid red;">积分商品收藏</span></div><div class="list_box"><div class="list"><ul><li><a href="#"><div class="list_img"><img src="https://wanfeng-images.oss-cn-hangzhou.aliyuncs.com/fileupload/20220427/165104494531186.jpg"alt="" style="width:100%;height:100%;"></div><div class="text_size"><span class="span">晚峰书屋清明上河图书签中国风创意古风纸质纪念品礼品制作小礼物</span><p><span style="text-decoration: line-through;color: #a5a5a5;font-size: 12px;">1.00</span> <span style="display: inline-block;color: #333;font-size: 14px;padding-left: 5px;font-weight: bold;">580积分+￥48.00</span></p></div><i>删除</i></a></li></ul><p style="text-align: center;padding:15px 0;">没有更多内容了</p></div></div><script>//侧滑显示删除按钮var expansion = null; //是否存在展开的listvar container = document.querySelectorAll('.list li a');for (var i = 0; i < container.length; i++) {var x, y, X, Y, swipeX, swipeY;container[i].addEventListener('touchstart', function (event) {x = event.changedTouches[0].pageX;y = event.changedTouches[0].pageY;swipeX = true;swipeY = true;if (expansion) {   //判断是否展开，如果展开则收起expansion.className = "";}});container[i].addEventListener('touchmove', function (event) {X = event.changedTouches[0].pageX;Y = event.changedTouches[0].pageY;// 左右滑动if (swipeX && Math.abs(X - x) - Math.abs(Y - y) > 0) {// 阻止事件冒泡event.stopPropagation();if (X - x > 10) {   //右滑event.preventDefault();this.className = "";    //右滑收起}if (x - X > 10) {   //左滑event.preventDefault();this.className = "swipeleft";   //左滑展开expansion = this;}swipeY = false;}// 上下滑动if (swipeY && Math.abs(X - x) - Math.abs(Y - y) < 0) {swipeX = false;}});}</script>
</body></html>

js侧滑显示删除按钮

效果图： <!DOCTYPE html> <html><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalableno"><title>js侧滑显示删…...

编程日记 2023/2/28 21:58:27

Python - DIY - 使用dump取json某些键值对合成新的json文件

Python - Json处理前言：应用场景：基本工具：文件操作：打开文件：写文件：读文件：关闭文件并刷新缓冲区：Json字符串和字典转换：json.loads()：json.dumps():Json文…...

编程日记 2023/4/2 2:20:09

深度剖析指针（中）——“C”

各位CSDN的uu们你们好呀，今天小雅兰的内容仍旧是深度剖析指针噢，在上一篇博客中，我已经写过了字符指针、数组指针、指针数组、数组传参和指针传参的知识点，那么这篇博客小雅兰会讲解一下函数指针、函数指针数组、指向函数指针数组…...

编程日记 2023/3/21 11:07:13

论文阅读 | Video Frame Synthesis using Deep Voxel Flow

前言： 视频帧生成方法（视频插帧/视频预测）ICCV2017 oral Video Frame Synthesis using Deep Voxel Flow 引言当下进行视频帧合成的方法分为两种，第一种是光流法，光流准确的话效果好，光流不准确的话则生…...

编程日记 2023/3/21 22:08:04

我所理解的生活

诞生人真正意义上的诞生应该是社会学意义上的，是一种意识到自我、自我与社会关系的存在，只有这种诞生，才是完整人生的基点，大千世界中，唯有人类以生活作为自己的存在方式，除人类以外，从无机界…...

编程日记 2023/3/31 23:59:46

debian 部署nginx https

我是flask 处理请求单进程， 差点意思 ， 考虑先flask 在往下走一：安装nginx 因为我是debian 系统，所以我的建议是直接 sudo apt-get install nginx 你也可以选择在官网下载， 但是我搭建ssl 的时候安装openssl非常的麻…...

编程日记 2023/4/1 15:15:42

SQL 层功能改进 - lookupJoin 的优化

一、传统 join 算法lookupJoin 是 join 查询的一种，传统 join 算法为：1. 遍历 A 表，读取一条数据 r2. 遍历 B 表，对于每条数据，与 r 进行 join 操作3. 重复 1、2 操作，直到 A 表遍历完所有数据二、lookupJo…...

编程日记 2023/4/2 2:20:07

动态规划：鸣人的影分身

在火影忍者的世界里，令敌人捉摸不透是非常关键的。我们的主角漩涡鸣人所拥有的一个招数——多重影分身之术——就是一个很好的例子。影分身是由鸣人身体的查克拉能量制造的，使用的查克拉越多，制造出的影分身越强。针对不同的作战情况&#xf…...

编程日记 2023/2/28 21:49:19

如何为三星active2手表安装自己DIY的表盘

一、步骤介绍 Step 1. 下载Galaxy watch studio； Step 2. 按照up主“隔壁张师傅2022”的文章进行安装。二、安装流程简单说明： ① 电脑端官网下载并安装Galaxy Watch Designer或者Galaxy Watch Studio程序。 ② 关闭手表蓝牙连接，并打开调…...

编程日记 2023/4/1 0:00:58

Android 项目必备（四十二）--＞Android 多窗口模式

简介自由窗口模式: 该模式类似于常见的桌面操作系统， 应用界面的窗口可以自由的拖动和修改大小。分屏模式该模式可以在手机上使用， 该模式将屏幕一分为二， 同时显示两个应用界面。画中画模式: 该模式主要用于TV， 在该模式下…...

编程日记 2023/2/28 21:46:46

OpenHarmony的未来和如何做好一个开源社区

今天要分享的文章，可能更多只是作为一种观点。主要包括2个内容。OpenHarmony的未来和如何做好一个开源社区，好的，接下来开始今天的内容。你对OpenHarmony的未来如何看待？ OpenHarmony的未来看起来非常光明，因为它具…...

编程日记 2023/2/28 21:45:35

二叉搜索树实现

树的导览树由节点（nodes）和边（edges）构成，如下图所示。整棵树有一个最上端节点，称为根节点（root）。每个节点可以拥有具有方向的边（directed edges）&#xf…...

编程日记 2023/4/1 0:02:13

解决Spring Data Jpa 实体类自动创建数据库表失败问题

先说一下我遇到的这个问题，首先我是通过maven创建了一个spring boot的工程，引入了Spring data jpa，结果实体类创建好之后，运行工程却没有在数据库中自动创建数据表。找了半天发现是一个配置的问题! hibernate.ddl-auto节点的配…...

编程日记 2023/3/22 13:33:57

Elasticsearch：创建一个简单的 “你的意思是？” 推荐搜索

“你的意思是” 是搜索引擎中一个非常重要的功能，因为它们通过显示建议的术语来帮助用户，以便他可以进行更准确的搜索。比如，在百度中，我们进行搜索时，它通常会显示一些更为常用推荐的搜索选项来供我们选择&#xff1a…...

编程日记 2023/2/28 21:42:05

urllib之ProxyHandler代理以及CookieJar的cookie内存传递和本地保存与读取的使用详解

处理更高级操作时(Cookies处理，代理设置)，需要一个强大的工具Handler，可以理解成各种处理器，有处理登录认证的、有处理Cookies的、有处理代理设置的。利用这些几乎可以做到HTTP请求中所有事情。当中urllib.request模块里的 BaseHa…...

编程日记 2023/3/21 11:07:46

华为造车锚定智选模式，起点赢家赛力斯驶入新能源主航道

文|螳螂观察作者| 易不二近日，赛力斯与华为的一纸联合业务深化合作协议，给了频频猜测赛力斯与华为之间关系的舆论一个明确的定调：智选模式已成为华为与赛力斯共同推动中国新能源汽车产业高质量发展的坚定选择。自华为智能汽车业务开启零…...

编程日记 2023/4/1 0:05:12

[oeasy]python0096_游戏娱乐行业_雅达利_米洛华_四人赛马_影视结合游戏

游戏娱乐行业回忆上次内容游戏机行业从无到有雅达利公司一枝独秀并且带领行业发展起来雅达利公司优秀员工乔布斯在朋友帮助下完成了《pong》 Jobs 黑了 Woz 一部分收入然后拿着钱去印度禅修了游戏行业会如何继续呢？?🤔 灵修乔布…...

编程日记 2023/4/3 2:53:17

使用python测试框架完成自动化测试并生成报告-实例练习

练习一: 使用unittest 完成自动化测试并使用HttpTestRunner生成报告 1、写个简单的计算器功能，大小写转换功能，随机生成字符串功能 2、编写测试用例，不同的数据（你能想到的所有测试用例），并进行断言。除0的…...

编程日记 2023/2/28 21:37:11

JavaWeb 实战 01 - 计算机是如何工作的

计算机是如何工作的1. 计算机发展史2. 计算机的基本组成2.1 冯诺依曼体系结构2.2 CPU的内部结构2.3 指令2.3.1 指令表2.3.1.1 寄存器2.3.2 CPU的工作流程2.4 小结3. 操作系统3.1 核心功能3.2 操作系统的软硬件结构3.3 什么是进程 / 任务3.4 进程管理3.4.1 管理3.4.2 PCB : 进程…...

编程日记 2023/4/1 0:07:36

线性代数学习-1

线性代数学习-1行图像和列图像行图像列图像总结本文转载于https://herosunly.blog.csdn.net/article/details/88698381 该文章本人认为十分有用，便自己敲一遍笔记加固印象原文链接原文这个笔记感觉比我老师讲的更加透彻，清晰。很好的展示了线性代数的原…...

编程日记 2023/2/28 21:34:37

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制，因此这个了16进制的数据既可以翻译成为这个机器码，也可以翻译成为这个国标码，所以这个时候很容易会出现这个歧义的情况； 因此，我们的这个国…...

编程新知 2026/2/5 9:20:20

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 （1）连接查询（JOIN） 内连接（INNER JOIN）：返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/10/24 14:20:29

Appium+python自动化（十六）- ADB命令

简介 Android 调试桥(adb)是多种用途的工具，该工具可以帮助你你管理设备或模拟器的状态。 adb ( Android Debug Bridge)是一个通用命令行工具，其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利，如安装和调试…...

编程新知 2026/1/21 18:20:51

FFmpeg 低延迟同屏方案

引言在实时互动需求激增的当下，无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作，还是游戏直播的画面实时传输，低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架，凭借其灵活的编解码、数据…...

编程新知 2025/11/4 6:26:59

聊聊 Pulsar：Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台，以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中，Producer（生产者） 是连接客户端应用与消息队列的第一步。生产者…...

编程新知 2026/2/5 21:34:41

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文？ 多租户隔离：自动为接入设备追加租户前缀，后端按 ClientID 拆分队列。零代码鉴权：将入站用户名替换为 OAuth Access-Token，后端 Broker 统一校验。灰度发布：根据 IP/地理位写…...

编程新知 2025/8/1 10:20:23

相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）

【关注我，后续持续新增专题博文，谢谢！！！】上一篇我们讲了：有对最普通的场景进行各个日志注释讲解，但相机场景太多，日志差异也巨大。后面将展示各种场景下的日志。通过notepad++打开场景下的日志，通过下列分类关键字搜索，即可清晰的分析不同场景的相机运行流程差异…...

编程新知 2025/11/20 7:13:43

智能仓储的未来：自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”，物流的终极形态正在诞生想象这样的场景： 凌晨3点，某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径；AI视觉系统在0.1秒内扫描包裹信息；数字孪生平台正模拟次日峰值流量压力…...

编程新知 2026/2/1 2:49:30

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

编程新知 2026/1/24 14:16:56

HubSpot推出与ChatGPT的深度集成引发兴奋与担忧

上周三，HubSpot宣布已构建与ChatGPT的深度集成，这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋，但同时也存在一些关于数据安全的担忧。许多网络声音声称，这对SaaS应用程序和人工智能而言是一场范式转变。但向任何技…...

编程新知 2026/2/6 4:24:06

相关文章：