Appearance
页面导航
声明式导航
navigator标签。open-type指定导航的页面类型,值为switchTab或navigate。不写open-type默认跳转到非tabbar页面。
后退中的delta可以省略,默认值为1
javascript
<navigator url="页面路径" open-type="switchTab">导航到tabbar上的页面</navigator>
<navigator url="页面路径" open-type="navigate">导航到非tabbar上的页面</navigator>
<navigator open-type="navigateBack" delta="2">后退两页</navigator>
编程式导航
wx.switchTab(Object object), 跳转到指定tabBar页面。 wx.navigateTo(Object object), 跳转到非tabBar页面。
下面是Object参数对象:
属性 | 类型 | 是否必选 | 说明 |
---|---|---|---|
url | string | 是 | 需要跳转的tabBar页面的路径,路径后不能带参数 |
success | function | 否 | 接口调用成功的回调函数 |
fail | function | 否 | 接口调用失败的回调函数 |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
javascript
<button bindtap="goPage" data-page="info">跳转到信息页面</button>
// .js中
goPage(e){
const page = e.data.page;
wx.switchTab({
url: `/pages/${page}/${page}`
})
}
wx.navigateBack(Object object),后退导航。其中Object可选属性列表如下:
属性 | 类型 | 是否必选 | 说明 |
---|---|---|---|
delta | number | 否 | 默认值1。值大于页面数会返回到首页 |
success | function | 否 | 接口调用成功的回调函数 |
fail | function | 否 | 接口调用失败的回调函数 |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
声明式导航传参
导航传参可以在onLoad生命周期函数中接收
一般会绑定到data中,供其他功能使用
javascript
<navigator url="/pages/info/info?name=tom&age=20">跳转到info页面</navigator>
onLoad: function(options){
console.log(options)
}
编程式导航传参
javascript
<button bindtap="goPage" data-page="info">跳转到信息页面</button>
// .js中
goPage(e){
const page = e.data.page;
wx.navigateTo({
url: `/pages/${page}/${page}?name=tom&age=20`
})
}