微信小程序中组件的显示/隐藏：wx:if /hidden属性

组件有个共同属性——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>