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 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。
网友评论