更新记录

1.0.0（2025-06-05） 下载此版本

自己写的首个商品列表gird布局组件

平台兼容性

uni-app(4.66)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
- √ 137.0.7151.55（正式版本） - - - - - -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
2。25。4 - - - - - - - - - -

uni-app x(4.66)

Chrome Safari Android iOS 鸿蒙 微信小程序
- - - - - -

amw-product-list

功能介绍：商品列表，咖啡,grid布局，商品图片展示，商品卡片容器

使用举例

<template>
    <view class="coffee">
        <Product-list :products1="products1" :products2="products2"></Product-list>
    </view>
</template>

<script setup>
    import {
        ref
    } from "vue";
    const products1 = ref([{

            eventInfo: '抽1618人免单! 每人至高¥2000元',
            desc: 'coffee即溶咖啡2.3g加量装太空杯 醇香浓缩咖啡液 32杯FD航天冻干科技 锁住咖...',
            discounts: ['首购立减5元', '限时立减', '赠品'],
            originalPrice: 99,
            actualPrice: 66,
            soldCount: 449700,
            limitCount: 6,
            url: 'https://bj.bcebos.com/bjh-pixel/1698299987844636725_0_ainote_new.jpg'
        },
        {

            eventInfo: '抽1618人免单! 每人至高¥2000元',
            desc: '【赞萌露比联名活动】醇香浓缩咖啡液 32杯醇香浓缩咖啡液 32杯/盒coffee',
            discounts: ['首购立减5元', '限时立减', '赠品'],
            originalPrice: 99,
            actualPrice: 66,
            soldCount: 19500,
            limitCount: 6,
            url: 'https://bj.bcebos.com/bjh-pixel/1698299987844636725_0_ainote_new.jpg'
        },
        {

            eventInfo: '抽1618人免单! 每人至高¥2000元',
            desc: '【赞萌露比联名活动】醇香浓缩咖啡液 32杯醇香浓缩咖啡液 32杯/盒coffee',
            discounts: ['首购立减5元', '限时立减', '赠品'],
            originalPrice: 99,
            actualPrice: 66,
            soldCount: 19500,
            limitCount: 6,
            url: 'https://bj.bcebos.com/bjh-pixel/1698299987844636725_0_ainote_new.jpg'
        },
        {

            eventInfo: '抽1618人免单! 每人至高¥2000元',
            desc: '【赞萌露比联名活动】醇香浓缩咖啡液 32杯醇香浓缩咖啡液 32杯/盒coffee',
            discounts: ['首购立减5元', '限时立减', '赠品'],
            originalPrice: 99,
            actualPrice: 66,
            soldCount: 19500,
            limitCount: 6,
            url: 'https://bj.bcebos.com/bjh-pixel/1698299987844636725_0_ainote_new.jpg'
        },
        {

            eventInfo: '抽1618人免单! 每人至高¥2000元',
            desc: '【赞萌露比联名活动】醇香浓缩咖啡液 32杯醇香浓缩咖啡液 32杯/盒coffee',
            discounts: ['首购立减5元', '限时立减', '赠品'],
            originalPrice: 99,
            actualPrice: 66,
            soldCount: 19500,
            limitCount: 6,
            url: 'https://bj.bcebos.com/bjh-pixel/1698299987844636725_0_ainote_new.jpg'
        },
        {

            eventInfo: '抽1618人免单! 每人至高¥2000元',
            desc: '【赞萌露比联名活动】醇香浓缩咖啡液 32杯醇香浓缩咖啡液 32杯/盒coffee',
            discounts: ['首购立减5元', '限时立减', '赠品'],
            originalPrice: 99,
            actualPrice: 66,
            soldCount: 19500,
            limitCount: 6,
            url: 'https://bj.bcebos.com/bjh-pixel/1698299987844636725_0_ainote_new.jpg'
        },
        {

            eventInfo: '抽1618人免单! 每人至高¥2000元',
            desc: '【赞萌露比联名活动】醇香浓缩咖啡液 32杯醇香浓缩咖啡液 32杯/盒coffee',
            discounts: ['首购立减5元', '限时立减', '赠品'],
            originalPrice: 99,
            actualPrice: 66,
            soldCount: 19500,
            limitCount: 6,
            url: 'https://bj.bcebos.com/bjh-pixel/1698299987844636725_0_ainote_new.jpg'
        }
    ]);

    const products2 = ref([{

            eventInfo: '抽1618人免单! 每人至高¥2000元',
            desc: 'coffee即溶咖啡2.3g加量装太空杯 醇香浓缩咖啡液 32杯FD航天冻干科技 锁住咖...',
            discounts: ['首购立减5元', '限时立减', '赠品'],
            originalPrice: 88,
            actualPrice: 55,
            soldCount: 449700,
            limitCount: 6,
            url: 'https://img1.baidu.com/it/u=1700363659,2273297361&fm=253&fmt=auto&app=138&f=JPEG?w=598&h=500'
        },
        {

            eventInfo: '抽1618人免单! 每人至高¥2000元',
            desc: '【赞萌露比联名活动】醇香浓缩咖啡液 32杯醇香浓缩咖啡液 32杯/盒coffee',
            discounts: ['首购立减5元', '限时立减', '赠品'],
            originalPrice: 88,
            actualPrice: 55,
            soldCount: 19500,
            limitCount: 6,
            url: 'https://img1.baidu.com/it/u=1700363659,2273297361&fm=253&fmt=auto&app=138&f=JPEG?w=598&h=500'
        },
        {

            eventInfo: '抽1618人免单! 每人至高¥2000元',
            desc: '【赞萌露比联名活动】醇香浓缩咖啡液 32杯醇香浓缩咖啡液 32杯/盒coffee',
            discounts: ['首购立减5元', '限时立减', '赠品'],
            originalPrice: 88,
            actualPrice: 55,
            soldCount: 19500,
            limitCount: 6,
            url: 'https://img1.baidu.com/it/u=1700363659,2273297361&fm=253&fmt=auto&app=138&f=JPEG?w=598&h=500'
        },
        {

            eventInfo: '抽1618人免单! 每人至高¥2000元',
            desc: '【赞萌露比联名活动】醇香浓缩咖啡液 32杯醇香浓缩咖啡液 32杯/盒coffee',
            discounts: ['首购立减5元', '限时立减', '赠品'],
            originalPrice: 88,
            actualPrice: 55,
            soldCount: 19500,
            limitCount: 6,
            url: 'https://img1.baidu.com/it/u=1700363659,2273297361&fm=253&fmt=auto&app=138&f=JPEG?w=598&h=500'
        },
        {

            eventInfo: '抽1618人免单! 每人至高¥2000元',
            desc: '【赞萌露比联名活动】醇香浓缩咖啡液 32杯醇香浓缩咖啡液 32杯/盒coffee',
            discounts: ['首购立减5元', '限时立减', '赠品'],
            originalPrice: 88,
            actualPrice: 55,
            soldCount: 19500,
            limitCount: 6,
            url: 'https://img1.baidu.com/it/u=1700363659,2273297361&fm=253&fmt=auto&app=138&f=JPEG?w=598&h=500'
        },
        {

            eventInfo: '抽1618人免单! 每人至高¥2000元',
            desc: '【赞萌露比联名活动】醇香浓缩咖啡液 32杯醇香浓缩咖啡液 32杯/盒coffee',
            discounts: ['首购立减5元', '限时立减', '赠品'],
            originalPrice: 88,
            actualPrice: 55,
            soldCount: 19500,
            limitCount: 6,
            url: 'https://img1.baidu.com/it/u=1700363659,2273297361&fm=253&fmt=auto&app=138&f=JPEG?w=598&h=500'
        },
        {

            eventInfo: '抽1618人免单! 每人至高¥2000元',
            desc: '【赞萌露比联名活动】醇香浓缩咖啡液 32杯醇香浓缩咖啡液 32杯/盒coffee',
            discounts: ['首购立减5元', '限时立减', '赠品'],
            originalPrice: 88,
            actualPrice: 55,
            soldCount: 19500,
            limitCount: 6,
            url: 'https://img1.baidu.com/it/u=1700363659,2273297361&fm=253&fmt=auto&app=138&f=JPEG?w=598&h=500'
        }
    ]);
</script>

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

参数:

名称 类型 说明
products1 object[] 商品数据

插槽 Slots:

名称 说明
header 是否显示顶部的切换

scrollList数据类型

    const products1 = ref([{

            eventInfo: '抽1618人免单! 每人至高¥2000元',
            desc: 'coffee即溶咖啡2.3g加量装太空杯 醇香浓缩咖啡液 32杯FD航天冻干科技 锁住咖...',
            discounts: ['首购立减5元', '限时立减', '赠品'],
            originalPrice: 99,
            actualPrice: 66,
            soldCount: 449700,
            limitCount: 6,
            url: 'https://bj.bcebos.com/bjh-pixel/1698299987844636725_0_ainote_new.jpg'
        },
        {

            eventInfo: '抽1618人免单! 每人至高¥2000元',
            desc: '【赞萌露比联名活动】醇香浓缩咖啡液 32杯醇香浓缩咖啡液 32杯/盒coffee',
            discounts: ['首购立减5元', '限时立减', '赠品'],
            originalPrice: 99,
            actualPrice: 66,
            soldCount: 19500,
            limitCount: 6,
            url: 'https://bj.bcebos.com/bjh-pixel/1698299987844636725_0_ainote_new.jpg'
        },
        {

            eventInfo: '抽1618人免单! 每人至高¥2000元',
            desc: '【赞萌露比联名活动】醇香浓缩咖啡液 32杯醇香浓缩咖啡液 32杯/盒coffee',
            discounts: ['首购立减5元', '限时立减', '赠品'],
            originalPrice: 99,
            actualPrice: 66,
            soldCount: 19500,
            limitCount: 6,
            url: 'https://bj.bcebos.com/bjh-pixel/1698299987844636725_0_ainote_new.jpg'
        },
        {

            eventInfo: '抽1618人免单! 每人至高¥2000元',
            desc: '【赞萌露比联名活动】醇香浓缩咖啡液 32杯醇香浓缩咖啡液 32杯/盒coffee',
            discounts: ['首购立减5元', '限时立减', '赠品'],
            originalPrice: 99,
            actualPrice: 66,
            soldCount: 19500,
            limitCount: 6,
            url: 'https://bj.bcebos.com/bjh-pixel/1698299987844636725_0_ainote_new.jpg'
        },
        {

            eventInfo: '抽1618人免单! 每人至高¥2000元',
            desc: '【赞萌露比联名活动】醇香浓缩咖啡液 32杯醇香浓缩咖啡液 32杯/盒coffee',
            discounts: ['首购立减5元', '限时立减', '赠品'],
            originalPrice: 99,
            actualPrice: 66,
            soldCount: 19500,
            limitCount: 6,
            url: 'https://bj.bcebos.com/bjh-pixel/1698299987844636725_0_ainote_new.jpg'
        },
        {

            eventInfo: '抽1618人免单! 每人至高¥2000元',
            desc: '【赞萌露比联名活动】醇香浓缩咖啡液 32杯醇香浓缩咖啡液 32杯/盒coffee',
            discounts: ['首购立减5元', '限时立减', '赠品'],
            originalPrice: 99,
            actualPrice: 66,
            soldCount: 19500,
            limitCount: 6,
            url: 'https://bj.bcebos.com/bjh-pixel/1698299987844636725_0_ainote_new.jpg'
        },
        {

            eventInfo: '抽1618人免单! 每人至高¥2000元',
            desc: '【赞萌露比联名活动】醇香浓缩咖啡液 32杯醇香浓缩咖啡液 32杯/盒coffee',
            discounts: ['首购立减5元', '限时立减', '赠品'],
            originalPrice: 99,
            actualPrice: 66,
            soldCount: 19500,
            limitCount: 6,
            url: 'https://bj.bcebos.com/bjh-pixel/1698299987844636725_0_ainote_new.jpg'
        }
    ]);

    const products2 = ref([{

            eventInfo: '抽1618人免单! 每人至高¥2000元',
            desc: 'coffee即溶咖啡2.3g加量装太空杯 醇香浓缩咖啡液 32杯FD航天冻干科技 锁住咖...',
            discounts: ['首购立减5元', '限时立减', '赠品'],
            originalPrice: 88,
            actualPrice: 55,
            soldCount: 449700,
            limitCount: 6,
            url: 'https://img1.baidu.com/it/u=1700363659,2273297361&fm=253&fmt=auto&app=138&f=JPEG?w=598&h=500'
        },
        {

            eventInfo: '抽1618人免单! 每人至高¥2000元',
            desc: '【赞萌露比联名活动】醇香浓缩咖啡液 32杯醇香浓缩咖啡液 32杯/盒coffee',
            discounts: ['首购立减5元', '限时立减', '赠品'],
            originalPrice: 88,
            actualPrice: 55,
            soldCount: 19500,
            limitCount: 6,
            url: 'https://img1.baidu.com/it/u=1700363659,2273297361&fm=253&fmt=auto&app=138&f=JPEG?w=598&h=500'
        },
        {

            eventInfo: '抽1618人免单! 每人至高¥2000元',
            desc: '【赞萌露比联名活动】醇香浓缩咖啡液 32杯醇香浓缩咖啡液 32杯/盒coffee',
            discounts: ['首购立减5元', '限时立减', '赠品'],
            originalPrice: 88,
            actualPrice: 55,
            soldCount: 19500,
            limitCount: 6,
            url: 'https://img1.baidu.com/it/u=1700363659,2273297361&fm=253&fmt=auto&app=138&f=JPEG?w=598&h=500'
        },
        {

            eventInfo: '抽1618人免单! 每人至高¥2000元',
            desc: '【赞萌露比联名活动】醇香浓缩咖啡液 32杯醇香浓缩咖啡液 32杯/盒coffee',
            discounts: ['首购立减5元', '限时立减', '赠品'],
            originalPrice: 88,
            actualPrice: 55,
            soldCount: 19500,
            limitCount: 6,
            url: 'https://img1.baidu.com/it/u=1700363659,2273297361&fm=253&fmt=auto&app=138&f=JPEG?w=598&h=500'
        },
        {

            eventInfo: '抽1618人免单! 每人至高¥2000元',
            desc: '【赞萌露比联名活动】醇香浓缩咖啡液 32杯醇香浓缩咖啡液 32杯/盒coffee',
            discounts: ['首购立减5元', '限时立减', '赠品'],
            originalPrice: 88,
            actualPrice: 55,
            soldCount: 19500,
            limitCount: 6,
            url: 'https://img1.baidu.com/it/u=1700363659,2273297361&fm=253&fmt=auto&app=138&f=JPEG?w=598&h=500'
        },
        {

            eventInfo: '抽1618人免单! 每人至高¥2000元',
            desc: '【赞萌露比联名活动】醇香浓缩咖啡液 32杯醇香浓缩咖啡液 32杯/盒coffee',
            discounts: ['首购立减5元', '限时立减', '赠品'],
            originalPrice: 88,
            actualPrice: 55,
            soldCount: 19500,
            limitCount: 6,
            url: 'https://img1.baidu.com/it/u=1700363659,2273297361&fm=253&fmt=auto&app=138&f=JPEG?w=598&h=500'
        },
        {

            eventInfo: '抽1618人免单! 每人至高¥2000元',
            desc: '【赞萌露比联名活动】醇香浓缩咖啡液 32杯醇香浓缩咖啡液 32杯/盒coffee',
            discounts: ['首购立减5元', '限时立减', '赠品'],
            originalPrice: 88,
            actualPrice: 55,
            soldCount: 19500,
            limitCount: 6,
            url: 'https://img1.baidu.com/it/u=1700363659,2273297361&fm=253&fmt=auto&app=138&f=JPEG?w=598&h=500'
        }
    ]);

隐私、权限声明

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

无

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

无

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

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉

暂无用户评论。

插件问答 我要提问

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

加载更多...