一.頁(yè)面導(dǎo)航

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

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

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

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

聲明式導(dǎo)航

方法：在頁(yè)面聲明一個(gè)navigator組件，通過(guò)點(diǎn)擊這個(gè)組件來(lái)實(shí)現(xiàn)頁(yè)面的跳轉(zhuǎn)。

編程式導(dǎo)航

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

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

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

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

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

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

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

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

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

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

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

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

3.后退導(dǎo)航

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

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

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

<navigator open-type="navigateBack" delta="1">回退上一個(gè)頁(yè)面</navigator>

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

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

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

wxml代碼：

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

js代碼：

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

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

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

wxml\代碼：

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

js代碼：

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

3.后退導(dǎo)航

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

wxml代碼：

<button bindtap="goBack">回退上一個(gè)頁(yè)面</button>

js代碼：

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

四.導(dǎo)航傳參

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

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

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

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

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

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

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

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

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

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

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

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

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

五.總結(jié)

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

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

最新評(píng)論