Dieses Mal werde ich den Fall des Vue-Mobilrouting-Switchings analysieren. Was sind die Vorsichtsmaßnahmen für den Vue-Mobilrouting-Switching?
Die wichtigsten davon sind die folgenden zwei Probleme:
Umschalten der Browser-Navigationsleiste
Beim Schieben zum Einschalten von IOS werden zwei Seiten angezeigt Übergänge, ein Schalter, wenn es gleitet, und löst dann die von uns festgelegte Übergangsanimation aus.
Mit Ausnahme der beiden oben genannten Fragen können die restlichen Vorgänge innerhalb der Seite eingestellt werden und sind grundsätzlich steuerbar. Hauptsächlich um die beiden oben genannten Probleme zu lösen.
Sie können den tatsächlichen schriftlichen Effekt sehen: Online-DEMO
1. Umschalten der Browser-Navigationsleiste
Durch Aufzeichnungsverlauf Zum Vergleichen und Beurteilen Sie, ob Sie vorwärts oder rückwärts gehen sollen
Das folgende Beispiel
A-Seite-> B-Seite-> 🎜> Wenn ich von Seite A zu Seite B und dann zu Seite C gehe, gibt es drei historische Datensätze
Wir verwenden ein Array zur Darstellung von: ['/a', '/b', '/c ']
Dann kehre ich durch Klicken auf die Schaltfläche „Zurück“ in der Navigationsleiste des Browsers zu Seite B zurück.
Zu diesem Zeitpunkt muss ich nur feststellen, ob Seite B existiert dass ich auf den Zurück-Button geklickt habe.
Sobald ich dann zurückgehe, kann ich auf die Weiterleitungsschaltfläche des Browsers klicken. Wie lässt sich zu diesem Zeitpunkt beurteilen, ob es vorangeht?
Wir können das schaffen.
Wenn wir zu Seite B zurückkehren, enthält der Verlauf nicht immer noch die drei Pfade ['/a', '/b', '/c']
Wir können löschen Seite B Der folgende Pfad ist jetzt ['/a', '/b'];
Wenn wir zu Seite A zurückkehren, ist der Pfad, den wir speichern, ['/a']So lange Wenn wir auf die Schaltfläche „Vorwärts“ klicken, suchen wir im gespeicherten Pfad danach. Wenn wir den Pfad nicht finden können, ist die Vorwärtsbeurteilung abgeschlossen.
Das Obige ist eine normale Situation.
Das Problem tritt zu diesem Zeitpunkt auf Pfad soll immer noch den Pfad hinter der zweiten B-Seite löschen Versuchen wir zunächst, den Pfad der zweiten B-Seite zu löschen, dann sind die Pfade, die wir noch speichern,: ['/a', '/b', '/c', '/b'].
1. Zu diesem Zeitpunkt verfahren wir nach der Logik der oben genannten normalen Situation.
Wenn wir zu diesem Zeitpunkt hier auf die Schaltfläche „Zurück“ klicken, gehen wir zur C-Seite, aber die Der Speicherpfad ist „/c“ wurde von mir gelöscht, daher ist das Urteil, weiterzumachen.
1. Wäre es besser, wenn wir doppelte Seitenpfade herausfiltern würden? Tatsächlich ist es dasselbe.
Wenn wir 5 Seitenpfade haben, werden 2 Duplikate herausgefiltert Es gibt nur 3 Seitenpfade
Wenn ich dann zum vierten Pfad zurückkehre, werden die nächsten beiden Seiten dann nicht als vorwärts gezählt? Zeichenfolge einfügen
Code-Implementierung:
Auf der IOS-Webseite können Sie zum Wechseln nach links und rechts wischen, auch wenn Sie keine Übergangsanimation erstellen.
Zu diesem Zeitpunkt wird ein Problem auftreten.
Still ABC-Seite
A -> B -> Schieben Sie fertig Er wird die B-Seite betreten, aber zu diesem Zeitpunkt wird immer noch unsere beforeEach-Hook-Funktion eingegeben, um unsere obige Logik auszuführen.
Der Code sieht so aus
let touchEndTime = Date.now() window.addEventListener('touchend', () => { touchEndTime = Date.now() }) router.beforeEach((to, from, next) => { if ((Date.now() - touchEndTime) < 377) { // ios滑动切换 store.commit('UPDATE_ROUTER_DIRECTION', { routerDirection: '' }) } })
Das Obige ist auch leicht zu verstehen, das heißt, wir erfassen den Moment, in dem der Finger schließlich den Bildschirm verlässt, und vergleichen ihn dann vorher.
Der letzte Moment, in dem der Finger den Bildschirm verlässt, unterscheidet sich vom Übergang Wir haben vorher weniger als 337 gemacht, selbst das Gleitschalten von IOS
wird das Gleitschaltproblem von IOS lösen.
Aber wenn IOS zum Umschalten nach rechts rutscht, kann es den Moment, in dem der Finger den Bildschirm verlässt, nicht überwachen (ich weiß nicht, was der Geist ist), daher rutscht IOS zum Umschalten nach rechts und kann nicht wie oben beurteilt werden.
Auch hierfür habe ich keine Lösung gefunden. Den Schalter vom Wischen nach links zur Rückkehr kann ich in IOS vorerst nur lösen.
Grundsätzlich sind die beiden oben genannten Punkte die problematischsten. Der Rest kann durch Überwachung des Ereignisses eingestellt werden, was überhaupt nicht schwierig ist
Online-DEMO
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.
Empfohlene Lektüre:
Detaillierte Erläuterung der Verwendung des jQuery-Klassennamenselektors (.class)
Das obige ist der detaillierte Inhalt vonAnalyse des Routing-Switching-Falls für mobile Endgeräte von Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!