Heim > Web-Frontend > js-Tutorial > Hauptteil

Analyse des Routing-Switching-Falls für mobile Endgeräte von Vue

php中世界最好的语言
Freigeben: 2018-05-21 15:20:06
Original
1662 Leute haben es durchsucht

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.

Was aber, wenn wir einige Seiten wiederholt aufrufen?

Genau wie die folgende Situation


Seite A-> Seite C-> >Jetzt gehen wir 5 Schritte und gelangen zur zweiten C-Seite.

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.

Ich klicke auf „Vorwärts“ und suche dann im gespeicherten Pfad Wenn ich es nicht finden kann, bedeutet das Finden eines Beweises einen Rückschritt.


Das Ergebnis ist offensichtlich. Selbst wenn wir zurückgehen, gehen wir tatsächlich vorwärts


2 . Versuchen wir es. Löschen Sie nun den Pfad nach der ersten B-Seite. Der gespeicherte Pfad lautet dann: ['/a', '/b'],


Wenn ich dann auf die Schaltfläche „Zurück“ klicke, wird er es tun Wenn wir tatsächlich die C-Seite betreten, können wir das folgende Flussdiagramm sehen



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?


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 einfügen

Code-Implementierung:

Wir verwenden den obigen Code. Sie können eine zufällige Zeichenfolge hinzufügen APP_KEY zur URL hinzufügen, sodass, selbst wenn sich dieselbe Seite in dem von uns gespeicherten Pfad befindet, sie tatsächlich unterschiedlich ist. Die Logik kann normal ausgeführt werden


Das oben Gesagte löst grundsätzlich das Problem der Browser-Navigationsleiste


2. Gleitendes Umschalten unter IOS


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.

Das wird unsere Übergangsanimation auslösen. Sie werden feststellen, dass zwei Schalter ausgeführt werden.

Also habe ich im Internet eine Methode gefunden, um iOS-Linkswischen zu reparieren und die Animation #2259 erneut 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(&#39;UPDATE_ROUTER_DIRECTION&#39;, { routerDirection: &#39;&#39; })
 }
})
Nach dem Login kopieren

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)

Untergeordnete dynamische Bindungskomponente von Vue und übergeordnete Komponenten Detaillierte Erläuterung der Schritte zur Implementierung der Multi-Form-Verifizierung

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!