<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 }
运行模拟接口数据如下
渲染效果：
