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

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>