Wechat applet list (list rendering of data rendering)

Hello ！ Beginners of small programs , This is a kind of note for my study , For reference only , If there are mistakes , Welcome the boss to guide

The list of rendering

wx:for

Use... On components wx:for Control property binding an array , You can use the data of each item in the array to render the component repeatedly .
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>

wx:for You can also nest , 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 block wx:if, Can also be wx:for Used on labels , To render a structure 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 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

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

Sample 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 wx:for When the value of is string , Will parse the string into an array of strings ( I didn't see this when I studied )

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

Equate to

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

Be careful ： If there is a space between curly brackets and quotation marks , 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 official documents I copied , I originally wanted to record , But I found that there was nothing to write about this list rendering , Just copy A copy of , I studied for a few days , Because I haven't touched before css, So I feel that the layout of the applet is troublesome , ha-ha , But it's ok , Now I feel css Of display,position,float It's quite common , Those who want to learn can to glance at
Wechat official document portal
css-display
css-flex
css-position
css-float

I was dreaming , Thank you for watching my blog , If there is any mistake , Please feel free to contact me ,QQ：897589417