Complete conditional rendering of mini program in ten minutes

This article brings you relevant knowledge aboutWeChat Mini Program, which mainly introduces the relevant content about conditional rendering. The so-called conditional rendering is to determine whether to render the code on the display page. , let’s take a look at it, I hope it will be helpful to everyone.

1.wx:if to implement conditional rendering

In the framework, usewx:if=""To determine whether the code block needs to be rendered:

True

If the value ofconditionis true, the view component will be rendered on the page, otherwise the component will not be displayed. At the same time, it can also be used in combination withwx:elifandwx:else. At this time, multiple conditions can be used to determine whether to render the code.

组件1组件2组件3

Let’s do a demonstration: define a type in the data of thejsfile, and define three types in thewxmlfile A view component determines whether to render the view component based on the value of type.

At this point, changing the value of type can change the content of the page rendering.

2.block is used in combination with wx:if

Becausewx:ifis a control attribute and needs to be added to a on the label. If you want to determine multiple component tags at once, you can use atag to wrap multiple components, and use thewx:ifcontrol attribute above.

  view1   view2 

Note:is not a component, it is just a wrapping container and will not do any rendering on the page.

Let’s do a demonstration: Wrap twoviewcomponents inand usewx: ifdetermines whether these two components need to be rendered.


At this time, twoviewcomponents are rendered on the page, andblockas a wrapping container is not rendered.

3.hiden implements conditional rendering

In the framework, usehidden=""to control the display and hiding of components. Different from the previous one, the hidden component will always be rendered, and it is just a simple control to show and hide.

当条件为true时则会隐藏该元素

Let’s make a demonstration: Define a flag in thejsfile and usehidden in thewxmlfileHide view components.


You can change the flag value inAppDatato control whether to hide the view component.

4. wx:if vs hidden

Because the template inwx:ifmay also contain data binding, so When the conditional value ofwx:ifswitches, the framework has a partial rendering process, because it will ensure that the conditional block is destroyed or re-rendered when switching.

At the same timewx:ifis also lazy. If the initial rendering condition is false, the framework does nothing and starts partial rendering when the condition becomes true for the first time.

In contrast,hiddenis much simpler. The component will always be rendered, and it is just a simple control of display and hiding.

Generally speaking,wx:ifhas a higher switching cost andhiddenhas a higher initial rendering cost. Therefore, if frequent switching is required, it is better to usehidden. If the conditions are unlikely to change during runtime,wx:ifis better.

[Related learning recommendations:小program learning tutorial]

The above is the detailed content of Complete conditional rendering of mini program in ten minutes. For more information, please follow other related articles on the PHP Chinese website!