左滑删除需用 touchstart、touchmove、touchend 三阶段手动计算水平位移：touchstart 记录 startx，touchmove 实时算 deltax = currentx - startx 并限定 deltax
移动端 touch 事件如何监听左滑动作
左滑删除本质是识别用户手指在列表项上的水平位移，不是靠 CSS 动画或点击触发。必须用
touchstart、touchmove、touchend三阶段手动计算偏移量，不能依赖click或swipe（原生无 swipe 事件）。常见错误是只监听
touchend，漏掉touchmove中的实时判断，导致滑动不跟手、误触发或卡顿。
- 在
touchstart记录起始clientX- 在
touchmove实时计算deltaX = currentX - startX，并限制只响应向左滑（deltaX ）- 在
touchend判断最终位移是否超过阈值（如-80px），再决定是否展开删除按钮- 务必调用
event.preventDefault()在touchmove中，否则 iOS 会触发页面滚动如何让列表项内容层与删除按钮层分层滑动
直接对整个
<li>应用 transform 会把文字和按钮一起拖走，无法实现「内容左移、删除按钮固定露出」的效果。必须用嵌套结构隔离 DOM 层级。推荐结构：
<li class="swipe-item"> <div class="content">...</div> <div class="delete-btn">删除</div> </li>，仅对.content做transform: translateX()，.delete-btn设为position: absolute; right: 0并设宽高。
.swipe-item需设overflow: hidden，否则删除按钮滑出后仍可点击.content要设transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94)，避免硬切- 不要用
left或right动画替代transform，重排代价高，iOS 上易掉帧如何防止左滑过程中误触内部链接或按钮
手指在滑动时如果划过
<a></a>或<button></button>，松手瞬间可能触发默认行为（跳转或提交），破坏交互流。这不是 bug，是浏览器默认策略。
- 在
touchstart阶段给.swipe-item加临时 class（如swiping），并在该状态下给子元素设置pointer-events: none- 在
touchend后立即移除该 class，恢复交互- 更稳妥的做法：对所有可点击子元素加
ontouchstart="event.preventDefault()"，但仅限该列表项内——避免影响全局- 注意：iOS Safari 对
pointer-events: none在表单控件上兼容性略差，必要时用disabled属性临时禁用<button></button>Vue/React 项目中如何复用左滑逻辑
不要在每个组件里重复写 touch 事件绑定和位移计算。封装成可组合函数或自定义 Hook 是关键。
以 Vue 3 Composition API 为例：导出一个
useSwipeDelete函数，接收ref元素和回调onDelete，内部处理事件绑定/解绑、位移阈值判断、动画状态同步。React 可用useSwipe自定义 Hook 返回{ isSwiping, handleTouchStart, ... }。
- 避免在
touchmove中频繁读取offsetWidth或调用getBoundingClientRect()，会强制同步布局- 删除操作触发后，应由业务层决定是否调用 API、更新列表数据，而不是在滑动逻辑里耦合请求
- 真机调试时注意：Chrome DevTools 的 device emulation 不完全模拟 touch 行为，务必在 iOS/Android 真机验证滑动灵敏度和边界判定
最易被忽略的是 touch-action CSS 属性——没设
touch-action: pan-y在.swipe-item上，iOS 会拦截部分横向 touchmove，导致滑动卡顿或失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
