Rendu de la liste des applets WeChat wx : pour

wx:for

---

Utilisez l'attribut de contrôle wx:for sur le composant pour lier un tableau, et le composant peut être rendu à plusieurs reprises en utilisant les données de chaque élément du tableau. wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item

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

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

使用wx:for-item可以指定数组当前元素的变量名

使用wx:for-index可以指定数组当前下标的变量名：

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

wx:for也可以嵌套，下边是一个九九乘法表

<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

---

类似block wx:if，也可以将wx:for用在<block/>标签上，以渲染一个包含多节点的结构块。例如：

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

wx:key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <input/> 中的输入内容，<switch/> 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供

1. 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
2. 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

如不提供 wx:key，会报一个 warningLe nom de variable par défaut de l'élément actuel dans le tableau est index, et le nom de variable de l'élément actuel dans le tableau est par défaut item

<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
    })
  }
})

Utilisez wx:for-item peut spécifier le nom de variable de l'élément actuel du tableauUtilisez wx:for-index pour spécifier le nom de variable de l'indice actuel du tableau :

rrreee

wx:for Il peut également être imbriqué Ci-dessous une table de multiplication
rrreee

block wx:for

---

est similaire à block. wx:if, vous pouvez également utiliser wx:for est utilisé sur la balise <block/> pour afficher un bloc de structure contenant plusieurs nœuds. Par exemple :
rrreee

wx:key

Si la position des éléments dans la liste change dynamiquement ou si de nouveaux éléments sont ajoutés à la liste et que vous souhaitez que les éléments de la liste conservent leurs propres caractéristiques et le statut (tels que Le contenu d'entrée dans<input/>, l'état sélectionné de <switch/>), vous devez utiliser wx : key pour préciser la liste L'identifiant unique du projet.

wx:key La valeur est fournie sous deux formes

1. String, représentant une propriété de l'élément dans le tableau de la boucle for, la valeur de la propriété doit être dans la liste Une chaîne ou un nombre unique qui ne peut pas être modifié dynamiquement.
2. Le mot-clé réservé *this représente l'élément lui-même dans la boucle for. Cette représentation nécessite que l'élément lui-même soit une chaîne ou un nombre unique, tel que :
3. /ol>🎜Lorsque des modifications de données déclenchent le nouveau rendu de la couche de rendu, les composants avec des clés seront corrigés. Le framework veillera à ce qu'ils soient réorganisés plutôt que recréés pour garantir que les composants conservent leur propre état et améliorent le temps de rendu de la liste. efficacité. 🎜🎜🎜Si wx:key n'est pas fourni, un avertissement sera signalé si vous savez clairement que la liste est statique ou que vous n'avez pas besoin de prêter attention à son ordre. , vous pouvez choisir de l'ignorer. 🎜🎜🎜🎜Exemple de code : 🎜🎜rrreee🎜🎜🎜🎜rrreee🎜🎜🎜🎜🎜🎜