Wie implementiert das Miniprogramm die Funktion zum Laden von Daten in Seiten?

Wie implementiert das Miniprogramm die Funktion zum Laden von Daten in Seiten? Der folgende Artikel stellt es Ihnen vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Bei der Nutzung von Anwendungen mit großen Datenmengen wie QQ, Weibo oder News stößt man häufig auf die Seitenladefunktion. Sie bietet nicht nur vielfältige Anwendungsszenarien, aber auch eine hohe Benutzererfahrung. WeChat-Miniprogramme können auch Daten in Seiten laden. Dieser Artikel stellt vor, wie man Seitenladedaten in WeChat-Miniprogrammen erstellt.

Um eine solche Funktion zu implementieren, müssen Sie bei der Datenanforderung im Allgemeinen die aktuelle Anzahl der angeforderten Seiten sowie die Größe der Seite (die auf jeder Seite angezeigte Anzahl) hinzufügen Offset und Endoffset der Anfrage. Wenn Sie beispielsweise 10 Daten auf einer Seite anzeigen, beginnt die erste Anfrage (die erste Seite) mit 0 und endet mit 9, die zweite Seite liegt zwischen 10 und 19 bald. Da wir die Paging-Ladefunktion implementieren möchten, ist das Wichtigste die Verarbeitungsereignisse von Pull-Down und Pull-Up. Die Pull-Up- und Pull-Down-Triggerereignisse wurden für uns wie folgt im WeChat-Applet gekapselt 🎜>

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh:function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},

Vielleicht sind Sie neu beim WeChat-Applet-Programm-Enthusiasten und werden auf eine Frage stoßen: Warum schreibe ich die Pull-Up- und Pull-Down-Funktionen neu, aber warum rufen die Funktionen nicht zurück, wenn ich nach oben oder unten ziehe? Keine Panik, denn zusätzlich zum Umschreiben dieser beiden Funktionen müssen wir auch den folgenden Code zur JSON-Konfigurationsdatei hinzufügen

{
enablePullDownRefresh: true
}

Mit dem obigen Code wird jedes Mal, wenn wir nach oben oder unten ziehen, die Phase Die entsprechende Funktion wird ausgelöst.

Daten in Daten erstellen

data: {
page: 1,
pageSize: 30,
hasMoreData: true,
contentlist: [],
},

Seite ist die Seite, auf der aktuell Daten angefordert werden, pageSize ist die Größe der Daten auf jeder Seite, hasMoreData wird verwendet, um zu bestimmen, ob die Anforderung beim Ziehen fortgesetzt werden soll up Daten, das heißt, gibt es mehr Daten? Wenn unsere Netzwerkanforderungsdaten erfolgreich sind und die Länge der angeforderten Daten kleiner als pageSize: 30 ist, bedeutet dies, dass keine Daten mehr vorhanden sind. Ändern Sie hasMoreData in false. Wenn die angeforderte Datenlänge 30 beträgt, bedeutet dies, dass mehr Daten vorhanden sind. Dann wird hasMoreData dauerhaft geändert und die Seitennummer wird um 1 erhöht. Wenn die Seite heruntergezogen wird, wird die Seite zuerst auf 1 geändert und dann werden die Daten abgefragt, wenn die Datenabfrage erfolgreich ist Die Seite ist 1, die erhaltenen Daten werden direkt der Inhaltsliste zugewiesen. Wenn die Seite größer als 1 ist, werden die angeforderten Daten an die Inhaltsliste angehängt. Auf diese Weise kann die Seitenladefunktion realisiert werden.

Nach der obigen Analyse haben wir ein klares Verständnis für die Implementierung des Paging-Ladens. Daher werde ich als Nächstes die Implementierung des Codes vorstellen.

getMusicInfo: function (message) {
var that = this
var data = {
showapi_appid:\'25158\',
showapi_sign:\'c0d685445898438f8c12ee8e93c2ee74\',
keyword: \'我\',
page:that.data.page
}
network.requestLoading(\'https://route.showapi.com/213-1\', data, message,function (res) {
console.log(res)
var contentlistTem= that.data.contentlist
if(res.showapi_res_code == 0) {
if(that.data.page == 1) {
contentlistTem= []
}
var contentlist =res.showapi_res_body.pagebean.contentlist
if(contentlist.length < that.data.pageSize) {
that.setData({
contentlist:contentlistTem.concat(contentlist),
hasMoreData:false
})
} else {
that.setData({
contentlist:contentlistTem.concat(contentlist),
hasMoreData:true,
page:that.data.page + 1
})
}
} else {
wx.showToast({
title: res.showapi_res_error,
})
}
}, function (res) {
wx.showToast({
title: \&#39;加载数据失败\&#39;,
})
})
},

Die obige Funktion ist die Anforderungsverarbeitungslogik zum Abrufen von Musiklisteninformationen. Diese Funktion verfügt über eine Parametermeldung, die zum Anzeigen der Eingabeaufforderungsinformationen beim Laden von Daten verwendet wird aktualisiert die Daten. Beim Aufrufen wird angezeigt, dass weitere Daten geladen werden.

Dann beginnen wir einmal beim Betreten der Seite mit dem Laden der Daten, also in der onLoad-Funktion, wie folgt

onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
var that = this
that.getMusicInfo(\'正在加载数据...\')
},

Dann ist die Implementierung der Pull-up- und Drop-down-Funktionen wie folgt

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh:function () {
this.data.page = 1
this.getMusicInfo(\'正在刷新数据\')
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
if(this.data.hasMoreData) {
this.getMusicInfo(\'加载更多数据\')
} else {
wx.showToast({
title: \'没有更多数据\',
})
}
},

Die Paging-Funktion kann Benutzern Inhalte besser anzeigen und Benutzer binden. Heutzutage sind Miniprogramme ein neuer Kanal für Benutzer, um Informationen zu erhalten. Es ist am besten, Daten zu kombinieren, um diese Funktion zu implementieren. Bei unsachgemäßer Handhabung kann es leicht zu Datenverlust und unnötigen Verlusten kommen.

Empfohlen: „

Mini-Tutorial zur Programmentwicklung“

Das obige ist der detaillierte Inhalt vonWie implementiert das Miniprogramm die Funktion zum Laden von Daten in Seiten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!