微信小程序中tabBar与导航API的页面跳转处理关系

首先，必须检讨自己，出现这种问题的确是自己阅读文档不仔细。

在学习页面之间传递参数时，同时设置了 tabBar 和点击跳转导航 wxnavigateTo ,并且两个设置跳转的页面路径一致，发现 wxnavigateTo 跳转是不生效的，至于想要传递的参数那就更别想传递到跳转的页面。

出现这个问题，我一开始以为是微信小程序自带的问题，但是想想，怎么可能呢，是猪吗，这么明显的问题，留给开发者？于是翻阅文档，研读 tabBar 和API中的导航一部分，发现文档早已注明的很清楚，只是自己没有看清楚，检讨自己并认真学习一下。

wxnavigateTo

wxredirectTo

wxswitchTab

wxreLaunch

1 wxnavigateTo 和 wxredirectTo 不允许跳转到 tabBar 页面，只能用 wxswitchTab 跳转到 tabBar 页面

2 wxnavigateTo 和 wxredirectTo 允许跳转时路径带参数， wxswitchTab 跳转时路径不可带参数

这个是小程序自身问题目前还没有得到官方解决可以自己写tabBar代替原生的tabBar。

获取微信小程序的AppID首先，我们需要拥有一个帐号，如果你能看到该文档，我们应当已经邀请并为你创建好一个帐号。注意不可直接使用服务号或订阅号的AppID。利用提供的帐号，登录，就可以在网站的设置、开发者设置中，查看到微信小程序的AppID了。

跳转至另外一个页面，不会把之前的页面销毁。但是带有返回箭头，点击可以返回到上一页，但是回到上一页的时候不会重新刷新这一页的数据。

跳转至tabbar页，当用户点击时，会跳转到相应的tabbar页面，只能跳转到tabbar页面，其他页面不支持。

跳转至另一界面，与wxnavigateTo()不同的是wxredirectTo()跳转后的页面没有返回箭头，如果需要返回需自定义返回按钮。wxredirectTo（）和wxnavigateTo()各有各的好处，wxredirectTo（）在使用自定义按钮返回上一层后之前页面会进行刷新，而wxnaviagteTo()会保留之前界面。可根据产品需求进行选择

关闭所有页面，打开到应用内的某个页面跟wxredirectTo 一样左上角不会出现返回箭头

返回的时候想要刷新数据，将方法放在onShow()方法里面。

官网地址：

>

虽然在appjson里面设置tabBar很方便。但是也有弊端。如果是每个页面都需要有这个tabBar的话，显然用原生的就不能满足这个需求了。因此我们需要第二种方案。

此处我是放在了components文件夹里面，后期有公用的组件都可以放在里面

由于用了组件库，所以此处要同时引入组件库的样式

此时，哪个页面要用 就直接执行最后一步使用组件库就好了。

分享一个完整的微信小程序自定义 Tabbar ，tabbar按钮可以设置为跳转页面，也可以设置为功能按钮。懒得看文字的可以直接去底部，博主分享了GitHub地址。

由于微信小程序自带的 Tabbar 功能比较单一，比如要做到中间是一个突出的圆形扫一扫按钮，就需要自定义 Tabbar 了。

博主创建了一个 Tabbar 组件，自己写的样式，在需要用到的页面引入组件。

组件使用了 position: fixed 定位到底部，所以在用到组件的页面，需要给 page 加上 margin-bottom 样式。

交互是通过在组件上定义的 bindtap 事件，来进行跳转页面或者触发功能模块，其中路由跳转是用的 wxswitchTab 。事件以及传参可以通过 triggerEvent ；

文件目录

引用组件

组件的data

组件的路由跳转

源码GitHub地址：>

关于自定义tabbar在跳转的时候，tabbar因为是跟页面的一起绑定，所以会跟随页面一起出现，不是像官方的tabbar一样一直待在页面上。这就是闪动的根本所在。

针对闪动看了一个demo，是让tabbar定义为一个页面，然后让你要显示的页面一组件的形式，插入到tabbar的页面，这样tabbar一直在一个页面上所以就不存在，tabbar跟随页面滚动也就是闪动问题。

2019-2-14，又纠结到这个问题上，使用自定义tabbar使用wxnavigateTo会出现页面栈充满，然后不会跳转问题，使用wxreLaunch等又会出现闪动太大不能接受问题，最后使用在主页面使用官方tabbar组件显示，其他页面需要tabbar的话使用自定义tabbar解决。

例子：>

以上就是关于微信小程序中tabBar与导航API的页面跳转处理关系全部的内容，包括:微信小程序中tabBar与导航API的页面跳转处理关系、微信小程跳转到tabbar页面显示延迟必须点击其他切换才显示、总结一下，微信小程序的几种跳转方式等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！