一.頁面導(dǎo)航

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

頁面導(dǎo)航是指頁面之間的相互跳轉(zhuǎn)。

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

頁面導(dǎo)航有兩種實現(xiàn)方式：

聲明式導(dǎo)航

方法：在頁面聲明一個navigator組件，通過點擊這個組件來實現(xiàn)頁面的跳轉(zhuǎn)。

編程式導(dǎo)航

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

二.聲明式導(dǎo)航

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

tab頁面指被配置為tabBar的頁面，在使用指定navigator組件跳轉(zhuǎn)到指定頁面時，必需要指定url屬性和open-style屬性，其中：

url表示要跳轉(zhuǎn)的頁面地址，必須以/開頭

open-strle表示跳轉(zhuǎn)的方式，這里必須是switchTab

<navigator url="/pages/message/message" open-type="switchTab">跳轉(zhuǎn)到消息頁面</navigator>

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

非tabBar頁面指的是沒有被配置為tabBar的頁面。在使用naxigator組件跳轉(zhuǎn)到非tabBar頁面時，也需要指定url屬性和open-type屬性，其中：

url表示要跳轉(zhuǎn)的頁面地址，必須以/開頭

open-style表示跳轉(zhuǎn)的方式，這里必須是navigate，此時這個屬性可以省略

<navigator url="/pages/info/info" open-type="navigate">跳轉(zhuǎn)到info頁面</navigator>

3.后退導(dǎo)航

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

open-type 的值必須是 navigateBack，表示要進(jìn)行后退導(dǎo)航

delta 的值必須是數(shù)字，表示要后退的層級，默認(rèn)為1

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

三.編程式導(dǎo)航

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

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

wxml代碼：

<button bindtap="gotoMessage" type="primary">跳轉(zhuǎn)到消息頁面</button>

js代碼：

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

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

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

wxml\代碼：

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

js代碼：

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

3.后退導(dǎo)航

調(diào)用 wx.navigateBack(Object object) 方法，可以返回上一頁面或多級頁面。其中 Object 參數(shù)對象可選的屬性列表在官方文檔解釋如下：

wxml代碼：

<button bindtap="goBack">回退上一個頁面</button>

js代碼：

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

四.導(dǎo)航傳參

1.聲明式導(dǎo)航傳參

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

參數(shù)與路徑之間使用 ? 分隔

參數(shù)鍵與參數(shù)值用 = 相連

不同參數(shù)用 & 分隔

<navigator url="/pages/info/info?name=zs&age=20" open-type="navigate">跳轉(zhuǎn)到info頁面</navigator>

2.編程式導(dǎo)航傳參

調(diào)用 wx.navigateTo(Object object) 方法跳轉(zhuǎn)頁面時，也可以攜帶參數(shù)。

  gotoinfo(){
    wx.navigateTo({
      url: '/pages/info/info?name=ls&age=22',
    })
  },

3.在onLoad中接收導(dǎo)航傳參

通過聲明式導(dǎo)航傳參或編程式導(dǎo)航傳參所攜帶的參數(shù)，可以直接在 onLoad 事件中直接獲取到。

  data: {
    //導(dǎo)航傳遞過來的參數(shù)對象：定義空的對象數(shù)組
	quary:{}
  },

  onLoad(options) {
	console.log(options)
	this.setData({
  	quary:options
})

五.總結(jié)

本節(jié)學(xué)會了頁面導(dǎo)航的兩種方式和兩種方式導(dǎo)航到tabBar頁面和非tabBar頁面的方式，以及導(dǎo)航傳參的方法。

以上就是微信小程序?qū)崿F(xiàn)頁面導(dǎo)航的方法詳解的詳細(xì)內(nèi)容，更多關(guān)于小程序頁面導(dǎo)航的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論