1.什么是页面导航
页面导航是指页面之间的相互跳转。
①<a>链接
②location.href
小程序实现页面导航的两种方式
①
声明式导航
·在页面上声明一个<navigator>导航组件
·通过点击<navigator>组件实现页面跳转
在使<navigator>组件跳转到指定的tabBar页面时,需要指定url属性和open-type属性,其中:
·url表示要跳转的
页面的地址,必须以/开头
·open-type 表示
跳转的方式,必须为
switchTab
<
navigator
url
="
/pages/message/message
"
open-type
="
switchTab
"></
navigator
>
2.导航到非tabBar页面
非tabBar页面指的是没有被配置为tabBar的页面,写法
<
navigator
url
="
/pages/info/info
"
open-type
="
navigate
">
导航到info
</
navigator
>
3.后退导航
如果后退到上一页面或多级页面,则需要指定open-type属性 和 delta属性,其中:
·open-type 的值必须是navigateBack,表示要进行后退导航
·delta 的值必须是
数字,表示要后退的层级
<
navigator
open-type
="
navigateBack
"
delta
= "
1
">
上一页
</
navigator
>
②
编程式导航
·调用小程序的导航API,实现页面的跳转
调用wx.switchTab(Object object)方法,可以跳转到
tabBar页面。其中Object 参数对象的属性列表如下:
<
button
bindtap
="
gotomessage
">
跳转到tabBar页面
</
button
>
gotomessage
(){
wx
.
switchTab
(
{
url
:
'
/pages/message/message
',
}
)
}
属性
|
类型
|
是否必选
|
说明
|
url
|
string
|
是
|
需要跳转的tabBar页面路径,路径后不能代参数
|
success
|
function
|
否
|
接口调用成功的回调函数
|
fail
|
function
|
否
|
接口调用失败的回调函数
|
complete
|
function
|
否
|
接口调用结束的回调函数(调用成功,失败都会执行)
|
调用wx.navigateTo(Object object)方法,可以跳转到
非tabBar的页面。其中Object 参数对象的属性列表如下:
<
button
bindtap
="
gotoinfo
">
跳转到非tabBar页面
</
button
>
绑定的js:
gotoinfo(){
wx.navigateTo({
url: '/pages/info/info',
})
}
属性
|
类型
|
是否必选
|
说明
|
url
|
string
|
是
|
需要跳转的非tabBar页面路径,路径后不能代参数
|
success
|
function
|
否
|
接口调用成功的回调函数
|
fail
|
function
|
否
|
接口调用失败的回调函数
|
complete
|
function
|
否
|
接口调用结束的回调函数(调用成功,失败都会执行)
|
后退导航
调用wx.navigateBack(Object object) 方法,可以返回上一页面或多级页面。其中Object 参数对象可选的属性列表如下:
<
button
bindtap
="
gotoBack
">
后退
</
button
>
绑定的js:
gotoBack
(){
wx
.
navigateBack
(
{
delta
:
1
}
)
}
属性
|
类型
|
默认值
|
是否必选
|
说明
|
delta |
number
|
1
|
否
|
返回页面数,如果delta大于现有页数,则返回到首页
|
success |
function
|
否
|
接口调用成功的回调函数
| |
fail
|
function
|
否
|
接口调用失败的回调函数
| |
complete
|
function
|
是
|
接口调用结束的回调函数(调用成功,失败都会执行)
|
声明式导航传参:
<
navigator
url
="
/pages/info/info?name=ww&age=18
">
跳到info页面
</
navigator
>
编程式导航传参
调用wx.navigateTo(Object object)方法跳转页面时,也可以携带参数,代码示例如下:
<
button
bindtap
="
gotoinfo2
">
跳到info页面
</
button
>
绑定的js:
gotoinfo2
(){
wx
.
navigateTo
(
{
url
:
'
/pages/info/info?name=lilei&gender=male
',
}
)
}
获得参数:
在跳转到的页面的onLoad中接收导航参数:
在 .js 页面 初始化一个 query对象
data: {
query:{}
}
onLoad: function (options) {
console.log(options);
query:options
}