滑动删除不能仅靠touchstart/touchmove简单判断，因存在误触、抖动和方向偏差；需记录起始位置与时间，计算水平位移差，过滤抖动（>10px才响应），并在touchend时判定位移是否超阈值（如80px）且为水平滑动。

滑动删除在移动端为什么不能只靠 touchstart/touchmove 简单判断？

因为手指滑动存在误触、抖动和方向偏差，直接监听位移容易触发失败或误删。原生 touch 事件不提供滑动方向判定和阈值控制，必须自己算位移差并过滤掉点击、长按等干扰行为。

关键点是：只看 clientX 变化不够，得结合起始位置、移动距离、时间间隔、是否超过阈值（比如 80px）以及是否中途抬起——否则用户想点按钮，手一歪就删了。

• 用 touchstart 记录 startX 和 startTime
• 在 touchmove 中计算 deltaX = currentX - startX，只响应水平位移绝对值 > 10px 的情况，避免抖动误判
• 在 touchend 里判断：Math.abs(deltaX) > 80 且 deltaX （向左滑），才执行删除逻辑
• 记得调用 event.preventDefault() 防止页面滚动干扰

如何让列表项滑动时露出「删除」按钮且不卡顿？

别用 transform: translateX() 配合 JS 实时更新——频繁重排重绘会导致 iOS Safari 卡顿。应该用 will-change: transform 提前告诉浏览器该元素要动，再配合 transform + transition 做声明式动画。

结构上，每个 <li> 内部需要两层容器：<div class="item-wrapper"> 包住内容，<div class="delete-btn"> 放在右侧、默认隐藏。滑动时只移动 item-wrapper，露出底下的按钮。

立即学习“前端免费学习笔记（深入）”；

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

<li class="swipe-item">
  <div class="item-wrapper">...</div>
  <div class="delete-btn">删除</div>
</li>

• .item-wrapper 设 position: relative，.delete-btn 设 position: absolute; right: 0; top: 0; width: 80px;
• 滑动时只改 .item-wrapper 的 transform: translateX(-80px)，CSS 自动过渡
• 加 transform: translateZ(0) 或 will-change: transform 触发硬件加速
• 别在 touchmove 里反复 setStyle，改用 classList.toggle() 控制预设的 .swiped 类

Vue/React 里怎么安全地绑定滑动状态又不破坏列表渲染？

不要在 v-for / map 循环里给每个 item 绑定独立的 touch 监听器——内存泄漏风险高，且滚动中频繁创建销毁监听器会卡顿。应该用事件委托，在父容器（如 <ul>）上统一监听，再用 event.target.closest('.swipe-item') 找到当前项。

状态管理也别为每个 item 开一个 isSwiped 布尔值。用一个 activeItemId（比如 id 字符串）就够了，配合 key 强制重置动画状态。

• Vue 中用 @touchstart.stop.capture 防止事件冒泡干扰父组件
• React 中注意 ref 指向的是父容器，不是每个 li；用 useRef 缓存 activeId，避免闭包 stale
• 删除后立即清空 activeItemId，否则再次滑动可能残留样式
• 如果用了虚拟滚动（如 react-window），确保滑动区域在可视区内才启用监听

真机测试时 iOS 和 Android 表现不一致怎么办？

iOS Safari 对 touch-action: none 更敏感，不加这句，滑动时可能触发页面回弹或文字选中；Android Chrome 则对 passive: false 更严格，没显式声明容易报 Unable to preventDefault 警告。

最稳妥写法是：在 touchstart 监听器里加 { passive: false }，并在回调开头立刻 event.preventDefault()，同时给滑动容器设 touch-action: pan-x（允许水平拖拽，禁用缩放/双指等）。

• Android 上若滑动无响应，检查是否被 overflow: hidden 或 contain: layout 拦截了事件流
• iOS 上若滑动后松手按钮不回弹，大概率是 transition 没作用在正确元素上，或 transform 被其他 CSS 覆盖
• 用 chrome://inspect 远程调试 Android，Safari 开发者工具连 iPhone 查看 touch 事件是否触发
• 别依赖 pointer 事件——部分低端 Android 机型不支持

滑动删除真正难的不是手势识别，而是边界处理：快速连滑两次、半途取消、删除后立即新增同 id 项、键盘弹出时布局变化……这些场景下，仅靠位移阈值和 class 切换很容易失焦或状态错乱。建议把滑动逻辑抽成可复用 hook / mixin，并强制要求每个 item 有稳定 key 和唯一 id。