微信小程序--hidden不生效緣由及解決方案

微信官方文檔裏有提到說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 隱藏不佔據空間。