uniapp でページ間のシームレスなルーティング切り替えを実現する方法

uniapp でページ間のシームレスなルーティング切り替えを実装する方法

uniapp では、ページ間のシームレスなルーティング切り替えは非常に一般的な要件です。合理的なルーティング設計により、スムーズなページ切り替え効果を実現し、ユーザーエクスペリエンスを向上させることができます。この記事では、uniapp でページ間のシームレスなルーティング切り替えを実現する方法を紹介し、具体的なコード例を示します。

1. ルーティングの基本的な使用法

uniapp では、ページ間のルーティング ジャンプは uni.navigateTo メソッドと uni.switchTab メソッドを通じて実現できます。

1. uni.navigateTo を使用してページ間のルーティングを行う

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

上記のコードにより、pages フォルダーの下の page1 ページに移動できます。 uni.navigateTo を使用すると、ページはスタックに残り、uni.navigateBack を通じて前のページに戻ることができます。

2. uni.switchTab を使用してページを切り替えます

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

上記のコードを使用すると、下部のナビゲーション バーの page1 ページに切り替えることができます。 uni.switchTab を使用すると、ページ スタックがクリアされ、最後のページのみが残ります。

2. ページ遷移効果の構成

1. 遷移コンポーネントを使用してページ遷移効果を実現します

ページを切り替えるとき、ユニアプリを使用できます。トランジションコンポーネントは、ページ間のトランジション効果を実現するために提供されます。トランジション コンポーネントは、フェード、スライドアップ、スライドダウンなどのさまざまなトランジション効果をサポートします。

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. カスタマイズされたページ遷移効果

uniappでは、ページ遷移属性のonLoadまたはonShowで設定できます。ページ間のカスタマイズされたトランジション効果を実現します。

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. ページ間のデータ転送

uniapp では、パラメータ転送、Vuex、ローカル ストレージなどを通じてページ間のデータ転送を実現できます。 。 データ転送。

1. パラメータ受け渡しメソッドを使用する

uni.navigateTo メソッドまたは uni.redirectTo メソッドを通じてターゲット ページにジャンプする場合、URL を通じてパラメータを渡すことができます。

ページ A:

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

ページ B では、this.$route.query オブジェクトを通じて渡されたパラメーターを取得できます:

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

2. Vuex データ転送を使用します。

uniapp では、グローバルな状態管理に Vuex を使用できます。

ストア フォルダーの下のindex.js内:

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

ページA:

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

ページBでは、this.$store.stateを渡すことができます。データ。

4. ページスタックの管理

uniapp ではページスタックの管理が非常に重要です。合理的なページ スタック管理により、ページ間のシームレスな切り替えを実現できます。

1. ページ スタックの最大制限

uniapp では、デフォルトのページ スタックの深さは 10 レベルです。つまり、10 レベルを超えると最も古いページがクリアされます。ページ スタックの深さを変更する必要がある場合は、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. 指定したページに戻る

ページ スタック内の指定したページは、uni.navigateBack メソッドを通じて返すことができます。

サブページ内:

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

上記の方法により、uniapp のページ間のシームレスなルーティング切り替えを実現し、ユーザー エクスペリエンスを向上させることができます。上記の内容がお役に立てば幸いです。

以上がuniapp でページ間のシームレスなルーティング切り替えを実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。