优先选 swiper，因其支持缩略图联动、懒加载、手势拖拽及 ssr 兼容；scroll-snap 在 ios safari 15.4+ 前支持不稳，且无法监听当前页变化，导致缩略图同步失败。
轮播图用 swiper 还是原生 scroll-snap？
优先选 swiper，尤其当需要缩略图联动、懒加载、手势拖拽或服务端渲染兼容时。原生 scroll-snap 虽轻量，但 iOS Safari 对 scroll-snap-type 的支持在 15.4+ 才稳定，且无法监听“当前页”变化，规格切换时同步高亮缩略图会出问题。
实操建议：
- 用
swiper@11（非最新 v12），v12 移除了thumbs模块的独立导入方式，容易配错导致缩略图不联动 -
loop: true必须配合slidesPerView: 1和spaceBetween: 0，否则首尾衔接有白边 - 图片用
loading="lazy"+ 宽高属性（如width="375"）避免 CLS 偏移
规格选择怎么绑定点击态与库存状态？
不能只靠 class 切换样式，必须同步更新一个 selectedSpecs 对象，并实时查表判断组合是否可售。电商常见坑是：用户点了“颜色：红色”，再点“尺码：XL”，但红+XL 已售罄，UI 却没禁用或提示。
实操建议：
- 把所有规格组合预存在 JS 中，结构类似：
{ "红色_XL": { available: false, stock: 0 } } - 每个规格项绑定
data-spec-key="color"和data-spec-value="红色"，点击时合并到selectedSpecs - 每次变更后调用函数检查
getStockStatus(selectedSpecs)，仅当返回true才允许加入购物车 - 禁用态用
aria-disabled="true"，不只是加opacity，保障无障碍访问
图片轮播和规格区怎么避免布局跳动？
轮播容器高度随图片加载变化，规格按钮宽度随文字长度浮动，两者叠加会导致页面重排，用户滑动时突然“抖一下”。核心是固定轮播容器高度、规格按钮最小宽度。
实操建议：
- 轮播外层设
aspect-ratio: 3/4（商品图常见比例），内部图片设object-fit: cover和width: 100%; height: 100% - 规格按钮统一用
min-width: 64px，配合text-overflow: ellipsis防止长文本撑开布局 - 整个详情页用
contain: layout style paint包裹，限制重绘范围，尤其在低端安卓机上效果明显
如何让轮播和规格在 SSR 场景下不闪屏？
服务端渲染时，swiper 实例尚未初始化，轮播图会以默认列表形式展开；规格按钮也因 JS 未执行而全部可点——用户可能误操作提交无效规格。
实操建议：
- 服务端输出轮播容器时加
style="visibility: hidden"，JS 初始化完成后再移除 - 规格区域初始状态设
aria-busy="true"，并用 CSS 隐藏所有按钮（[aria-busy="true"] .spec-btn { display: none; }） - Swiper 初始化成功后，触发自定义事件
swiper:ready，同时清除aria-busy并显示规格区
最麻烦的其实是规格组合映射表的加载时机——它得和商品数据一起从服务端吐出，不能等轮播就绪后再发请求，否则用户点太快会拿到空数据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
