今天要讲的是模板语法的第二个种类——列表渲染。
点击下方链接,查看列表渲染部分的使用说明和介绍。
列表渲染 | 微信开放文档developers.weixin.qq.com(一)vx: for 属性
wx:for ——列表循环 官方文档的描述解释如下:
在组件上使用wx:for
控制属性绑定一个数组,
即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为index
,
数组当前项的变量名默认为item
我们在开发者工具中具体演示。
1、在demo03. js 文件中,插入一个数组 list,代码如下:
list:[
{
id:0,
name:"职业"
},
{
id:1,
name:"程序媛"
},
{
id:2,
name:"程序猿"
}
]
这样就定义好了一个数独数据。复制 list , 在demo03.wxml 文件中,编辑列表循环标签。
其中,wx:for的写法:
wx:for="{{数组或对象}}"
其中,对象也可是循环对象。
wx:for-item="循环项的名称"
wx:for-index="循环项的索引"
本次举例中的 wx:for 代码如下:
<view>
<view
wx:for="{{list}}"
wx:for-item="item"
wx:for-index="index">
索引:{{index}}
值:{{item.name}}
</view>
</view>
按下保存键,最终的呈现界面如下:
此时,看调试器--console 中,出现黄色warning,内容如下
wx:key 可用来提高列表渲染的性能。
今天太晚了~我们明天继续~未完待续==
(二)wx: key 控制属性
在wxml 文件中,需要wx:key =“唯一的值”,用来提高列表渲染的性能
在标签文档中,wx: key 的“唯一值”以两种形式提供。
1、绑定字符串
2、循环项。
1、字符串
如果wx: key 绑定的是一个普通的字符串的时候,
那么这个字符串名称一定要是循环数组中的对象的唯一属性。
比如在上面的循环对象中,我们在view 标签后加入代码
wx:key="id"
按下保存键后,可发现控制台的有关 wx:key 属性的warning 消失。
这里要强调的一点是,
在上述数组中,wx:key 中的 id 是唯一属性,
它的值 0,1,2 都是不重复的。
2、循环项
wx:key=“* this”
此代码就表示该数组为普通数组,* this 这里表示循环项。
比如:
当你所用的数组为普通数组,像 [1,2,3,4] 或者[11,22,aaa] 等
要绑定 wx:key 时,就要用到它—— * this
ps:
使用此属性时,若 wx:key 所绑定的数组不是js 文件中的循环数组,
若插入到标签文件中时,是不会报错的。
比如,
上面的demo03.wxml 文件中,我们在view 标签中随便插入一个数组,
wx:key=”aa“,保存后,控制台也不会报错的。
操作如下:
2.1 嵌套循环
我们在写代码的时候,经常会碰到循环里面套循环的情况。
在上面例子中,我们一开始已经命名为
wx:for-item="item" wx:for-index="index"
如果再在里面放第二层循环的话,以上就要重新命名,否则会重名。
所以,当数组中有嵌套循环的时候,尤其要注意,以下绑定的名称不要重名。
wx:for-item="item" wx:for-index="index"
并且,在默认情况下,小程序会将循环项、索引项的名称当成 item 和 index 。
若数组中只有一层循环时,以下可省略
wx:for-item="item" wx:for-index="index"
我们在微信开发者工具中尝试一下,
删除demo03.wxml文件中的这两个属性,
保存,看结果是否有变化
对比结果来看,有无 wx:for-item="item" wx:for-index="index" ,
结果都是一样的。
因此,当数组中只有一层循环项,
wx:for-item="item" wx:for-index="index" 两个属性可不写。
2.2 对象循环
当含有2个及以上的数组或者对象时,循环项的名称(item)需要修改
wx:for-item="对象的值" wx:for-index="对象的属性"
拿上一章 ”person “举例,
在deom03.wxml 文件中,将索引项修改为”属性“,代码如下:
<view>
<view
wx:for="{{person}}"
>
属性:{{index}}
值:{{item}}
</view>
</view>
保存后,结果如下:
由结果可得,以上使用 item 、index 是没有问题的,但是我们看上面所得结果,
名称过于繁琐,让人理解起来也有些困难。
所以,建议在数组中循环对象时,需要将 item 、index 的名称修改一下,
按照习惯,我们修改为 value、key 。
即在wxml 文件中将
wx:for-item="item"
wx:for-index="index"
修改为:
wx:for-item="value"
wx:for-index="key"
完整代码如下:
<view>
<view
wx:for="{{person}}" wx:for-item="value" wx:for-index="key"
>
属性:{{key}}
值:{{value}}
</view>
</view>
保存后,可以对比前后修改的界面,产出是一样的。
但是,我们会在控制台看到如下warning
意为:需要提供 wx: key 来提高微信的技术性,完善性能。
所以,需要在此基础上绑定 wx: key ,添加一行代码 wx:key="唯一的属性",
在 person 这个对象中,age 、height、weight等属性都是唯一的,
这里的唯一属性我们写的 age ,
当然也可以写其中任何一项,因为都具有唯一性。
修改如下:
<view>
<view
wx:for="{{person}}"
wx:for-item="value"
wx:for-index="key"
wx:key="age"
>
属性:{{key}}
值:{{value}}
</view>
</view>
保存后,可以看到控制台的warning 消失。
(三)补充:block 标签
在标签文件中插入block 标签进行页面渲染时,保存代码后,
系统会自动移除block 标签,因为这里的block 标签属于占位符。
比如:
demo03.wxml 文件中, list 数组中加入类名 class="my_list" , 代码如下:
<view>
<view
wx:for="{{list}}"
wx:for-item="item"
wx:for-index="index"
wx:key="id"
class="my_list">
索引:{{index}}
值:{{item.name}}
</view>
</view>
保存后,可看到控制台的wxml 中,显示了class标签
如果,我们在上述的代码中加入block 标签后,代码如下
<view>
<block
wx:for="{{list}}"
wx:for-item="item"
wx:for-index="index"
wx:key="id"
class="my_list">
索引:{{index}}
值:{{item.name}}
</block>
</view>
保存后,对比前后加不加 block 标签的结果,可以看到,
加入block标签后,调试器中的class 标签消失。
所以,
由此可见,
当你使用循环对象进行页面渲染时,
若不想在对象外面额外加一层标签的话,
可用 block标签 来占位 。