微信小程序中組件的顯示/隱藏: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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM