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'];

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

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

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(&#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!