swiperDot 輪播圖指示點-----插件的使用

導入，注冊組件
import uniSwiperDot from "@/components/uni-swiper-dot/uni-swiper-dot.vue"
export default {
    components: {uniSwiperDot}
}

使用組件
<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
    <swiper class="swiper-box" @change="change">
        <swiper-item v-for="(item ,index) in info" :key="index">
            <view class="swiper-item">
                {{item.content}}
            </view>
        </swiper-item>
    </swiper>
</uni-swiper-dot>
export default {
    data() {
        return {
            info: [{
                content: '內容 A'
            }, {
                content: '內容 B'
            }, {
                content: '內容 C'
            }],
            current: 0,
            mode: 'round',
        }
    },
    methods: {
        change(e) {
            this.current = e.detail.current;
        }
    }
}

 

屬性說明

屬性名	類型	默認值	說明
info	Array	-	輪播圖的數據，通過數組長度決定指示點個數
current	Number	0	當前指示點索引，必須是通過 swiper 的 change 事件獲取到的 e.detail.current
dotsStyles	Object	-	指示點樣式
mode	String	default	指示點的類型，可選值：default 、round 、nav 、 indexes
field	String	-	mode 為 nav 時，顯示的內容字段（mode = nav 時必填）

dotsStyles 屬性說明：

屬性名	類型	默認值	說明
width	Number	8	指示點寬度 在 mode = nav、mode = indexes 時不生效
bottom	Number	10	指示點距 swiper 底部的高度
color	Color	'#fff'	指示點前景色，只在 mode = nav ，mode = indexes 時生效
backgroundColor	Color	'rgba(0, 0, 0, .3)'	未選擇指示點背景色
border	Border	'1px rgba(0, 0, 0, .3) solid'	未選擇指示點邊框樣式
selectedBackgroundColor	Color	'#333'	已選擇指示點背景色，在 mode = nav 時不生效
selectedBorder	Border	'1px rgba(0, 0, 0, .9) solid'	已選擇指示點邊框樣式，在 mode = nav 時不生效

 

插件預覽地址

https://uniapp.dcloud.io/h5/pages/extUI/swiper-dot/swiper-dot

 

示例

<uni-swiper-dot :info="lable" :current="current" field="content" :mode="mode" :dotsStyles="dotsStyles"></uni-swiper-dot>

dotsStyles

dotsStyles: {
                    bottom: '0',
                    color: '#FFF',
                    border: 'none',
                    backgroundColor: '#A59F9F',
                    selectedBackgroundColor: '#111',
                    selectedBorder: 'none',
                }