一、页面跳转
1.声明式导航
使用<navigate>组件实现(固定式),需要指定url属性(跳转位置)和open-type属性(跳转方式)
①跳转tabBar页面
open-type属性必须指定类型为switchTab
<navigator url="/pages/index/index" open-type="switchTab">跳转index页</navigator>
②跳转非tabBar页面
open-type属性必须指定位置navigate(可以缺省)
<navigator url="/pages/logs/logs" open-type="navigate">跳转log页</navigator>
③后退导航
open-type值为navigateBack,delta值为数字,表示返回的层级(默认为1)
<navigator open-type="navigateBack" delta="1">返回上一级</navigator>
2.编程式导航
①跳转tabBar页面
调用API实现,使用wx.switchTab(Object object)方法来跳转,object对象中包含以下属性:
url | 跳转链接(必填项) |
success | 成功时回调函数 |
fail | 失败时回调函数 |
complete | 结束时回调函数 |
<button bindtap='goIndex'>跳转Index页</button>
goIndex(){
wx.switchTab({
url: '/pages/index/index',
})
},
②跳转非tabBar页面
调用wx.navigateTo实现,参数列表同上
goLogs(){
wx.navigateTo({
url: '/pages/logs/logs',
})
},
③返回导航
调用wx.navigateBack实现(不需要指定delta属性)
goBack(){
wx.navigateBack()
},
二、导航传参
1.声明式导航传参
类似于http中的GET指令,参数与路径之间使用 ? 进行分隔;参数键与参数之间以 = 相连;不同参数之间用 & 隔开。
<navigator url="pages/show/show?name=Alice&age=18">跳转Show页</navigator>
2.编程式导航传参
基本和声明式一致,使用参数路径的方式传参
goShow(){
wx.navigateTo({
url: '/pages/show/show?name=Coco&age=22',
})
},
3.接收参数
传递给页面的参数可以在对应的onLoad参数中获取,如下:
onLoad(options) {
this.setData({name:options.name})
this.setData({age:options.age})
},