kevy-swiper

<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" />
    </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://shopimg.jetour.com.cn//cms/20230310/1678430865438.jpg',
			    'https://shopimg.jetour.com.cn//cms/20230311/1678499552265.png',
			    'https://shopimg.jetour.com.cn//cms/20230304/1677917344334.jpg', 
			    'https://shopimg.jetour.com.cn//cms/20230304/1677913372338.jpg',
			    'https://shopimg.jetour.com.cn//cms/20230217/1676613436640.jpg',
			    'https://shopimg.jetour.com.cn//cms/20230209/1675909568212.jpg'
			];
			//下面是图片说明列表，需要和上面下标对应
			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>