swiper 的 previous-margin 和 next-margin 是实现卡片堆叠效果的关键参数，二者需同时设置带单位的值（如"60rpx"），配合 circular、display-multiple-items、current 绑定及 @change 取模处理，并统一 transform-origin: center center，才能在多端稳定呈现居中放大、左右露边的卡片轮播效果。
直接用 swiper 组件配合 previous-margin 和 next-margin 就能做出基础卡片式轮播，不用写 JS 动画、不依赖第三方插件——但参数值、单位、平台兼容性稍有偏差，效果就变成“卡顿”“错位”“只缩放不堆叠”。
为什么 swiper 的 previous-margin / next-margin 是关键
这两个属性不是“留白”，而是让相邻 swiper-item 在视口内强制露出指定宽度，从而实现“当前页居中放大，左右各露一条边”的卡片堆叠感。它绕过了手动计算 transform 的复杂度，是官方唯一支持的原生卡片式入口。
-
previous-margin控制上一张图右边露出多少（即左侧卡片的可见宽度） -
next-margin控制下一张图左边露出多少（即右侧卡片的可见宽度） - 二者必须同时设置，且仅在
display-multiple-items > 1时生效（默认为 1，需显式设为 2 或 3） - 值必须带单位：
"60rpx"✅，"60"❌；安卓端rpx解析不稳定，生产环境建议用uni.upx2px(60) + 'px'动态转为 px
swiper 配置必须同步改这 4 项
只加 previous-margin 和 next-margin 不够，下面四个配置必须成套调整，否则会出现指示点错乱、滑动卡死、循环断裂等问题：
-
circular: true：开启无限循环，否则露出的卡片滑到边界会突然消失 -
display-multiple-items: 3：让 swiper 同时渲染 3 张卡片（当前 + 左右各一），这是堆叠的前提 -
current建议绑定 data 中的变量（如:current="currentIndex"），避免切换时因 DOM 渲染延迟导致错帧 -
@change回调里拿到的e.detail.current是真实索引，但循环模式下首尾幻影项的索引会超出原始数组长度，需用% list.length取模映射回真实数据
卡片内容定位不准？默认 transform 基准点是左上角
所有缩放、位移动画都以元素左上角为原点，如果你的卡片内容（比如文字、按钮）用了 position: absolute 或 flex 居中，缩放后会偏移。最稳的做法是统一用 transform-origin: center center 重置基准点：
.swiper-item {
transform-origin: center center;
}
.swiper-item-content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
注意：iOS Safari 对 transform-origin 的解析较严格，不要写成 50% 50%，必须用 center center。
真机调试必查的三个断点
同一套代码在微信小程序、H5、App 表现不一致，不是 bug，是底层限制：
- iOS 微信：rotateY 超过 ±12deg 会模糊，若你用插件做了 3D 效果，得降为 ≤12deg 并加
backface-visibility: hidden - H5 端 Chrome：对
will-change: transform敏感，只给当前 active 卡片动态添加该样式，别全局加 - App 端（尤其 iOS）：scroll-view 的 bounce 必须关掉（
bounce="false"），否则拖拽到底部时整组卡片会跳一次
最容易被忽略的是卡片图片的 mode —— 必须用 mode="aspectFill"，否则缩放后边缘拉伸或留白，破坏堆叠对齐。
