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当前指示点索引，必须是通过 swiper 的 change 事件获取到的 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组件配合使用
  • width 与 height 如非必要，请勿设置过大，或者过小
  • swiper-item 尽量控制在一定数量之内，否则指示点可能会超出屏幕
  • 暂不支持垂直方向的指示点