1 含義
頁面導航就是指頁面之間的一個跳轉
1.1 導航的實作方式
-
Web網頁端
-
微信小程式
1.2 宣告式導航
1.2.1 導航到tabBar頁面
使用<navigator>組件跳轉到指定的tabBar頁面
- url：以
/開頭，標識要跳轉的頁面地址 - open-type：必須為
switchTab，表示跳轉到tabBar的方式
在XXX.wxml檔案
<navigator url="/pages/message/message" open-type="switchTab">導航到訊息頁面</navigator>
效果
1.2.2 導航到非tabBar頁面
依舊是使用<navigator>組件，
- open-type：必須為
navigate，也可以不寫，默認表示跳轉非tabBar頁面的方式
在XXX.wxml檔案
<navigator url="/pages/info/info" open-type="navigate">導航到資訊頁面</navigator>
效果
1.2.3 后退導航
使用<navigator>組件
- open-type：必須為navigateBack，表示要進行后退導航
- delta：必須為數字，表示要后退的層數，如果只是想回傳上一頁的話，這個delta可以省略，默認數字為
1
<navigator open-type="navigateBack" delta="1">回傳上一頁</navigator>
效果
1.3 編程式導航
1.3.1 跳轉到tabBar頁面例子
home.wxml
<button bindtap="gotoMessage">跳轉到message頁面</button>
home.js
//通過編程式導航跳轉到tabBar頁面
gotoMessage(){
wx.switchTab({
url: '/pages/message/message',
})
},
效果
1.3.2 導航到非tabBar頁面例子
home.wxml
<button bindtap="gotoInfo">跳轉到info頁面</button>
home.js
gotoInfo(){
wx.navigateTo({
url: '/pages/info/info',
})
},
效果
1.3.2 后退例子
info.wxml
<button bindtap="gotoBack">后退</button>
info.js
gotoBack(){
wx.navigateBack({
delta: 1,
})
},
效果
1.4 導航傳參
<navigator>組件的url屬性可以用來指定要跳轉的頁面路徑，并且可以在該路徑后面攜帶引數，格式如下：
- 引數與路徑之間使用
?分隔 - 引數鍵與引數值用
=相連 - 不同引數用
&分隔
1.4.1 傳參到資訊頁面（宣告式）
點擊微信開發者工具左下角的頁面引數
home.wxml
<navigator url="/pages/info/info?name=zs&age=20">導航并傳參給info頁面</navigator>
測驗
1.4.2 傳參到資訊頁面（編程式）
home.wxml
<button bindtap="gotoInfo2">跳轉到info頁面</button>
home.js
gotoInfo2(){
wx.navigateTo({
url: '/pages/info/info?name=ls&age=18',
})
},
測驗
1.4.3 在onLoad中接收導航引數
通過宣告式導航傳參或編程式導航傳參所攜帶的引數，可以直接在onLoad事件中直接獲取到
info.js：直接通過options獲取即可
/**
* 生命周期函式--監聽頁面加載
*/
onl oad(options) {
console.log(options)
},
測驗
1.4.4 引數賦值
info.js
/**
* 頁面的初始資料
*/
data: {
//導航傳遞過來的空物件
query:{}
},
onl oad(options) {
console.log(options)
this.setData({
query:options
})
},
測驗
點擊AppData看跳轉傳的引數
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/503415.html
標籤：其他