小红书式图切换需手写 touch + transform 实现五张卡片层叠效果，而非依赖 Swiper；核心是动态计算每张卡的 translateX、scale、opacity 和 z-index，结合滑动阈值判断与按需渲染优化性能。

直接用 swiper 会露边但不是层叠效果

小红书商品详情页的图切换，视觉上是「前一张露出右边缘、当前居中、后一张露出左边缘」，带缩放和透明度衰减。但 swiper 的 previous-margin 和 next-margin 只能静态露边，无法动态控制每张图的 z-index、scale、opacity，更没法响应手指拖拽过程中的实时偏移。真机上还容易出现滑动卡顿或层级错乱——这不是配置问题，是组件能力边界所致。

必须手写 touch + transform 控制五张卡片

核心是只渲染当前卡片及前后各两张（共 5 张），全部用 position: absolute 定位在同一个容器内，靠 z-index 和 transform 模拟层叠。关键点：

小红书信息卡片自动生成

将长文章、AI 新闻、GitHub 项目、工具教程、产品更新或选题说明，转化为适合小红书 / 小绿书发布的图文卡片策划稿，并在用户确认后生成可编辑、可下载、可复用的 HTML 卡片页面。

下载

• 绑定独立 style 对象给每张卡片，动态计算 transform: translateX() scale() rotateZ() 和 z-index
• translateX 偏移量 = deltaX * weight * 0.3（weight：当前卡为 0，前一张 -1，后一张 +1，再前/后再后依次 ±2）
• scale = 1 - Math.abs(weight) * 0.1（下限 0.7），opacity = 1 - Math.abs(weight) * 0.2（下限 0.4）
• 务必用 uni.upx2px() 统一转换单位，避免 rpx / px 混用导致偏移不准

touchend 后要判断滑动距离再决定是否切换

不能松手就切，得看用户拖了多远：

• 记录 touchstart 的 clientX，每次 touchmove 算出 deltaX = currentX - startX
• touchend 时若 Math.abs(deltaX) > 80（单位 rpx），才触发切换；否则复位到原位置
• 切换后重置所有卡片的 z-index 和 transform，避免累积误差
• 注意 iOS 真机对 transform + opacity 动画更敏感，禁用任何 left/top 触发重排

图片加载和内存容易被忽略

商品图通常尺寸大、数量多，直接 v-for 渲染全部图会卡顿甚至白屏：

• 只对索引在 [currentIndex-2, currentIndex+2] 范围内的图执行 <image></image> 渲染，其余用占位或不渲染
• 使用 mode="aspectFill" 防止拉伸变形，配合 lazy-load 属性延迟加载非可视区图片
• 小程序端慎用 background-image 加载商品图，容易触发 canvas 渲染瓶颈，优先用 <image></image>