小程序动态tabBar菜单，根据条件渲染不同的tabBar

这次的项目需求是用户存在两种身份，普通用户和师傅用户，那么要根据不同的身份展示不同的tabBar菜单，看了下官方文档，难度不大，但是由于我用的框架是Taro，所以实现起来很难，试了几次Api调不通就放弃了，转为JS大法写了，但是配置方面还是得按照小程序文档来。

做成效果 ：

此文是Taro版，非原生，思路可供参考，毕竟JS是互通的。

此文件编写的组件会作为自定义的tabBar展示出来

小程序在二级页面可以设置底部tabbar，设置方法为：

1、首先打开微信开发者工具，找到项目文件目录中的appjson并打开它。

2、然后再Json中怎样一个key——“tabBar“。

3、然后是设置文本的颜色："color":"#8a8a8a"。

4、设置文本选中时的颜色，"selectedColor":"#07c160。

5、设置tabbar的背景颜色，例如："backgroundColor":"gray"。

6、设置tabbar的列表，也就是底部的菜单栏。"list":[{"pagePath":"pages/idndex/index",

"text":"首页", "iconPath":"images/tabbar/tabbar1png" }。

7、保存文件，在效果预览区域进行预览。

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

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

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

wxnavigateTo

wxredirectTo

wxswitchTab

wxreLaunch

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

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

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

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

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

例子：>

官网地址：

>

参照微信小程序官方文档， 自定义tabbar ，但该文档只是实现了自定义tabbar，没有实现不同角色不同的tabbar，且官方文档中的custom-bab-bar组件中的setData方法存在在真机上不能重新渲染的bug，可能是由于缓存造成的。

本项目仓库： customtabbar 。

主要是在tab的页面组件中调用getTabBar接口后再调用setData方法，从而实现了tabbar的重新渲染。

appjson 是全局配置文件，用于配置小程序的信息（它里面配置的是全局信息）

需要添加target，默认值是self跳转自己小程序页面，miniProgram是跳转其他小程序的页面

以上就是关于小程序动态tabBar菜单，根据条件渲染不同的tabBar全部的内容，包括:小程序动态tabBar菜单，根据条件渲染不同的tabBar、小程序在二级页面可以设置底部tabbar吗、微信小程序中tabBar与导航API的页面跳转处理关系等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！