更新记录

1.0.2（2023-05-12） 下载此版本

代码优化。

1.0.1（2023-05-12） 下载此版本

• 一款支持背景滑块式移动特效切换的轮播图swiper指示器组件，欢迎下载使用。

平台兼容性

uni-app

其他

kevy-swiper-dot

介绍

这是一个全端通用的轮播图指示器组件，特点是背景滑块式移动特效切换，提高应用层次感必备。

• 插件含全部源码，可以给您无限实现可能，随心所欲自定义你的功能；
• 符合uni_modules和easycom规范，直接导入即可通过标签引入使用。

祝您使用愉快，本插件会长期维护更新，开源不易，如果本插件对您有帮助的话请及时点个好评吧或者赞赏一下，总之谢谢您的鼓励啦。

方法和属性

使用方式

插件详情页点击导入hbuilder即可。插件符合uni_modules和easycom规范，导入后可直接在页面通过标签引用。

代码使用示例

<template>
    <view>
        <kevy-swiper-dot :total="total" :current="current" @click="myClick" selected-background-color="linear-gradient(to bottom, #92ffc0, #002661)" background-color="rgba(0, 0, 0, 0.4)">
            <swiper class="swiper" :circular="true"  :autoplay="autoPlay" @change="change" :current="current">
                            <swiper-item class="item" v-for="(item,index) in list" :key="index">
                                <image :src="item"></image>
                            </swiper-item>
                        </swiper>
        </kevy-swiper-dot>
    </view>
</template>

<script>
    var list = [
        "https://www.changan.com.cn/uploads/chan_newsthumb/816c24592a127e922a4d6142a23f84c9.jpg",
        "https://www.changan.com.cn/uploads/chan_newsthumb/54f9edc256c247efbab3399b0ee55e7e.jpg",
        "https://www.changan.com.cn/uploads/chan_newsthumb/330513479a6459781f00398815b9906a.jpg",
        "https://www.changan.com.cn/uploads/chan_newsthumb/e1b488d041b576ba6ce1cc20a6cb81a3.jpg"
    ];
    export default {
        data() {
            return {
                list: list,
                current: 0,
                total: list.length,
                autoPlay:true,
            }
        },
        methods: {
            change(e){
                this.current = e.detail.current;
            },
            //点击指示点，返回点击的下标
            myClick(e){
                console.log("点击的指示点下标为："+e.index);
                //这里点击指示点切换到指定item
                this.autoPlay = false;
                this.current = e.index;
                this.$nextTick(() => {
                    this.autoPlay = true;
                })
            }

        }
    }
</script>

<style lang="scss" scoped>
    .swiper {
        width: 100%;
        height: 420rpx;
        .item{
            width: 100%;
            height: 100%;
        }
        image{
            width: 100%;
            height: 100%;
        }
    }
</style>