移动端轮播图需正确处理touch事件配对、overflow:hidden裁剪、硬件加速、后台失步及ios手势冲突；核心是事件逻辑与渲染链路适配平台策略，而非仅添加touch支持。

移动端轮播图不是“PC版加个 touch 事件”就能跑通的，很多看似正常的代码在 iOS Safari 或 Android Chrome 上会滑不动、卡顿、错位甚至白屏。核心问题不在动画本身，而在事件响应逻辑和渲染链路被平台策略干预。

touchstart/touchend 必须配对使用，不能只监听 touchmove

手机上 mousemove 基本不触发，靠它做拖拽等于没写。但更常见的是只监听 touchmove 并在里面实时改 transform —— 这会导致高频重绘、松手后残留偏移、手指一抖就跳图。

• 正确做法：在 touchstart 记下 e.touches[0].clientX 为 startX
• touchmove 中只计算偏移 offset = e.touches[0].clientX - startX，并立即调用 e.preventDefault() 阻止页面上下滚动（仅作用于轮播容器）
• touchend 才判断是否切换：仅当 Math.abs(offset) > slideWidth * 0.3（别写死 50px，要动态读取）才执行 goToSlide()

overflow: hidden 必须加在最外层容器，且父元素不能是 position: static

没设 overflow: hidden 的轮播，滑出去的图片会露在容器外，视觉上就是一排图横着铺开，根本不是“轮播”。这个样式必须加在 .carousel 这类最外层容器上，不是 .carousel-track 或 .slides。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 常见翻车点：只给内部 flex 容器设了 overflow: hidden，但父容器没设宽高或用了 position: static，导致裁剪失效
• 如果外层用了 position: absolute 或 relative，必须确保它有明确的 width 和 height，否则 overflow: hidden 不生效
• Safari 上偶发 transform 不重绘，可加 transform: translateZ(0) 或 will-change: transform 强制硬件加速（但别滥用）

自动轮播必须防后台失步，setInterval 不是安全选择

标签页切到后台时，setInterval 仍会持续运行，切回来可能连播几帧、索引错乱、甚至触发多次回调。这不是 bug，是浏览器标准行为。

• 稳妥方案：用 setTimeout 替代 setInterval，每次切换完成后才设下一次定时器，天然中断链式调用
• 更精准的做法：结合 requestAnimationFrame + 时间戳判断是否“该切了”，它会随页面可见性自动暂停
• 必须监听 visibilitychange 事件，在 document.visibilityState === 'hidden' 时手动暂停逻辑，恢复时重新计时

iOS Safari 需显式禁用横向手势冲突

iOS Safari 默认把横向 touchmove 当作页面滚动处理，会吞掉你的拖拽事件，结果就是“手指划了，但轮播不动”。

• 给轮播最外层容器加 touch-action: pan-y，明确允许竖向滚动（比如图文混排需上下滑），禁止横向滚动
• 如果轮播图纯图片、不需要页面滚动，可用 touch-action: none，但必须自己实现回弹和边界限制，否则体验生硬
• event.preventDefault() 要在 touchstart 里调用，但仅限你完全接管手势时；否则可能影响可访问性（如屏幕阅读器手势）

真正难的不是让轮播动起来，而是让它在图片没加载完、用户正按着不动、页面切到后台、或者手指斜着划的时候，依然不崩、不闪、不跳。这些边界情况比动画本身更消耗调试时间。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！