Lösung für die gleitende Rückkehr durch Gesten im mobilen Vue-Terminal

Mit der Beliebtheit mobiler Geräte gewöhnen sich immer mehr Benutzer daran, Gesten zum Wechseln zwischen Seiten zu verwenden. In der Vue-Entwicklung verwendet die auf Vue Router basierende Seitenwechselmethode im Allgemeinen die Push- und Ersetzungsmethoden des Routings. Der auf diese Weise implementierte Seitenwechsel weist jedoch gewisse Probleme auf, wenn die mobile Geste zurückgleitet. In diesem Artikel wird erläutert, wie das Problem der mobilen Gesten-Gleitrückgabe in der Vue-Entwicklung gelöst werden kann.

Um das Problem der gleitenden Gestenrückgabe auf dem mobilen Endgerät zu lösen, müssen wir das Vue-Plug-In Vue-Touch und das Vue-Router-Plug-In verwenden. Das Vue-Touch-Plug-In ist Vues Kapselung mobiler Gestenoperationen und kann Gestenoperationen auf Mobilgeräten erkennen, z. B. Wischen nach links, Wischen nach rechts usw. Das Vue-Router-Plug-In ist ein offiziell von Vue bereitgestelltes Plug-In für die Seitenrouting-Verwaltung.

Zuerst müssen wir die Plugins vue-touch und vue-router installieren. Es kann über den npm-Befehl installiert werden:

npm install vue-touch vue-router --save

Nach der Installation des Plug-Ins müssen wir diese beiden Plug-Ins importieren und in der Hauptprogrammdatei registrieren:

import Vue from 'vue';
import VueTouch from 'vue-touch';
import VueRouter from 'vue-router';

Vue.use(VueTouch);
Vue.use(VueRouter);

Als nächstes haben wir in der Routing-Konfiguration von Vue Router Sie müssen einen globalen Frontschutz hinzufügen, um zu bestimmen, ob der Benutzer durch Gesten zurückgleitet oder auf die Zurück-Schaltfläche klickt, um zurückzukehren, wenn die Seite wechselt. Im globalen Frontschutz können wir entscheiden, ob wir mit einer Gestenbewegung zurückkehren oder auf die Schaltfläche „Zurück“ klicken, indem wir die Eingaberichtung der Route beurteilen:

const router = new VueRouter({
  routes: [
    // 路由配置
  ]
});

router.beforeEach((to, from, next) => {
  const direction = router.app.$options.direction || '';

  if (direction === 'back') {
    // 手势滑动返回
    router.app.$options.direction = '';
    router.app.$options.transition = 'slide-right';
  } else {
    // 点击返回按钮返回
    router.app.$options.transition = 'slide-left';
    window.history.pushState(null, '', location.href);
  }

  next();
});

Im globalen Frontschutz beurteilen wir zunächst, ob die Eingaberichtung der Route ist Mit einer Geste schieben Sie zurück (Richtung „Zurück“) oder klicken Sie auf die Schaltfläche „Zurück“, um zurückzukehren. Wenn die Gestenrutsche zurückkehrt, setzen wir den Richtungswert auf leer zurück und stellen die Seitenwechselanimation so ein, dass sie von rechts nach links gleitet. Wenn Sie durch Klicken auf die Schaltfläche „Zurück“ zurückkehren, stellen wir die Seitenwechselanimation so ein, dass sie von links nach rechts gleitet, und simulieren das Klicken auf die Schaltfläche „Zurück“ über die Methode window.history.pushState.

Schließlich müssen wir in jeder Seitenkomponente von Vue das Vue-Touch-Plug-In verwenden, um das Gesten-Schiebeereignis des Mobilgeräts abzuhören und basierend auf dem Gesten-Schieben zu bestimmen, ob die Geste zurückkehrt oder zur nächsten Seite gleitet Gleitweg. In der Seitenkomponente können wir die Swipe-Methode des Vue-Touch-Plug-Ins verwenden, um auf linke und rechte Gleitereignisse zu warten:

export default {
  mounted() {
    this.$watch('$options.transition', (to, from) => {
      if (to === 'slide-right') {
        this.go(-1);
      } else if (to === 'slide-left') {
        this.go(1);
      }
    });
  },
  methods: {
    go(delta) {
      const distance = window.innerWidth * 0.3; // 适应不同设备的滑动距离

      if (delta === -1 && this.$route.meta.index > 1) {
        // 手势滑动返回到上一页面
        this.$router.back();
      } else if (delta === 1 && this.$route.meta.index < this.$router.options.routes.length) {
        // 手势滑动到下一页面
        this.$router.push(this.$router.options.routes[this.$route.meta.index + 1]);
      }
    }
  }
};

In der montierten Lebenszyklusfunktion der Seitenkomponente können wir die $watch-Methode verwenden, um Achten Sie auf Änderungen in der Seitenwechselanimation. Wenn sich die Seitenwechselanimation in ein Schieben von rechts nach links ändert, rufen wir die Go-Methode auf, um eine Gesten-Slide-Return-Bewegung durchzuführen. Wenn sich die Seitenwechselanimation in ein Schieben von links nach rechts ändert, rufen wir die go-Methode auf, um das Schieben mit der Geste zur nächsten Seite durchzuführen.

Bei der Go-Methode berechnen wir zunächst die Gleitstrecke verschiedener Bildschirme des Mobilgeräts. Dann bestimmen wir basierend auf der Richtung des Schiebens, ob die Geste zurückgleitet oder zur nächsten Seite gleitet. Wenn es sich um eine gleitende Gestenrückgabe handelt und der Index der aktuellen Seite größer als 1 ist, rufen wir die Methode $router.back auf, um eine gleitende Gestenrückgabe durchzuführen. Wenn die Geste zum Wechseln zur nächsten Seite verwendet wird und der Index der aktuellen Seite kleiner als die Anzahl der Seiten in der Routing-Konfiguration ist, rufen wir die Methode $router.push auf, um die Geste zum Wechseln zur nächsten Seite auszuführen.

Durch die oben genannten Vorgänge können wir das Problem der gleitenden Rückkehr mobiler Gesten in der Vue-Entwicklung effektiv lösen. Mit den Plug-Ins vue-touch und vue-router können wir das Gesten-Gleitereignis des Mobilgeräts einfach überwachen und anhand der Gleitstrecke bestimmen, ob das Gesten-Gleiten zurückkehrt oder die Geste zur nächsten Seite wechselt. Auf diese Weise kann das Benutzererlebnis auf dem mobilen Endgerät verbessert und der Seitenwechsel reibungsloser gestaltet werden.

Das obige ist der detaillierte Inhalt vonLösung für die gleitende Rückkehr durch Gesten im mobilen Vue-Terminal. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!