uniapp에서 페이지 간 원활한 라우팅 전환을 달성하는 방법

유니앱에서 페이지 간 원활한 라우팅 전환을 구현하는 방법

유니앱에서는 페이지 간 원활한 라우팅 전환이 매우 일반적인 요구 사항입니다. 합리적인 라우팅 설계를 통해 원활한 페이지 전환 효과를 달성하고 사용자 경험을 향상시킬 수 있습니다. 이 글에서는 uniapp에서 페이지 간 원활한 라우팅 전환을 달성하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. 라우팅의 기본 사용

uniapp에서는 uni.navigateTo 및 uni.switchTab 메소드를 통해 페이지 간 라우팅 점프를 수행할 수 있습니다.

1. 페이지 간 라우팅에는 uni.navigateTo를 사용하세요

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

위 코드를 통해 페이지 폴더로 이동할 수 있습니다. page1 페이지 . uni.navigateTo를 사용하면 페이지가 스택에 남아 있으며 uni.navigateBack을 통해 이전 페이지로 돌아갈 수 있습니다.

2. 페이지 간 전환은 uni.switchTab을 사용하세요

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

위 코드를 통해 하단 탐색바에서 페이지1로 전환할 수 있습니다 페이지. uni.switchTab을 사용하면 페이지 스택이 지워지고 마지막 페이지만 남습니다.

2. 페이지 전환 효과 구성

1. 전환 컴포넌트를 사용하여 페이지 전환 효과 구현

페이지 전환 시 uni-app에서 제공하는 전환 컴포넌트를 사용하여 페이지 간 전환 효과를 구현할 수 있습니다. 전환 구성요소는 페이드, 슬라이드업, 슬라이드다운 등과 같은 다양한 전환 효과를 지원합니다.

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. 페이지 간 데이터 전송

유니앱에서는 매개변수 전송, Vuex, 로컬 스토리지 등을 통해 페이지 간 데이터 전송이 가능합니다.

1. 매개변수 전달 방식 사용

uni.navigateTo 또는 uni.redirectTo 메소드를 통해 대상 페이지로 이동할 때 URL을 통해 매개변수를 전달할 수 있습니다.

페이지 A:

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

페이지 B에서는 다음을 통해 전달된 매개변수를 얻을 수 있습니다.$route.query 객체:

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

2. 데이터 전송에 Vuex 사용

uniapp에서는 Vuex를 사용하여 전역적으로 사용할 수 있습니다. 상태 관리.

store 폴더 아래 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.userInfo를 통해 데이터를 가져올 수 있습니다.

4. 페이지 스택 관리

유니앱에서는 페이지 스택 관리가 매우 중요합니다. 합리적인 페이지 스택 관리를 통해 페이지 간 원활한 전환이 가능합니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!