SwiperDot 轮播图指示点

自定义轮播图指示点,组件名:uni-swiper-dot,代码块: uSwiperDot。

使用方式:

script 中引用组件

  1. import {uniSwiperDot} from "uni-ui"
  2. export default {
  3. components: {uniSwiperDot}
  4. }

template 中使用组件

  1. <uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
  2. <swiper class="swiper-box" @change="change">
  3. <swiper-item v-for="(item ,index) in info" :key="index">
  4. <view class="swiper-item">
  5. {{item.content}}
  6. </view>
  7. </swiper-item>
  8. </swiper>
  9. </uni-swiper-dot>
  1. export default {
  2. data() {
  3. return {
  4. info: [{
  5. content: '内容 A'
  6. }, {
  7. content: '内容 B'
  8. }, {
  9. content: '内容 C'
  10. }],
  11. current: 0,
  12. mode: 'long',
  13. }
  14. },
  15. methods: {
  16. change(e) {
  17. this.current = e.detail.current;
  18. }
  19. }
  20. }

属性说明:

属性名类型默认值说明
infoArray-轮播图的数据,通过数组长度决定指示点个数
currentNumber0当前指示点索引,必须是通过 swiperchange 事件获取到的 e.detail.current
dotsStylesObject-指示点样式
modeStringdefault指示点的类型,可选值:default 、 indexes 、 long 、nav
fieldString-mode 为 nav 时,显示的内容字段(mode = nav 时必填)

dotsStyles 属性说明:

属性名类型默认值说明
widthNumber8指示点宽度 在 mode = nav 时不生效
heightNumber8指示点高度 在 mode = nav 时不生效
bottomNumber10指示点距 swiper 底部的高度
colorColor'#fff'指示点前景色,只在 mode = nav ,mode = indexes 时生效
backgroundColorColor'rgba(0, 0, 0, .3)'未选择指示点背景色
borderBorder'1px rgba(0, 0, 0, .3) solid'未选择指示点边框样式
selectedBackgroundColorColor'#333'已选择指示点背景色,在 mode = nav 时不生效
selectedBorderBorder'1px rgba(0, 0, 0, .9) solid'已选择指示点边框样式,在 mode = nav 时不生效

Tips:

  • 本组件依赖 swiper 组件,请与swiper组件配合使用
  • widthheight 如非必要,请勿设置过大,或者过小
  • swiper-item 尽量控制在一定数量之内,否则指示点可能会超出屏幕
  • 暂不支持垂直方向的指示点