Cet article présente principalement les informations pertinentes de l'applet WeChat wx:key en détail et joint des exemples de code simples pour aider tout le monde à apprendre et à comprendre. Les amis dans le besoin peuvent se référer à
Applet WeChat wx. :key Je ne savais pas grand chose de ce qui se passait pendant mes études. Après avoir vérifié les informations en ligne, j'ai fait le tri :
Personnellement, j'ai l'impression que les exemples officiels ne sont pas très clairs. . L'explication officielle est la suivante :
wx:key
Si la position de l'élément dans la liste change dynamiquement ou si de nouveaux éléments sont créés. sont ajoutés à la liste et vous souhaitez que les éléments conservent leurs propres caractéristiques et états (tels que le contenu d'entrée dans , l'état sélectionné dans
La valeur de wx:key est fournie sous deux formes
String, représentée dans pour Loop Une certaine propriété de l'élément dans le tableau La valeur de la propriété doit être la seule chaîne ou nombre de la liste et ne peut pas être modifiée dynamiquement.
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 :
Déclenché lorsque les données. changements Lorsque la couche de rendu restitue, elle corrigera les composants avec des clés. Le framework veillera à ce qu'ils soient réorganisés plutôt que recréés pour garantir que les
composants conservent les leurs. state.Et améliorer l’efficacité du rendu des listes.
Si wx:key n'est pas fourni, un avertissement sera signalé si vous savez clairement que la liste est statique, ou si vous n'avez pas besoin de prêter attention à son ordre. , vous pouvez choisir de l'ignorer.
Exemple de 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 }) } })
Écrivez ma compréhension personnelle ici. J'espère que vous pourrez me corriger s'il y a quelque chose. faux :
[Recommandations associées]
1. Code source complet du programme WeChat Mini
2 À la poursuite de l'App Store du programme WeChat
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!