<div Klasse="nach oben" v-show="toTopShow" @click="toTop()">nach oben</div>
.nach oben { Breite: 50px; Höhe: 50px; Zeilenhöhe: 50px; Rahmenradius: 25px; Hintergrundfarbe: weiß; Position: fest; unten: 75px; rechts: 10px; Textausrichtung: zentriert; }
Daten() { zurückkehren { toTopShow: false, srcoll: 0, } },
betrachten: srcoll() { wenn (this.srcoll > 400) { dies.toTopShow = wahr; } anders { this.toTopShow = falsch; } }, },
montiert() { window.addEventListener("scrollen", this.srcollShow); },
Methoden: { srcollShow() { dies.srcoll = Fenster.SeitenYOffset || Dokument.documentElement.scrollTop || Dokument.Body.ScrollTop; }, nachOben() { dies.toTopSpeed = setInterval(() => { Dokument.documentElement.scrollTop = Dokument.documentElement.scrollTop – 20; //Verzögerte Scroll-Animation durch Ändern der Zahlen if (this.srcoll < 10) { LöschenInterval(this.toTopSpeed); } }, 1); }, } Der obige Vorgang wird erreicht, indem die Bildlaufleiste > 400 überwacht wird, die obere Schaltfläche angezeigt wird und auf die obere Schaltfläche geklickt wird, um langsam nach oben zurückzukehren. Unter 400 werden Ausblenden, Bild usw. angezeigt. Dies ist das Ende dieses Artikels darüber, wie Sie mit v-show den Top-Effekt in Vue erzielen. Weitere relevante Inhalte zu Vue Back to the Top-Effekten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die folgenden verwandten Artikel weiter. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
<<: Wichtige Hinweise zu PHP-HTMLhtml-Wissenspunkten (unbedingt lesen)
>>: HTML-adaptives Layout links, zentriert und rechts (mithilfe des Calc-CSS-Ausdrucks)
SSH-Secure-Shell, ermöglicht sichere Remote-Anmel...
Inhaltsverzeichnis Tutorial-Reihe 1. Installieren...
Einfach ausgedrückt lautet die IP der als Lager v...
Inhaltsverzeichnis Erstellen Sie ein Vue + TS-Pro...
In diesem Artikelbeispiel wird der spezifische JS...
Kürzlich habe ich MySQL verwendet, um Tabellendat...
1. Python-Installation 1. Erstellen Sie einen Ord...
In diesem Artikel wird der spezifische JavaScript...
Inhaltsverzeichnis BOM (Browserobjektmodell) 1. F...
Inhaltsverzeichnis Vorwort Start Ein kleiner Geda...
Vorwort Ich weiß nicht, wie lange dieser Freund D...
Es gibt viele Lese-/Schreibtrennungsarchitekturen...
Lösungsprozess: Methode 1: Die Standard-Kernelver...
Heute stelle ich zwei HTML-Tags vor, die ich nich...
Tab-Umschalten ist auch eine gängige Technologie ...