更新记录

2.0.0（2023-07-29） 下载此版本

增加图片预览 长按保存图片

1.0.0（2023-06-25） 下载此版本

组件初始化

平台兼容性

cc-dotSwiper

使用方法

<!-- swiperList:轮播数组  imgField: 轮播图片字段  @click: 轮播图条目点击-->
<cc-dotSwiper :swiperList="bannerList" imgField="imgSrc"  @click="swiperItemClick"></cc-dotSwiper>

HTML代码实现部分

<template>
    <view class="content">

        <!-- swiperList:轮播数组  imgField: 轮播图片字段  @click: 轮播图条目点击-->
        <cc-dotSwiper :swiperList="bannerList" imgField="imgSrc"  @click="swiperItemClick"></cc-dotSwiper>

    </view>
</template>

<script>
    export default {

        data() {
            return {
                bannerList: [{"imgSrc":"https://cdn.pixabay.com/photo/2016/07/18/04/19/canton-1525284_1280.jpg"},
                {"imgSrc":"https://cdn.pixabay.com/photo/2022/04/27/12/30/switzerland-7160290_1280.jpg"},
                {"imgSrc":"https://cdn.pixabay.com/photo/2017/09/05/17/28/guangzhou-2718517_1280.jpg"}

                ]
            }
        },
        methods: {

            swiperItemClick(item) {

                console.log('点击轮播图条目 = ' + item);
                uni.showModal({
                    title:'点击轮播图条目',
                    content:'点击轮播图条目 = ' +  JSON.stringify(item)
                })
            }
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        background-color: aliceblue;
        height: 100vh;

    }
</style>