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

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

做成效果 ：

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

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

一般来说tabbar为小程序的最高级，view覆盖不了的。

网上大多数指的都是uni中app-plus，h5/app而非小程序。

但是可以变相的通过设置标题颜色和tabbar颜色实现，自定义因不考虑单个影响全部故弃用。

以u-view中u-modal示范。

ps：

borderStyle只能为white或black;

frontColor只能为#000或#fff，写错任何一项不会生效。

本质为替换了高亮时的cion和背景色伪实现

不足是tabbar边框只有white/black,切需要设计配合给出遮罩下图。

参考资料 >

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

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

需求：由于iphonex及之后的机型底部有一根横线，导致tabbar比原来提升了一段高度。根据底部tabbar提升的高度，计算出页面需要在底部给整个tabbar留出的位置高度。

PS：微信开发者工具iphonex与实际真机测试效果不同，底部并没有底部提升。

appjs调用 wxgetSystemInfo接口获取页面信息，判断底部提升高度。

官网文档：获取系统信息

如图所示

最近做项目的时候，突然来了个小特殊的需求，根据客户的类型来动态显示底部的tabBar菜单。当时我就有点小懵逼了，这个不是小程序自带的组件么？还要做成动态？这就有点尴尬了

不过也只是一时尴尬而已，然后我就展开了搜索之旅然后发现，官方的组件确实没办法做动态，那咋办，如果真的有这个需求那也是得去处理滴呀~然后也看了有一些做到这效果的方法，那就试一下呗。。其实就是自定义个tabBar的模板，以下是实现：

首先，既然是说自定义组件，那是用到template了。那先在Page里新建个template的文件夹，以便放tabBar的组件。

然后新建个tabBarwxml文件，这里就写下你的tabBar的结构。

下面是tabBar所需要用到的样式，我这里就直接写在全局appwxss了。

然后接下来是js的部分，由于是底部的导航，那肯定是不止一个页面用到的，那这里就可以写在全局的appjs里面方便使用。这里我写了两种tabBar的模板，分别对应来显示

然后在需要用到这个组件的页面上直接调用。比如这里的index页面。

然后去indexjs里面调用tabBar

然后下面是效果图。

就这些。我个人觉得这个自定义导航的用户体验不是很好，能不用就不要用，不过知道下方法也是ok滴！如有发现有错或者不足的地方可以指出，谢谢！

小程序在二级页面可以设置底部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菜单，根据条件渲染不同的tabBar全部的内容，包括:小程序动态tabBar菜单，根据条件渲染不同的tabBar、uni 小程序遮罩覆盖tabbar （伪）、小程序——tabBar配置&页面跳转&确认框&提示框等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！