Wirkung: Code: <Vorlage> <div Klasse="Zurück nach oben"> <div > <img src="imgsrc" class="line" :class="isHide? 'isHide': 'isShow'" :style="{display: (firstShow? 'block': 'none')}" @click="backTop"> </div> </div> </Vorlage> <Skript> Standard exportieren { Name: "backTop", Daten(){ zurückkehren { firstShow: false, //Versteckte Komponenten initialisieren isHide: false, scrollFLag: wahr, } }, erstellt() { document.addEventListener('scroll', () => { let scroll = document.documentElement.scrollTop wenn(scroll > 200){ this.isHide = false this.firstShow = true }anders{ dies.isHide = true } }) }, Methoden: { zurückTop(){ wenn(dieses.scrollFLag){ this.scrollFLag = falsch //Bildschirmhöhe let scroll = document.documentElement.scrollTop let scrollTimer = setInterval(()=> { scrollen -= 50 Dokument.documentElement.scrollTop = Math.max(scroll, 0) wenn( scrollen <= 0){ Intervall löschen(Scrolltimer) } }, 10) this.scrollFLag = true } }, }, } </Skript> <style scoped lang="scss"> .zurück-oben{ Position: fest; oben: 0; rechts: 10vw; Breite: 20px; Höhe: 500px; Z-Index: 200; .Linie{ Breite: 12vw; Höhe: 100%; Z-Index: 20; Cursor: Zeiger; Deckkraft: 0,8; transformieren: verschiebeY(-100%); &:schweben{ Deckkraft: 1; } } .isShow{ Animation: Zurück-oben-Bewegung 0,5 s vorwärts linear, Zurück-oben-Yurayura 2 s 0,6 s vorwärts linear unendlich; } .isHide{ Animation: Zurück-oben-ausblenden 0,5 s vorwärts linear; } } @keyframes zurück-oben-ausblenden { aus { transformieren: übersetzenY(0); } Zu { transformieren: verschiebeY(-100%); } } @keyframes zurück-oben-verschieben { Zu { transformieren: übersetzenY(0); } } @keyframes zurück-oben-yurayura { 0 % {Transform-Origin: oben Mitte; Transform: Drehen (0)} 25 % {Transform-Origin: oben Mitte; Transform: Drehen (2 Grad)} 75 % {Transform-Origin: oben Mitte; Transform: Drehen (-2 Grad)} 100 % {Transform-Origin: oben Mitte; Transform: Drehen (0)} } </Stil> Dies ist das Ende dieses Artikels über die vollständige Codeimplementierung der Vue-Backtop-Komponente. Weitere verwandte Inhalte zur Vue-Backtop-Komponente finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! Das könnte Sie auch interessieren:
|
<<: Beispielcode zur Implementierung der bidirektionalen Authentifizierung mit Nginx+SSL
>>: Mysql SQL-Anweisungskommentare
Kürzlich haben Studierende des User Experience-Tea...
Dieses Mal werden wir versuchen, den laufenden Co...
1.1 Einführung in die iptables-Firewall Netfilter...
Verwendung von v-on:clock in Vue Ich lerne derzei...
So verwenden Sie die Concat-Funktion in MySQL: CO...
In diesem Artikelbeispiel wird der spezifische JS...
Laden Sie das MySQL-Installationsprogramm herunte...
Hintergrund Zunächst möchte ich sagen, dass ich k...
Vorwort Um die Hochverfügbarkeit des Systems zu g...
Zum Beginn des neuen Jahres möchte ich meinen Fre...
Einführung Heute werde ich die Verwendung der Sum...
Folgende Funktionen sind implementiert: 1. Benutz...
var() Einführung und Verwendung Details (MDN) IE ...
1. Video-Tag Unterstützt die automatische Wiederg...
Phänomen: Führen Sie ein Image aus, zum Beispiel ...