Home  >  Article  >  WeChat Applet  >  Analyze the reasons and solutions for mini program hidden not taking effect

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

Y2J
Y2JOriginal
2017-04-28 11:11:503413browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn