Detaillierte Erklärung von wx:key in der Miniprogrammentwicklung

Dieser Artikel stellt hauptsächlich die relevanten Informationen des WeChat-Applets wx:key im Detail vor und fügt einfache Codebeispiele bei, um jedem das Lernen und Verstehen zu erleichtern. Freunde in Not können sich auf

WeChat-Applet wx beziehen :key Ich wusste nicht viel darüber, was los war, als ich studierte, nachdem ich die Informationen online überprüft hatte:

Ich persönlich habe das Gefühl, dass die offiziellen Beispiele nicht sehr klar sind . Die offizielle Erklärung lautet wie folgt:

wx:key

Wenn sich die Position des Elements in der Liste dynamisch ändert oder neue Elemente vorhanden sind der Liste hinzugefügt werden und Sie möchten, dass die Elemente ihre eigenen Eigenschaften und Zustände beibehalten (z. B. den Eingabeinhalt in , den ausgewählten Zustand in ), und Sie müssen wx verwenden: Schlüssel, um den eindeutigen Bezeichner des Elements in der Liste anzugeben.

Der Wert von wx:key wird in zwei Formen bereitgestellt:

String, dargestellt in for Schleife Eine bestimmte Eigenschaft des Elements im Array. Der Wert dieser Eigenschaft muss die einzige Zeichenfolge oder Zahl in der Liste sein und kann nicht dynamisch geändert werden.

Das reservierte Schlüsselwort *this stellt das Element selbst in der for-Schleife dar. Diese Darstellung erfordert, dass das Element selbst eine eindeutige Zeichenfolge oder Zahl ist, wie zum Beispiel:

Ausgelöst, wenn die Daten Änderungen Wenn die Rendering-Ebene neu gerendert wird, korrigiert sie die Komponenten mit Schlüsseln. Das Framework stellt sicher, dass sie neu angeordnet und nicht neu erstellt werden, um sicherzustellen, dass die

-Komponenten ihre eigenen behalten Zustand. Und verbessern Sie die Effizienz der Listenwiedergabe.

Wenn wx:key nicht angegeben wird, wird eine Warnung angezeigt, wenn Sie eindeutig wissen, dass die Liste statisch ist, oder Sie nicht darauf achten müssen Wenn Sie eine Bestellung aufgeben, können Sie diese ignorieren.

Beispielcode:

<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: &#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
  })
 }
})

Schreiben Sie hier mein persönliches Verständnis auf. Ich hoffe, Sie können mich korrigieren, wenn es etwas gibt falsch: Wenn beispielsweise kein wx:key vorhanden ist und eine der Schaltflächen ausgewählt wird, wenn die Reihenfolge geändert oder Optionen hinzugefügt werden, wird die ausgewählte Schaltfläche nicht angezeigt Wenn eine Schaltfläche die Reihenfolge ändert, befindet sie sich immer an einer festen Position. Das Gegenteil gilt für Listen oder andere Tags, die die Reihenfolge ändern oder Elemente hinzufügen können

Vollständiger Quellcode des WeChat Mini-Programms

Chasing WeChat Mini Program App Store

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung von wx:key in der Miniprogrammentwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!