页面导航
页面导航指的是页面之间的相互跳转。
例如,浏览器中实现页面导航的方式有如下两种:
<a>
链接- location.href
小程序中实现页面导航的两种方式:
1. 用navigator组件的方式
在页面上声明一个 <navigator>
导航组件,通过点击 <navigator>
组件实现页面跳转
导航到 tabBar 页面 不能传参
tabBar 页面指的是被配置为 tabBar 的页面。
eg:app.json–>pages中配置了4个页面:首页home,message消息,contact联系我们,info信息
而app.json–>tabBar–>list数组中配置了3个tabBar页面:首页home,message消息,contact联系我们
则info信息页为非tabBar页面
在使用 <navigator>
组件跳转到指定的 tabBar 页面时,需要指定 url 属性和 open-type 属性,其中:
- url 表示要跳转的页面的地址,必须以 / 开头
- open-type 表示跳转的方式,必须为 switchTab
<!--pages/home/home.wxml-->
<navigator url="/pages/message/message" open-type="switchTab">导航到tabBar页面--消息页</navigator>
导航到非 tabBar 页面 可传参
非 tabBar 页面指的是没有被配置为 tabBar 的页面。
在使用 <navigator>
组件跳转到普通的非 tabBar 页面时,则需要指定 url 属性和 open-type 属性,其中:
- url 表示要跳转的页面的地址,必须以 / 开头
- open-type 表示跳转的方式,必须为 navigate
注意:为了简便,在导航到非 tabBar 页面时,open-type=“navigate” 属性可以省略。
<!--pages/home/home.wxml-->
<navigator url="/pages/info/info" open-type="navigate">导航到非tabBar页面--info页</navigator>
传参
<!--pages/home/home.wxml-->
<!-- 因为message是tabBar页面,跳转到tabBar页面是不能携带参数的,所以以下传参无效 -->
<navigator url="/pages/message/message?name=zs&age=20" open-type="switchTab">导航到tabBar页面--消息页</navigator>
<!-- 跳转到非tabBar页面,可以正常传参 -->
<navigator url="/pages/info/info?name=zs&age=20" open-type="navigate">导航到非tabBar页面--info页</navigator>
接收传递的参数:
// pages/info/info.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
console.log(options); // {name: "zs", age: "20"}
},
// 返回上一级
goBack() {
wx.navigateBack(1)
},
})
后退导航
如果要后退到上一页面或多级页面,则需要指定 open-type 属性和 delta 属性,其中:
- open-type 的值必须是 navigateBack,表示要进行后退导航
- delta 的值必须是数字,表示要后退的层级
注意:为了简便,如果只是后退到上一页面,则可以省略 delta 属性,因为其默认值就是 1。
<!--pages/info/info.wxml-->
<navigator open-type="navigateBack" delta="1">返回上一页</navigator>
// 之前从home页跳转到info页,点击此处则返回home页
2. 用js的方式
调用小程序的导航 API,实现页面的跳转。
wx.switchTab() 跳转到tabBar页面 不能传参
调用 wx.switchTab(Object object) 方法,可以跳转到 tabBar 页面。
(没有返回键,只能跳转到tabBar页面,不可以携带参数)
其中 Object 参数对象的属性列表如下:
属性 | 类型 | 是否必选 | 说明 |
---|---|---|---|
url | string | 是 | 需要跳转的 tabBar 页面的路径,路径后不能带参数 |
success | function | 否 | 接口调用成功的回调函数 |
fail | function | 否 | 接口调用失败的回调函数 |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
<!--pages/home/home.wxml-->
// 用navigator组件的方式:
<navigator url="/pages/message/message" open-type="switchTab">跳转到tabBar页面--信息页面</navigator>
// 用js的方式:
<button bindtap="jumpToMsg">跳转到tabBar页面--信息页面</b