微信小程序入门（五）：列表渲染

列表渲染可以使用微信api提供的wx:for来控制属性绑定一个数组来渲染到组件上，默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。

现可以将指定数组以列表的形式展示出来：
index.js

Page({
  data: {
    array:[
      {
        name:'Json',
        age:22
      },{
        name:'Rose',
        age:23
      },{
        name:"Lisa",
        age:33,
      }
    ]
  }

在index.wxml文件中进行数据的展示，则可以使用wx:for来进行列表的渲染：

<view class='container'>
  <view wx:for='{{array}}'>
    <view>name:{{item.name}}</view>
    <view>age:{{item.age}}</view>
  </view>
</view>

程序编译后效果为：

5-1.png

在微信小程序中，系统默认的列表的当前条目名为'item'，但是在有些业务场景涉及到列表之中嵌套数组，则在编写中会涉及到编写识别重复，避免在识别代码造成的误差，则可以将item指定自定义的名称，可将上述的列表代码进行修改如下

<view class='container'>
  <view wx:for='{{array}}' wx:for-item='coustom_item'>
    <view>name:{{coustom_item.name}}</view>
    <view>age:{{coustom_item.age}}</view>
  </view>
</view>

代码编译后可以得出同样的结果，在微信小程序中还可以对数组下标的名称进行自定义，api默认是'index'；

<!--index.wxml-->
<view class='container'>
  <view wx:for='{{array}}' wx:for-item='coustom_item' wx:for-index='coustom_index'>
    <view>{{coustom_index}}</view>
    <view>name:{{coustom_item.name}}</view>
    <view>age:{{coustom_item.age}}</view>
  </view>
</view>

上边代码就是将自定义的index名称显示出来。