So implementieren Sie den Vue-Mausrad-Scrolling-Umschalt-Routing-Effekt

Eine Root-Routing-Komponente (die Root-Routing-Komponente unter der App, die als untergeordnete Komponente gescrollt werden muss)
Fügen Sie der Root-Route-Komponente einen Listener für die Maus-Scroll-Zeit hinzu und rufen Sie den Listener in der gemounteten Funktion auf. Beim Springen zu anderen Routen (Verlassen dieser Root-Route) wird die Root-Route-Komponente zerstört. Löschen Sie daher den Ereignis-Listener in der zerstörten Hook-Funktion der Root-Route.

Vue-Routing-Umschaltübergang

Vue-Übergang

<Übergang:name="Übergangsname">
      <div></div>
 </Übergang>

Verwenden Sie den Übergang, um die Komponente, die einen Übergang benötigt, oder ein Div oder eine Route zu umschließen. Wenn es erstellt oder zerstört wird, wird der angegebene Animationseffekt geladen. Dieser Animationseffekt muss von Ihnen selbst angegeben werden. Hier der angegebene Übergangsname

Deklarieren Sie dies dann in den Daten, weisen Sie diesen Wert jedoch ' ' zu, da unterschiedliche Namen dem Vorwärts- oder Rückwärtsrouting entsprechen müssen.

Wenn die Route vorwärts (in diesem Fall nach unten) verläuft, geben Sie „slide-down“ an.

Definieren Sie dann die Aktivierungseffekte in verschiedenen Slide-Down-Zuständen als Übergangseffekte

.nach unten schieben-eingeben-aktiv,
.nach unten schieben-aktiv lassen {
Übergang: alle 500ms;
Position: absolut;
}

Definieren Sie dann die Startanimation

.nach unten schieben-eingeben {
Deckkraft: 0;
transformieren: übersetzen3d(0, 100 %, 0);
}

Definieren Sie die Animation zur Aktivierung des Verlassens

.nach unten schieben-aktiv lassen {
Deckkraft: 0;
transformieren: übersetzen3d(0, -100 %, 0);
}

Folgendes ist im Allgemeinen festgelegt, d. h., deklarieren Sie -enter-active, -leave-active als Übergangseffekt und schreiben Sie dann -enter, -leave-active. Die erforderlichen spezifischen Änderungen sind im Allgemeinen einmal -enter und einmal -leave-active.

Als nächstes wird bestimmt, ob die Route vorwärts oder rückwärts ist. Erstens, wie man die Route vorwärts und rückwärts wechselt

Wie kann man als Nächstes feststellen, ob es vorne oder hinten ist? Schreiben Sie beim Schreiben der Route die Metadaten und rufen Sie beim Überwachen der Routenänderungen in der "Stammkomponente" die Routeninformationen ab und vergleichen Sie die Größen der beiden, um dies zu bestimmen

Dies ist das Ende dieses Artikels über die Implementierung des Vue-Mausrad-Scrollrouten-Umschalteffekts. Weitere relevante Vue-Routen-Umschaltinhalte 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!