组件有个共同属性——hidden,用于设置组件的显示/隐藏,默认为显示:设置为true时,组件隐藏;false时,组件显示。
<view hidden = "{{ false }}"> 组件显示 </view>
除此之外,还可以用条件渲染wx:if/ wx:else设置组件的显示/隐藏:设置为true时,组件显示;false时,组件隐藏。
一、wx:if 与 hidden 在隐藏组件时的区别:
hidden:将组件设置为隐藏时,该组件依旧存在,只是display:none;
wx:if:控制组件是否被渲染,将组件设置为隐藏时,该组件被销毁、根本不存在。
二、二者如何选择?
1.如果组件的显示/隐藏切换地频率很高时,选择使用“hidden”;
2.如果组件的显示/隐藏切换地频率很低时,选择使用“wx:if”。
[注意事项]
1.wx:if / wx:else 设置组件的显示/隐藏时,是控制组件的重新创建、渲染,无法记录组件隐藏前的数据。因此,组件隐藏后再显示时需要记录之前的数据时推荐使用 hidden 属性。
2.需要注意的是,hidden属性无法直接应用于 “自定义组件” 和 “非块级元素” 的显示/隐藏,解决方法:在外面包裹一层<view></view>。
例如:<view hidden="{{true}}">
<自定义组件 />
</view>
请发表评论