uni-app中实现卡片层叠效果需放弃swiper组件，改用touch事件+transform手动控制：绝对定位+动态z-index+实时计算位移/缩放/透明度，仅渲染5张卡片并优化渲染性能。
uni-app 里用 swiper 做卡片层叠效果不靠谱
直接套用 swiper 组件默认的滑动模式，根本没法实现真正的「层叠」——它只是平铺切换，卡片之间没有 Z 轴偏移、缩放和透明度渐变。官方 swiper 的 previous-margin 和 next-margin 看似能露边，但无法控制层叠顺序、无法响应手指拖拽过程中的实时状态，更没法做「拖一半松手回弹/滑走」的交互。
真正可用的路径只有一条：自己用 touchstart/touchmove/touchend + transform + transition 控制每张卡片的位置、缩放和透明度。
用绝对定位 + transform 手动管理卡片堆叠顺序
核心思路是把所有卡片放在同一个 view 容器内，全部设为 position: absolute，再用 z-index 控制层级，用 transform: translateX() scale() rotateZ() 控制位移、缩放和微倾角。当前卡片 z-index 最高，往前（下一张）的卡片 z-index 递减，同时 translateX 往右偏移、scale 缩小、opacity 降低。
- 每张卡片需绑定独立的
style对象，动态计算transform和z-index - 推荐用数组索引映射位置：比如
currentIndex = 2，则索引2卡片居中，1卡片左偏+缩放，3卡片右偏+缩放 - 避免对整个列表用
v-for直接渲染全部卡片（性能差），只渲染当前页及前后各 1–2 张（共 5 张足够） - 注意
transform中不要混用px和rpx，uni-app 中统一用rpx或转成px计算（uni.upx2px()）
拖拽过程中实时更新卡片位置的关键参数
监听 touchmove 时，不能只改最后一张卡片的 translateX，而是要按偏移比例重新计算「整叠卡片」的 transform：中间卡不动，前一张向左滑出，后一张向右滑入，中间过渡卡片按距离衰减缩放和透明度。
- 记录
touchstart的clientX，每次touchmove算出deltaX = currentX - startX - 给每张卡片定义一个「偏移权重」：比如当前卡权重 0，前一张 -1，后一张 +1，再前一张 -2……然后乘以
deltaX * 0.3得到各自 X 偏移量 - 缩放比例建议用
1 - Math.abs(weight) * 0.1（最小不小于 0.7），透明度用1 - Math.abs(weight) * 0.2（最低不小于 0.4） - 务必在
touchend后判断Math.abs(deltaX)是否超过阈值（如 80rpx），决定是复位还是切换到下一张
真机上滑动卡顿？这几个点必须检查
层叠动画对渲染压力大，H5 和小程序表现差异明显，iOS 尤其敏感。卡顿往往不是逻辑问题，而是渲染优化没到位。
- 所有动画属性必须写在
transform和opacity上，绝不用left/top/width触发重排 - 给卡片容器加
style="will-change: transform; contain: strict;"（小程序基础库 ≥ 3.4.0 支持contain） - 关闭
debug模式下 console.log 大量输出，真机调试时尤其明显 - Android 上若仍卡，尝试给卡片加
style="-webkit-transform: translateZ(0);"强制 GPU 加速（仅 H5 有效）
最易被忽略的是：卡片内容别嵌套过深，单张卡片的 view 层级建议 ≤ 4 层；图片用 mode="aspectFill" 配合固定宽高，避免加载时重绘。
