可以将一个数组内的所有数据依次展示在界面上。
常用场景:文字列表、商品列表。
1、列表渲染:
在组件上使用wx:for
控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为index
,数组当前项的变量名默认为item
。
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
2、多个组件的控制:
使用辅助标签<block>
对多个组件进行控制。
3、指定循环变量名:
使用wx:for-item
可以指定数组当前元素的变量名;
使用wx:for-index
可以指定数组当前下标的变量名。
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
4、wx:key
的使用:
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如<input/>
中的输入内容,<switch/>
的选中状态),需要使用wx:key
来指定列表中项目的唯一的标识符。
用于提升数组内部分数据变更时列表渲染的效率。