Pull-up der WeChat-Applet-Entwicklungsliste zum Laden, Pull-down zum Aktualisieren des Beispielcodes

In diesem Artikel wird hauptsächlich das Beispiel des Hochziehens zum Laden und Herunterziehen zum Aktualisieren der WeChat-Applet-Liste vorgestellt. Es ist von großem praktischen Wert und Freunde in Not können darauf zurückgreifen.

1. Liste (der Inhalt dieses Teils stammt aus den offiziellen Dokumenten)

Für diese Funktion bietet das WeChat-Applet keine Steuerelemente ähnlich der Listenansicht in Android Daher müssen wir das Steuerattribut wx:for verwenden, um ein Array zu binden und die Komponente wiederholt mit den Daten jedes Elements im Array zu rendern, um den Effekt einer Liste zu erzielen.

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

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

Der standardmäßige tiefgestellte Variablenname des aktuellen Elements des Arrays ist standardmäßig index und die Variable Der Name des aktuellen Elements im Array lautet standardmäßig. Der Standardwert ist item. Natürlich kann er auch über wx:for-item und wx:for-index angegeben werden.

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

wx: for kann auch verschachtelt werden, unten ist ein Einmaleins

<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

Ähnlich wie der Block wx:if kann wx:for auch für das Tag verwendet werden, um einen Strukturblock mit mehreren Knoten darzustellen. Zum Beispiel:

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

wx:key

Wenn sich die Position des Elements in der Liste dynamisch ändert oder neue Elemente zur Liste hinzugefügt werden , und Sie möchten, dass die Elemente in der Liste ihre eigenen Eigenschaften und Status behalten (z. B. den Eingabeinhalt in , den ausgewählten Status von ), und Sie müssen wx:key verwenden, um Geben Sie die eindeutige Kennung des Elements in der Liste an.

Der Wert von wx:key wird in zwei Formen bereitgestellt

1. Zeichenfolge, die eine bestimmte Eigenschaft des Elements im Array der for-Schleife darstellt die einzige in der Liste. Eine Zeichenfolge oder Zahl, die nicht dynamisch geändert werden kann.

2. 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:
Triggern Sie die Wiedergabe, wenn die Daten Änderungen Wenn die Ebene neu gerendert wird, werden Komponenten mit Schlüsseln korrigiert, und das Framework stellt sicher, dass sie neu angeordnet und nicht neu erstellt werden, um sicherzustellen, dass die Komponenten ihren eigenen Zustand beibehalten und die Effizienz des Listenrenderings verbessern.

Wenn wx:key nicht angegeben wird, wird eine Warnung angezeigt. Wenn Sie eindeutig wissen, dass die Liste statisch ist oder Sie nicht auf ihre Reihenfolge achten müssen, können Sie sie 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: '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: &#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
 })
 }
})

2. Zum Aktualisieren nach unten ziehen

Die Mini-Programmseite integriert die Dropdown-Funktion und stellt eine Schnittstelle bereit. Wir benötigen nur einige Konfigurationen, um den Ereignisrückruf zu erhalten.

1. Muss in der .json-Datei konfiguriert werden. (Das Format der .json-Datei und der Unterschied zwischen app.json und der .json-Datei einer bestimmten Seite wurden bereits erwähnt. Wenn Sie Fragen haben, können Sie fortfahren.) Wenn in der app.json-Datei konfiguriert, Anschließend kann das gesamte Programm zum Aktualisieren heruntergezogen werden. Wenn es in die .json-Datei einer bestimmten Seite geschrieben ist, handelt es sich um die entsprechende Seite und kann zum Aktualisieren heruntergezogen werden.

Die .json-Datei der spezifischen Seite:

{
 "enablePullDownRefresh": true
}

app.json-Datei:

"window": {
 "enablePullDownRefresh": true
 }

2. Rückruffunktion in js-Datei hinzufügen

 // 下拉刷新回调接口
 onPullDownRefresh: function () {
  // do somthing
 },

3. Daten hinzufügen

Der übliche Pulldown-Aktualisierungsvorgang ist Setzen Sie die Abfragebedingungen zurück, sodass auf der Seite die neueste Datenseite angezeigt wird. Das Folgende ist der Code der Pulldown-Aktualisierungs-Rückrufschnittstelle in der Demo des Autors und der allgemeine Betriebsprozess.

 // 下拉刷新回调接口
 onPullDownRefresh: function () {
  // 我们用total和count来控制分页，total代表已请求数据的总数，count代表每次请求的个数。
  // 刷新时需把total重置为0，代表重新从第一条请求。
  total = 0; 
  // this.data.dataArray 是页面中绑定的数据源
  this.data.dataArray = [];
  // 网络请求，重新请求一遍数据
  this.periphery();
  // 小程序提供的api，通知页面停止下拉刷新效果
  wx.stopPullDownRefresh;
 },

3. Pull-Up-Laden

Wie Pull-Down-Aktualisierung bietet das Miniprogramm auch Pull-Up-Laden. up wird geladen Die Callback-Schnittstelle. Im offiziellen Dokument gibt es keine detaillierte Einführung. Nach dem Testen wurde festgestellt, dass die Pull-Up-Callback-Schnittstelle keine zusätzliche Konfiguration erfordert („enablePullDownRefresh“: true muss beim Herunterziehen in der .json-Datei konfiguriert werden). direkt aktiviert werden, wenn die Seite nach unten gleitet. Kann einen Rückruf erhalten.

1. Rückruffunktion in js-Datei hinzufügen

 // 上拉加载回调接口
 onReachBottom: function () {
  // 我们用total和count来控制分页，total代表已请求数据的总数，count代表每次请求的个数。
  // 上拉时需把total在原来的基础上加上count，代表从count条后的数据开始请求。
  total += count;
  // 网络请求
  this.periphery();
 },

Das obige ist der detaillierte Inhalt vonPull-up der WeChat-Applet-Entwicklungsliste zum Laden, Pull-down zum Aktualisieren des Beispielcodes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!