更新记录

1.0.0（2023-04-08） 下载此版本

简单的通用商城列表页面模板

平台兼容性

建议

按照使用方法,各个dom元素都加上100%

组件属性

组件事件

使用方法

<template>
    <view class="home">
        <yhdslShopList style="height: 100%;" :menuList="menuList" :goodsList="goodsList" :more="more" @add="add" @menuChange="menuChange" @getMore="getMore"></yhdslShopList>
    </view>
</template>
<script>
import yhdslShopList from '@/components/yhdsl-shopList/yhdsl-shopList.vue';
export default {
    data() {
        return {
            more: '加载中...',
            menuList: [
                {
                    id: 1,
                    name: '漫画书'
                },
                {
                    id: 2,
                    name: '科幻小说'
                },
                {
                    id: 3,
                    name: '名人传'
                }
            ],
            goodsList: [
                {
                    id: 1,
                    name: '西游记',
                    cover: 'https://web-assets.dcloud.net.cn/unidoc/zh/uni.png',
                    type: '玄幻',
                    time: '24小时发售',
                    new: 50,
                    old: 100,
                    unit: '本'
                },
                {
                    id: 2,
                    name: '三体',
                    cover: 'https://web-assets.dcloud.net.cn/unidoc/zh/uni.png',
                    type: '玄幻',
                    time: '24小时发售',
                    new: 50,
                    old: 100,
                    unit: '本'
                },
                {
                    id: 3,
                    name: '好好好好',
                    cover: 'https://web-assets.dcloud.net.cn/unidoc/zh/uni.png',
                    type: '玄幻',
                    time: '24小时发售',
                    new: 50,
                    old: 1000,
                    unit: '堆'
                },
                {
                    id: 1,
                    name: '西游记',
                    cover: 'https://web-assets.dcloud.net.cn/unidoc/zh/uni.png',
                    type: '玄幻',
                    time: '24小时发售',
                    new: 50,
                    old: 100,
                    unit: '本'
                },
                {
                    id: 2,
                    name: '三体',
                    cover: 'https://web-assets.dcloud.net.cn/unidoc/zh/uni.png',
                    type: '玄幻',
                    time: '24小时发售',
                    new: 50,
                    old: 100,
                    unit: '本'
                },
                {
                    id: 3,
                    name: '好好好好',
                    cover: 'https://web-assets.dcloud.net.cn/unidoc/zh/uni.png',
                    type: '玄幻',
                    time: '24小时发售',
                    new: 50,
                    old: 1000,
                    unit: '堆'
                },
                {
                    id: 1,
                    name: '西游记',
                    cover: 'https://web-assets.dcloud.net.cn/unidoc/zh/uni.png',
                    type: '玄幻',
                    time: '24小时发售',
                    new: 50,
                    old: 100,
                    unit: '本'
                },
                {
                    id: 2,
                    name: '三体',
                    cover: 'https://web-assets.dcloud.net.cn/unidoc/zh/uni.png',
                    type: '玄幻',
                    time: '24小时发售',
                    new: 50,
                    old: 100,
                    unit: '本'
                },
                {
                    id: 3,
                    name: '好好好好',
                    cover: 'https://web-assets.dcloud.net.cn/unidoc/zh/uni.png',
                    type: '玄幻',
                    time: '24小时发售',
                    new: 50,
                    old: 1000,
                    unit: '堆'
                }
            ]
        };
    },
    components: {
        yhdslShopList
    },
    methods: {
        menuChange(item) {
            console.log(item);
        },
        add(item) {
            console.log(item);
        },
        getMore() {
            console.log('触发加载更多事件');
        }
    }
};
</script>

<style>
page {
    height: 100%;
}
</style>

<style scoped lang="scss">
.home {
    height: 100%;
}
</style>