Bagaimana untuk mencapai peralihan yang lancar antara halaman dalam uniapp

Cara mencapai penukaran penghalaan lancar antara halaman dalam uniapp

Dalam uniapp, penukaran penghalaan lancar antara halaman adalah keperluan yang sangat biasa. Melalui reka bentuk penghalaan yang munasabah, kami boleh mencapai kesan penukaran halaman yang lancar dan meningkatkan pengalaman pengguna. Artikel ini akan memperkenalkan cara untuk mencapai peralihan penghalaan yang lancar antara halaman dalam uniapp dan memberikan contoh kod khusus.

1. Penggunaan asas penghalaan

Dalam uniapp, laluan lompatan antara halaman boleh dicapai melalui kaedah uni.navigateTo dan uni.switchTab.

1. Gunakan uni.navigateTo untuk melompat antara halaman

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

Anda boleh menavigasi ke folder halaman1 melalui kod halaman di atas . Apabila menggunakan uni.navigateTo, halaman akan kekal dalam tindanan dan anda boleh kembali ke halaman sebelumnya melalui uni.navigateBack.

2. Gunakan uni.switchTab untuk bertukar antara halaman

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

Anda boleh bertukar ke page1 melalui bahagian bawah navigasi di atas muka surat. Selepas menggunakan uni.switchTab, tindanan halaman akan dikosongkan, hanya meninggalkan halaman terakhir.

2. Konfigurasi kesan peralihan halaman

1. Gunakan komponen peralihan untuk mencapai kesan peralihan halaman

Apabila menukar halaman, kami boleh menggunakan komponen peralihan yang disediakan oleh uni-app untuk mencapai kesan peralihan antara halaman. Komponen peralihan menyokong pelbagai kesan peralihan, seperti pudar, gelongsor ke atas, gelongsor ke bawah, dsb.

Dalam 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. Kesan peralihan halaman tersuai

Dalam uniapp, kami boleh mencapai kesan peralihan tersuai antara halaman dengan menetapkan atribut peralihan dalam onLoad atau onShow halaman.

Dalam 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 Pemindahan data antara halaman

Dalam uniapp, pemindahan data antara halaman boleh dicapai melalui pemindahan parameter, Vuex, storan tempatan, dll.

1. Gunakan kaedah lulus parameter

Apabila melompat ke halaman sasaran melalui kaedah uni.navigateTo atau uni.redirectTo, anda boleh menghantar parameter melalui url.

Dalam halaman A:

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

Dalam halaman B, anda boleh mendapatkan parameter yang diluluskan melalui ini.$route.query object:

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

2. Gunakan Vuex untuk pemindahan data

Dalam uniapp, anda boleh menggunakan Vuex untuknya Global pengurusan negeri.

Dalam index.js di bawah folder kedai:

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

Dalam halaman A:

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

Dalam halaman B, anda boleh mendapatkan data melalui ini.$store.state.userInfo.

4. Pengurusan tindanan halaman

Dalam uniapp, pengurusan tindanan halaman adalah sangat penting. Melalui pengurusan tindanan halaman yang munasabah, penukaran lancar antara halaman boleh dicapai.

1. Had maksimum tindanan halaman

Dalam uniapp, kedalaman tindanan halaman lalai ialah 10 tahap, iaitu halaman tertua akan dikosongkan jika melebihi 10 tahap. Jika anda perlu mengubah suai kedalaman tindanan halaman, anda boleh mengkonfigurasinya dalam fail 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. Kembali ke halaman yang ditentukan

Kaedah uni.navigateBack boleh digunakan untuk mengembalikan halaman yang ditentukan dalam susunan halaman.

Dalam sub-halaman:

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

Melalui kaedah di atas, kami boleh mencapai peralihan laluan yang lancar antara halaman dalam uniapp untuk meningkatkan pengalaman pengguna. Semoga kandungan di atas dapat membantu anda.

Atas ialah kandungan terperinci Bagaimana untuk mencapai peralihan yang lancar antara halaman dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!