Comment implémenter une animation de saut de routage dans Uniapp

UniApp est un framework de développement multiplateforme développé sur la base de Vue.js, qui peut aider les développeurs à créer rapidement des applications multiplateformes. Dans UniApp, l'animation de saut d'itinéraire est une exigence courante. Cet article présentera comment implémenter l'animation de saut d'itinéraire dans UniApp et fournira des exemples de code spécifiques.

UniApp propose une variété de méthodes de saut d'itinéraire, notamment naviguerTo, redirectTo, switchTab, etc. Différentes méthodes de saut peuvent avoir différents effets d'animation. Nous pouvons choisir la méthode de saut appropriée en fonction des besoins pour obtenir des effets d'animation.

Ce qui suit utilise NavigTo comme exemple pour présenter comment implémenter une animation de saut de routage dans UniApp.

Tout d'abord, configurez un style d'animation global dans App.vue et appelez ce style uniformément lorsque la page saute. Vous pouvez ajouter le code suivant dans le

.page-enter {
  opacity: 0;
  transform: translateX(100%);
}

.page-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.3s;
}

.page-leave {
  opacity: 1;
  transform: translateX(0);
}

.page-leave-active {
  opacity: 0;
  transform: translateX(-100%);
  transition: all 0.3s;
}

Dans le code ci-dessus, .page-enter est le style de début de l'animation d'entrée de page et .page-enter-active est le style de fin. de l'animation d'entrée de page ;. page-leave est le style de début de l'animation de sortie de page, et .page-leave-active est le style de fin de l'animation de sortie de page.

Ensuite, dans la page qui doit être sautée, utilisez le composant de Vue pour envelopper le contenu qui doit être sauté et ajoutez-y la classe d'animation.

Supposons que nous ayons une page appelée detail.vue avec le contenu suivant :

<template>
  <view>
    <button @click="jumpToHome">跳转到Home页</button>
  </view>
</template>

<script>
export default {
  methods: {
    jumpToHome() {
      uni.navigateTo({
        url: '/pages/home/home',
        success: () => {
          // 跳转成功后触发动画
          uni.$emit('page-enter');
        }
      });
    }
  }
};
</script>

<style scoped>
.page-enter {
  opacity: 0;
  transform: translateX(100%);
}

.page-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.3s;
}

.page-leave {
  opacity: 1;
  transform: translateX(0);
}

.page-leave-active {
  opacity: 0;
  transform: translateX(-100%);
  transition: all 0.3s;
}
</style>

Dans le code ci-dessus, nous passons à la page d'accueil via uni.navigateTo en cas de clic du bouton, et déclenchons l'animation après le saut. réussi. Afin d'obtenir des effets d'animation, nous avons également ajouté des styles d'animation à la page des boutons.

Dans home.vue sur la page d'accueil, nous devons également ajouter des styles d'animation et déclencher l'animation lors du chargement de la page.

<template>
  <transition name="page">
    <view>
      <text>这是Home页</text>
    </view>
  </transition>
</template>

<script>
export default {
  mounted() {
    // 页面加载完成后触发动画
    uni.$emit('page-enter');
  }
};
</script>

<style scoped>
.page-enter {
  opacity: 0;
  transform: translateX(100%);
}

.page-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.3s;
}

.page-leave {
  opacity: 1;
  transform: translateX(0);
}

.page-leave-active {
  opacity: 0;
  transform: translateX(-100%);
  transition: all 0.3s;
}
</style>

Dans le code ci-dessus, nous avons déclenché l'effet d'animation dans la fonction hook de cycle de vie montée de la page d'accueil.

Avec la configuration ci-dessus, nous pouvons obtenir l'effet d'animation lorsque la page saute dans UniApp. Lorsque vous cliquez sur le bouton de saut, la page actuelle glisse vers la droite et disparaît, tandis que la nouvelle page glisse depuis la droite et apparaît en fondu, offrant aux utilisateurs une expérience de saut fluide.

Il est à noter que dans les projets réels, vous pouvez configurer des effets d'animation en fonction de vos besoins, comme le changement de direction, de temps, la fonction d'assouplissement, etc. De plus, UniApp fournit également d'autres méthodes de saut d'itinéraire et interfaces de configuration d'animation. Les développeurs peuvent choisir la méthode appropriée pour implémenter l'animation de saut d'itinéraire en fonction de leurs propres besoins.

Documentation de référence : https://uniapp.dcloud.io/api/router?id=navigateto

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!