扩展组件（uni-ui）之uni-swiper-dot

uni-swiper-dot 是 uni-app 的 uni-ui 组件库中的一个组件，用于与轮播图（swiper）组件一起使用，提供轮播图的指示点功能。这个组件可以增强用户的视觉体验，通过显示点状指示器来表示当前浏览的是轮播图中的哪一张图片。

基本用法

在使用 uni-swiper-dot 之前，你需要确保已经正确安装了 uni-ui 库，并在页面中引入了 uni-swiper-dot 组件。

引入组件

<template>
    <uni-swiper-dot :current="currentIndex" :length="bannerList.length"></uni-swiper-dot>
    <swiper @change="onSwiperChange">
        <swiper-item v-for="(item, index) in bannerList" :key="index">
            <!-- 轮播内容 -->
        </swiper-item>
    </swiper>
</template>

<script>
    import uniSwiperDot from '@dcloudio/uni-ui/lib/uni-swiper-dot/uni-swiper-dot.vue'
    export default {
        components: { uniSwiperDot },
        data() {
            return {
                currentIndex: 0,
                bannerList: [/* 轮播图数据 */]
            }
        },
        methods: {
            onSwiperChange(e) {
                this.currentIndex = e.detail.current;
            }
        }
    }
</script>

属性

• current：当前激活的轮播项的索引，通常绑定到 <swiper> 组件的 change 事件。
• length：轮播项的总数。

示例

在上面的示例中，uni-swiper-dot 组件用于显示与轮播图相对应的指示点。它的 current 属性绑定了当前活动的轮播项索引，而 length 属性则表示轮播项的总数。当轮播图切换时，通过 onSwiperChange 方法更新 currentIndex，从而改变激活的指示点。

注意事项

• 确保 uni-swiper-dot 的 current 和 length 属性正确反映了 <swiper> 组件的状态。
• 通常需要将 <swiper> 组件的 change 事件与 uni-swiper-dot 的 current 属性绑定，以同步更新当前激活的指示点。

更多关于 uni-swiper-dot 组件的使用细节，可以查阅 uni-ui 官方文档 或 uni-ui 库的相关文档。