Comment résoudre le problème du changement de page coulissant sur les téléphones mobiles dans le développement de Vue

Avec le développement rapide de l'Internet mobile, de plus en plus de sites Web commencent à adopter le développement mobile. Dans le développement mobile, glisser pour changer de page est une exigence courante. En tant que framework frontal populaire, Vue nous offre une solution pratique pour réaliser des changements de pages coulissants.

Dans le développement de Vue, nous utilisons généralement Vue Router pour gérer le routage des pages. Vue Router fournit un composant de liaison de routeur qui peut facilement passer d'une page à l'autre. Mais sur le téléphone mobile, nous souhaitons changer de page en glissant au lieu de cliquer. Ce qui suit est un exemple de code simple avec deux pages :

<template>
  <div>
    <router-link to="/page1">页面1</router-link>
    <router-link to="/page2">页面2</router-link>
    <transition name="slide">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style>
.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s ease;
}

.slide-enter,
.slide-leave-to {
  transform: translateX(100%);
}
</style>

Dans le code ci-dessus, nous implémentons le saut entre les pages via le composant router-link de Vue Router. Grâce au composant de transition de Vue, nous pouvons obtenir l'effet d'animation du glissement de page. Nous avons défini "slide" pour l'attribut name du composant de transition et défini le style d'animation associé dans la balise style.

Lorsque nous cliquons sur un lien sur la page, Vue Router chargera dynamiquement le composant correspondant en fonction de l'attribut to du lien et déterminera l'effet d'animation via l'attribut name du composant de transition. Dans cet exemple, nous utilisons une animation de traduction pour réaliser un glissement de page en modifiant la valeur translateX dans l'attribut transform.

En plus d'utiliser le composant de transition, nous pouvons également utiliser certaines bibliothèques pour simplifier le développement de pages à commutation coulissante. Par exemple, la bibliothèque BetterScroll peut être utilisée pour changer facilement de page par glissement. Vous trouverez ci-dessous un exemple de code utilisant la bibliothèque BetterScroll :

<template>
  <div ref="wrapper">
    <div>
      <div>页面1</div>
      <div>页面2</div>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";

export default {
  name: "App",
  mounted() {
    this.scroll = new BScroll(this.$refs.wrapper, {
      scrollX: true,
      eventPassthrough: "vertical",
      click: true,
    });
  },
  destroyed() {
    this.scroll.destroy();
  },
};
</script>

<style>
#app {
  overflow: hidden;
}

#app > div {
  white-space: nowrap;
}

#app > div > div {
  display: inline-block;
  width: 100vw;
}
</style>

Dans le code ci-dessus, nous utilisons la bibliothèque BetterScroll pour créer un conteneur coulissant et réaliser un défilement horizontal en définissant la propriété scrollX. L'attribut scrollX nous permet de changer de page en faisant glisser notre doigt sur le téléphone mobile. Dans la fonction hook montée, nous créons une instance BetterScroll et lui transmettons une référence au conteneur coulissant. Nous définissons également la propriété eventPassthrough sur "vertical" afin que les gestes de glissement vertical soient également transmis au conteneur coulissant. Enfin, nous détruisons l'instance BetterScroll dans la fonction hook détruite.

Voici deux solutions ci-dessus pour résoudre le problème du changement de page coulissant sur les téléphones mobiles dans le développement de Vue. En utilisant Vue Router et les composants de transition, nous pouvons obtenir des effets d'animation coulissants. En utilisant la bibliothèque BetterScroll, nous pouvons facilement obtenir l'effet de changement de page coulissant. En fonction des besoins réels, nous pouvons choisir une solution qui nous convient pour obtenir l'effet de changement de page coulissant sur le téléphone mobile.

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!