鏈接。小程序中實(shí)現(xiàn)頁面導(dǎo)航的兩種方式聲明式導(dǎo)航和編程式導(dǎo)航。" />
更新時(shí)間:2023-03-09 來源:黑馬程序員 瀏覽量:
頁面導(dǎo)航指的是頁面之間的相互跳轉(zhuǎn)。例如,瀏覽器中實(shí)現(xiàn)頁面導(dǎo)航的方式有l(wèi)ocation.href和<a>鏈接。小程序中實(shí)現(xiàn)頁面導(dǎo)航的兩種方式聲明式導(dǎo)航和編程式導(dǎo)航。
tabBar 頁面指的是被配置為 tabBar 的頁面。在使用<navigator>組件跳轉(zhuǎn)到指定的 tabBar 頁面時(shí),需要指定 url 屬性和 open-type 屬性,其中:url 表示要跳轉(zhuǎn)的頁面的地址,必須以 / 開頭 open-type 表示跳轉(zhuǎn)的方式,必須為 switchTab,示例代碼如下:
<navigator url="/pages/message/message"open-type="switchTab">導(dǎo)航到消息頁面</navigator>
非 tabBar 頁面指的是沒有被配置為 tabBar 的頁面。在使用組件跳轉(zhuǎn)到普通的非 tabBar 頁面時(shí),則需要指定 url 屬性和 open-type 屬性,其中:
url 表示要跳轉(zhuǎn)的頁面的地址,必須以 / 開頭,open-type 表示跳轉(zhuǎn)的方式,必須為 navigate。示例代碼如下:
<navigator url="/pages/info/info"open-type="navigate">導(dǎo)航到info頁面</navigator>
注意:為了簡便,在導(dǎo)航到非 tabBar 頁面時(shí),open-type="navigate" 屬性可以省略。
如果要后退到上一頁面或多級(jí)頁面,則需要指定 open-type 屬性和 delta 屬性,其中:open-type 的值必須是 navigateBack,表示要進(jìn)行后退導(dǎo)航,delta 的值必須是數(shù)字,表示要后退的層級(jí)。示例代碼如下:
<navigator open-type='navigateBack'delta='1'>返回上一頁</navigator>
注意:為了簡便,如果只是后退到上一頁面,則可以省略 delta 屬性,因?yàn)槠淠J(rèn)值就是 1。
調(diào)用 wx.switchTab(Object object) 方法,可以跳轉(zhuǎn)到 tabBar 頁面。其中 Object 參數(shù)對(duì)象的屬性列表如下
示例代碼如下:
//頁面結(jié)構(gòu) <button bindtap="gotoBack">后退</button> //編程式導(dǎo)航,后退到上一頁面 gotoBack(){ wx.navigateBack() }
1. 聲明式導(dǎo)航傳參
navigator 組件的 url 屬性用來指定將要跳轉(zhuǎn)到的頁面的路徑。同時(shí),路徑的后面還可以攜帶參數(shù):
參數(shù)與路徑之間使用 ? 分隔
參數(shù)鍵與參數(shù)值用 = 相連
不同參數(shù)用 & 分隔
代碼示例如下:
<navigator url="/pages/info/info?name=zs&age=20">跳轉(zhuǎn)到info頁面</navigator>
調(diào)用 wx.navigateTo(Object object) 方法跳轉(zhuǎn)頁面時(shí),也可以攜帶參數(shù),代碼示例如下:
//頁面結(jié)構(gòu) <button bindtap="gotoInfo2">跳轉(zhuǎn)到info頁面</button> //通過編程式導(dǎo)航,跳轉(zhuǎn)到 info頁面,并攜帶參數(shù) gotoInfo2() { wx.navigateTo({ url:'/pages/info/info?name=ls&gender=男' }) }
通過聲明式導(dǎo)航傳參或編程式導(dǎo)航傳參所攜帶的參數(shù),可以直接在 onLoad 事件中直接獲取到,示例代碼如下:
/** *生命周期函數(shù)--監(jiān)聽頁面加載 */ onLoad: function(options){ // options 就是導(dǎo)航傳遞過來的參數(shù)對(duì)象 console.log(options) }