更新记录

2.0.0(2023-07-29)

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

1.0.0(2023-06-25)

组件初始化


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.8.0 app-vue app-nvue
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

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>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问