更新记录

1.3.0（2023-03-23）

1.部分代码优化； 2.新增图片显示数量参数showNum，支持设置为3个或5个，默认为3个，list列表少于5个时自动设为3个。

1.2.2（2023-03-18）

1.部分代码性能优化； 2.新增listDesc字段，图片说明文字。

平台兼容性

kevy-swiper

介绍

轮播图插件，最多只显示3个，其余在循环切换时显示，具有3d切换效果，支持自动播放和设置时间间隔，切换后返回当前下标，默认监听左右滑动进行切换，想要上下滑动的话可以在插件里上下滑动的事件里写自己的逻辑。

软件架构

uniapp框架插件，欢迎下载使用。

方法和属性

使用说明

<template>
    <view class="t-content">
        <kevy-swiper v-if="list && list.length>0" @click="swClick" @change="swChange" :autoPlay="true" :autoPlayInterval="5000" :list="list" :listDesc="listDesc" :height="500" :showNum="3" />
    </view>
</template>

<script>
    import kevySwiper from '@/components/kevy-swiper/kevy-swiper'
    export default {
        components: {
            kevySwiper
        },
        data() {
            return {
                //图片url列表
                list: [],
                //每个图片的说明文字列表，与list顺序一致，不传则不显示说明文字（即仅图片）
                listDesc:[],
            }
        },
        onLoad(){
            //请求数据
            //这里模拟请求到了这个list
            let list = ['https://www.changan.com.cn/uploads/chan_newsthumb/330513479a6459781f00398815b9906a.jpg',
                'https://www.changan.com.cn/uploads/chan_newsthumb/e1b488d041b576ba6ce1cc20a6cb81a3.jpg',
                'https://www.changan.com.cn/uploads/chan_newsthumb/40e7cb2bf37e1123b5e4547b094192c3.jpg', 
                'https://www.changan.com.cn/uploads/chan_newsthumb/f60d441c589563b0ece918853194f6e9.jpg',
                'https://www.changan.com.cn/uploads/chan_newsthumb/cd4353d0d1322c6f085b1bb0ecf2c835.jpg',
                'https://www.changan.com.cn/uploads/chan_newsthumb/cd4353d0d1322c6f085b1bb0ecf2c835.jpg'
            ];
            //下面是图片说明列表，需要和上面list下标对应
            let listDesc = ['我是第一个图片的说明文字','我是第二个图片的说明文字，我有点长省略号出现','我是第三个图片的说明文字','我是第四个图片的说明文字','我是第五个图片的说明文字','我是第六个图片的说明文字'];
            this.list = list;
            this.listDesc = listDesc;
        },
        methods: {
            //当点击图片时返回图片下标，用于跳转之类业务
            swClick(idx) {
                console.log("当前点击的图片下标为："+idx)
            },
            //当切换后返回当前下标
            swChange(idx){
                console.log("当前中间图片的下标为："+idx)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .t-content {
        background-color: #f7f7f7;
        min-height: 100vh;
    }
</style>