更新记录

1.0.0（2024-01-08） 下载此版本

2024-01-08 项目初始化

平台兼容性

jerry-banner

Description

模仿奈雪一款好看banner组件

使用方法

<jerry-banner :imgList="bannerList"></jerry-banner>

vue 文件

<template>
    <view class="container">
        <view class="banner">
            <jerry-banner :imgList="bannerList"></jerry-banner>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                bannerList: [{
                        "image": "https://trade-marketing-prod-oss.pin-dao.cn/product/1704211685315.png",
                        "fileType": 1,
                        "floorImage": "https://trade-marketing-prod-oss.pin-dao.cn/product/1704211687589.png",
                        "name": "阿胶奶茶",
                        "route": "nayuki://pindao.cn/shopMenu/shopMenu?groupId=40335"
                    }

                    ,
                    {
                        "image": "https://trade-marketing-prod-oss.pin-dao.cn/product/1703728667971.png",
                        "fileType": 1,
                        "floorImage": "https://trade-marketing-prod-oss.pin-dao.cn/product/1703728670590.png",
                        "name": "年报",
                        "route": "nayuki://pindao.cn/annualReport/index/index?ari=419&cnc=CESg8779aH7"
                    }

                    ,
                    {
                        "image": "https://trade-marketing-prod-oss.pin-dao.cn/product/1703604583350.png",
                        "fileType": 1,
                        "floorImage": "https://trade-marketing-prod-oss.pin-dao.cn/product/1703604585521.png",
                        "name": "霸气车厘子",
                        "route": "nayuki://pindao.cn/shopMenu/shopMenu?groupId=40332"
                    }

                    ,
                    {
                        "image": "https://trade-marketing-prod-oss.pin-dao.cn/product/1702998538046.png",
                        "fileType": 1,
                        "floorImage": "https://trade-marketing-prod-oss.pin-dao.cn/product/1702998539698.png",
                        "name": "超厚芋泥",
                        "route": "nayuki://pindao.cn/shopMenu/shopMenu?groupId=40328"
                    }

                    ,
                    {
                        "image": "https://trade-marketing-prod-oss.pin-dao.cn/product/1702636984635.png",
                        "fileType": 1,
                        "floorImage": "https://trade-marketing-prod-oss.pin-dao.cn/product/1702636986446.png",
                        "name": "八香主k",
                        "route": "nayuki://pindao.cn/shopMenu/shopMenu?groupId=40307"
                    }

                    ,
                    {
                        "image": "https://trade-marketing-prod-oss.pin-dao.cn/product/1694428645178.png",
                        "fileType": 1,
                        "floorImage": "https://trade-marketing-prod-oss.pin-dao.cn/product/1694428648907.png",
                        "name": "周一免配日",
                        "route": "nayuki://pindao.cn/shopMenu/shopMenu?cnc=CESr5QL3aY8"
                    }

                    ,
                    {
                        "image": "https://trade-marketing-prod-oss.pin-dao.cn/product/1704357922534.png",
                        "fileType": 1,
                        "floorImage": "https://trade-marketing-prod-oss.pin-dao.cn/product/1704357927974.png",
                        "name": "储值有礼",
                        "route": "nayuki://pindao.cn/userCenter/memberRecharge?cnc=CESFIN4KaMP"
                    }

                    ,
                    {
                        "image": "https://trade-marketing-prod-oss.pin-dao.cn/product/1704373238984.png",
                        "fileType": 1,
                        "floorImage": "https://trade-marketing-prod-oss.pin-dao.cn/product/1704373242613.png",
                        "name": "全国社群入群礼",
                        "route": "https://wxh5.icc.link/lbs/?id=1742846572695326722&unique=e2a185aa25c1183c#/?icc=1"
                    }

                ]
            }
        },
        onLoad() {

        },
        methods: {

        }
    }
</script>

<style>
    .banner {
        position: relative;
        width: 100%;
        height: 600rpx;
    }
</style>