微信小程式頁面導航介紹及使用詳解

2022-08-11 14:00:25

頁面導航

1. 什麼是頁面導航

頁面導航指的是頁面之間的相互跳轉。例如，瀏覽器中實現頁面導航的方式有如下兩種：

① <a> 連結

② location.href

2. 小程式中實現頁面導航的兩種方式

① 宣告式導航

在頁面上宣告一個 <navigator> 導航元件通過點選 <navigator> 元件實現頁面跳轉

② 程式設計式導航

呼叫小程式的導航 API，實現頁面的跳轉

宣告式導航

1. 導航到 tabBar 頁面

tabBar 頁面指的是被設定為 tabBar 的頁面。

在使用 <navigator> 元件跳轉到指定的 tabBar 頁面時，需要指定 url 屬性和 open-type 屬性，其中：

url 表示要跳轉的頁面的地址，必須以 / 開頭
open-type 表示跳轉的方式，必須為 switchTab

範例程式碼如下：

<navigator url="/pages/message/message" open-type="switchTab">導航到訊息頁面</navigator>

2. 導航到非tabBar頁面

非 tabBar 頁面指的是沒有被設定為 tabBar 的頁面。

在使用 <navigator> 元件跳轉到普通的非 tabBar 頁面時，則需要指定 url 屬性和 open-type 屬性，其中：

url 表示要跳轉的頁面的地址，必須以 / 開頭
open-type 表示跳轉的方式，必須為 navigate

範例程式碼如下：

<navigator url="/pages/info/info" open-type="navigate">導航到info頁面</navigator>

注意：為了簡便，在導航到非 tabBar 頁面時，open-type="navigate" 屬性可以省略。

3. 後退導航

如果要後退到上一頁面或多級頁面，則需要指定 open-type 屬性和 delta 屬性，其中：

open-type 的值必須是 navigateBack，表示要進行後退導航
delta 的值必須是數位，表示要後退的層級

範例程式碼如下：

<navigator open-type="navigateBack">後退</navigator>

注意：為了簡便，如果只是後退到上一頁面，則可以省略 delta 屬性，因為其預設值就是 1。

程式設計式導航

1. 導航到 tabBar 頁面

呼叫 wx.switchTab( Object object ) 方法，可以跳轉到 tabBar 頁面。其中 Object 引數物件的屬性列表如下：

屬性	型別	是否必選	說明
url	string	是	需要跳轉的 tabBar 頁面的路徑，路徑後不能帶引數
success	function	否	介面呼叫成功的回撥函數
fail	function	否	介面呼叫失敗的回撥函數
complete	function	否	介面呼叫結束的回撥函數（呼叫成功、失敗都會執行）

範例程式碼如下：

<button bindtap="gotoMessage">跳轉到message頁面</button>

 gotoMessage() {
    wx.switchTab({
      url: '/pages/message/message'
    })
  },

2. 導航到非tabBar頁面

呼叫 wx.navigateTo( Object object ) 方法，可以跳轉到非 tabBar 的頁面。其中 Object 引數物件的屬性列表

如下：

屬性	型別	是否必選	說明
url	string	是	需要跳轉的 tabBar 頁面的路徑，路徑後不能帶引數
success	function	否	介面呼叫成功的回撥函數
fail	function	否	介面呼叫失敗的回撥函數
complete	function	否	介面呼叫結束的回撥函數（呼叫成功、失敗都會執行）

範例程式碼如下：

<button bindtap="gotoInfo">跳轉到info頁面</button>

  gotoInfo() {
    wx.navigateTo({
      url: '/pages/info/info'
    })
  },

3. 後退導航

呼叫 wx.navigateBack( Object object ) 方法，可以返回上一頁面或多級頁面。其中 Object 引數物件

可選的

屬性列表如下：

屬性	型別	預設值	是否必選	說明
delta	number	1	否	返回的頁面數，如果 delta 大於現有頁面數，則返回到首頁
success	function		否	介面呼叫成功的回撥函數
fail	function		否	介面呼叫失敗的回撥函數
complete	function		否	介面呼叫結束的回撥函數（呼叫成功、失敗都會執行）

範例程式碼如下：

<button bindtap="goBack">後退</button>

  goBack() {
    wx.navigateBack({
      delta: 1
    })
  },

到此這篇關於微信小程式頁面導航介紹及使用詳解的文章就介紹到這了,更多相關小程式頁面導航內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

微信小程式頁面導航介紹及使用詳解

目錄

頁面導航

1. 什麼是頁面導航

2. 小程式中實現頁面導航的兩種方式

宣告式導航

1. 導航到 tabBar 頁面

2. 導航到非tabBar頁面

3. 後退導航

程式設計式導航

1. 導航到 tabBar 頁面

2. 導航到非tabBar頁面

3. 後退導航

熱門文章