uni-app怎么实现带有自动缩放效果的轮播图分页指示器-uni-app-PHP中文网

uni-app 的 swiper 不支持缩放式分页指示器，需通过 v-for 动态 class 实现：中间项 scale(2)、相邻项 scale(1.5)、其余项 scale(1)，配合取模处理 circular 越界及防空渲染。

uni-app怎么实现带有自动缩放效果的轮播图分页指示器

uni-app 的 `swiper` 本身不支持缩放式分页指示器

原生 swiper 组件的 indicator-dots 只能控制圆点显隐和颜色，无法实现“中间放大、两边缩小”的视觉效果。所谓“缩放式指示器”，本质是自定义 DOM + 动态 class 控制尺寸，不是靠 swiper 内置能力。

用 `v-for` + `:class` 动态控制每个指示点尺寸

核心思路是：把指示器从 swiper 内部剥离，独立渲染一组 view，根据当前索引 current 给不同位置的 item 加不同 class。

中间项（index === current）设为最大尺寸，比如 width: 16px; height: 16px;
相邻项（Math.abs(index - current) === 1）设为中等尺寸，比如 12px
其余项设为最小尺寸，比如 8px
所有项用 transition: transform 0.2s ease 保证缩放平滑

示例片段：

<view class="indicator-wrapper"><view v-for="(item, index) in list" :key="index" class="indicator-dot" :class="{ 'active': index === current, 'near': Math.abs(index - current) === 1 }"></view></view>

CSS 中定义：

uni-app

uni-app 官方文档、npm 包和项目创建入口。

下载

.indicator-dot {
  width: 8px;
  height: 8px;
  background: #999;
  border-radius: 50%;
  margin: 0 4px;
  transition: transform 0.2s ease;
}
.indicator-dot.active {
  transform: scale(2);
}
.indicator-dot.near {
  transform: scale(1.5);
}