Methods of dynamically displaying or hiding controls in wechat applet (two methods)

In wechat applet development, a control is often used. It will dynamically display and hide this situation according to different situations and environments. Here's how to practice it! Effect first

There are two ways to implement it,

The first method: single selection method, which is to hide and display one or the other according to the conditions. The code is as follows:

The second method: superposition method is to hide first. If it is displayed, then overlay a display. If it is hidden, it will not move. The code is as follows:

This method looks a little dizzy at first, so it is divided into two states:

Display status:

Because showview is true, we change it to the following

See, the bright789 in the back_ view_ Show will put the bright789 in front_ view_ Hide overlaps. Note that this is overlap, so the order cannot be reversed, like bright789_ view_ Show {{showview? '': 'bright789_view_show'}} This is not a hidden state:

Equivalent to the following code:

Finally, I'll post the JS, wxml and wxss codes of the demo:

JS file:

Wxml file code:

Wxss file code: