swiper组件原生indicator-dots不支持自动缩放，必须手写自定义指示器并绑定current值动态控制样式实现缩放效果；核心是v-for渲染指示点、通过index===current判断应用scale类名或内联style，并配合transition和transform-origin确保动画流畅与点击准确。
swiper 组件本身不提供「指示器自动缩放」能力，所谓“带自动缩放效果的轮播图指示器”，实际是用自定义指示器 + current 响应式控制样式实现的视觉效果，不是原生 indicator-dots 的功能。
直接结论：别指望 indicator-dots 能缩放，必须手写指示器并绑定 current 值做动态 class 或内联 style。
为什么原生 indicator-dots 无法缩放
indicator-dots 是 uni-app 封装的底层原生指示器（iOS/Android WebView 或小程序原生组件），只支持颜色、大小、位置等静态配置，不暴露单个点的 DOM 控制权，也无法响应 current 变化做动画。试图给它加 transform: scale() 或 CSS 动画完全无效。
如何用 current 实现指示器缩放动画
核心思路：用 v-for 渲染一组 view 元素代替原生指示器，每个元素根据 index === current 判断是否应用放大类名或内联样式。
- 模板中禁用
indicator-dots，改用自定义容器包裹指示点 - 在
data中定义current: 0，并在@change回调里更新它：onSwiperChange(e) { this.current = e.detail.current } - 每个指示点用
:class="{ 'active': index === current }"或:style="{ transform: index === current ? 'scale(1.4)' : 'scale(0.8)' }" - 为缩放加过渡：在指示点 class 里写
transition: transform 0.2s ease，避免突兀跳变
缩放比例与性能注意事项
缩放值不宜过大（如 scale(2)），否则在低端 Android 设备上容易触发重绘卡顿；建议控制在 0.7 ~ 1.3 区间。同时注意：
- 不要在
:style里写复杂计算，例如scale(${1 + (index - current) * 0.1})—— 这会导致每次渲染都执行 JS 计算，且难以控制边界，易出负缩放或溢出 - 如果要做「中间最大、两边递减」的渐变缩放，必须配合
previous-margin/next-margin调整 swiper 项间距，否则视觉节奏错乱 - H5 端缩放后若出现模糊，加
backface-visibility: hidden或will-change: transform强制 GPU 加速
常见错误：缩放后指示器错位或点击失效
缩放会改变元素尺寸和布局占位，容易引发两个问题：
- 缩放后指示器横向挤占空间，导致整体居中偏移 → 解决：给父容器设
display: flex; justify-content: center，子项用flex: 0 0 auto防止伸缩 - 缩放后点击区域变小或偏移 → 解决：确保缩放基于
transform-origin: center，且未设置overflow: hidden裁剪 - swiper 切换时
current更新延迟，导致缩放不同步 → 解决：确认@change事件监听正确，避免在watch或异步回调里间接更新current
真正起作用的是你写的那个 current 值和它驱动的样式逻辑，而不是 swiper 的某个隐藏属性。缩放效果越精细，越要小心 DOM 结构、CSS 层叠和事件时机之间的耦合。
