uniapp 学习笔记十三商品列表数据渲染

古城微笑少年丶 2024-04-08 13:20 83阅读 0赞

uniapp 学习笔记十三 商品列表数据渲染

![720e9ac632e4474c801c289462d2c147.png][]

goods-item.vue

<template>
        <view class="cake-item">
            <image class="poster" :src="gdata.img" mode=""></image>
            <view class="info-cont">
                <view class="info flex align-center justify-between">
                    <view class="">
                        <view class="fs-28">
                            {
       {gdata.name}}
                        </view>
                        <view class="fs-16">
                            {
       {gdata.french}}
                        </view>
                    </view>
                    <view class="cart-btn margin-right-sm">
                        <text class="iconfont icon-caigou"></text>
                    </view>
                    
                </view>
                <view class="fs-18">
                    <text class="fs-14">Y</text>
                    {
       {gdata.price}}
                </view>
                
            </view>
        </view>
        
    </template>
    
    <script>
        export default {
            name:"goods-item",
            props:['gdata'],
            data() {
                return {
                    
                };
            }
        }
    </script>
    
    <style lang="scss">
    .cake-item{
        width: 350upx;
        .poster{
            height: 350upx;
            background-color: #f5f5f5;
        }
        .fs-28{
            font-size: 28upx;
            margin-top: 24upx;
        }
        .fs-16{
            font-size: 16upx;
            margin: 14upx 0;
        }
        .fs-18{
            font-size: 18upx;
            margin-bottom: 22upx;
        }
        .cart-btn{
            width: 60upx;
            height: 60upx;
            border-radius: 50%;
            background-color: #ffe32a;
            text-align: center;
            line-height: 60upx;
        }
    }
    
    </style>

cake.vue

<template>
            <view>
                <view class="flex justify-between padding">
                    <view class="">
                        猫屎咖啡
                    </view>
                    <view class="">
                        牛奶拿铁
                    </view>
                </view>
                
                <view class="cont">
                    <good-item v-for="(item,index) in glist" :gdata="item"></good-item>
                </view>
                
            </view>
        </template>
    
        <script>
            export default {
                data() {
                    return {
                        glist:[]
                    }
                },
                methods: {
                    handleDetail(idx){
                        console.log(idx);
                            uni.navigateTo({
                                url:'../detail/detail?idx='+idx
                            })
                    },
                },
                onLoad() {
                    this.$get('/1.1/classes/goods').then(res=>{
                        console.log(res);
                        this.glist = res.results
                    })
                }
            }
        </script>
    
        <style lang="scss">
        .cont{
            display: flex;
            flex-wrap: wrap;
            padding: 15upx;
            justify-content: space-between;
        }
    
        </style>

[720e9ac632e4474c801c289462d2c147.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/3a5135a9cf3c48bbb239828fb62929ee.png