• SwiperDot 轮播图指示点

    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 尽量控制在一定数量之内，否则指示点可能会超出屏幕
    • 暂不支持垂直方向的指示点