Analyze the reasons and solutions for mini program hidden not taking effect

The WeChat official document mentions that hidden is a property that all components have, but I found that this is not the case in actual coding! ! ! !

For example, the following layout:

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

You will find that hidden does not take effect. After my experiment, I found that the hidden element only takes effect on block layout, so the culprit in this code that causes hidden to not take effect is display:flex. Just remove this.

What if we must use flex layout?

In fact, the reason why I want to use hidden here is just to hide the layout. display:none can also hide it. Here you can use a tricky method to dynamically set the display attribute. The example is as follows:

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

The hideview here is in the corresponding js Is a variable, dynamically controlled by js.

Afterword

hidden Hidden layout, although it is hidden, it will still take up space.
display:none Hide does not occupy space.

The above is the detailed content of Analyze the reasons and solutions for mini program hidden not taking effect. For more information, please follow other related articles on the PHP Chinese website!