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

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:

// 当没有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()
 }
})

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; })
 }
})

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!