更新记录

1.0.0（2024-05-25） 下载此版本

自定义指示点轮播图，可设置不展示，展示的颜色，数字是全展示还是展示(数字/数字)的形式

平台兼容性

可自定义指示点轮播图

开发文档

options

event

示例代码

页面部分

<template>
    <view class="ctn">
        <gy-swiper :imgList="imgList"  customizeDots :index="index"></gy-swiper>
        <gy-swiper :imgList="imgList" :dotsLayout="'flex-c-c'" customizeDots :index="index"></gy-swiper>
        <gy-swiper :imgList="imgList" :dotsLayout="'flex-v-c'" customizeDots :index="index" @fnChange="fnChange" @fnImg="fnImg"></gy-swiper>
        <gy-swiper :imgList="imgList" :vertical="true" customizeDots :index="index"></gy-swiper>
        <gy-swiper :imgList="imgList" :dotsType="'currentNum'" :vertical="true" customizeDots :index="index"></gy-swiper>
        <gy-swiper :imgList="imgList" :dotsType="'currentNum'"  :dotsLayout="'flex-v-c'" customizeDots :index="index"></gy-swiper>
        <gy-swiper :imgList="imgList" :dotsType="'currentNum'"  :dotsLayout="'flex-c-c'" customizeDots :index="index"></gy-swiper>
    </view>
</template>

js部分

<script setup>
    import {
        reactive,
        toRefs
    } from 'vue'
    import gySwiper from '@/uni_modules/gy-swiper/components/gy-swiper/gy-swiper'

    const data = reactive({
        imgList: [{
                id: 0,
                imgUrl: '/static/image/banner.png'
            },
            {
                id: 1,
                imgUrl: '/static/image/banner.png'
            },
            {
                id: 2,
                imgUrl: '/static/image/banner.png'
            },
            {
                id: 3,
                imgUrl: '/static/image/banner.png'
            }
        ],
        index: 1
    })
    const fnChange = e => {
        console.log(e)
        data.index = e.index
    }

    const fnImg = img => {
        console.log(img)
    }

    const {
        imgList,
        index
    } = toRefs(data)
</script>