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

概述

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

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

分類

聲明式導(dǎo)航：在頁(yè)面上聲明一個(gè)<navigator>導(dǎo)航組件，通過(guò)點(diǎn)擊該組件實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)

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

聲明式導(dǎo)航

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

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

配置步驟

聲明<navigator>組件

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

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

示例代碼

<navigator url="/pages/index/index" open-type="switchTab">導(dǎo)航到home首頁(yè)</navigator>

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

非tabBar頁(yè)面指的是沒(méi)有被配置為底部tabBar的頁(yè)面

配置步驟

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

示例代碼

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

后退導(dǎo)航

配置步驟

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

示例代碼

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

編程式導(dǎo)航

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

配置步驟

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

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

（注意：url屬性是必填項(xiàng)，其它是可選項(xiàng)）

示例代碼：

.wxml

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

.js

//按鈕點(diǎn)擊事件處理函數(shù)，實(shí)現(xiàn)跳轉(zhuǎn)到首頁(yè)
  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)事件！')
      }
    })
  }

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

配置步驟

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

示例代碼

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

后退導(dǎo)航

配置步驟

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

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

示例代碼

.wxml

<button bindtap="gotoBack" type="default">點(diǎn)擊返回上一頁(yè)面</button> 

.js

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

導(dǎo)航傳參

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

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

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

示例代碼

<navigator url="/pages/info/info？name=gy&number=1" open-type="navigate">導(dǎo)航到info頁(yè)面</navigator>

傳參結(jié)果

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

當(dāng)調(diào)用wx.navigateTo(Object object)方法進(jìn)行頁(yè)面跳轉(zhuǎn)時(shí)，也可以攜帶參數(shù)，與聲明式導(dǎo)航傳參同理，將參數(shù)寫進(jìn)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)頁(yè)面導(dǎo)航與傳參功能詳解的文章就介紹到這了,更多相關(guān)小程序頁(yè)面導(dǎo)航內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論