SwiperDot 轮播图指示点

包装轮播内容并显示圆点、数字或标题指示器。页面需自行通过 current 同步轮播索引。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

<!-- 当前索引由页面轮播事件更新 -->
<fui-swiper-dot :items="slides" :current="current">
  <swiper :current="current" @change="handleSwiperChange">
    <swiper-item v-for="slide in slides" :key="slide.id">
      <text>{{ slide.title }}</text>
    </swiper-item>
  </swiper>
</fui-swiper-dot>

请在页面定义 slides、current 和 handleSwiperChange；后者可读取 event.detail.current 更新索引。

属性

属性	类型	说明	官网默认值
items	Array	轮播数据	[]
type	Number / String	1 圆点、2 数字、3 标题、4 右侧数字索引	1
current	Number / String	当前项索引，从 0 开始	0
styles	Object	指示器样式配置	{}
field	String	type 为 3 时读取标题的字段名	-

styles 可配置 left、right、bottom、width、activeWidth、height、radius、background、activeBackground、color、activeColor、size、margin 和 padding。本地默认尺寸与间距使用 rpx；设置标题模式时，请确保当前 items[current] 存在并包含 field 对应的字段。

事件

事件	说明	回调参数
click	点击指示器	{ index }

插槽

插槽	说明
default	放置轮播容器