更新记录

2.0.1（2023-07-29）

增加图片预览长按保存

2.0.0（2023-06-21）

组件优化

1.0（2023-06-01）

组件初始化

平台兼容性

cc-swiperBanner

使用方法

<!-- interval:轮播间隔时间  imgList: 轮播图数组  @click:轮播图点击事件-->
<cc-swiperBanner interval="2000" :imgList="myImgList" @click="goImgClick"></cc-swiperBanner>

HTML代码实现部分

<template>
    <view class="content">

        <!-- interval:轮播间隔时间  imgList: 轮播图数组  @click:轮播图点击事件-->
        <cc-swiperBanner interval="2000" :imgList="myImgList" @click="goImgClick"></cc-swiperBanner>

    </view>
</template>

<script>
    export default {

        data() {
            return {

                myImgList: []
            }
        },
        mounted() {

            this.myImgList = [{
                    'name': '图片1',
                    'imgUrl': 'https://cdn.pixabay.com/photo/2016/08/15/14/33/rock-towers-1595571_1280.jpg'
                },
                {
                    'name': '图片2',
                    'imgUrl': 'https://cdn.pixabay.com/photo/2023/05/07/12/14/beetle-7976249_1280.jpg',

                },
                {
                    'name': '图片3',
                    'imgUrl': 'https://cdn.pixabay.com/photo/2019/12/19/16/48/canton-4706569_1280.jpg',

                },
                {
                    'name': '图片4',
                    'imgUrl': 'https://cdn.pixabay.com/photo/2022/04/27/12/30/switzerland-7160290_1280.jpg'
                }
            ]
        },
        methods: {

            goImgClick(item) {

                uni.showModal({
                    title: '温馨提示',
                    content: '点击图片带的数据= ' + JSON.stringify(item)
                })
            }
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
</style>