Table of Contents
一、列表渲染
列表渲染就是,对数组中各项的数据重复渲染。
在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
以下是一个例子:
使用wx:for-item可以指定数组当前元素的变量名。
使用wx:for-index可以指定当前下标的变量名。
- wx:key
官方文档里写的是:
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 input 中的输入内容,switch 的选中状态),需要使用
wx:key
来指定列表中项目的唯一的标识符。
wx:key
的值以两种形式提供
- 字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
- 保留关键字
*this
代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。
如不提供 wx:key
,会报一个 warning
, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。
我的理解是:wx:key是可以不指定的。如果不指定,每次setData,对每个组件,都会重新创建;指定了wx:key,不会每次创建新的组件,而是保持它的状态,如果新增了项目,则创建新的组件,但是不会影响原来的组件,所以渲染的效率会更高。
- 页面传值
列表渲染,点击组件跳转到关于其详细信息的页面,常常要传值,具体内容见下一篇。
二、条件渲染
wx:if
wx:if
vshidden
因为
wx:if
之中的模板也可能包含数据绑定,所以当wx:if
的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。同时
wx:if
也是惰性的,如果在初始渲染条件为false
,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。相比之下,
hidden
就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。一般来说,
wx:if
有更高的切换消耗而hidden
有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用hidden
更好,如果在运行时条件不大可能改变则wx:if
较好。
三、举例
<!-- 任务清单 -->
<view class="list0">
<view hidden="{{isMonitor}}" class="infoBox2" wx:for="{{taskList}}" wx:for-index="idx" wx:for-item="task" hover-class="click-active">
<template is="taskList" data="{{task:task, idx:idx, myId: myId, project:projectList[idx]}}" />
</view>
<view hidden="{{!isMonitor}}" class="infoBox2" wx:for="{{taskList}}" wx:for-index="idx" wx:for-item="task" hover-class="click-active">
<template is="taskList" data="{{task:task, idx:idx, myId: myId, project:projectList[idx]}}" wx:if="{{task.monitorId==myId}}" />
</view>
</view>
这里用到了模板,详情看后面的博客。