組件有個共同屬性——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>