Wie implementiert man die Pulldown-Funktion zum Aktualisieren der Seite im Miniprogramm?

Wie implementiert man die Pulldown-Funktion zum Aktualisieren der Seite im Miniprogramm? Im folgenden Artikel erfahren Sie, wie Sie die Pulldown-Aktualisierung in der WeChat-Applet-Schnittstelle implementieren. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Im WeChat-Applet ist das Aktualisieren der Seite durch Pulldown ein grundlegender Vorgang. Wenn die aktuelle Seite voll ist, ziehen Sie weiter nach unten, um weitere Inhalte zu laden. Sowohl Miniprogramme als auch Webseiten können diese Funktion implementieren. Der Unterschied besteht darin, dass die Miniprogrammschnittstelle über eine API verfügt, die die Pulldown-Aktualisierungsfunktion implementieren kann, die nur vom System aufgerufen werden muss.

Ein Blick auf die WeChat-Entwicklungsdokumentation zeigt, dass das Attribut „enablePullDownRefresh“ auf „true“ gesetzt ist. Die Pulldown-Aktualisierung ist standardmäßig aktiviert. enablePullDownRefresh kann in app.json und xxx.json der Seite geschrieben werden. Der Unterschied zwischen den beiden besteht darin, dass app.json eine globale Pulldown-Aktualisierung ist, während ***.json nur eine einzelne Seiten-Pulldown-Aktualisierung ist Es können fensterbezogene Einstellungen festgelegt werden, um die Fensterleistung dieser Seite zu bestimmen, sodass der Fensterschlüssel nicht geschrieben werden muss. Eine andere Methode besteht darin, die Scroll-Ansicht abzuhören und die Pulldown-Aktualisierung anzupassen. Beim Scrollen nach oben/links wird das Scrolltoupper-Ereignis ausgelöst, sodass wir dieses Attribut zur Implementierung verwenden können die Pull-Down-Refresh-Funktion.

Die erste Methode ist relativ einfach und leicht zu verwenden. Schließlich sind einige Logiksysteme bereits für Sie geeignet. Wenn Sie E-Commerce erklären, verwenden Sie einfach den ersten, der vom System bereitgestellt wird. Der Hauptzweck besteht darin, allen die Verwendung beizubringen.

1. home.json-Parameterkonfiguration

enablePullDownRefresh: true

Welche Seite wir zum Aktualisieren herunterziehen müssen, finden Sie im entsprechenden xxx. json dieser Seite Das obige Attribut ist in der Datei konfiguriert. Sie können natürlich auch anhand der wörtlichen Bedeutung dieses Attributs erkennen, ob eine Pulldown-Aktualisierung zulässig ist Bei der Aktualisierung können Sie das obige Attribut direkt im Fenster der globalen Variablen app.json konfigurieren, sodass alle Projekte eine Pulldown-Aktualisierung zulassen. Dies muss hinzugefügt werden, da das System standardmäßig nicht über die Pulldown-Aktualisierungsfunktion verfügt .

home.js

//下拉刷新
onPullDownRefresh:function()
{
wx.showNavigationBarLoading() //在标题栏中显示加载
//模拟加载
setTimeout(function()
{
// complete
wx.hideNavigationBarLoading() //完成停止加载
wx.stopPullDownRefresh() //停止下拉刷新
},1500);
},

onPullDownRefresh-Pulldown-Aktualisierungsereignisüberwachung. Schauen Sie sich die Details im Inneren an. Zur Steuerung werden wx.showNavigationBarLoading() und wx.hideNavigationBarLoading() verwendet Da wir die Netzwerkanforderung noch nicht erklärt haben, habe ich die Methode setTimeout verwendet. Diese Methode kann auch die Zeit simulieren, die durch das Laden des Netzwerks verbraucht wird Nachdem das Laden des Netzwerks abgeschlossen ist, müssen wir die Pulldown-Aktualisierung wx.stopPullDownRefresh() stoppen.

Mehr laden

Es gibt zwei Möglichkeiten, mehr zu laden

1. Rufen Sie die System-API auf

2. Überwachen Sie den Bildlauf. Ansicht, bindscrolltolower gleitet an den unteren Rand der Überwachung

Die Verarbeitungsmethode unterscheidet sich geringfügig von der Pulldown-Aktualisierung, ist aber dieselbe.

home.js

onReachBottom: function () {
console.log(\'加载更多\')
setTimeout(() => {
this.setData({
isHideLoadMore:true,
recommends: [
{
goodId: 7,
name:\'.....\',
url: \'....\',
imageurl:\'......\',
},
{
goodId: 10,
name:\'......\',
url:\'......\',
},
],
})
}, 1000)
}

onReachBottom-System ermöglicht die Überwachung von Bodenbildungsereignissen. Genau wie bei der Pulldown-Aktualisierung simulieren wir auch einige Daten und fügen ein Zeitverzögerungsereignis hinzu, isHideLoadMore, ein benutzerdefinierter Wert Wird verwendet, um die Anzeige und das Ausblenden der Ladesteuerung zu steuern

home.wxml

Loading

Es gibt auch Möglichkeiten, eine Pulldown-Aktualisierung zu implementieren Das Applet Es gibt andere, die die H5-Webseite imitieren können, aber aufgrund der Verwendung von API-Schnittstellen kann das WeChat-Applet die Belastung für Entwickler bei der Implementierung der Pulldown-Aktualisierungsfunktion verringern.

Empfohlen: „Mini-Tutorial zur Programmentwicklung“

Das obige ist der detaillierte Inhalt vonWie implementiert man die Pulldown-Funktion zum Aktualisieren der Seite im Miniprogramm?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!