How to implement WeChat applet page rendering

This article mainly introduces the implementation method of WeChat applet page rendering. The article introduces the sample code in detail, which has certain reference value for everyone's study or work. Friends who need it can refer to it.

Conditional rendering: wx:if, wx:elif, wx:else

<view wx:if="{{ > 5}}" >1</view>
<view wx:elif="{{ > 2}}">2</view>
<view wx:else>3</view>

Since wx:if is a control property, it needs to be added to a tag. If you want to judge multiple component tags at once, you can use the <block></block> tag to wrap multiple components and use the wx:if to control the attribute on it.

<block>
<view wx:if="{{ > 5}}" >1</view>
<view wx:elif="{{ > 2}}">2</view>
<view wx:else>3</view>
</block>

block is a wrapper element that does not render any rendering on the page.

hidhen：

In applets, hidden = "{{condition}}" can also control the display and hiding of elements. Hide for true, display for false

<view hidden = "{{condition}}" >123</view>

List rendering: wx:for

If no parameters are specified, the default index is index and the value is item

&lt;view wx:for="{{userList}}" wx:key="index"&gt;The index is： {{index}}, The value is： {{item}}&lt;/view&gt;
 
 data: {
  userList :['zhangsan', "lisi", 'wnagwu']
 }

Manually specify the index and the variable name of the current item:

&lt;view wx:for="{{userList}}" wx:key="index" wx:for-index="i" wx:for-item="it"&gt;
 The index is： {{i}}, The value is： {{it}}
&lt;/view&gt;
 
data: {
  userList :['zhangsan', "lisi", 'wnagwu']
 }

block wx:for list rendering

&lt;block wx:for="{{userList}}" wx:key="index" wx:for-index="i" wx:for-item="it"&gt;
 &lt;view&gt;The index is： {{i}}, The value is： {{it}}&lt;/view&gt;
&lt;/block&gt;

What is key in list loops:

If the position of the item in the list changes dynamically or new items are added to the list, and the items in the list want to maintain their own characteristics and state (such as <input />), and the selected state of <checkbox/>, Xu Ao uses wx:key to specify the unique identifier of the item in the list.

When the data changes trigger the rendering layer to re-render, components with keys are corrected. The framework ensures that they are re-ordered instead of re-created to ensure that the components remain in their own state and improve efficiency when rendering lists.

Notes on key values:

The key value must have a unique row and cannot be changed dynamically.

The value of the key must be a number or a string

Keep the key child *this represents the item itself in the for loop, it can also act as a key value, but with the following limitations, the item itself needs to be a unique string or number.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.