微信小程序导航可以在页面中设置导航,可以使用navigator页面链接组件,也可以在js里设置导航进行页面跳转,同时可以设置导航条标题和显示动画效果
navigator页面链接组件
navigator页面链接组件是用在wxml页面中跳转的导航,它有3种类型
第一种:保留当前页面跳转,跳转后可以返回当前页,它与wx.navigatorTo跳转效果是一样的
第二种:关闭当前页跳转,无法返回当前页,它与wx.reditrctTo跳转效果一样
第三种:跳转到底部标签导航的指定页面,它与wx.switchTab跳转效果一样
open-type 有效值:
值 | 说明 |
---|---|
navigate | 对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能 |
redirect | 对应 wx.redirectTo 的功能 |
switchTab | 对应 wx.switchTab 的功能 |
reLaunch | 对应 wx.reLaunch 的功能 |
navigateBack | 对应 wx.navigateBack 的功能 |
exit | 退出小程序,target="miniProgram"时生效 |
wx.navigatorTo和wx.reditrctTo不允许跳转到tabBar页面,只能通过wx.switchTab跳转到tabBar页面
举个栗子
首页wxml文件
<navigator url="/pages/navigator/navigator?title=navigator" hover-class="navigator-hover">跳转到新页面</navigator>
<navigator url="../redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开新页面</navigator>
设置导航条
onLoad: function (options) {
console.log("title="+options);
wx.setNavigationBarTitle({
title:"新页面"
})
},