So verwenden Sie das Better-Scroll-Plug-In in Vue

Dieser Artikel stellt hauptsächlich die detaillierte Erklärung der Verwendung des Vue Better-Scroll-Plug-Ins vor. Jetzt werde ich es mit Ihnen teilen und Ihnen eine Referenz geben.

Was ist Better-Scroll?

Better-Scroll ist eine mobile Scrolling-Lösung. Sie basiert auf der Neufassung von iscroll. Der Hauptunterschied zwischen it und iscroll besteht darin . Better-Scroll ist außerdem sehr leistungsfähig. Es kann nicht nur normale Scroll-Listen erstellen, sondern auch Karussell-Diagramme, Picker usw.

Fügen Sie den durch

import BScorll from 'better-scroll';

referenzierten Beispielcode in die erforderliche Datei ein:

let scroll = new BScroll(Dom对象, {//options
 startX: 0,
 startY: 0
})

Vue ruft die Dom-Objektmethode

<p v-el:food-wrapper></p>//定义对象
this.$els.foodWrapper//获取对象

ab (wenn Vue Daten aktualisiert). Asynchron, sodass Bscroll die Höhe des Zielinhalts nicht ermitteln kann, bevor die Daten vollständig geladen sind, sodass das Phänomen auftritt, dass kein Scrollen möglich ist)

Um das oben genannte Problem zu lösen, verwenden Sie nextTick( von Vue) );

(Einfach ausgedrückt, weil das DOM zumindest aktualisiert wird, nachdem alle Codes im aktuellen Tick ausgeführt wurden. Daher ist eine Ausführung nicht möglich, nachdem die Daten geändert und das DOM aktualisiert wurde. Sie müssen sicherstellen, dass ein bestimmter Code ausgeführt wird, nachdem das DOM aktualisiert wurde. Sie müssen diesen Code in die nächste Ereignisschleife einfügen, z. B. setTimeout (fn, 0), damit dieser Code sofort nach der Aktualisierung des DOM ausgeführt wird )

// DOM 还没有更新
Vue.nextTick(function () {
 // DOM 更新了
})

Frage:

Auf der PC-Seite werden Klicks durch Better-Scroll nicht blockiert, sodass die Daher wird beim Wechsel zur PC-Seite das Klickereignis zweimal ausgeführt.

Methode: Beim Klicken wird die Ereignisvariable im Better übergeben. Das Scroll-Plugin hat andere Attribute als das Ereignis im nativen js. Wenn das Ereignis vom Better-Scroll-Plugin ausgelöst wird, ist „event_constructed“ dieses Attribut nicht Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So lösen Sie das Problem der Fehlausrichtung der niceScroll-Bildlaufleiste in jQuery

So implementieren Sie die Baidu-Suchschnittstelle in JS

So implementieren Sie die Doppelfarben-Ballfunktion in JS

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Better-Scroll-Plug-In in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!