uniapp頁面跳轉詳解

一、uniapp頁面跳轉方式

uniapp頁面跳轉有兩種方式：navigateTo和redirectTo，可以根據需求自行選擇。

// navigateTo方式
uni.navigateTo({
  url: '/pages/index/index',
  success: function(res) {
    console.log('跳轉成功');
  },
  fail: function(res) {
    console.log('跳轉失敗');
  }
});

// redirectTo方式
uni.redirectTo({
  url: '/pages/index/index',
  success: function(res) {
    console.log('跳轉成功');
  },
  fail: function(res) {
    console.log('跳轉失敗');
  }
});

二、uniapp頁面跳轉動畫

uniapp頁面跳轉可以設置跳轉動畫，提高用戶交互體驗。

// 設置跳轉動畫
uni.navigateTo({
    url: '/pages/index/index',
    animationType: 'slide-in-left',
    animationDuration: 500,
});

// 可選的跳轉動畫類型
slide-in-right：從右側進入
slide-in-left：從左側進入
slide-in-top：從頂部進入
slide-in-bottom：從底部進入
pop-in：彈出
fade-in：淡入

三、uniapp頁面跳轉傳值

uniapp頁面跳轉可以傳遞參數，實現頁面間的數據交互。

// 傳遞參數方式
uni.navigateTo({
    url: '/pages/index/index?key=value',
});

// 獲取傳遞參數
onLoad: function (options) {
    console.log(options.key) // 輸出 value
}

四、uniapp頁面跳轉調用方法

uniapp頁面跳轉可以在頁面的js文件中進行調用，實現頁面間的跳轉和傳遞參數。

export default {
  methods: {
    goToPage() {
      uni.navigateTo({
        url: '/pages/index/index?key=value'
      });
    }
  }
}

五、uniapp頁面自動跳轉

uniapp頁面可以設置自動跳轉，實現頁面間的自動跳轉。

// 定時跳轉方式
setTimeout(() => {
  uni.navigateTo({
    url: '/pages/index/index',
  });
}, 2000);

六、uniapp跳轉多級頁面

uniapp頁面可以跳轉多級頁面，實現多層級頁面間的跳轉。

// 跳轉3級頁面
uni.navigateTo({
    url: '/pages/page1/page1',
    success: function() {
        uni.navigateTo({url: '/pages/page2/page2'});
    }
});

七、uniapp頁面跳轉傳遞參數

uniapp頁面跳轉可以在多級頁面間傳遞參數，實現多層級頁面間的數據交互。

// 在跳轉時傳遞參數
uni.navigateTo({
    url: '/pages/page1/page1?name=John'
});

// 在接收頁面獲取參數
onLoad: function(options) {
    console.log(options.name) // 輸出 John
}

八、uniapp頁面跳轉變量傳遞

uniapp頁面跳轉可以通過變量傳遞參數，提高代碼的可維護性和可讀性。

// 定義變量傳遞參數
let name = 'John';
uni.navigateTo({
    url: '/pages/page1/page1?name=' + name
});

// 在接收頁面獲取參數
onLoad: function(options) {
    console.log(options.name) // 輸出 John
}