1.wx:if(条件渲染)
(1)wx:if="{condition}" 来判断是否需要渲染该代码块。
(2) block wx:if
因为wx:if是一个控制属性,需要将它添加到一个标签上。
如果要一次性判断多个组件标签,可以使用一个 标签将多个组件包装起来,并在上边使用wx:if 控制属性。
注: 并不是一个组件,它只是一个包装元素,不会在页面中做任何渲染,只接受控制属性。
(3) wx:if 和 hidden 的对比
被wx:if控制的区域,框架有一个局部渲染的过程,会根据控制条件的改变,动态创建或销毁对应的UI结构。
wx:if是惰性的,如果没有触发条件,如果触发条件为flase,则该框架什么都不做,知道条件第一次为true才开始渲染。
而对hidden 来说,组件始终会被渲染,只是简单的控制显示与隐藏。
因此,wx:if有更高的切换消耗,而hidden有更高的初始渲染消耗。因此,如果需要频繁切换的情境下,用hidden更好,如果在运行时条件不大可能改变则wx:if较好。
2.wx:for(条件渲染)
在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item。
注:使用wx:for-item 可以指定数组当前元素的变量名;
使用wx:for-index 可以指定数组当前下标的变量名。
使用wx:for实现的列表渲染的实例如下:
实现的效果如下图:
页面部分代码:
<!-- 功能区,列表渲染,点击列表中某项跳转到对应页面 -->
<view class="funsArea">
<view class="fun" wx:for="{
{funs}}" wx:key="key" wx:for-item="value" data-url="{
{value.funUrl}}" bindtap="funHandle" >
<text class="funTitle"> {
{
value.funTitle}} </text>
<text class="tz"> > </text>
</view>
</view>
js部分代码:
//数据data值
data: {
funs:[{
funTitle:'个人信息',
funUrl:'userInfo/userInfo'
},{
funTitle:'我的订单',
funUrl:'MyOrder/MyOrder'
},{
funTitle:'我的成就',
funUrl:'MyAchievements/MyAchievements'
},{
funTitle:'我的收藏',
funUrl:'MyCollection/MyCollection'
},{
funTitle:'消息中心',
funUrl:'userNews/userNews'
},{
funTitle:'意见反馈',
funUrl:'Feedback/Feedback'
}
]
},
...
// 接受页面data-url的值;data中的值在event.target.dataset中
funHandle:function(e){
var funurl = e.target.dataset;
// console.log(funurl);
wx.navigateTo({
url:e.target.dataset.url
})
},