Wechat applet learning to achieve list rendering and conditional rendering

summary :

To implement list rendering, we first introduce < block label .

This tag will no longer do any rendering in the list , It is generally used as a container .

We can control the rendering effect by adding a qualifying element to the label .

for example , When we need to render a certain constraint, we can write :

  <block wx:if="{
   {case_length}}">
</block>

When we need to render a list circularly, we can write :

    <label class="radio" wx:for="{
   {len_items}}">
        </block>

Of course... Here len_items It can be more than just a list , It can also be a dictionary .

Circular rendering :

When the render target is a list :

The subscript variable name of the current item in the default array defaults to  index, The variable name of the current item of the array defaults to  item

<view wx:for="{
   {array}}">
  {
   {index}}: {
   {item.message}}
</view>



Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

Use  wx:for-item  You can specify the variable name of the current element of the array ,

Use  wx:for-index  You can specify the variable name of the array's current subscript ：

<view wx:for="{
   {array}}" wx:for-index="idx" wx:for-item="itemName">
  {
   {idx}}: {
   {itemName.message}}
</view>

Examples :

            <radio-group bindchange="getlen_select1">
              <label class="radio" wx:for="{
   {len_items}}">
                <view class="tui-menu-list">
                  <radio color="#007aff" value="{
   {item.name}}" />{
   {index}}: {
   {item.name}}
                  <!-- <block wx:if="{
   {index==0}}"> <view> <button> Put away the list </button></view></block> -->
                </view>
              </label>
            </radio-group>

    len_items: [{
      name: ' nanometer '
    }, {
      name: ' micron '
    }, {
      name: ' mm '
    }, {
      name: ' centimeter '
    }, {
      name: ' rice ',
      checked: true
    }, {
      name: ' km '
    }, {
      name: ' feet '
    }, {
      name: ' Inch '
    }, {
      name: ' code '
    }, {
      name: ' miles '
    }, {
      name: ' The sea '
    }],

  When rendering to a dictionary :

When items When is a dictionary index It is the primary key value instead of the array subscript as in the case of an array .

Examples :

    weight_items: {
      " kg ": {
        proportion: 1
      },
      " g ": {
        proportion: 1000
      },
      " Tons of ": {
        proportion: 0.001
      },
      " pounds ": {
        proportion: 2.204623
      },
      " carat ": {
        proportion: 5000
      },
      " mg ": {
        proportion: 1000000
      },
      " Oz. ": {
        proportion: 35.27396
      },
      " Short ton ( American )": {
        proportion: 0.001102
      },
      " Long ton ( British system )": {
        proportion: 0.000984
      },
      " Jin ": {
        proportion: 2
      },
      " two ": {
        proportion: 20
      },
      " money ": {
        proportion: 2000
      }
    },

            <radio-group bindchange="getlen_select1">
              <label class="radio" wx:for="{
   {weight_items}}" wx:key="*this">
                <view class="tui-menu-list">
                  <radio color="#007aff" value="{
   {index}}" />{
   {index}}

                </view>
              </label>
            </radio-group>

 

 

 

wx:key

If the location of items in the list changes dynamically or new items are added to the list , And I want the items in the list to keep their own characteristics and status （ Such as  input  Input content in ,switch  Selected state of ）, Need to use  wx:key  To specify the unique identifier of the item in the list .

wx:key  The value of is provided in two forms

1. character string , On behalf of the for Cyclic array in item One of the property, The property The value of needs to be a unique string or number in the list , And can't change dynamically .
2. Reserved keyword  *this  On behalf of the for In the loop item In itself , This expression requires item Itself is a unique string or number .

When the data change triggers the render layer to re render , Will correct with key The components of , The framework ensures that they are reordered , Instead of recreating , To ensure that the component remains in its own state , And improve the efficiency of list rendering .

If you do not provide  wx:key, Will report a  warning, If you know that the list is static , Or you don't have to pay attention to the order , You can choose to ignore .

Conditions apply colours to a drawing :

We can not only use if elif else Judge Examples are as follows :

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

Examples : 

 

  <view class="length_select">
        <block wx:if="{
   {!length_select1}}">
          <view>
            <view> <button class="hidelist" bindtap="hidelist_len1">  Put away the list </button></view>
            <radio-group bindchange="getlen_select1">
              <label class="radio" wx:for="{
   {weight_items}}" wx:key="*this">
                <view class="tui-menu-list">
                  <radio color="#007aff" value="{
   {index}}" />{
   {index}}

                </view>
              </label>
            </radio-group>
          </view>
        </block>
        <block wx:else="">
          <view> <button class="displaylist" bindtap="displaylist_len1">  Please select a known unit </button></view>
        </block>
      </view>

 

 

 

 

wx:if  and  hidden

because  wx:if  Templates in may also contain data bindings , So when  wx:if  When switching the condition value of , The frame has a local rendering process , Because it ensures that conditional blocks are destroyed or re rendered when you switch .

meanwhile  wx:if  It's also The inertia of the , If the initial rendering condition is  false, The framework does nothing , Local rendering starts when the condition first becomes true .

by comparison ,hidden  It's much simpler , Components are always rendered , It's just a simple way to control display and hide .

Generally speaking ,wx:if  There is higher switching consumption  hidden  There is a higher initial render cost . therefore , If you need to switch frequently , use  hidden  Better , If conditions are unlikely to change at run time  wx:if  good .