列表渲染
wx:for和wx:key的使用
在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组当前项的变量名默认为item,数组的当前项的下标变量名默认为index。
在index.js里定义数据,示例代码如下:
Page({
data: {
array:[
{motte:'ffo'},
{motte:'bba'}
]
},
})
在index.wxml页面实现列表渲染,示例代码如下:
<view wx:for="{
{array}}">{
{index}}:{
{item.motte}}</view>
效果如下:
使用wx:for-item可以指定数组当前元素的变量名,使用wx:for-index可以指定数组当前下标的变量名。
<view wx:for="{
{array}}" wx:for-index="idx" wx:for-item="itemName">
{
{idx}}:{
{itemName.motte}}
</view>
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态ÿ