Home > Article > WeChat Applet > 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!