Das WeChat-Applet implementiert den Wasserfallfluss, Paging, Scrollen und Laden

In diesem Artikel wird der spezifische Code für das WeChat-Applet zur Implementierung des Wasserfall-Flow-Paging-Scrolling-Ladens zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Zwei Paging-Methoden

Der normale Paging-Effekt bietet unten auf der Seite Schaltflächen zum Klicken auf die nächste Seite und die vorherige Seite. Die Schnittstelle zum Abrufen von Daten wird erst nach dem Klicken auf die Schaltflächen ausgelöst. Diese Methode bietet im Allgemeinen eine gute Benutzererfahrung.

Ein weiterer Paging-Effekt erfordert nicht, dass der Benutzer auf eine Schaltfläche klickt. Solange die letzten Daten auf der aktuellen Seite durchsucht werden, sendet das System automatisch eine Anforderung, um die Daten der nächsten Seite abzurufen und auf der Seite anzuzeigen, sodass ein Effekt ähnlich dem unendlichen Scrollen erzielt werden kann.

Am Beispiel von csdn: Wenn die Bildlaufleiste diese Stelle erreicht, wird automatisch die Schnittstelle aufgerufen, um die nächste Datenseite anzufordern, und diese dann in der geladenen Datenliste gesammelt.

Umsetzungsideen

Es gibt ein Problem mit der Scroll-Paging-Methode. Wenn der Benutzer sehr schnell scrollt, kann die zweite Anfrage starten, bevor die erste Anfrage abgeschlossen ist. Um dieses Problem zu vermeiden, können wir ein Sperrflag hinzufügen, es nach dem Senden einer Anfrage sperren und die Sperre nach Abschluss der Anfrage aufheben. Dadurch kann dieses Problem perfekt vermieden werden.

Holen Sie sich die Idee der Umsetzung

1. Bestimmen Sie, ob Daten vorhanden sind, die geladen werden können
2. Holen Sie sich das Schloss
3. Anfrage senden und Schnittstelle aufrufen
4. Entriegeln Sie die Sperre
5. Daten zurückgeben

Code-Implementierung

Zuerst brauchen wir ein Paging-Objekt

Klasse Paging{
  page // Zeichnet die aktuelle Seitenzahl auf count // Zeichnet die Anzahl der angezeigten Seiten auf req // Schnittstellenanforderungsobjekt (ich habe es hier gekapselt, und Sie können die Eigenschaften entsprechend Ihren Anforderungen definieren)
  url //Anforderungspfad moreData = true //Gibt es eine nächste Seite mit Daten? (Standardmäßig gibt es eine nächste Seite mit Daten, wenn die Anforderung zum ersten Mal gestellt wird)
  accumulator = [] //Geladene Datenliste locker = false //Sperrflag}

Definieren Sie einen Konstruktor für das Paging-Objekt, der standardmäßig mit der Anforderung ab der ersten Seite beginnt, mit fünf Datenelementen pro Seite

Konstruktor(Anforderung, Seite=0, Anzahl=5){
    diese.seite = Seite
    this.count = Anzahl
    dies.req = req
    diese.URL = erforderliche.URL
  }

Als nächstes schreiben Sie die Methode getMoreData

getMoreData(){
 //1. Bestimmen Sie, ob die nächste Seite mit Daten vorhanden ist//2. Holen Sie sich die Sperre und bestimmen Sie, ob die Sperre aufgehoben ist//3. Fordern Sie Daten an//4. Geben Sie die Sperre frei}

1. Bestimmen Sie, ob Daten für die nächste Seite vorhanden sind

Hier erhalten wir direkt das moreData-Attribut zur Beurteilung

wenn(!diese.mehrDaten){
      zurückkehren
}

2. Holen Sie sich das Schloss

Hier wird eine neue Methode hinzugefügt. Wenn derzeit keine Sperre vorhanden ist, bedeutet dies, dass Sie weiterhin Daten anfordern können. Setzen Sie vor dem Anfordern von Daten das Sperrflag auf „true“, um zu verhindern, dass die nächste Anforderung weiterhin gesendet wird.

_getLocker(){
    wenn(dieses.schließfach){
      return false
    }
    this.locker = true
    returniere wahr
}

3. Daten anfordern

Die Datenstruktur, die wir benötigen, um zur Seite zurückzukehren, ist wie folgt:

{
        empty, //Ist es leer? items, //Daten der aktuellen Seite moreData, //Gibt es eine nächste Seite des Datenakkumulators //Alle angeforderten Daten}

Definieren Sie zunächst eine Methode zum Abrufen der Anforderungsstruktur

 _getCurrentReq(){
    let url = diese.url
    //Anforderungsparameter festlegen const params = `page=${this.page}&count=${this.count}`
    //Beurteilen Sie die Spleißmethode if(url.includes('?')){
      URL += '&' + Parameter
    }anders{
      URL += '?' + Parameter
    }
    this.req.url = URL
    gib dies zurück.req
 }

So erhalten Sie die Daten:

 _actualGetData(){
 
    const req = this._getCurrentReq() // Den spezifischen Anforderungsinhalt abrufen let paging = Http.request(req) // Rufen Sie die Anforderungsmethode im benutzerdefinierten Tool auf, um Daten abzurufen // Wenn kein Ergebnis erzielt wird, geben Sie direkt null zurück
    wenn(!paging){
      return null
    }
  
    wenn (paging.total === 0) {
      zurückkehren {
        leer: wahr,
        Artikel: [],
        weitereDaten: false,
        Akkumulator: []
      }
    }
    
    //Wenn die aktuelle Seitenzahl kleiner als die Gesamtseitenzahl ist, bedeutet dies, dass noch Daten für die nächste Seite vorhanden sind. Setzen Sie moreData auf true, andernfalls auf false.
    this.moreData = Seitennummer < Gesamtseite-1 ? true : false
    
    //Wenn Daten für die nächste Seite vorhanden sind, erhöhe die Seite um 1, um die nächste Erfassung zu erleichtern, if (this.moreData) {
      diese.seite += 1
    }
    
    //Da die Daten der Wasserfallflussanzeige akkumuliert werden müssen, muss auch die Datenliste akkumuliert werden this.accumulator = this.accumulator.concat(paging.items)
    zurückkehren {
      leer: falsch,
      Elemente: Paging.Elemente,
      mehrDaten: diese.mehrDaten,
      Akkumulator: dieser.Akkumulator
    }
 }

4. Entriegeln Sie die Sperre

Um die Sperre aufzuheben, ändern Sie einfach den Zustand der Sperrkennung.

this.locker = false

Die Methode getMoreData wird geschrieben und kann dann in der js-Datei der entsprechenden Schnittstelle aufgerufen werden

Es muss automatisch einmal aufgerufen werden, wenn die Schnittstelle zum ersten Mal aufgerufen wird, und dann jedes Mal erneut aufgerufen werden, wenn der Benutzer den unteren Rand berührt

initBottomSpuList(){
 //Paging-Objekt abrufen const paging = new Paging({
      URL: URL
    })
    //Speichern Sie das Paging-Objekt in JS-Daten this.data.spuPaging = Paging
    //Methode aufrufen const data = paging.getMoreData()
    wenn(!data){
      zurückkehren
    }
    //Den Wasserfallfluss neu laden wx.lin.renderWaterFlow(data.items)
},

Das WeChat-Applet verfügt über eine eigene Funktion, die automatisch ausgelöst wird, wenn der Boden berührt wird. Schreiben Sie einfach den Methodenaufrufcode in diese Funktion.

onReachBottom: Funktion () {
    const data = this.data.spuPaging.getMoreData()
    wenn(!data){
      zurückkehren
    }
    //Den Wasserfallfluss neu laden wx.lin.renderWaterFlow(data.items)
}

An diesem Punkt können Sie den Effekt des Wasserfallflusses Paging Scrolling Loading erzielen

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.