小程序学习笔记5---导航跳转
source link: https://blog.csdn.net/qq_43775721/article/details/122804933
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
1、页面导航分类
① 声明式导航
- 在页面上声明一个
<navigator>
导航组件 - 通过点击
<navigator>
组件实现页面跳转
②编程式导航
- 调用小程序的导航API,实现页面跳转
2、声明式导航
2.1、跳转到tabBar页面
在使用<navigator>
组件跳转到指定的tabBar页面时,需要指定url属性和open-type:
url
表示要跳转的页面地址,必须以/
开头,路径的后面不可以携带参数open-type
表示跳转的方式,必须为switchTab
<navigator url="/pages/contact/contact" open-type="switchTab">跳转到tabBar</navigator>
2.2、跳转到非tabBar页面
在使用<navigator>
组件跳转到指定的非tabBar页面时,需要指定url属性和open-type:
url
表示要跳转的页面地址,必须以/
开头,路径的后面可以携带参数open-type
表示跳转的方式,必须为navigate
ps:在跳转到非tabBar页面时,open-type="navigate"
属性可以省略
<navigator url="/pages/message/message" open-type="navigate">跳转到非tabBar</navigator>
跳转到非tabBar页面传参:navigator
组件的url
的属性用了指定将要跳转的页面路径,同时,路径后面还可以携带参数,如下:
- 参数与路径之间使用
?
分隔 - 参数键与参数值用
=
相连 - 不同参数用
&
分隔
代码示例如下:
2.3、后退导航
如果要后退到上一页面或多级页面,则需要指定open-type
属性和delta
属性,其中:
open-type
必须为navigateBack
,表示要进行后退导航delta
的值必须是数字,表示要后台的层级,默认值为1。
<navigator open-type="navigateBack" delta="1">返回上一页</navigator>
3、编程式导航
3.1、跳转到tabBar页面
调用wx.switchTab(Object Object)
方法,可以跳转到tabBar页面。参数对象属性如下:
url
string是需要跳转到tabBar页面路径,路径后不能带参数success
function否接口调用成功的回调函数fail
function否接口调用失败的回调函数omplete
function否接口调用结束后的回调函数3.2、跳转到非tabBar页面
调用wx.navigateTo(Object Object)
方法,可以跳转到非tabBar页面。参数对象属性如下:
url
string是需要跳转到非tabBar页面路径,路径后可以带参数success
function否接口调用成功的回调函数fail
function否接口调用失败的回调函数complete
function否接口调用结束后的回调函数
跳转到非tabBar页面传参:wx.navigateTo
组件的url
的属性用了指定将要跳转的页面路径,同时,路径后面还可以携带参数,如下:
- 参数与路径之间使用
?
分隔 - 参数键与参数值用
=
相连 - 不同参数用
&
分隔
3.3、后退导航
调用wx.navigateBack(Object Object)
方法,可以返回上一页面或多级页面。参数对象属性如下:
delta
number是默认值为1,如果delta大于现有页数,则返回到首页success
function否接口调用成功的回调函数fail
function否接口调用失败的回调函数complete
function否接口调用结束后的回调函数4、在onLoad中接收导航参数
通过声明式导航传参和编程式导航传参所携带的参数,可以直接在onLoad事件中直接获取到,示例代码如下:
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK