uniapp でページ間のシームレスなルーティング切り替えを実装する方法
uniapp では、ページ間のシームレスなルーティング切り替えは非常に一般的な要件です。合理的なルーティング設計により、スムーズなページ切り替え効果を実現し、ユーザーエクスペリエンスを向上させることができます。この記事では、uniapp でページ間のシームレスなルーティング切り替えを実現する方法を紹介し、具体的なコード例を示します。
1. ルーティングの基本的な使用法
uniapp では、ページ間のルーティング ジャンプは uni.navigateTo メソッドと uni.switchTab メソッドを通じて実現できます。
uni.navigateTo を使用してページ間のルーティングを行う
uni.navigateTo({
url: 'pages/page1/page1'
} )
上記のコードにより、pages フォルダーの下の page1 ページに移動できます。 uni.navigateTo を使用すると、ページはスタックに残り、uni.navigateBack を通じて前のページに戻ることができます。
uni.switchTab を使用してページを切り替えます
uni.switchTab({
url: 'pages/page1/page1'
})
上記のコードを使用すると、下部のナビゲーション バーの page1 ページに切り替えることができます。 uni.switchTab を使用すると、ページ スタックがクリアされ、最後のページのみが残ります。
2. ページ遷移効果の構成
ページを切り替えるとき、ユニアプリを使用できます。トランジションコンポーネントは、ページ間のトランジション効果を実現するために提供されます。トランジション コンポーネントは、フェード、スライドアップ、スライドダウンなどのさまざまなトランジション効果をサポートします。
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>
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、ローカル ストレージなどを通じてページ間のデータ転送を実現できます。 。 データ転送。
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>
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 ではページスタックの管理が非常に重要です。合理的なページ スタック管理により、ページ間のシームレスな切り替えを実現できます。
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": {} }
ページ スタック内の指定したページは、uni.navigateBack メソッドを通じて返すことができます。
サブページ内:
uni.navigateBack({ delta: 2 // 返回上上页面 })
上記の方法により、uniapp のページ間のシームレスなルーティング切り替えを実現し、ユーザー エクスペリエンスを向上させることができます。上記の内容がお役に立てば幸いです。
以上がuniapp でページ間のシームレスなルーティング切り替えを実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。