Complete conditional rendering of mini program in ten minutes

This article brings you relevant knowledge about WeChat 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, use wx:if="" To determine whether the code block needs to be rendered:

<view>True<view></view></view>

If the value of condition is 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 with wx:elif and wx:else. At this time, multiple conditions can be used to determine whether to render the code.

<view>组件1</view><view>组件2</view><view>组件3</view>

Let’s do a demonstration: define a type in the data of the js file, and define three types in the wxml file 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

Because wx:if is 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 a <block></block> tag to wrap multiple components, and use the wx:if control attribute above.

<block>
  <view> view1 </view>
  <view> view2 </view></block>

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 two view components in <block></block> and use wx: if determines whether these two components need to be rendered.


At this time, two view components are rendered on the page, and block as a wrapping container is not rendered.

3.hiden implements conditional rendering

In the framework, use hidden="" 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.

<view>当条件为true时则会隐藏该元素</view>

Let’s make a demonstration: Define a flag in the js file and use hidden in the wxml file Hide view components.


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

4. wx:if vs hidden

Because the template in wx:if may also contain data binding, so When the conditional value of wx:if switches, 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 time wx:if is 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, hidden is much simpler. The component will always be rendered, and it is just a simple control of display and hiding.

Generally speaking, wx:if has a higher switching cost and hidden has a higher initial rendering cost. Therefore, if frequent switching is required, it is better to use hidden. If the conditions are unlikely to change during runtime, wx:if is 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!