更新记录

1.0（2024-12-21） 下载此版本

初始上传插件

平台兼容性

Carousel v1.0.0

基于UniApp开发的带有详情介绍的轮播图

工具介绍

一款带有详情的轮播图，插件 点击详情轮播图会跟着变动，同时标题也会变动，颜色也可以设置，默认是黑色。

参数介绍

Carousel 采用uniapp技术，可实现根据需求设置自动轮播
signData: 轮播的参数；
autoPlay：是否自动播放；
marginLeft： 左边距；
marginRight：右边距；
circular： 播完后是否从头开始播放；
clickDetail： （Func）点击后需要执行的函数

使用方法

<template>
    <carousel :sign-data="signData" :click-detail="clickBanner" :margin-right="20" :margin-left="20"></carousel>
</template>

<script>
    import carousel from '../components/carousel/carousel.vue'

    export default {
        components: {
            carousel
        },
        data() {
            return {
                signData: [{
                        image: 'https://www.huyangnet.cn/pic/2024-07/16/1900545_78b8a249-d4fc-412b-b5b3-0552951dd967.jpg',
                        titleHead: "招牌",
                        titelHeadColor: 'red',
                        titleContent: "超级新鲜水果想怎么吃就怎么吃",
                        detail: {
                            imageUrl: "https://www.huyangnet.cn/pic/2024-07/16/1900545_78b8a249-d4fc-412b-b5b3-0552951dd967.jpg",
                            title: "现从地里摘的西瓜",
                            money: 29.98
                        }
                    },
                    {
                        image: 'https://q5.itc.cn/images01/20240113/7f9b7007910848d0bc31e210484671f6.jpeg',
                        titleHead: "招牌",
                        titelHeadColor: 'green',
                        titleContent: "超级新鲜水果想怎么吃就怎么吃",
                        detail: {
                            imageUrl: "https://q5.itc.cn/images01/20240113/7f9b7007910848d0bc31e210484671f6.jpeg",
                            title: "现从地里摘的南瓜",
                            money: 9.98
                        }
                    },
                    {
                        image: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01JVZzSo1ZyV5eik9MS_%21%2-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1736521007&t=e94e221f3d64e9b7af782959ab16bcec',
                        titleHead: "招牌",
                        titelHeadColor: 'blue',
                        titleContent: "超级新鲜水果想怎么吃就怎么吃",
                        detail: {
                            imageUrl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01JVZzSo1ZyV5eik9MS_%21%2-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1736521007&t=e94e221f3d64e9b7af782959ab16bcec",
                            title: "地里的哈密瓜",
                            money: 1.98
                        }
                    },
                    {
                        image: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01JVZzSo1ZyV5eik9MS_%21%2-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1736521007&t=e94e221f3d64e9b7af782959ab16bcec',
                        titleHead: "招牌",
                        titelHeadColor: '#F56C6C',
                        titleContent: "超级新鲜水果想怎么吃就怎么吃",
                        detail: {
                            imageUrl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01JVZzSo1ZyV5eik9MS_%21%2-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1736521007&t=e94e221f3d64e9b7af782959ab16bcec",
                            title: "地里的哈密瓜",
                            money: 8.88
                        }
                    },
                    {
                        image: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01JVZzSo1ZyV5eik9MS_%21%2-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1736521007&t=e94e221f3d64e9b7af782959ab16bcec',
                        titleHead: "招牌",
                        titelHeadColor: '#E6A23C',
                        titleContent: "超级新鲜水果想怎么吃就怎么吃",
                        detail: {
                            imageUrl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01JVZzSo1ZyV5eik9MS_%21%2-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1736521007&t=e94e221f3d64e9b7af782959ab16bcec",
                            title: "地里的哈密瓜",
                            money: 1
                        }
                    },
                    {
                        image: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01JVZzSo1ZyV5eik9MS_%21%2-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1736521007&t=e94e221f3d64e9b7af782959ab16bcec',
                        titleHead: "招牌",
                        titelHeadColor: '#67C23A',
                        titleContent: "超级新鲜水果想怎么吃就怎么吃",
                        detail: {
                            imageUrl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01JVZzSo1ZyV5eik9MS_%21%2-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1736521007&t=e94e221f3d64e9b7af782959ab16bcec",
                            title: "地里的哈密瓜",
                            money: 10
                        }
                    }
                ]
            }
        },
        methods: {
            clickBanner(item) {
                console.log("index-conso", item)
            }
        }
    }
</script>