Wechat applet list (list rendering of data rendering)

Wechat applet list

Hello! This is a kind of note for me to learn. It's for reference only. If there is any mistake, welcome to guide me

List render

wx:for

Bind an array with the wx:for control attribute on the component, and you can render the component repeatedly with the data of each item in the array.
The subscript variable name of the current item in the default array is index by default, and the variable name of the current item in the array is item by default

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

Use Wx: for item to specify the variable name of the current element of the array,

Using 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>

wx:for can also be nested. Below is a multiplication table:

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>

block wx:for
Similar to block wx:if, wx:for can also be used on tags to render a structural block with multiple nodes. For example:

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

wx:key
If the location of the items in the list changes dynamically or new items are added to the list, and you want the items in the list to maintain their own characteristics and status (such as the input content in the input, the selected state of the switch), you need to use wx:key to specify the unique identifier of the items in the list.

The value of wx:key is provided in two forms

String, which represents a property of item in the array of for loop. The value of the property needs to be a unique string or number in the list and cannot be changed dynamically.
The reserved keyword * this represents the item itself in the for loop, which means that the item itself needs to be a unique string or number.
When the data changes trigger the rendering layer to re render, the components with key will be corrected. The framework will ensure that they are re ordered rather than re created to ensure that the components remain in their own state and improve the efficiency of list rendering.

If wx:key is not provided, a warning will be reported. If you know that the list is static or you don't need to pay attention to its order, you can choose to ignore it.

Example code:

<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
<button bindtap="switch"> Switch </button>
<button bindtap="addToFront"> Add to the front </button>

<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
<button bindtap="addNumberToFront"> Add to the front </button>
Page({
  data: {
    objectArray: [
      {id: 5, unique: 'unique_5'},
      {id: 4, unique: 'unique_4'},
      {id: 3, unique: 'unique_3'},
      {id: 2, unique: 'unique_2'},
      {id: 1, unique: 'unique_1'},
      {id: 0, unique: 'unique_0'},
    ],
    numberArray: [1, 2, 3, 4]
  },
  switch: function(e) {
    const length = this.data.objectArray.length
    for (let i = 0; i < length; ++i) {
      const x = Math.floor(Math.random() * length)
      const y = Math.floor(Math.random() * length)
      const temp = this.data.objectArray[x]
      this.data.objectArray[x] = this.data.objectArray[y]
      this.data.objectArray[y] = temp
    }
    this.setData({
      objectArray: this.data.objectArray
    })
  },
  addToFront: function(e) {
    const length = this.data.objectArray.length
    this.data.objectArray = [{id: length, unique: 'unique_' + length}].concat(this.data.objectArray)
    this.setData({
      objectArray: this.data.objectArray
    })
  },
  addNumberToFront: function(e){
    this.data.numberArray = [ this.data.numberArray.length + 1 ].concat(this.data.numberArray)
    this.setData({
      numberArray: this.data.numberArray
    })
  }
})

Be careful:

When the value of wx:for is a string, the string will be parsed into an array of strings (which I didn't see when I studied)

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

Equate to

<view wx:for="{{['a','r','r','a','y']}}">
  {{item}}
</view>

Note: if there is a space between curly braces and quotation marks, it will eventually be parsed into a string

<view wx:for="{{[1,2,3]}} ">
  {{item}}
</view>

Equate to

<view wx:for="{{[1,2,3] + ' '}}" >
  {{item}}
</view>

The above are all the official documents I copied. I wanted to record them, but I found that rendering of this list is not easy to write, so I copied one. I learned it for a few days, because I didn't touch css before, so I felt that the layout of the applet was quite troublesome, haha, but it was OK. Now I feel that the display, position and float of css are quite common, and I want to learn To glance at
Wechat official document portal
css-display
css-flex
css-position
css-float

I am a dreamer. Thank you for watching my blog. If there is any mistake, please feel free to contact me at QQ:897589417

Published 25 original articles, won praise 2, visited 4781
Private letter follow

Tags: Attribute

Posted on Fri, 13 Mar 2020 05:44:21 -0400 by emfung