Dieses Mal zeige ich Ihnen, wie Sie Vue Mobile Routing Switching verwenden und welche Vorsichtsmaßnahmen bei der Verwendung von Vue Mobile Routing Switching gelten. Hier sind praktische Fälle, schauen wir uns das an.
Die wichtigsten davon sind die folgenden zwei Probleme:
Umschalten der Browser-Navigationsleiste
Beim Schieben zum Umschalten auf iOS werden zwei Seitenübergangsanimationen angezeigt. Beim Verschieben wird ein Wechsel ausgeführt, der dann die von uns festgelegte Übergangsanimation auslöst.
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
Vergleichen und beurteilen Sie, indem Sie den Verlauf vorwärts oder rückwärts aufzeichnen
Das folgende Beispiel
A-Seite-> B-Seite-> C-Seite
Wenn ich von Seite A zu Seite B gehe und dann Wenn Sie zur C-Seite gehen, werden 3 historische Datensätze generiert
Wir verwenden ein Array zur Darstellung: ['/a', '/b', '/c']
Dann klicke ich auf die Schaltfläche „Zurück“ in der Navigationsleiste des Browsers, um zu Seite B zurückzukehren.
Zu diesem Zeitpunkt muss ich nur feststellen, ob Seite B vorhanden ist. Dies beweist, dass ich geklickt habe die Zurück-Taste.
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.
Was aber, wenn wir einige Seiten wiederholt aufrufen?
Genau wie die folgende Situation
Sollten wir den Pfad hinter der ersten B-Seite löschen? der Pfad hinter der zweiten B-Seite Versuchen wir zunächst, den Pfad hinter 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. Ich klicke auf „Vorwärts“ und suche dann im gespeicherten Pfad Wenn ich den Beweis finde, gehe ich zurück. Das Ergebnis ist offensichtlich, wir haben die erste C-Seite gefunden, also gehen wir zurück, aber wenn ich darauf klicke, gehen wir tatsächlich vorwärts2 Versuchen wir, die erste B zu löschen Der Pfad hinter der Seite, dann der gespeicherte Pfad, lautet: ['/a', '/b'], Wenn ich dann auf die Schaltfläche „Zurück“ klicke, wird tatsächlich Seite C aufgerufen. Wir können Folgendes sehen ProzessbildSeite A-> Seite C-> >Jetzt machen wir 5 Schritte und erreichen die zweite C-Seite. Dann treten wir einen Schritt zurück und erreichen die B-Seite.
Wenn wir zu diesem Zeitpunkt hier auf die Schaltfläche „Zurück“ klicken, gehen wir zur C-Seite, aber das „/c“ im gespeicherten Pfad ist vorhanden wurde von mir gelöscht, also beurteile ich, was dabei herauskommt, ist vorwärts.
1. Wäre es besser, wenn wir doppelte Seitenpfade filtern würden? Tatsächlich ist es dasselbe. Wenn wir 5 Seitenpfade haben und 2 Duplikate filtern, gibt es nur 3 Seitenpfade Wenn ich es dann nicht finden kann, wenn ich zum vierten Pfad zurückkehre, werden die nächsten beiden Seiten als vorwärts gezählt. Aus heutiger Sicht ist es also der beste Weg, jede Seite aufzuzeichnen, aber jede Seite anders zu machen Dann können wir eine zufällige Zeichenfolge in die URL einfügenString
// 当没有key的时候会进入两次 beforeEach,我们只需保存带key的就行 const updateNavigations = (to) => { if (to.query[pathKey]) { store.commit('UPDATE_NAVIGATIONS', {path: to.fullPath}) } } router.beforeEach((to, from, next) => { let toIndex = store.state.navigations.findIndex(path => path === to.fullPath) if (toIndex >= 0) { // 存在该路径 let len = store.state.navigations.length-1 if (toIndex === len) { // 当前路径是最后一条,证明是同一个页面 console.log('refresh') } else { // 后退 store.commit('UPDATE_ROUTER_DIRECTION', { routerDirection: 'back' }) // 后退标志 store.commit('DELETE_NAVIGATION', { index: toIndex }) // 删除当前路径后面的路径 } }else{ // 不存在该路径 store.commit('UPDATE_ROUTER_DIRECTION', { routerDirection: 'forward' }) // 前进标志 updateNavigations(to) // 保存该连接 } const query = { ...to.query } // 存在就直接next, 防止死循环 if (!query['APP_KEY']) { // 不存在添加key ,再次 next query['APP_KEY'] = Math.random().toString(16).substring(2) next({ path: to.path, query}) }else{ next() } })
Mit dem obigen Code können wir der URL eine zufällige Zeichenfolge APP_KEY hinzufügen, sodass sie unterschiedlich ist, selbst wenn sich dieselbe Seite im Pfad befindet, den wir speichern. Die Logik kann normal ausgeführt werden
Das oben Gesagte löst grundsätzlich das Problem der Browser-Navigationsleiste
2. Gleitendes Umschalten auf IOS
Auf dem IOS Auf einer Webseite können Sie nach links und rechts wischen, um zu wechseln, auch wenn Sie keine Übergangsanimation erstellen.
Zu diesem Zeitpunkt wird ein Problem auftreten.
Still ABC-Seite
Dadurch wird unsere Übergangsanimation ausgelöst. Sie werden feststellen, dass zwei Schalter ausgeführt werden. Also habe ich im Internet eine Methode gefunden, um die linke iOS-Folie zu reparieren und die Animation #2259 erneut auszuführenDer Code sieht so ausA -> 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.
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: '' }) } })
Der Unterschied zwischen dem letzten Moment, in dem der Finger den Bildschirm verlässt, und unserem eigenen Übergang in beforeEach beträgt weniger als 337 , auch wenn es sich um einen iOS-Schiebeschalter handelt
Das wird das Schiebeschalterproblem von IOS lösen.
Ereignisses
eingestellt werden, was überhaupt nicht schwierig ist Empfohlene Lektüre:Wie man mit js Ajax-Funktionen und deren Verwendung kapselt
Was sind die am häufigsten verwendeten mathematischen Methoden? Funktionen in JS?
Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue Mobile Routing Switching. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!