Über den Fehler des Better-Scroll-Plug-Ins, der nicht gleiten kann (gelöst durch Plug-In im Jahr 2021)

Better-Scroll-Bildlaufprinzip

Als übergeordneter Container erhöht sich die Höhe des Wrappers mit der Größe des Inhalts. Dann, wenn
Wenn die Höhe des Inhalts die Höhe des übergeordneten Containers nicht überschreitet, kann er nicht gescrollt werden. Sobald er die Höhe des übergeordneten Containers überschreitet, können wir den Inhaltsbereich scrollen.
BetterScroll übernimmt standardmäßig das Scrollen des ersten untergeordneten Elements (Inhalt) des Containers (Wrapper) und ignoriert andere Elemente, sodass auch die folgende Seitenstruktur gegeben ist

<div Klasse="Wrapper">
 <ul Klasse="Inhalt">
  <li>...</li>
  <li>...</li>
  ...
 </ul>
 <!-- Sie können hier ein anderes DOM einfügen, das Scrollen wird dadurch jedoch nicht beeinflusst-->
</div>

Deshalb sprechen wir hier nur über den wichtigsten Punkt! ! !

Da圖片需要加載, ist der Initialisierungszeitpunkt von better-scroll sehr wichtig, da bei der Initialisierung die Höhe und Breite des übergeordneten Elements und des untergeordneten Elements berechnet werden. Wenn das Bild noch nicht geladen und initialisiert wurde, gibt es eine große Abweichung zwischen der tatsächlich berechneten Höhe und Ihrer tatsächlichen Höhe (die Netzwerkgeschwindigkeit wirkt sich auch darauf aus ...)

Dies ist der Hauptgrund, warum alle Benutzer nicht scrollen können.

Ich bin vor ein paar Tagen auf dieses Problem gestoßen und das Better-Scroll-Dokument war nicht zugänglich. Das Dokument auf GitHub war nur grob nutzbar. Ich habe einen ganzen Tag damit verbracht, nach einer Lösung zu suchen. Im Internet sind verschiedene Methoden aufgetaucht. Die beste Lösung:

Durch Plugin: better-scroll/observe-dom

BetterScroll berechnet die scrollbare Höhe oder Breite dynamisch. Sie müssen die Methode „refresh()“ nicht manuell aufrufen, wenn sich die Höhe oder Breite ändert. Das Plugin erledigt dies für Sie über MutationObserver .

Wenn Ihr aktueller Browser MutationObserver nicht unterstützt, wird er auf die Verwendung von setTimeout herabgestuft.

verwenden

Installieren Sie Abhängigkeiten npm install @better-scroll/observe-dom

BScroll aus „@better-scroll/core“ importieren
importiere ObserveDom von '@better-scroll/observe-dom'
BScroll.use(Dom beobachten)

const bs = new BScroll('.wrapper', {
 observeDOM: wahr
})

Es gibt viele Lösungen für dieses Problem, aber viele Artikel im Internet erklären es nicht klar. Verwenden Sie einfach dieses Plug-In.

Eine andere Lösung besteht darin, das Laden des Bildes abzuhören und refresh() aufzurufen, um die Höhe neu zu berechnen

Vue verwendet das img-Tag und @load="定義一個方法" um auf das Bildladeereignis zu warten. Solange ein Bild geladen wird, wird die von Ihnen definierte Methode einmal aufgerufen.

Schreiben Sie abschließend this.scroll.refresh() in die Methode, um ein Bild zu laden, es einmal zu aktualisieren und die Höhe neu zu berechnen. Gleichzeitig müssen Sie die Anti-Shake-Funktion verwenden, um verschiedene Probleme zu vermeiden, die durch häufige wiederholte Aufrufe verursacht werden.

Damit ist dieser Artikel über die Unfähigkeit des Better-Scroll-Plug-Ins, zu gleiten, abgeschlossen (2021 durch Plug-Ins behoben). Weitere verwandte Inhalte über die Unfähigkeit des Better-Scroll-Plug-Ins, zu gleiten, 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!