wx:if 与 hidden 都可以控制微信小程序中元素的显示与否。
他们的区别
- wx:if 是遇 true 显示, 在隐藏的时候不渲染,
- hidden 是遇 false 显示,在隐藏时仍然渲染,只是不呈现
现在正在写的小程序正好用到了这个,就在这里记录下,在同一个wxml里面有文字聊天和语音聊天两个页面,刚开始不知道有hidden,用的是wx:if做判断,但是这样做有个问题,从语音页面切换到文字聊天页面,语音就会断开,后来改成下面这样就没问题了,dialogue 为true时显示语音聊天,为false时显示文字页面
<view hidden="{{dialogue === true}}">
文字聊天页面
</view>
<view hidden="{{dialogue === false}}">
语音聊天页面
</view>
因为 wx:if 之中的模板也可能包含数据绑定,所以当 wx:if 的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。
同时 wx:if 也是惰性的,如果在初始渲染条件为 false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。
相比之下,hidden 就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。