列表渲染可以使用微信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>
程序编译后效果为:
在微信小程序中,系统默认的列表的当前条目名为'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名称显示出来。