列表渲染可以使用微信api提供的wx:for來(lái)控制屬性綁定一個(gè)數(shù)組來(lái)渲染到組件上,默認(rèn)數(shù)組的當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為 index带到,數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為 item。
現(xiàn)可以將指定數(shù)組以列表的形式展示出來(lái):
index.js
Page({
data: {
array:[
{
name:'Json',
age:22
},{
name:'Rose',
age:23
},{
name:"Lisa",
age:33,
}
]
}
在index.wxml文件中進(jìn)行數(shù)據(jù)的展示,則可以使用wx:for來(lái)進(jìn)行列表的渲染:
<view class='container'>
<view wx:for='{{array}}'>
<view>name:{{item.name}}</view>
<view>age:{{item.age}}</view>
</view>
</view>
程序編譯后效果為:
5-1.png
在微信小程序中超营,系統(tǒng)默認(rèn)的列表的當(dāng)前條目名為'item'庆揩,但是在有些業(yè)務(wù)場(chǎng)景涉及到列表之中嵌套數(shù)組镊叁,則在編寫中會(huì)涉及到編寫識(shí)別重復(fù)唾琼,避免在識(shí)別代碼造成的誤差,則可以將item指定自定義的名稱疯趟,可將上述的列表代碼進(jìn)行修改如下
<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>
代碼編譯后可以得出同樣的結(jié)果拘哨,在微信小程序中還可以對(duì)數(shù)組下標(biāo)的名稱進(jìn)行自定義,api默認(rèn)是'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名稱顯示出來(lái)宅静。