列表渲染

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<view>
  <view wx:for="{{ users }}" wx:key="index">{{ item }}</view>
</view>

Page({
  data: {
    users: ["hello", "world"],
  },
});

使用 wx:for-item 可以指定数组当前元素的变量名

使用 wx:for-index 可以指定数组当前下标的变量名

<view wx:for="{{ users }}" wx:for-item="user" wx:for-index="ids">
  {{ user }}-{{ ids }}
</view>

Page({
  data: {
    users: ["hello", "world"],
  },
});

网络请求拿到的数据是 json 格式，相对比要复杂一些

<view>
  <block wx:for="{{ result }}" wx:for-item="item">
    <view>{{ item.name }}</view>
    <image src="{{ item.pic }}"></image>
    <view>{{ item.description }}</view>
    <view>{{ item.price }}</view>
    <view>{{ item.city }}</view>
  </block>
</view>

Page({
  data: {
    result: [
      {
        id: 1,
        name: "美食-甜豆干",
        pic: "http://iwenwiki.com:3002/images/goods/1.jpg",
        description:
          "津津卤汁豆腐干苏州特产豆干零食素食老字号食品豆制品小吃90g*10",
        price: "39.90",
        type: 0,
        buynum: "435",
        city: "北京",
      },
      {
        id: 2,
        name: "好欢螺螺蛳粉300g*6袋",
        pic: "http://iwenwiki.com:3002/images/goods/2.jpg",
        description:
          "好欢螺螺蛳粉300g*6袋柳州特产螺狮粉美食螺丝粉煮水方便面酸辣粉",
        price: "69.99",
        type: 0,
        buynum: "3333",
        city: "北京",
      },
    ],
  },
});

wx:key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态，需要使用 wx:key 来指定列表中项目的唯一的标识符

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率

如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略