Wie implementiert man die Scroll-Methode auf der mobilen Seite in Vue?

Jetzt werde ich mit Ihnen einen Artikel über die Implementierung des Scrollens auf der mobilen Seite in Vue teilen. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird.

1. Zuerst installieren

npm install better-scroll --save

2 🎜>

import BScroll from ‘better-scroll'

Die Referenz in der Vorlage zeigt auf das zu scrollende DOM-Element

Gemäß der Beschreibung des ref-Attributs im offiziellen Dokument können wir das DOM-Element wie folgt referenzieren

3. Registrieren Sie die _initScroll-Methode in Methoden. Diese Methode ist eine Instanziierung von Better-Scroll wird ausgeführt, nachdem die Seiten-DOM-Struktur gerendert wurde.

methods: {
   _initScroll(){
    this.menuScroll = new BScroll(this.$refs.menuWrapper, {})
    this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {})
   }
  }
 }

4. Rufen Sie im Callback nach dem erfolgreichen Abrufen der Hintergrunddaten _initScroll auf ();

Vue aktualisiert Daten asynchron, sodass Bscroll die Höhe des Zielinhalts nicht ermitteln kann, bevor die Daten vollständig geladen sind, was dazu führt, dass kein Scrollen möglich ist

Beachten Sie hier unbedingt, dass die Daten erfolgreich abgerufen wurden. Schließlich ist der direkte Dom nicht unbedingt das Rendering nach der Datenerfassung, daher müssen Sie die Methode this.nextTick() und _initScroll() im Rückruf von verwenden this.nextTick;

Sehen Sie sich die offiziellen Informationen zu dieser Beschreibung von .$nextTick() an

Also sollten wir es schreiben So im Projekt:

Oben habe ich es für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie domänenübergreifende Anforderungen in der Vue-CLI-Entwicklungsumgebung

Angular5 fügt eine Stilklasse hinzu Bezeichnung der Komponente selbst Methode

Vues Beispielcode zur Implementierung des internen Komponentenkarussell-Umschalteffekts

Das obige ist der detaillierte Inhalt vonWie implementiert man die Scroll-Methode auf der mobilen Seite in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!