Mini programme WXSS wx : fonction clé et exemples d'utilisation-Développement de mini-programmes-php.cn

Mini programme WXSS wx : fonction clé et exemples d'utilisation

php是最好的语言

Libérer： 2018-07-23 13:44:54

original

7830 Les gens l'ont consulté

Comment utiliser le mini programme WXSS wx:key ? Lorsque les éléments de la liste changent dynamiquement, nous devons définir wx:key. Vous pouvez désormais fournir l'attr "wx:key" pour un "wx:for" afin d'améliorer les performances.

Lors de la boucle d'un tableau, l'invite suivante apparaît parfois.

VM1364:2 ./index/index.wxml
(anonymous) @ VM1364:2
VM1364:3  Now you can provide attr "wx:key" for a "wx:for" to improve performance.
> 1 | <view wx:for="{{data}}"   class="block" style="{{item.style}}">
    | ^
  2 | Block{{index}}
  3 | <view>{{item.title}}</view>
  4 | </view>
(anonymous) @ VM1364:3

Copier après la connexion

Explication officielle de wx:key :

Si la position de l'élément dans la liste changera dynamiquement ou si de nouveaux éléments sont ajoutés à la liste, et vous voulez Les éléments de la liste conservent leurs propres caractéristiques et statuts (comme le contenu d'entrée dans <input/>, l'état sélectionné de <switch/>), et vous devez utiliser wx:key pour spécifier l'identifiant unique de l'élément dans la liste.

Lorsque les éléments de la liste changent dynamiquement, nous devons définir wx:key. Si nous ne le définissons pas, la situation indiquée ci-dessus apparaîtra. pour ajouter les données 4. Dans l'image de gauche, les données 4 sont disposées dans une position désordonnée. C'est quelque chose que nous ne voulons pas. Par conséquent, afin d'éviter cette situation, nous définissons la valeur de wx:key.<🎜. >

à Deux formes sont fournies : wx:key

1. Chaîne, représentant une certaine propriété de l'élément dans le tableau de la boucle for. La valeur de la propriété doit être la seule chaîne ou. numéro dans la liste et 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 :

. Lorsque des modifications de données déclenchent un nouveau rendu de la couche de rendu, les composants avec des clés seront corrigés et 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 l'efficacité du rendu de liste.

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


<switch wx:for="{{numberArray}}" wx:key="*this" > {{item}} </switch>
<button bindtap="addNumberToFront"> Add to the front </button>

Copier après la connexion

Page({
  data: {
    objectArray: [
      {id: 5, unique: &#39;unique_5&#39;},
      {id: 4, unique: &#39;unique_4&#39;},
      {id: 3, unique: &#39;unique_3&#39;},
      {id: 2, unique: &#39;unique_2&#39;},
      {id: 1, unique: &#39;unique_1&#39;},
      {id: 0, unique: &#39;unique_0&#39;},
    ],
    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: &#39;unique_&#39; + 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
    })
  }
})

Copier après la connexion

Recommandations associées :

Explication détaillée du développement du mini programme wx:key

Mini programme WeChat wx : clé Introduction détaillée

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!