How to use the hidden attribute of components in WeChat applets

As mentioned in an official experiment document of the Author, hidden is an attribute of all components. in actual code, it is found that its performance and description cannot be completely represented. 1. first read an author's experiment.

As mentioned in the official document, hidden is an attribute of all components. in actual coding, it is found that its performance and description cannot be completely represented.

For example, the following layout:

You will find that hidden does not take effect.

The experiment found that the hidden element takes effect only for the block layout, so the main cause of this code is the display: flex, which can be removed.

To verify what the author said, I flipped through the css document and practiced all possible values of the display style one by one:

Value description

None this element is not displayed.

Block: this element is displayed as a block-level element with a line break before and after it.

Inline default. This element is displayed as an inline element, and there is no line break before and after the element.

Inline-block the block element in the row. (Newly added value of CSS2.1)

List-item this element is displayed as a list.

Run-in this element is displayed as a block-level element or inline element based on the context.

Compact CSS has the value compact, but it has been deleted from CSS2.1 due to lack of extensive support.

Marker CSS has a value of marker, but it has been deleted from CSS2.1 due to lack of extensive support.

Table: this element is displayed as a block-level table (similar to), with a line break before and after the table.

Inline-table this element is displayed (similar to) as an inline table, with no line break before and after the table.

Table-row-group: this element is displayed as a group of one or more rows (similar ).

Table-header-group: this element is displayed as a group of one or more rows (similar ).

Table-footer-group: this element is displayed as a group of one or more rows (similar ).

Table-row this element is displayed as a table row (similar ).

Table-column-group: this element is displayed as a group of one or more columns (similar ).

Table-column this element is displayed as a cell column (similar)

Table-cell: this element is displayed as a table cell (similar to and)

Table-caption this element is displayed as a table title (similar)

Inherit specifies that the value of the display attribute should be inherited from the parent element.

Changing to any value does not work except none, as well as obsolete compact and marker.

So, WHY?

Let's continue reading the original article ~

2. use display: none to control the display hide.

What should I do if I have to use the flex layout?

In fact, here we want to use hidden to hide the layout. display: none can also be used to hide the layout. Here, we can use a clever method to dynamically set the display attribute, for example:

Here, hideview is a variable in the corresponding js, which is dynamically controlled by js.

After that, the hidden layout occupies space, while the display: none hidden layout does not occupy space.

3. differences between wx: if and hidden

What should I do with this last sentence? Does it occupy the page space?

No!

The author wants to express the assumption that although the view component is hidden in the Hiden, the component will still be rendered. the display: none and hidden = true have the same effect. display: none will still render the component.

If you do not want to render unnecessary components, use Conditional rendering: wx: if

Wx: if vs hidden

Because the template in wx: if may also contain data binding, when the conditional value of wx: if is switched, the framework has a partial rendering process, it will make sure that the condition block is destroyed or re-rendered when switching.

At the same time, wx: if is also inert. if the initial rendering condition is false, the framework does not do anything. partial rendering is started only when the condition first turns into true. In contrast, hidden is much simpler, and components are always rendered, just simple control of display and hiding. In general, wx: if has higher switching consumption, while hidden has higher initial rendering consumption. Therefore, if frequent switchover is required, it is better to use Den. if the running condition is unlikely to change, wx: if is better. (