SwiperIndicator 轮播图指示器

自定义轮播图指示点

平台

App	小程序	H5
√	√	√

属性

属性名	类型	默认值	说明	平台
current	Number	0	激活的索引index	All
list	Array	[]	列表数据	All
mode	String		模式 可选的值：'',line,rate ,index	All
color	String	rgba(0,0,0,.5)	颜色 支持c-bg-开头的类	All
activeColor	String	#000	激活的颜色 支持c-bg-开头的类	All
radius	String,Number,Array	round	圆角，radius=round时为圆形	All
size	String,Number,Array	null	尺寸 为数组时表示[宽，高]，mode=rate时索引1为左右边距 默认值：mode=index值48rpx，mode=rate值[48rpx,12rpx],其他值为16rpx	All
activeSize	String,Number,Array	null	激活的尺寸 为数组时表示[宽，高] mode=line	rate时无效
itemOffset	String,Number	8rpx	项之间的间隔	All
float	Boolean	false	是否浮在轮播图上	All
pos	String	bc	位置 可选的值tl,tc,tr,bl,bc,br,lc,rc	All
posOffset	String,Number,Array	20rpx	位置偏移 float=true表示为绝对定位偏移，float=false为相对定位偏移 为数组时值位置和pos属性对应，例pos=tl，posOffset=[top,left]	All
textProps	Object	{}	文字颜色 支持c-t-开头的类，仅mode=rate	index有效
activeTextProps	Object	{}	激活的文字颜色 支持c-t-开头的类，仅mode=rate	index有效
hideOnSingle	Boolean	false	只有一项时是否隐藏	All
cClass	String,Array,Object	null	组件类	All
cStyle	String,Array,Object	null	组件样式	All
margin	String,Number,Array	null	外边距	All
padding	String,Number,Array	null	内边距	All
bgColor	String	null	背景色，支持c-bg-开头的背景色类	All

事件

事件名	说明	平台
itemClick		All

插槽

插槽名	说明
default
rate	mode=rate时有效

示例

<template>
  <c-swiper-indicator :current="current" :list="swiperList" float :active-size="['40rpx']">
    <swiper :current="current" style="height:100px" circular @change="onSwiperChange">
      <swiper-item v-for="(item,index) in swiperList" :key="index">
        <c-text :text="item" />
      </swiper-item>
    </swiper>
  </c-swiper-indicator>
</template>
<script setup>
  import { ref } from 'vue';
  
  const current = ref(0);
  const swiperList = ref([1,2,3])
  function onSwiperChange(e){
    current.value = e.detail.current;
  }
</script>