SwiperDot 轮播图指示点，一般用于banner轮播图。

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

默认使用

通过 items 属性设置轮播图数据，current 属性设置当前所在轮播图的索引。

<wui-swiper-dot :items="items" :current="current">
	<swiper class="wui-banner__wrap" @change="change" circular :indicator-dots="false" autoplay
		:interval="4000" :duration="150">
		<swiper-item v-for="(item,index) in items" :key="index">
			<view class="wui-banner__item" :style="{background:item.background}">First UI 组件库</view>
		</swiper-item>
	</swiper>
</wui-swiper-dot>

 const current = ref<any>(0);
const items = ref<any>([{
    background: '#09BE4F'
}, {
    background: '#FFB703'
}, {
    background: '#B2B2B2'
}]);
const change = e => {
    current.value = e.detail.current;
};

.wui-banner__item {
	width: 100%;
	height: 360rpx;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 34rpx;
	font-weight: 600;
}

.wui-banner__wrap {
	height: 360rpx;
}

//styles 属性值说明。以下属性值并非全部必传，根据显示类型设置相关属性值即可。

{
	//指示点容器left值,单位rpx，type=1/2/3时有效
	left: 0,
	//指示点容器right值,单位rpx，type=1/2/3/4时有效
	right: 0,
	//指示点容器bottom值，单位rpx，type=1/2/3/4时有效
	bottom: 32,
	//指示点宽度，单位rpx，type=1/2/4时有效
	width: 16,
	//当前选中的指示点宽度，单位rpx，type=1时有效
	activeWidth: 16,
	//指示点高度，单位rpx，type=1/2/3/4时有效，当type=3时最小高度为64
	height: 16,
	//指示点是否为圆角,type=1/2/4时有效
	radius: true,
	//指示点背景色，type=1/2/3/4时有效
	background: 'rgba(0,0,0,.6)',
	//当前选中的指示点背景色，type=1/2时有效
	activeBackground: '#465CFF',
	//指示点字体颜色，type=2/3/4时有效
	color: '#fff',
	//当前选中的指示点字体颜色，type=2时有效
	activeColor: '#fff',
	//指示点字体大小，单位rpx，type=2/3/4时有效
	size: 28,
	//指示点左右外边距，单位rpx，type=1/2时有效
	margin: 8,
	//指示点容器左右内边距，type=3时有效
	padding: 32
}

Slots

插槽名称	说明
default	放置滑块视图容器组件内容

Props

属性名	类型	说明	默认值	平台差异说明
items	Array	轮播图数据	[ ]	-
type	Number, String	指示点显示类型：1-圆点 2-数字索引 3-标题 4-固定在右侧数字索引	1	-
current	Number, String	当前所在轮播图索引	0	-
styles	Object	指示点样式，具体属性见下方详细说明	{ }	-
field	String	标题字段名称，仅在类型为3时有效	-	-

Events

事件名	说明	回调参数
@click	点击指示点时触发	{ index : 指示点索引值 }