12 动态渲染显示商品

接口需要参数：

good_list/index.html

<block wx:if="{{tabs[0].isActive}}">
    <view class="first_tabs">
      <navigator class="goods_item"
      wx:for="{{goodsList}}"
      wx:key="goods_id"
      >
        <!-- 左侧图片容器 -->
        <view class="goods_img_wrap">
          <image mode="widthFix" src="{{item.goods_small_logo?item.goods_small_logo:'https://www.qinziheng.com/wp-content/uploads/2018/03/no_image.jpg'}}"></image>
        </view>
        <!-- 右侧 商品容器 -->
        <view class="goods_info_wrap">
          <view class="goods_name">{{item.goods_name}}</view>
          <view class="goods_price">￥{{item.goods_price}}</view>
        </view>
      </navigator>
  </view>
  </block>

• 循环显示goodsList
• 有图片则显示图片，无图片则显示网络图片

good_list/index.js

// pages/goods_list/index.js

import {request} from '../../request/index.js';
import regeneratorRuntime from '../../lib/runtime/runtime';
Page({
  /**
   * 页面的初始数据
   */
  data: {
    goodsList:[]
  },
  //接口要的参数
  QueryParams:{
    query:"",
    cid:"",
    pagenum:1,
    pagesize:10
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      console.log(options);
      this.QueryParams.cid=options.cia;
      this.getGoodList();
  },

  async getGoodList(){
    const res = await request({url:"/goods/search",data:this.QueryParams});
    console.log(res);
    this.setData({
      goodsList:res.goods
    })
  }
})

• 通过打印得知，此处是option.cia，并不是cid
• 获取到后，将res.good赋值给空数组goodLists