So erreichen Sie einen nahtlosen Routing-Wechsel zwischen Seiten in Uniapp

So erreichen Sie einen nahtlosen Routing-Wechsel zwischen Seiten in Uniapp

In Uniapp ist ein nahtloser Routing-Wechsel zwischen Seiten eine sehr häufige Anforderung. Durch ein angemessenes Routing-Design können wir reibungslose Seitenwechseleffekte erzielen und die Benutzererfahrung verbessern. In diesem Artikel wird erläutert, wie Sie einen nahtlosen Routing-Wechsel zwischen Seiten in Uniapp erreichen, und es werden spezifische Codebeispiele bereitgestellt.

1. Grundlegende Verwendung des Routings

In Uniapp können Routing-Sprünge zwischen Seiten über die Methoden uni.navigateTo und uni.switchTab erreicht werden.

1. Verwenden Sie uni.navigateTo, um zwischen Seiten zu leiten

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

Sie können über den obigen Code auf der Seite page1 zum Seitenordner navigieren . Bei Verwendung von uni.navigateTo bleibt die Seite im Stapel und Sie können über uni.navigateBack zur vorherigen Seite zurückkehren.

2. Verwenden Sie uni.switchTab, um zwischen Seiten zu wechseln

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

Sie können über den obigen Code zu Seite 1 in der unteren Navigationsleiste wechseln Seite. Nach der Verwendung von uni.switchTab wird der Seitenstapel geleert, sodass nur die letzte Seite übrig bleibt.

2. Konfiguration von Seitenübergangseffekten

1. Übergangskomponente verwenden, um Seitenübergangseffekte zu erzielen

Beim Seitenwechsel können wir die von uni-app bereitgestellte Übergangskomponente verwenden, um den Übergangseffekt zwischen Seiten zu erzielen. Die Übergangskomponente unterstützt eine Vielzahl von Übergangseffekten, wie z. B. Einblenden, Hochschieben, Herunterschieben usw.

In 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. Benutzerdefinierter Seitenübergangseffekt

In Uniapp können wir benutzerdefinierte Übergangseffekte zwischen Seiten erzielen, indem wir das Übergangsattribut in onLoad oder onShow der Seite festlegen.

In Seite1.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. Datenübertragung zwischen Seiten

In Uniapp kann die Datenübertragung zwischen Seiten durch Parameterübertragung, Vuex, lokale Speicherung usw. erreicht werden.

1. Verwenden Sie die Methode zur Parameterübergabe

Wenn Sie über die Methode uni.navigateTo oder uni.redirectTo zur Zielseite springen, können Sie Parameter über die URL übergeben.

Auf Seite A:

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

Auf Seite B können Sie die übergebenen Parameter über dieses $route.query-Objekt abrufen:

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

2. Vuex für die Datenübertragung verwenden

In Uniapp können Sie Vuex dafür global verwenden Staatsmanagement.

In index.js im Store-Ordner:

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

Auf Seite A:

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

Auf Seite B können Sie die Daten über this.$store.state.userInfo abrufen.

4. Verwaltung des Seitenstapels

In Uniapp ist die Verwaltung des Seitenstapels sehr wichtig. Durch eine vernünftige Seitenstapelverwaltung kann ein nahtloser Wechsel zwischen Seiten erreicht werden.

1. Maximale Grenze des Seitenstapels

In Uniapp beträgt die Standardtiefe des Seitenstapels 10 Ebenen, d. h. die älteste Seite wird gelöscht, wenn sie 10 Ebenen überschreitet. Wenn Sie die Seitenstapeltiefe ändern müssen, können Sie sie in der Datei „pages.json“ konfigurieren.

"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. Zur angegebenen Seite zurückkehren

Mit der Methode uni.navigateBack kann die angegebene Seite im Seitenstapel zurückgegeben werden.

In Unterseiten:

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

Durch die oben genannten Methoden können wir einen nahtlosen Routing-Wechsel zwischen Seiten in Uniapp erreichen, um die Benutzererfahrung zu verbessern. Ich hoffe, dass der obige Inhalt für Sie hilfreich ist.

Das obige ist der detaillierte Inhalt vonSo erreichen Sie einen nahtlosen Routing-Wechsel zwischen Seiten in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!