頁面導(dǎo)航

1. 什么是頁面導(dǎo)航

頁面導(dǎo)航指的是 頁面之間的相互跳轉(zhuǎn) 。例如，瀏覽器中實現(xiàn)頁面導(dǎo)航的方式有如下兩種：

① <a> 鏈接

② location.href

2. 小程序中實現(xiàn)頁面導(dǎo)航的兩種方式

① 聲明式導(dǎo)航

在頁面上聲明一個 <navigator> 導(dǎo)航組件 通過點擊 <navigator> 組件實現(xiàn)頁面跳轉(zhuǎn)

② 編程式導(dǎo)航

調(diào)用小程序的導(dǎo)航 API，實現(xiàn)頁面的跳轉(zhuǎn)

聲明式導(dǎo)航

1. 導(dǎo)航到 tabBar 頁面

tabBar 頁面 指的是被配置為 tabBar 的頁面。

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

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

示例代碼如下：

<navigator url="/pages/message/message" open-type="switchTab">導(dǎo)航到消息頁面</navigator>

2. 導(dǎo)航到非tabBar頁面

非 tabBar 頁面 指的是沒有被配置為 tabBar 的頁面。

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

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

示例代碼如下：

<navigator url="/pages/info/info" open-type="navigate">導(dǎo)航到info頁面</navigator>

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

3. 后退導(dǎo)航

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

• open-type 的值必須是 navigateBack，表示要進行后退導(dǎo)航
• delta 的值必須是數(shù)字，表示要后退的層級

示例代碼如下：

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

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

編程式導(dǎo)航

1. 導(dǎo)航到 tabBar 頁面

調(diào)用 wx.switchTab( Object object ) 方法，可以跳轉(zhuǎn)到 tabBar 頁面。其中 Object 參數(shù)對象 的屬性列表如下：

示例代碼如下：

<button bindtap="gotoMessage">跳轉(zhuǎn)到message頁面</button>

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

2. 導(dǎo)航到非tabBar頁面

調(diào)用 wx.navigateTo( Object object ) 方法，可以跳轉(zhuǎn)到非 tabBar 的頁面。其中 Object 參數(shù)對象 的屬性列表

如下：

示例代碼如下：

<button bindtap="gotoInfo">跳轉(zhuǎn)到info頁面</button>

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

3. 后退導(dǎo)航

調(diào)用 wx.navigateBack( Object object ) 方法，可以返回上一頁面或多級頁面。其中 Object 參數(shù)對象

可選的

屬性列表如下： 

示例代碼如下：

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

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

到此這篇關(guān)于微信小程序頁面導(dǎo)航介紹及使用詳解的文章就介紹到這了,更多相關(guān)小程序頁面導(dǎo)航內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！