Comment obtenir une commutation de routage transparente entre les pages dans Uniapp

Comment réaliser une commutation de routage transparente entre les pages dans uniapp

Dans uniapp, une commutation de routage transparente entre les pages est une exigence très courante. Grâce à une conception de routage raisonnable, nous pouvons obtenir des effets de changement de page fluides et améliorer l'expérience utilisateur. Cet article expliquera comment réaliser une commutation de routage transparente entre les pages dans uniapp et fournira des exemples de code spécifiques.

1. Utilisation de base du routage

Dans uniapp, les sauts de routage entre les pages peuvent être réalisés via les méthodes uni.navigateTo et uni.switchTab.

1. Utilisez uni.navigateTo pour parcourir les pages

   uni.navigateTo({
   url: 'pages/page1/page1'
   })

Vous pouvez accéder au dossier des pages via le code ci-dessus La page page1 . Lorsque vous utilisez uni.navigateTo, la page restera dans la pile et vous pourrez revenir à la page précédente via uni.navigateBack.

2. Utilisez uni.switchTab pour basculer entre les pages

   uni.switchTab({
   url: 'pages/page1/page1'
   })

Vous pouvez passer à la page 1 dans la barre de navigation inférieure via le code ci-dessus page. Après avoir utilisé uni.switchTab, la pile de pages sera effacée, ne laissant que la dernière page.

2. Configuration des effets de transition de page

1. Utilisez le composant de transition pour obtenir un effet de transition de page

Lors du changement de page, nous pouvons utiliser le composant de transition fourni par uni-app pour obtenir l'effet de transition entre les pages. Le composant de transition prend en charge une variété d'effets de transition, tels que le fondu, le glissement vers le haut, le glissement vers le bas, etc.

Dans App.vue :

<template>
  <view class="app">
    <transition name="fade">
      <router-view></router-view>
    </transition>
  </view>
</template>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

2. Effet de transition de page personnalisé

Dans uniapp, nous pouvons obtenir des effets de transition personnalisés entre les pages en définissant l'attribut de transition dans onLoad ou onShow de la page.

Dans page1.vue :

<template>
  <view>page1</view>
</template>

<script>
export default {
  onLoad() {
    this.$options.transition = 'slide-left'
  }
}
</script>

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

3. Transfert de données entre pages

Dans uniapp, le transfert de données entre les pages peut être réalisé via le transfert de paramètres, Vuex, le stockage local, etc.

1. Utilisez la méthode de transmission des paramètres

Lorsque vous accédez à la page cible via la méthode uni.navigateTo ou uni.redirectTo, vous pouvez transmettre des paramètres via l'URL.

Dans la page A :

uni.navigateTo({
  url: 'pages/B/B?id=1&name=uniapp'
})

Dans la page B, vous pouvez obtenir les paramètres transmis via cet objet.$route.query :

<template>
  <view>
    <text>{{ $route.query.id }}</text>
    <text>{{ $route.query.name }}</text>
  </view>
</template>

2. Utilisez Vuex pour le transfert de données

Dans uniapp, vous pouvez utiliser Vuex pour cela Global gestion de l'État.

Dans index.js sous le dossier store :

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    userInfo: null
  },
  mutations: {
    setUserInfo(state, info) {
      state.userInfo = info
    }
  }
})

export default store

Dans la page A :

this.$store.commit('setUserInfo', {id: 1, name: 'uniapp'})

Dans la page B, vous pouvez obtenir les données via this.$store.state.userInfo.

4. Gestion de la pile de pages

Dans uniapp, la gestion de la pile de pages est très importante. Grâce à une gestion raisonnable de la pile de pages, une commutation transparente entre les pages peut être obtenue.

1. Limite maximale de la pile de pages

Dans uniapp, la profondeur de pile de pages par défaut est de 10 niveaux, c'est-à-dire que la page la plus ancienne sera effacée si elle dépasse 10 niveaux. Si vous devez modifier la profondeur de la pile de pages, vous pouvez la configurer dans le fichier pages.json.

"splashscreen": {
  "pages": [
    {
      "path": "pages/page1/page1",
      "style": {
        "navigationBarTitleText": "page1"
      },
      "events": {
        "init": "",
        "show": ""
      },
      "style": {},
      "window": {}
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  },
  "tabBar": {}
}

2. Retour à la page spécifiée

La méthode uni.navigateBack peut être utilisée pour renvoyer la page spécifiée dans la pile de pages.

Dans les sous-pages :

uni.navigateBack({
  delta: 2  // 返回上上页面
})

Grâce aux méthodes ci-dessus, nous pouvons réaliser une commutation de routage transparente entre les pages dans uniapp pour améliorer l'expérience utilisateur. J'espère que le contenu ci-dessus vous sera utile.

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!