微信小程式關於組件的hidden屬性的使用建議

1，先看一個作者的實驗

微信官方文件裡有提到，hidden是所有元件都有的屬性，在實際編碼中發現，它的表現與描述不能完全想符。

例如以下佈局：

你會發現hidden沒生效。

經過實驗發現hidden元素對塊狀佈局才生效，所以這段程式碼裡導致hidden沒生效的罪魁禍首是display:flex，把這個去掉就可以了。

為了驗證作者所說的話，我翻了css文檔，一一實踐了所有display樣式可能的值：

值   描述   

none    此元素不會被顯示。    

block    此元素將顯示為區塊級元素，此元素前後會帶有換行符號。    

inline    預設。此元素會被顯示為內聯元素，元素前後沒有換行符號。    

inline-block    行內區塊元素。 （CSS2.1 新增的值）    

list-item    此元素顯示為清單。    

run-in    此元素會依上下文顯示為區塊級元素或內嵌元素。    

compact    CSS 中有值 compact，不過由於缺乏廣泛支持，已從 CSS2.1 中刪除。    

marker    CSS 中有值 marker，不過由於缺乏廣泛支持，已從 CSS2.1 中刪除。    

table    此元素會以區塊層級表格顯示（類似 ），且表格前後有換行符號。    

inline-table    此元素會以內嵌表格顯示（類似 ），且表格前後沒有換行符號。    

table-row-group    此元素會以一個或多個行的分組顯示（類似 ）。    

table-header-group    此元素會作為一個或多個行的分組來顯示（類似 ）。    

table-footer-group    此元素會以一個或多個行的分組顯示（類似 ）。    

table-row    此元素會顯示為表格列（類似 ）。    

table-column-group    此元素會以一個或多個欄位的分組顯示（類似 ）。

table-column    此元素會顯示為一個儲存格列（類似）    

table-cell    此元素會顯示為一個表格儲存格（類似）    

table -caption    此元素會作為一個表格標題顯示（類似）    

#inherit    規定應該從父元素繼承display 屬性的值。    

改成任何一個值，除了none，還有被廢棄的compact、marker，都不能奏效。

那麼，WHY？

我們還是先繼續閱讀原文吧~

2，使用display:none控制顯隱

如果一定要用flex佈局怎麼辦？

其實這裡想用hidden無非就是想隱藏這個佈局，display:none也能做到隱藏。這裡可以用一個取巧的方法，動態設定display屬性，範例如下：

這裡的hideview是在對應的js裡是一個變量，由js來動態控制。

後話：hidden 隱藏佈局，雖然隱藏了，但還是會佔空間，display:none 隱藏不佔據空間。

3，關於wx:if與hidden的差別

最後這句話，該怎麼理解？是不佔界面空間嗎？

不是！

作者想表達的意思，推測應該是：hidden雖然隱藏了視圖元件，但元件仍然會渲染；display:none與hidden=true的效果是一樣的，display:none還是會渲染元件。

如果想要不渲染不需要的元件，要使用條件渲染：wx:if

wx:if vs hidden

因為wx:if 之中的範本也可能包含資料綁定，所有當wx:if 的條件值切換時，框架都有一個局部渲染的過程，因為它會確保條件區塊在切換時銷毀或重新渲染。

同時 wx:if 也是惰性的，如果在初始渲染條件為 false，框架什麼也不做，在條件第一次變成真的時候才開始局部渲染。相較之下，hidden 就簡單的多，元件始終會被渲染，只是簡單的控制顯示與隱藏。一般來說，wx:if 有較高的切換消耗而 hidden 有較高的初始渲染消耗。因此，如果需要頻繁切換的情境下，用 hidden 更好，如果在運行時條件不大可能改變則 wx:if 較好。 (轉自微信文檔)

4，關於上面那個WHY的解答

#回到上面的紅色語句的問題，不能說問題由display:flex引起的，而是由程式設計師自己造成的。

看一下view style的渲染：

小程式是先渲染元件name樣式（即view），再渲染style屬性樣式。 （未在ios與android手機上親測）

所以就很好理解了，不是微信小程式的hidden不生效，而是小程式的hidden屬性，是透過在name style上加一個display:none實現的，見上方紅色箭頭處。

而後，程式設計師又在style屬性裡設定了一個display:block，直接把小程式的設定override掉了。所以，它怎麼可能生效呢？這不怪程式設計師自己嗎？

那麼，為什麼要用被廢掉的compact、marker就好用了呢？

因為它們兩個完全在小程式中是不存在的。設定它們等於沒有設定。

5，關於hidden屬性的值，不設也罷，設也無用

另外，有一點，關於hidden屬性的值，像上面的程式碼：

hidden="true"

其實是設定成hidden="false"，或「0”，或者其它任何值，都是等效的，結果都是true。

不單hidden屬性如此，在小程式元件中，所有布林值屬性都是這樣的特徵。完成可以這樣用：

只要寫了這個hidden屬性就可以了。

6，建議不要使用hidden屬性，它是一個無用的腦殘屬性

所以，大家都看到了：

1，使用display :none可以達到與hidden相同的效果

2，hidden的值無論怎麼設定結果都是true，連動態綁定都沒得做，只能用wx:if進行條件渲染

3，話說回來，如果都要使用惰性的wx:if條件渲染了，我還用hidden幹莫？

wx:if渲染是惰性渲染，只在需要的時候渲染，缺點是重複摧毀與重建，耗電！ （浪費手機CPU，真的是費電）

而display:none，只是切換顯示，已經渲染的東西還在那裡。

總結，如果不是長列表渲染，建議使用display:none控制顯隱，如果是長列表渲染，使用條件渲染。

hidden完全是腦殘屬性，沒有用途。只會讓程式設計師產生迷惑。

以上是微信小程式關於組件的hidden屬性的使用建議的詳細內容。更多資訊請關注PHP中文網其他相關文章！