Vue erzielt den Top-Effekt durch V-Show

Vue erzielt den Top-Effekt durch V-Show

html

    <div Klasse="nach oben" v-show="toTopShow" @click="toTop()">nach oben</div>

CSS

.nach oben {
  Breite: 50px;
  Höhe: 50px;
  Zeilenhöhe: 50px;
  Rahmenradius: 25px;
  Hintergrundfarbe: weiß;
  Position: fest;
  unten: 75px;
  rechts: 10px;
  Textausrichtung: zentriert;
}

Daten

 Daten() {
    zurückkehren {
  toTopShow: false,
      srcoll: 0,
}
},

Auf Ereignisse warten

  betrachten:
    srcoll() {
      wenn (this.srcoll > 400) {
        dies.toTopShow = wahr;
      } anders {
        this.toTopShow = falsch;
      }
    },
  },

Ereignis wird geladen

 montiert() {
    window.addEventListener("scrollen", this.srcollShow);
  },

Methoden:

 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:
  • Detaillierte Erklärung des Scroll-Event-Listeners von Vue zurück nach oben
  • Vue.js implementiert den Animationseffekt der Rückkehr nach oben
  • Vue implementiert den Animationseffekt der Rückkehr nach oben und unten
  • Ein Beispiel für die Rückkehr nach oben nach einem Vue-Router-Sprung

<<:  Wichtige Hinweise zu PHP-HTMLhtml-Wissenspunkten (unbedingt lesen)

>>:  HTML-adaptives Layout links, zentriert und rechts (mithilfe des Calc-CSS-Ausdrucks)

Artikel empfehlen

Ubuntu startet den Remote-Anmeldevorgang des SSH-Dienstes

SSH-Secure-Shell, ermöglicht sichere Remote-Anmel...

MariaDB-Serverinstallation der MySQL-Reihe

Inhaltsverzeichnis Tutorial-Reihe 1. Installieren...

Schritte zum Erstellen Ihres eigenen YUM-Repositorys

Einfach ausgedrückt lautet die IP der als Lager v...

Vue3+Skript-Setup+ts+Vite+Volar-Projekt

Inhaltsverzeichnis Erstellen Sie ein Vue + TS-Pro...

js zur Realisierung der Web-Message-Board-Funktion

In diesem Artikelbeispiel wird der spezifische JS...

Implementieren eines Einkaufswagens mit nativem JavaScript

In diesem Artikel wird der spezifische JavaScript...

Detaillierte Erklärung von BOM und DOM in JavaScript

Inhaltsverzeichnis BOM (Browserobjektmodell) 1. F...

Erfahren Sie, wie Sie Vue3 Reactivity implementieren

Inhaltsverzeichnis Vorwort Start Ein kleiner Geda...

Implementierung der automatischen Vervollständigung von Docker-Befehlen

Vorwort Ich weiß nicht, wie lange dieser Freund D...

HTML-Subtag und Sup-Tag

Heute stelle ich zwei HTML-Tags vor, die ich nich...

HTML-Beispielcode zur Implementierung des Tab-Wechsels

Tab-Umschalten ist auch eine gängige Technologie ...