一、頁面導航

概述

顧名思義，頁面導航指的是頁面之間的相互跳轉，

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

分類

聲明式導航：在頁面上聲明一個<navigator>導航組件，通過點擊該組件實現頁面跳轉

編程式導航：通過調用小程序專門的導航API，實現頁面之間的跳轉

聲明式導航

導航到tabBar頁面

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

配置步驟

聲明<navigator>組件

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

指定open-type屬性，即實現跳轉的方式，跳轉到tabBar頁面該屬性必須為 switchTab

示例代碼

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

導航到非tabBar頁面

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

配置步驟

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

示例代碼

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

后退導航

配置步驟

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

示例代碼

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

編程式導航

導航到tabBar頁面

配置步驟

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

其中object參數對象的屬性列表如下：

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

示例代碼：

.wxml

<button bindtap="gotoIndex" type="default">點擊跳轉到home首頁</button> 

.js

//按鈕點擊事件處理函數，實現跳轉到首頁
  gotoIndex(){
    wx.switchTab({
      url: '/pages/index/index',
      success:function(){
        console.log('跳轉成功！')
      },
      fail:function(){
        console.log('跳轉失敗！')
      },
      complete:function(){
        console.log('已經觸發(fā)跳轉事件！')
      }
    })
  }

導航到非tabBar頁面

配置步驟

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

示例代碼

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

后退導航

配置步驟

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

其中object參數對象的屬性列表如下：

示例代碼

.wxml

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

.js

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

導航傳參

聲明式導航傳參

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

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

示例代碼

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

傳參結果

編程式導航傳參

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

示例代碼

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

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

最新評論