相信有很多学习uni的小伙伴，做项目的时候或许会遇到跟我一样的需要自定义tab和导航栏的需求。或许你们有了办法，如果没有的话往下看，字不多！
做项目时候会不会遇到TabBar中间凸起按钮的实现，我经过很多方法去实践。h5可以用层级覆盖，APP可以用5+自己提供的方法，但是我感觉还是不太稳定，决定去自定义。
1 首先将全局的导航栏样式和TabBar去掉。2 开始一定义导航栏，根据uni的获取不同机型的顶部指示框来对不同的机型做兼容性，即设置个顶部padding。3 底部TabBar的实现可能费脑子了，由于uni不支持在APP.vue中写东西，所以笨想法就是要是在不同的主页都设置TabBar来还原，但是这样效果会大大的折扣，没有原生的好，那么该如何解决呢？4 我的解决思路就是创造一个APP.vue文件来解决！5 当然不要与哪个APP重名，所以这时候我们要另外起个名字，我这里叫做index.vue，并将这一项写在pages.json中第一位(启动项)。6这样每次APP启动都会到这一页面，相信此时你心中有了清晰的思路了吧，然后就是在这个页面内写入需要的导航条和TabBar。7 为了让代码表现清晰，如果我们需要TabBar跳转4个页面，那么我们创建4页面，并全局组件组件，当然局部也可以的！然后在这个页面写进去8 手机写的这个东西，能力有限，我这有写的样板，可以去参考下百度网盘 链接:https://pan.baidu.com/s/18lr7YQmGYsfBJsmyOebVow 提取码:8524
做项目时候会不会遇到TabBar中间凸起按钮的实现，我经过很多方法去实践。h5可以用层级覆盖，APP可以用5+自己提供的方法，但是我感觉还是不太稳定，决定去自定义。
1 首先将全局的导航栏样式和TabBar去掉。2 开始一定义导航栏，根据uni的获取不同机型的顶部指示框来对不同的机型做兼容性，即设置个顶部padding。3 底部TabBar的实现可能费脑子了，由于uni不支持在APP.vue中写东西，所以笨想法就是要是在不同的主页都设置TabBar来还原，但是这样效果会大大的折扣，没有原生的好，那么该如何解决呢？4 我的解决思路就是创造一个APP.vue文件来解决！5 当然不要与哪个APP重名，所以这时候我们要另外起个名字，我这里叫做index.vue，并将这一项写在pages.json中第一位(启动项)。6这样每次APP启动都会到这一页面，相信此时你心中有了清晰的思路了吧，然后就是在这个页面内写入需要的导航条和TabBar。7 为了让代码表现清晰，如果我们需要TabBar跳转4个页面，那么我们创建4页面，并全局组件组件，当然局部也可以的！然后在这个页面写进去8 手机写的这个东西，能力有限，我这有写的样板，可以去参考下百度网盘 链接:https://pan.baidu.com/s/18lr7YQmGYsfBJsmyOebVow 提取码:8524
https://blog.csdn.net/yanxinyun1990/article/details/100919657