uni-app渲染商品列表

<template>
    <view class="page">
        <view class="uni-product-list">
            <view class="uni-product" v-for="(item,index) in productList" :key="index">
                <view class="image-view">
                    <image v-if="renderImage" class="uni-product-image" :src="item.image"></image>
                </view>
                <view class="uni-product-title">{{item.title}}</view>
                <view class="uni-product-price">
                    <text class="uni-product-price-favour">¥{{item.originalPrice}}</text>
                    <text class="uni-product-price-original">¥{{item.favourPrice}}</text>
                    <text class="uni-product-tip">{{item.tip}}</text>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                productList: [],
                renderImage: false
            };
        },
        methods: {
            getList() {
                uni.request({
                    url: 'http://localhost:3000/goods',
                    success: (res) => {
                        console.log(res.data);
                        this.productList = res.data.goodslist;
                    }
                });
            }
        },
        onLoad() {
            this.getList();
            this.renderImage = true;
        },
    };
</script>
<style>
</style>

good.js

let data = {
            "goodslist":[
                {
                    image: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product1.jpg',
                    title: 'Apple iPhone X 256GB 深空灰色 移动联通电信4G手机',
                    originalPrice: 9999,
                    favourPrice: 8888,
                    tip: '自营'
                },
                {
                    image: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product2.jpg',
                    title: 'Apple iPad 平板电脑 2018年新款9.7英寸',
                    originalPrice: 3499,
                    favourPrice: 3399,
                    tip: '优惠'
                },
                {
                    image: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product3.jpg',
                    title: 'Apple MacBook Pro 13.3英寸笔记本电脑(2017款Core i5处理器/8GB内存/256GB硬盘 MupxT2CH/A)',
                    originalPrice: 12999,
                    favourPrice: 10688,
                    tip: '秒杀'
                },
                {
                    image: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product4.jpg',
                    title: 'Kindle Paperwhite电纸书阅读器 电子书墨水屏 6英寸wifi 黑色',
                    originalPrice: 999,
                    favourPrice: 958,
                    tip: '秒杀'
                },
                {
                    image: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product5.jpg',
                    title: '微软(Microsoft)新Surface Pro 二合一平板电脑笔记本 12.3英寸(i5 8G内存 256G存储)',
                    originalPrice: 8888,
                    favourPrice: 8288,
                    tip: '优惠'
                },
                {
                    image: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product6.jpg',
                    title: 'Apple Watch Series 3智能手表(GPS款 42毫米 深空灰色铝金属表壳 黑色运动型表带 MQL12CH/A)',
                    originalPrice: 2899,
                    favourPrice: 2799,
                    tip: '自营'
                }
            ],
}
module.exports = {
  data: data
}

运行模拟接口数据如下


5640239-4c6ab948914eac51.png

渲染效果:


5640239-0edfaaae5746d1fb.png
  • 0
    点赞
  • 0
    评论
  • 9
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
<p> <strong><span style="font-size:16px;">【课程简介】</span></strong> </p> <p> <span style="font-size:16px;">课程目标:</span><span style="font-size:16px;">提高vue实战技术和学习uniapp开发</span><span style="font-size:16px;"></span><br /> <span style="font-size:16px;">课程特色:</span><span style="font-size:16px;">该门课程属于中高级进阶课程,课程开发一个仿阿里飞猪旅游app的微信小程序,该课程使用uni-app框架结合小程序云开发,开发语言使用vue,使用uniapp可以做更强大的小程序,该课程专为想要学习开发小程序或者提高vue技术的同学,课程旨在提高你的前端技术和拿到心仪的offer,学会该门课程相信你能做更强大的产品上线,学习该门课程需要具备vue基础知识,如果没有学习过vue基础知识的同学,可到我主页学习基础教程:</span><span style="font-size:16px;color:#337FE5;">【</span><span style="font-size:16px;color:#337FE5;">VUE开发旅游攻略移动端,零基础到实战,短信验证码,登录,注册</span><span style="font-size:16px;color:#337FE5;"></span><span style="font-size:16px;color:#337FE5;">】</span> </p> <p> <br /> </p> <p> <strong><span style="font-size:16px;">【课程收益】</span></strong> </p> <p> <span style="font-size:16px;">1.学员学完课程可当做面试作品,毕业设计</span> </p> <p> <span style="font-size:16px;">2.该课程专为想要学习开发小程序或者提高vue技术的同学,课程旨在提高你的前端技术和拿到心仪的offer,学会该门课程相信你能做更强大的产品上线</span> </p> <p> <span style="font-size:16px;">3.学习小程序云开发</span> </p>
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值