wxml:条件渲染与列表渲染

上一篇我介绍了wxml的数据绑定,这次介绍它的条件渲染。

条件渲染

条件渲染相当于在小程序页面的输出条件语句。

(1)wx:if

除了数据绑定,我们常常会使用逻辑分支,这时候可以使用wx:if="{{condition}}"来判断是否需要渲染该代码块

<view wx:if="{{showContent}}">内容</view>
//page.js
Page({
data:{
showContent:true}
}
});

当showContent的值为true是,view会被渲染,为false时则不会。
和普通的编程语言一样,也可以用wx:elif和wx:else来添加一个else块:

<view wx:if="{{length>5}}">1</view>
<view wx:elif="{{length>2}}">2</view>
<view wx:else>3</view>

上述代码页面只渲染最后一个view。wx:elif和wx:else必须和wx:if配合使用,否则会导致页面解析错误。

(2)block wx:if

因为wx:if是一个控制属性,可以添置在任何组件的标签上,但如果我们需要包装多个组件,又不影响布局是,可以用<block/ >标签将多个组件包装起来,并在上边使用wx:if的控制属性。

<block wx:if="{{true}}"
<view>view1</view>
<view>view2</view>
</block>

注意:<block/ >并不是一个组件,只是一个包装元素,在渲染过程中不做任何渲染,直接受控制属性。

(3)wx:if与hidden

除了wx:if还有hidden属性控制组件是否显示。
wx:if控制是否渲染条件内的模板,具有惰性,若条件为false是,则不会渲染。wx:if有更高的切换消耗。
hidden控制组件是否显示,组件始终会被渲染,只是简单控制显示与隐藏,并不会触发重新渲染和销毁。具有更高的初始消耗。
简而言之,如果需要频繁切换的情景下用hidden更合适,如果在运行时条件不太可能改变,则用wx:if更好。

列表渲染

列表渲染是将一个数组内的所有数据依次展示在界面上,相当于小程序页面输出循环语句。常用情景有:文章列表和商品列表等。

(1)wx:for

组件的wx:for控制属性可以用于遍历数组,重复渲染该组件,数组的当前项的下标变量名默认为“index”,数组当前项的变量名默认为“item”

<view wx:for="{{myArray}}">
{{index}}:{{item}}</view>
//page.js
Page({
data:{
myarray:['v1','v2']
}});

通过遍历数组myarray,页面渲染了两个< view >
使用“wx:for-item”可以指定数组当前元素的变量名,使用"wx:for-index"可以指定数组当前下标的变量名。

<view wx for="{{array}}" wx:for-index="ab" wx:for-item="it">
{{ab}}:{{it}}</view>
wx:for也可以嵌套,如下是一个四四乘法表:
<view wx :for ="{{[1,2,3,4]}}"wx:for-item="i">
<view wx :for ="{{[1,2,3,4]}}"wx:for-item="j">
<view wx:if="{{i<=j}}">
{{i}}*{{j}}={{i*j}}
</view>
</view>
</view>

(2)block wx:for

类似于block wx:if,也可以将wx:for用在block标签上,一遍渲染一个包含多结点的结构块

<block wx:for="{{[1,2,3]}}">
<view>{{index}}:</view>
<view>{{item}}</view>
</block>

(3)wx:key

如果列表中的项目的位置会动态改变或者新的项目添加到列表中,并且希望在列表中保持自己的特征和状态(如< input />中输入内容,< switch />的选中状态),需要使用wx:key来指定项目列表中的唯一标识符。wx:key的值以两种形式提供:
1、字符串,代表在for循环的array中的item的某个property,该property的值是列表中唯一的字符串或数字,且不能动态改变。
2、保留关键字“*this”代表在for循环的item本身,这种表示需要item本身是一个唯一的字符串或数字。

需要注意的是,如果不提供wx:key,则会报一个warning,如果明确知道该列表是静态的,或者不必关注其顺序的,可以选择忽略。

<switch wx:for="{{array}}"wx:key="unique" 
style="display:block;">{{item.id}}</switch>
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读