原生 touchstart/touchmove/touchend 手动实现滑动最可控：touchstart 记起始 X 并 preventDefault，touchmove 实时计算 deltaX 设置 translateX，touchend 判断阈值决定回弹或切换；需禁用默认拖拽、限制水平方向、容器 overflow: hidden + white-space: nowrap。
用 touchstart + touchmove + touchend 做原生手势滑动最可控
纯 CSS 的 scroll-snap-type 在部分安卓 WebView（尤其旧版 UC、QQ 浏览器）里表现不稳，滑不动或卡死；而轮播库（如 Swiper）又容易因初始化时机或容器宽高未就绪导致错位。原生监听触摸事件手动计算偏移量，虽然代码多几行，但兼容性好、响应快、无依赖。
关键点：必须禁用默认拖拽行为，且只在水平方向触发：
- 在
touchstart中记录起始clientX，并调用e.preventDefault() -
touchmove里实时算差值deltaX = e.touches[0].clientX - startX，直接设置图片容器的transform: translateX() -
touchend判断滑动距离是否超过阈值（比如 50px），决定是回弹还是切换到下一张 - 记得给图片容器加
overflow: hidden和white-space: nowrap防止换行
为什么不用 scroll-snap-type: x mandatory？
它在 iOS Safari 上基本可用，但在 Android 大量中低端机的系统浏览器里存在两个硬伤：scroll-snap-align 不生效、scroll-behavior: smooth 被忽略。更麻烦的是，一旦用户快速连滑两下，滚动位置会“跳过”中间项，直接停在第三张——因为 snap 是基于滚动结束位置计算的，不是基于手势意图。
如果仍想尝试 CSS 方案，请确保：
立即学习“前端免费学习笔记（深入）”；
- 父容器设
scroll-snap-type: x mandatory，子项设scroll-snap-align: start - 禁用默认滚动条：
scrollbar-width: none+::-webkit-scrollbar { display: none } - 必须用
display: inline-block或flex排列图片，不能用block换行 - 测试时打开 Chrome DevTools 的「Sensors → Device orientation」模拟真实触控延迟
Swiper 初始化失败常见原因和绕过方法
报错 Cannot read property 'length' of undefined 或图片堆叠在左侧，大概率是 Swiper 实例创建时容器还没渲染出宽度。它依赖 getBoundingClientRect() 计算 slide 宽度，而 Vue/React 的异步渲染或懒加载图片会让这个值为 0。
稳妥做法：
- 把
new Swiper(...)放在setTimeout(() => {}, 100)或requestAnimationFrame回调里 - 或监听图片加载完成：
img.onload = () => swiper.update() - 配置项里强制关闭自动初始化：
init: false，等 DOM 就绪再手动调swiper.init() - 避免用
%或vw设置.swiper-wrapper宽度，改用 JS 动态写入固定像素值
滑动后图片模糊、缩放失真怎么办？
这是 transform: translateX() 在某些安卓 GPU 渲染路径下触发 sub-pixel 渲染导致的，尤其当图片宽度不是整数像素时。不是 bug，是渲染策略差异。
缓解方式很直接：
- 给图片加
image-rendering: -webkit-optimize-contrast（iOS）和image-rendering: crisp-edges（Android） - 确保每张图的容器宽度是整数：
Math.round(containerWidth)后再 setStyle - 避免在滑动过程中同时修改
scale或opacity，这些属性会触发额外的合成层，加剧模糊 - 如需缩放预览，单独用一个全屏
div浮层实现，不要和滑动容器混用 transform
实际滑动逻辑里最难调的永远不是“怎么动”，而是“什么时候该停、停在哪”。阈值判断、回弹动画的缓动曲线、快速连滑的节流处理——这些细节没封装进库时，就得自己一行行对齐手指速度和视觉反馈。
