Anwendungsbeispiele für die virtuelle Liste des WeChat-Applets

Vorwort

Es gibt mehr als 4.000 beliebte Aktienlisten, die auf der Seite gerendert und während des Handels in Echtzeit aktualisiert werden müssen. Wenn Schnittstellen und Paging verwendet werden, bleibt die Seite beim Scrollen über Dutzende von Seiten immer häufiger hängen und muss in Echtzeit aktualisiert werden. Der letzte Ansatz besteht darin, die Daten am Anfang von ws zu übergeben. Wir müssen nur die Start- und Endindizes übergeben und nur wenige Tags auf der Seite generieren. Reduziert den Renderdruck erheblich.

Was ist eine virtuelle Liste?

Es bezieht sich lediglich auf das Rendern der Beschriftungen im sichtbaren Bereich, das ständige Umschalten der Start- und Endindizes, um die Ansicht beim Scrollen zu aktualisieren, und das gleichzeitige Berechnen des Versatzes.

Demo-Effekt

Vorbereitung

• Berechnen Sie, wie viele Listen auf einem Bildschirm angezeigt werden können.
• Die Höhe der Box.
• Die Startposition der Schriftrolle.
• Die Endposition des Bildlaufs.
• Der Bildlaufversatz.

Bildschirmhöhe & Kastenhöhe

Im Applet können wir wx.createSelectorQuery verwenden, um die Bildschirmhöhe und die Boxhöhe abzurufen.

getEleInfo(ele) {
    returniere neues Promise( ( lösen, ablehnen ) => {
        const query = wx.createSelectorQuery().in(diese);
        Abfrage.Auswählen(ele).boundingClientRect();
        query.selectViewport().scrollOffset();
        query.exec( res => {
            Entschlossenheit (res);
        })
    })
},

dies.getEleInfo('.stock').then( res => {
    wenn (!res[0]) zurückgeben;
    // Bildschirmhöhe this.screenHeight = res[1].scrollHeight;
    //Boxhöhe this.boxhigh = res[0].height;
})

Start & Ende & Versatz

onPageScroll(e) {
    let { scrollTop } = e;
    dies.start = Math.floor(scrollTop / diese.boxhigh);
    dies.ende = dies.start + dies.visibleCount;
    dies.offsetY = dies.start * dies.boxhigh; 
}

scrollTop kann verstanden werden als: wie viele Kästchen von oben gescrollt wurden / die Höhe des Kästchens = der Startindex

Start + Wie viele Boxen können im sichtbaren Bereich der Seite angezeigt werden = Ende

Start * Kastenhöhe = Versatz

berechnet: {
    sichtbareDaten() {
        gib dieses.Datensegment zurück(dieses.Start, Math.min(dieses.Ende, diese.Datenlänge))
    },
}

Wenn sich Start und Ende ändern, verwenden wir Slice(this.start, this.end), um die Daten zu ändern, sodass der Inhalt des Etiketts rechtzeitig ersetzt werden kann.

Optimierung

Beim schnellen Scrollen erscheint unten ein leerer Bereich, da die Daten noch nicht geladen wurden. Wir können drei Bildschirme rendern, um sicherzustellen, dass die Daten beim Scrollen rechtzeitig geladen werden.

vorherigerCount() {
    gibt Math.min zurück (diesen.Start, diesen.sichtbarenAnzahl);
},
nächsterAnzahl() {
    gibt Math.min zurück (diese.sichtbareAnzahl, diese.Datenlänge - dieses.Ende);
},
sichtbareDaten() {
    lass start = this.start - this.prevCount,
        Ende = dies.Ende + dies.nächsterAnzahl;
    gib dieses.Datenstück(Start, Math.min(Ende, dieses.Datenlänge)) zurück
},

Wenn Sie den reservierten Versatz des Frontbildschirms berechnet haben, müssen Sie ihn wie folgt ändern: this.offsetY = this.start * this.boxhigh - this.boxhigh * this.prevCount

Beim Gleiten ändern sich Start, Ende und OffsetY ständig. Häufige Aufrufe von setData können dazu führen, dass das Applet den Speicher überschreitet und abstürzt. Hier drosseln wir beim Gleiten, um die Ausführungshäufigkeit von setData zu verringern.

    montiert() {
        dies.deliquate = dies.throttle(dieses.changeDeliquate, 130)
    },
    Methoden: {
        Gashebel(fn, Zeit) {
            var vorherige = 0;
            Rückgabefunktion (scrollTop) {
                lass jetzt = Date.now();
                wenn ( jetzt - vorherige > Zeit ) {
                    fn(nach oben scrollen)
                    vorher = jetzt;
                }
            }
        },
        ändereDeliquate(scrollTop) {
            dies.start = Math.floor(scrollTop / diese.boxhigh);
            dies.ende = dies.start + dies.visibleCount;
            dies.offsetY = dies.start * dies.boxhigh; 
            console.log('setData ausführen')
        }
    },
    onPageScroll(e) {
	let { scrollTop } = e;
        console.log('Scrollen ==================>>>>>>>')
        dies.deliquate(scrollTop);
    }

Wie aus der obigen Abbildung ersichtlich, reduziert jeder Scrollvorgang das Schreiben von setData um mindestens das Zweifache.

Die im Artikel beschriebene Demo finden Sie hier. Sie können bei Bedarf darauf zurückgreifen.

Zusammenfassen

Dies ist das Ende dieses Artikels über die virtuelle Listenanwendung des WeChat-Miniprogramms. Weitere relevante Inhalte zum virtuellen Miniprogramm finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!