微信小程序中提供了多种页面跳转方法，可以使用navigator页面链接组件，也可以在js文件中设置导航进行页面跳转，同时可以设置导航条标题和显示动画效果。
1.navigator页面链接组件
navigator组件用于在wxml文件中实现页面跳转，它有三种类型：
- 保留当前页面跳转，跳转后可以返回当前页
- 关闭当前页面跳转，无法返回当前页
- 跳转到底部标签导航指定的页面
以上三种跳转效果通过open-type属性来控制的，更多属性请查看https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
下面来演示下open-type不同导航类型的调转效果。
（1）在wxml文件中设置导航跳转的三种方式：保留当前页调转、关闭当前页跳转和跳转到tabBar页面。
<view class="btn-area">
<navigator url="../navigator/navigator?title=navigator11" open-type="navigate" hover-class="navigator-hover">保留当前页跳转</navigator>
<navigator url="../redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">关闭当前页跳转</navigator>
<navigator url="../tabbar/tabbar" open-type="switchTab" hover-class="other-navigator-hover">跳转到tabBar页面</navigator>
</view>
（2）跳转到tabBar页面需要在app.json文件中设置tabBar属性
"tabBar": {
"selectedColor": "red",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "pages/images/tab/headline-0.jpg",
"selectedIconPath": "pages/images/tab/headline-1.jpg"
},
{
"pagePath": "pages/tabbar/tabbar",
"text": "关闭当前页打开导航",
"iconPath": "pages/images/tab/me-0.jpg",
"selectedIconPath": "pages/images/tab/me-1.jpg"
}
]
}
跳转后效果
- 使用api实现页面跳转
（1）同navigator组件类似，实现页面调转的api有三种方式：
- wx.navigateTo: 保留当前页面跳转
- wx.redirectTo: 关闭当前页面跳转
- wx.switchTab: 跳转到底部标签导航指定的页面
<view class="btn-area">
<button type="primary" bindtap="navigateBtn">保留当前页跳转</button>
<button type="primary" bindtap="redirectBtn">关闭当前页跳转</button>
<button type="primary" bindtap="switchBtn">跳转到tabBar页面</button>
</view>
navigateBtn:function(){
wx.navigateTo({
url: '../navigator/navigator',
success: function(res){},
fail: function() {},
complete: function() {}
})
},
redirectBtn:function(){
wx.redirectTo({
url: '../redirect/redirect',
success: function(res){},
fail: function() {},
complete: function() {}
})
},
switchBtn:function(){
wx.switchTab({
url: '../tabbar/tabbar',
success: function(res){},
fail: function() {},
complete: function() {}
})
}
实现后的效果与navigator组件是一样的。
- wx.navigateBack返回上一页
wx.navigateBack({
delta: 1
})
其中delta属性表示返回的页面数，如果delta大于现有页面数，则返回到首页
- 设置导航条
可通过wx.setNavigationBarTitle动态设置当前页面的标题
wx.setNavigationBarTitle({
title: '新页面'
});
小结：
以上是对页面跳转基本方法进行的简单整理，具体用法及实现效果都罗列出来了，如有不足请指正，感谢！
