列表渲染

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

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

wxml

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

ts

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

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

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

wxml

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

ts

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

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

wxml

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

ts

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， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。