wx:if vs hidden
因为 wx:if 之中的模板也可能包含数据绑定,所以当 wx:if 的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。
同时 wx:if 也是惰性的,如果在初始渲染条件为 false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。
相比之下,hidden 就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。
一般来说,wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好。
<!--index.wxml-->
<view class="container">
<view>
<view bindtap="toggle">
<text>切换面板展示</text>
</view>
<!-- block 只是控制属性(wx:)的载体,页面渲染过程中没有实际意义 -->
<block wx:if="{{ show }}">
<view>
<text>
这里是内容。。。
这里是内容。。。
这里是内容。。。
</text>
</view>
<view>
<text>
这里是内容。。。
这里是内容。。。
这里是内容。。。
</text>
</view>
</block>
<!-- hidden 标签仍然会工作,只是不显示在界面上 -->
<view hidden="{{ !show }}">
<text>
这里是内容。。。
这里是内容。。。
这里是内容。。。
</text>
</view>
<!-- wx:if 当条件为假的时候是不渲染(这个标签不工作) -->
<view wx:if="{{ show }}">
<text>
这里是内容。。。
这里是内容。。。
这里是内容。。。
</text>
</view>
</view>
</view>
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
show: false
},
//事件处理函数
toggle: function() {
this.setData({ show: !this.data.show})
}
})