Solution au retour coulissant gestuel dans le terminal mobile Vue

Avec la popularité des appareils mobiles, de plus en plus d'utilisateurs sont habitués à utiliser le glissement gestuel pour basculer entre les pages. Dans le développement de Vue, la méthode de changement de page basée sur Vue Router utilise généralement les méthodes de routage push et replace. Cependant, le changement de page ainsi mis en œuvre présente certains problèmes lorsque le geste mobile recule. Cet article explique comment résoudre le problème de retour coulissant des gestes mobiles dans le développement de Vue.

Afin de résoudre le problème du retour coulissant gestuel sur le terminal mobile, nous devons utiliser le plug-in Vue vue-touch et le plug-in vue-router. Le plug-in vue-touch est l'encapsulation par Vue des opérations gestuelles mobiles et peut reconnaître les opérations gestuelles sur les appareils mobiles, telles que le balayage vers la gauche, le balayage vers la droite, etc. Le plug-in vue-router est un plug-in officiellement fourni par Vue pour la gestion du routage des pages.

Tout d'abord, nous devons installer les plugins vue-touch et vue-router. Il peut être installé via la commande npm :

npm install vue-touch vue-router --save

Après avoir installé le plug-in, nous devons importer et enregistrer ces deux plug-ins dans le fichier du programme principal :

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

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

Ensuite, dans la configuration de routage de Vue Router, nous besoin d'ajouter un global Une garde avant est fournie pour déterminer si l'utilisateur revient en arrière par des gestes ou clique sur le bouton de retour pour revenir lorsque la page change. Dans la garde avant globale, nous pouvons décider de revenir avec un geste coulissant ou de cliquer sur le bouton de retour en jugeant le sens d'entrée de l'itinéraire :

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

Dans la garde avant globale, nous jugeons d'abord que la direction d'entrée de la route est un geste de retour par glissement (direction comme « retour ») ou cliquez sur le bouton de retour pour revenir. Si le glissement gestuel revient, nous réinitialisons la valeur de direction à vide et définissons l'animation de changement de page pour qu'elle glisse de droite à gauche. Si vous revenez en cliquant sur le bouton de retour, nous définissons l'animation de changement de page pour qu'elle glisse de gauche à droite et simulons le clic du bouton de retour via la méthode window.history.pushState.

Enfin, dans chaque composant de page de Vue, nous devons utiliser le plug-in vue-touch pour écouter l'événement de glissement gestuel de l'appareil mobile et déterminer si le glissement gestuel revient ou glisse vers la page suivante en fonction du distance de glissement. Dans le composant page, nous pouvons utiliser la méthode swipe du plug-in vue-touch pour écouter les événements de glissement gauche et droit :

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

Dans la fonction de cycle de vie montée du composant page, nous pouvons utiliser la méthode $watch pour écoutez les changements dans l'animation de changement de page. Lorsque l'animation de changement de page se transforme en glissement de droite à gauche, nous appelons la méthode go pour effectuer un retour glissant gestuel. Lorsque l'animation de changement de page se transforme en glissement de gauche à droite, nous appelons la méthode go pour effectuer un glissement gestuel vers la page suivante.

Dans la méthode go, nous calculons d'abord la distance de glissement des différents écrans de l'appareil mobile. Ensuite, nous déterminons si le geste recule ou si le geste glisse vers la page suivante en fonction de la direction de la diapositive. S'il s'agit d'un retour glissant gestuel, et que l'index de la page courante est supérieur à 1, nous appelons la méthode $router.back pour effectuer un retour glissant gestuel. Si le geste est utilisé pour passer à la page suivante et que l'index de la page actuelle est inférieur au nombre de pages dans la configuration de routage, nous appelons la méthode $router.push pour effectuer le geste pour passer à la page suivante.

Grâce aux opérations ci-dessus, nous pouvons résoudre efficacement le problème du retour coulissant des gestes mobiles dans le développement de Vue. À l'aide des plug-ins vue-touch et vue-router, nous pouvons facilement surveiller l'événement de glissement gestuel de l'appareil mobile et déterminer si le glissement gestuel revient ou le geste glisse vers la page suivante en fonction de la distance de glissement. De cette manière, il peut améliorer l’expérience utilisateur sur le terminal mobile et rendre le changement de page plus fluide.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!