微信小程序中hidden不生效原因的解決辦法

例如如下布局：

  <view hidden="true" style="display:flex;flex-direction: row;">    <text>text1</text>    <text>text2</text>  </view>

你會發現hidden沒生效。經我實驗發現hidden元素對塊狀布局才生效，所以這段代碼里導致hidden沒生效的罪魁禍首是display:flex。把這個去掉就可以了。

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

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

  <view hidden="true" style="display:{{hideview ? none : flex}};flex-direction: row;">    <text>text1</text>    <text>text2</text>  </view>

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

后話

hidden 隱藏布局，雖然隱藏了，但是還是會占空間。

display:none 隱藏不占據空間。

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！