滑动删除不能仅靠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"> 包住内容，<code><div class="delete-btn"> 放在右侧、默认隐藏。滑动时只移动 <code>item-wrapper，露出底下的按钮。
-
.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></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。
