一、頁面導航

概述

顧名思義，頁面導航指的是頁面之間的相互跳轉(zhuǎn)，

而頁面?zhèn)鲄⒕褪窃诩虞d頁面時將特定的參數(shù)傳遞過去從而成為該頁面的參數(shù)。

分類

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

編程式導航：通過調(diào)用小程序?qū)ｉT的導航API，實現(xiàn)頁面之間的跳轉(zhuǎn)

聲明式導航

導航到tabBar頁面

tabBar頁面指的是被配置為底部tabBar的頁面，點擊實現(xiàn)頁面間快速切換

配置步驟

聲明<navigator>組件

指定URL屬性，即需要跳轉(zhuǎn)到的頁面的路徑，注意路徑必須以 / 開頭

指定open-type屬性，即實現(xiàn)跳轉(zhuǎn)的方式，跳轉(zhuǎn)到tabBar頁面該屬性必須為 switchTab

示例代碼

<navigator url="/pages/index/index" open-type="switchTab">導航到home首頁</navigator>

導航到非tabBar頁面

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

配置步驟

• 聲明<navigator>組件
• 指定URL屬性，即需要跳轉(zhuǎn)到的頁面的路徑，注意路徑必須以 / 開頭
• 指定open-type屬性，即實現(xiàn)跳轉(zhuǎn)的方式，跳轉(zhuǎn)到tabBar頁面該屬性必須為 navigator
• (為了開發(fā)方便，官方規(guī)定此時open-type屬性也可以省略不寫)

示例代碼

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

后退導航

配置步驟

• 聲明<navigator>組件
• 指定open-type屬性，即實現(xiàn)跳轉(zhuǎn)的方式，后退跳轉(zhuǎn)該屬性必須為 navigateBack
• 指定delta的值，表示要后退的層級數(shù)，必須是整數(shù)

示例代碼

<navigator open-type="navigateBack" delta="1">返回上一頁</navigator>

編程式導航

導航到tabBar頁面

配置步驟

• 聲明一個按鈕組件
• 為按鈕綁定事件函數(shù)
• 在時間處理函數(shù)中調(diào)用wx.switchTab(Object object)方法
• 在函數(shù)體內(nèi)指定url、success、fail等屬性

其中object參數(shù)對象的屬性列表如下：

（注意：url屬性是必填項，其它是可選項）

示例代碼：

.wxml

<button bindtap="gotoIndex" type="default">點擊跳轉(zhuǎn)到home首頁</button> 

.js

//按鈕點擊事件處理函數(shù)，實現(xiàn)跳轉(zhuǎn)到首頁
  gotoIndex(){
    wx.switchTab({
      url: '/pages/index/index',
      success:function(){
        console.log('跳轉(zhuǎn)成功！')
      },
      fail:function(){
        console.log('跳轉(zhuǎn)失?。?)
      },
      complete:function(){
        console.log('已經(jīng)觸發(fā)跳轉(zhuǎn)事件！')
      }
    })
  }

導航到非tabBar頁面

配置步驟

• 聲明一個按鈕組件
• 為按鈕綁定事件函數(shù)
• 在時間處理函數(shù)中調(diào)用wx.navigateTo(Object object)方法
• 在函數(shù)體內(nèi)指定url、success、fail等屬性

示例代碼

代碼與上述同理，只是調(diào)用的小程序API不同，這里需要調(diào)用wx.navigateTo(Object object)方法

后退導航

配置步驟

• 聲明一個按鈕組件
• 為按鈕綁定事件函數(shù)
• 在時間處理函數(shù)中調(diào)用wx.navigateBack(Object object)方法
• 在函數(shù)體內(nèi)指定delta、success、fail等屬性

其中object參數(shù)對象的屬性列表如下：

示例代碼

.wxml

<button bindtap="gotoBack" type="default">點擊返回上一頁面</button> 

.js

gotoBack(){
    wx.navigateBack({
        //delta屬性默認值為1 ,所以下面語句可寫可不寫
        delta:1 
    })
}

導航傳參

聲明式導航傳參

navigator組件的url屬性用來指定將要跳轉(zhuǎn)到的頁面的路徑。同時，路徑的后面可以攜帶參數(shù)：

• 參數(shù)與路徑之間使用 ? 分隔
• 參數(shù)鍵與參數(shù)值之間用 = 相連
• 不同的參數(shù)用 & 分隔

示例代碼

<navigator url="/pages/info/info？name=gy&number=1" open-type="navigate">導航到info頁面</navigator>

傳參結(jié)果

編程式導航傳參

當調(diào)用wx.navigateTo(Object object)方法進行頁面跳轉(zhuǎn)時，也可以攜帶參數(shù)，與聲明式導航傳參同理，將參數(shù)寫進url中，方法一致

示例代碼

 gotoInfo(){
    wx.navigateTo({
      url: '/pages/info/info?name=gy&number=1',
      success:function(){
        console.log('跳轉(zhuǎn)成功！')
      },
      fail:function(){
        console.log('跳轉(zhuǎn)失??！')
      },
      complete:function(){
        console.log('已經(jīng)觸發(fā)跳轉(zhuǎn)事件！')
      }
    })
  }

到此這篇關(guān)于微信小程序?qū)崿F(xiàn)頁面導航與傳參功能詳解的文章就介紹到這了,更多相關(guān)小程序頁面導航內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論