更新记录

1.0.1（2024-06-07） 下载此版本

增加插槽自定义右侧内容

1.0.0（2024-06-06） 下载此版本

商品左右联动组件

平台兼容性

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

zh-scroll

商品分类左右联动

基本用法 （默认风格）

<template>
    <view class="content">
        <zh-scroll :scrollList="goods"></zh-scroll>
    </view>
</template>
<script setup lang="ts">
    import { onMounted, ref } from 'vue';
    // 换成zh-scroll.vue所在路径
    import zhScroll from '../../components/zh-scroll/zh-scroll.vue';
    import goodsList from "@/mock/good";
    import type { ICateItem } from '../../components/zh-scroll/interface';

    const goods = ref<ICateItem[]>();
    onMounted(() => {
        queryList().then(res => {
            goods.value = res as ICateItem[];
        })
    })

    function queryList() {
        return new Promise(resolve => {
            setTimeout(() => {
                resolve(goodsList);
            }, 400)
        })
    }
</script>

<style>
    .content {
        height: 100%;
    }
</style>

自定义内容

<template>
    <view class="content">
        <zh-scroll :scrollList="goods">
            <template #custom="{ data: cateItem }">
                <view class="title">
                    <text>{{ cateItem.name }}</text>
                    <image :src="cateItem.icon" class="icon"></image>
                </view>
                <view class="items">
                    <!-- 商品 begin -->
                    <view class="good" v-for="(good, key) in cateItem.goods_list" :key="key">
                            <image :src="good.images" class="image"></image>
                            <view class="right">
                                <text class="name">{{ good.name }}</text>
                                <text class="tips">{{ good.content }}</text>
                            </view>
                    </view>
                    <!-- 商品 end -->
                </view>
            </template>
        </zh-scroll>
    </view>
</template>

<script setup lang="ts">
    import { onMounted, ref } from 'vue';
    import zhScroll from '../../components/zh-scroll/zh-scroll.vue';
    import goodsList from "@/mock/good";
    import type { ICateItem } from '../../components/zh-scroll/interface';

    const goods = ref<ICateItem[]>([]);
    onMounted(() => {
        queryList().then(res => {
            goods.value = res as ICateItem[];
        })
    })

    function queryList() {
        return new Promise(resolve => {
            setTimeout(() => {
                resolve(goodsList);
            }, 400)
        })
    }
</script>

<style>
    .content {
        height: 100%;
    }
</style>

插槽

Name Description
custom 自定义右侧内容

数据类型展示

// zh-scroll/interface.ts
export interface ICateItem {
    id: number;
    name: string;
    icon: string;
    goods_list: IGood[];
    [key: string]: any;
}

export interface IGood {
    id: number;
    content: string;
    name: string;
    images: string;
    [key: string]: any;
}

mock数据 模拟接口请求

// mock/good.ts
export default [
    {
        "id": 6905,
        "goods_list": [
            {
                "id": 65825,
                "content": "享早餐指定饮品半价",
                "name": "晨间套餐",
                "images": "https://img-shop.qmimg.cn/s23107/2020/04/19/fda6dd99c83af02353.jpg?imageView2/2/w/400/h/400"
            }
        ],
        "icon": "https://img-shop.qmimg.cn/s23107/2019/04/30/458c5a14fb2f190f96.png?imageView2/0/w/200/h/200",
        "name": "早晨的享受"
    },
    {
        "id": 6906,
        "goods_list": [
            {
                "id": 65826,
                "content": "购买牛角包,享咖啡买一送一",
                "name": "午后小食",
                "images": "https://img-shop.qmimg.cn/s23107/2020/04/19/fda6dd99c83af02353.jpg?imageView2/2/w/400/h/400"
            },
            {
                "id": 65827,
                "content": "购买鸡蛋饼,享茶饮半价",
                "name": "中午套餐",
                "images": "https://img-shop.qmimg.cn/s23107/2020/04/19/fda6dd99c83af02353.jpg?imageView2/2/w/400/h/400"
            }
        ],
        "name": "午间时光"
    },
    {
        "id": 6907,
        "goods_list": [
            {
                "id": 65828,
                "content": "购买牛奶面包,享鲜榨果汁半价",
                "name": "早餐优惠",
                "images": "https://img-shop.qmimg.cn/s23107/2020/04/19/fda6dd99c83af02353.jpg?imageView2/2/w/400/h/400"
            },
            {
                "id": 65829,
                "content": "购买肉松面包,享水果奶昔半价",
                "name": "下午茶特惠",
                "images": "https://img-shop.qmimg.cn/s23107/2020/04/19/fda6dd99c83af02353.jpg?imageView2/2/w/400/h/400"
            },
            {
                "id": 65830,
                "content": "购买鸡蛋卷,享酸奶半价",
                "name": "晚间美食",
                "images": "https://img-shop.qmimg.cn/s23107/2020/04/19/fda6dd99c83af02353.jpg?imageView2/2/w/400/h/400"
            }
        ],
        "name": "欢乐时光"
    },
    {
        "id": 6908,
        "goods_list": [
            {
                "id": 65831,
                "content": "购买燕麦粥,享热饮买一送一",
                "name": "清晨套餐",
                "images": "https://img-shop.qmimg.cn/s23107/2020/04/19/fda6dd99c83af02353.jpg?imageView2/2/w/400/h/400"
            }
        ],
        "name": "幸福早餐"
    },
    {
        "id": 6909,
        "goods_list": [
            {
                "id": 65832,
                "content": "购买果酱吐司,享咖啡买一送一",
                "name": "午餐精选",
                "images": "https://img-shop.qmimg.cn/s23107/2020/04/19/fda6dd99c83af02353.jpg?imageView2/2/w/400/h/400"
            },
            {
                "id": 65833,
                "content": "购买牛角包,享热巧克力半价",
                "name": "下午茶时光",
                "images": "https://img-shop.qmimg.cn/s23107/2020/04/19/fda6dd99c83af02353.jpg?imageView2/2/w/400/h/400"
            }
        ],
        "name": "愉快午餐"
    },
    {
        "id": 6910,
        "goods_list": [
            {
                "id": 65834,
                "content": "购买牛奶面包,享咖啡买一送一",
                "name": "美好早餐",
                "images": "https://img-shop.qmimg.cn/s23107/2020/04/19/fda6dd99c83af02353.jpg?imageView2/2/w/400/h/400"
            },
            {
                "id": 65835,
                "content": "购买鸡蛋卷,享豆浆加量不加价",
                "name": "美味早晨",
                "images": "https://img-shop.qmimg.cn/s23107/2020/04/19/fda6dd99c83af02353.jpg?imageView2/2/w/400/h/400"
            },
            {
                "id": 65836,
                "content": "购买酸奶杯,享鲜榨果汁半价",
                "name": "愉快下午",
                "images": "https://img-shop.qmimg.cn/s23107/2020/04/19/fda6dd99c83af02353.jpg?imageView2/2/w/400/h/400"
            },
            {
                "id": 65837,
                "content": "购买鸡肉卷,享水果奶昔半价",
                "name": "健康午餐",
                "images": "https://img-shop.qmimg.cn/s23107/2020/04/19/fda6dd99c83af02353.jpg?imageView2/2/w/400/h/400"
            }
        ],
        "name": "欢乐午后"
    },
    {
        "id": 6911,
        "goods_list": [
            {
                "id": 65838,
                "content": "购买燕麦粥,享酸奶半价",
                "name": "健康早餐",
                "images": "https://img-shop.qmimg.cn/s23107/2020/04/19/fda6dd99c83af02353.jpg?imageView2/2/w/400/h/400"
            },
            {
                "id": 65839,
                "content": "购买豆浆油条,享热饮买一送一",
                "name": "经典早晨",
                "images": "https://img-shop.qmimg.cn/s23107/2020/04/19/fda6dd99c83af02353.jpg?imageView2/2/w/400/h/400"
            }
        ],
        "name": "阳光早餐"
    },
    {
        "id": 6912,
        "goods_list": [
            {
                "id": 65840,
                "content": "购买三明治,享水果奶昔半价",
                "name": "舒适午后",
                "images": "https://img-shop.qmimg.cn/s23107/2020/04/19/fda6dd99c83af02353.jpg?imageView2/2/w/400/h/400"
            },
            {
                "id": 65841,
                "content": "购买肉松面包,享奶茶半价",
                "name": "下午茶优惠",
                "images": "https://img-shop.qmimg.cn/s23107/2020/04/19/fda6dd99c83af02353.jpg?imageView2/2/w/400/h/400"
            }
        ],
        "name": "午后悠闲"
    },
    {
        "id": 6913,
        "goods_list": [
            {
                "id": 65842,
                "content": "购买花生酱面包,享奶茶半价",
                "name": "下午茶特惠",
                "images": "https://img-shop.qmimg.cn/s23107/2020/04/19/fda6dd99c83af02353.jpg?imageView2/2/w/400/h/400"
            }
        ],
        "name": "茶歇时光"
    },
    {
        "id": 6914,
        "goods_list": [
            {
                "id": 65843,
                "content": "购买全麦面包,享水果茶半价",
                "name": "活力早餐",
                "images": "https://img-shop.qmimg.cn/s23107/2020/04/19/fda6dd99c83af02353.jpg?imageView2/2/w/400/h/400"
            },
            {
                "id": 65844,
                "content": "购买鸡蛋饼,享橙汁半价",
                "name": "早安时光",
                "images": "https://img-shop.qmimg.cn/s23107/2020/04/19/fda6dd99c83af02353.jpg?imageView2/2/w/400/h/400"
            }
        ],
        "name": "晨间时光"
    }
]

隐私、权限声明

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

无

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

无，全是静态模拟数据

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

无

许可协议

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

暂无用户评论。

插件问答 我要提问

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

加载更多...