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
}