uni-app渲染商品列表

• 2019 年 12 月 24 日
• 筆記

<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  }

運行模擬接口數據如下

渲染效果：