uni 小程序遮罩覆盖tabbar （伪）

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

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

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

以u-view中u-modal示范。

ps：

borderStyle只能为white或black;

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

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

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

参考资料 >

小程序在二级页面可以设置底部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、保存文件，在效果预览区域进行预览。

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

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

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

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

我们使用uni-app或者微信小程序开发项目的时候总会遇到有遮罩层d出的效果，但是发现tabbar页面遮罩层无论你的层级有多高都遮不住我们的tanbar，这时候我们可以采用两种方式解决：

1、使用自定义tabbar组件；

2、在遮罩层打开的同时隐藏tabbar，unihideTabBar();遮罩层关闭的同时显示tabbar，unishowTabBar();

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

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

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

wxnavigateTo

wxredirectTo

wxswitchTab

wxreLaunch

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

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

官网地址：

>

以上就是关于uni 小程序遮罩覆盖tabbar （伪）全部的内容，包括:uni 小程序遮罩覆盖tabbar （伪）、12.小程序 之切换到tabBar页面不刷新问题、小程序在二级页面可以设置底部tabbar吗等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！