微信官方文檔里有提到，hidden是所有組件都有的屬性，在實際編碼中發(fā)現(xiàn)，它的表現(xiàn)與描述不能完全想符。

例如如下布局：

你會發(fā)現(xiàn)hidden沒生效。

經(jīng)實驗發(fā)現(xiàn)hidden元素對塊狀布局才生效，所以這段代碼里導致hidden沒生效的罪魁禍首是display:flex，把這個去掉就可以了。

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

值 描述

none 此元素不會被顯示。

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

inline 默認。此元素會被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。

inline-block 行內(nèi)塊元素。（CSS2.1 新增的值）

list-item 此元素會作為列表顯示。

run-in 此元素會根據(jù)上下文作為塊級元素或內(nèi)聯(lián)元素顯示。

compact CSS 中有值 compact，不過由于缺乏廣泛支持，已經(jīng)從 CSS2.1 中刪除。

marker CSS 中有值 marker，不過由于缺乏廣泛支持，已經(jīng)從 CSS2.1 中刪除。

table 此元素會作為塊級表格來顯示（類似 ），表格前后帶有換行符。

inline-table 此元素會作為內(nèi)聯(lián)表格來顯示（類似 ），表格前后沒有換行符。

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

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

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

table-row 此元素會作為一個表格行顯示（類似 ）。

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

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

table-cell 此元素會作為一個表格單元格顯示（類似 和 ）

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

inherit 規(guī)定應該從父元素繼承 display 屬性的值。

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

那么，WHY？

我們還是先繼續(xù)閱讀原文吧~

2，使用display:none控制顯隱

如果一定要用flex布局怎么辦？

其實這里想用hidden無非就是想隱藏這個布局，display:none也能做到隱藏。這里可以用一個取巧的方法，動態(tài)設置display屬性，示例如下：

這里的hideview是在對應的js里是一個變量，由js來動態(tài)控制。

后話：hidden 隱藏布局，雖然隱藏了，但是還是會占空間，display:none 隱藏不占據(jù)空間。

3，關(guān)于wx:if與hidden的區(qū)別

最后這一句話，應該怎么理解？是不占界面空間嗎？

不是！

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

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

wx:if vs hidden

因為 wx:if 之中的模板也可能包含數(shù)據(jù)綁定，所有當 wx:if 的條件值切換時，框架有一個局部渲染的過程，因為它會確保條件塊在切換時銷毀或重新渲染。

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

4，關(guān)于上面那個WHY的解答

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

看一下view style的渲染：

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

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

而后，程序員又在style屬性里設置了一個display:block，直接將小程序的設置override掉了。所以，它怎么可能生效呢？這不怪程序員自己嗎？

那么，為什么使用廢掉的compact、marker就好用了呢？

因為它們兩個完全在小程序中是不存在的。設置它們等于沒有設置。

5，關(guān)于hidden屬性的值，不設也罷，設也無用

另外，有一點，關(guān)于hidden屬性的值，像上面的代碼：

hidden="true"

其實設置成hidden="false"，或“0”，或者其它任何值，都是等效的，結(jié)果都是true。

不單hidden屬性如此，在小程序組件中，所有布爾值屬性都是這樣的特征。完成可以這樣用：

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

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

所以，大家都看到了：

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

2，hidden的值無論怎么設置結(jié)果都是true，連動態(tài)綁定都沒得做，只能使用wx:if進行條件渲染

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

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

而display:none，只是切換顯示，已經(jīng)渲染的東西還在那里。

總結(jié)，如果不是長列表渲染，推薦使用display:none控制顯隱，如果是長列表渲染，使用條件渲染。

hidden完全是一個腦殘屬性，沒有用途。只會讓程序員產(chǎn)生迷惑。

以上就是微信小程序關(guān)于組件的hidden屬性的使用建議的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！