移动端卡片滑动用touchstart/touchmove而非click，因click有300ms延迟且无法识别手势；需记录坐标差、阻止默认行为、统一用transform并加will-change: transform提升性能；松手吸附逻辑需阈值判断与边界处理；iOS需同时监听touchend和touchcancel防事件丢失。
移动端卡片滑动为什么用 touchstart/touchmove 而不是 click
因为 click 在移动端有约 300ms 延迟，且无法捕获滑动手势方向和距离；touchstart 和 touchmove 才是原生支持手势识别的底层事件。不用第三方库（如 Swiper）也能实现基础滑动，关键是记录触点坐标变化并实时更新卡片偏移量。
常见错误现象：touchmove 触发后页面整体滚动、卡片卡顿、松手后不回弹或滑过头——基本都源于没阻止默认行为或没做坐标差值归一化。
- 必须在
touchstart中记录touches[0].clientX，在touchmove中持续计算deltaX = currentX - startX - 对
touchmove添加event.preventDefault()，否则 iOS 下会触发页面拖拽 - 不要直接用
scrollLeft或transform: translateX()混用，统一用transform更流畅
transform 移动卡片时为什么必须加 will-change: transform
不加的话，浏览器可能把卡片渲染在 CPU 上，滑动掉帧明显，尤其多卡片叠加时。加了之后强制开启 GPU 图层合成，iOS Safari 和 Android Chrome 都能稳定 60fps。
性能影响很实际：没加时三张卡片滑动就偶发卡顿；加了之后即使 10 张卡片快速拖拽也跟手。但注意别滥用——只加在真正需要频繁变换的元素上，比如卡片容器或单张卡片元素。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 写在卡片元素上：
style="will-change: transform;" - 如果卡片数量动态变化，用 JS 动态添加 class 更稳妥：
card.classList.add('smooth-slide')，对应 CSS 中定义.smooth-slide { will-change: transform; } - 别对整个
body或大范围父容器设will-change，内存开销会上升
松手后自动吸附到最近卡片的判断逻辑怎么写
核心是算出当前偏移量除以单张卡片宽度，四舍五入取整，再乘回去。但要注意边界处理：不能滑出第一张或最后一张之外。
容易踩的坑是用 Math.round() 直接套用，结果在临界点（比如正好卡在两张中间）时来回抖动；更稳的方式是用 Math.abs(deltaX) > width * 0.4 做阈值判断，再决定是否切换。
- 假设卡片宽度为
300px，当前translateX是-127px，则目标位置应为Math.round(-127 / 300) * 300 = 0（回到第一张） - 但若当前是
-185px，185 / 300 ≈ 0.616，超过 0.5 阈值，就该切到第二张：-300px - 边界检查必须在动画前做：
targetX = Math.max(minX, Math.min(maxX, targetX))，其中minX = -(cardCount - 1) * width
为什么 iOS 上 touchend 有时不触发，以及怎么补救
当手指快速滑动并突然抬起时，iOS WebKit 可能丢掉 touchend，导致卡片停在半路不动。这不是 bug，是滚动优化机制的一部分——系统认为你接下来要惯性滚动，于是延迟或合并事件。
最可靠补救是监听 touchcancel，它和 touchend 一样携带相同坐标信息，且 iOS 在“疑似滚动中断”时一定会触发它。
- 把滑动结束逻辑（计算目标位置、执行
transition）同时绑定到touchend和touchcancel - 别依赖
event.touches.length === 0判断是否松手，因为touchend的touches是空列表，但changedTouches才有刚离开的手指信息 - 加个防抖：如果
touchend和touchcancel紧挨着触发，只执行一次动画
复杂点在于不同机型对 touch 事件吞吐率不同，iPhone SE 和 iPhone 14 Pro 的 touchmove 触发频率差近一倍，所以位移计算最好用 requestAnimationFrame 节流，而不是单纯靠事件频率。
