微信小程序之导航组件

微信小程序导航可以在页面中设置导航,可以使用navigator页面链接组件,也可以在js里设置导航进行页面跳转,同时可以设置导航条标题和显示动画效果

navigator页面链接组件

navigator页面链接组件是用在wxml页面中跳转的导航,它有3种类型
第一种:保留当前页面跳转,跳转后可以返回当前页,它与wx.navigatorTo跳转效果是一样的
第二种:关闭当前页跳转,无法返回当前页,它与wx.reditrctTo跳转效果一样
第三种:跳转到底部标签导航的指定页面,它与wx.switchTab跳转效果一样

open-type 有效值:
说明
navigate 对应 wx.navigateTowx.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:"新页面"
})
  },
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容