小程序在二级页面可以设置底部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为小程序的最高级，view覆盖不了的。

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

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

以u-view中u-modal示范。

ps：

borderStyle只能为white或black;

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

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

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

参考资料 >

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

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

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

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

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

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

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

然后去indexjs里面调用tabBar

然后下面是效果图。

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

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

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

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

官网文档：获取系统信息

如图所示

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

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

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

wxnavigateTo

wxredirectTo

wxswitchTab

wxreLaunch

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

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

以上就是关于小程序在二级页面可以设置底部tabbar吗全部的内容，包括:小程序在二级页面可以设置底部tabbar吗、uni 小程序遮罩覆盖tabbar （伪）、微信小程序动态tabBar实现等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！