在开发的过程中，我们经常会遇到一些设计的很好看的底部导航栏，最常见的比如下面这种的
中间会有凸起的一部分，这个时候我们再次使用常规的做法显然已经不再合适了，在pages.json中如何配置都无法达到我们的这个需求，这个时候我们需要自定义底部导航栏，那么究竟该如何自定义呢，我看了众多的博客插件，他们的做法基本上如初一辙，写上一个自定义的导航栏，然后通过索引值判断去不断的用v-if去进行组件的切换，虽然也能实现，但是此做法存在较为严重的性能问题，我下面提供的这个做法，大家可以一试！
1.我们依然在pages.json中去配置底部导航栏，只是我们只用去配置pagePath即可，如下
"tabBar": {
"list": [{
"pagePath": "pages/tabbar/index/index" // 页面文件路径
},
{
"pagePath": "pages/tabbar/user/user" // 页面文件路径
}
]
}2.上方配置完成后，我们可以在app.vue 中的onLaunch周期中，写入 uni.hideTabBar() ，此作用是隐藏底部导航，特别注意，因为此api不兼容字节跳动的小程序，所以，想要在字节跳动小程序内使用需要写入tt.hideTabBar()
- 然后我们就可以去写上一个底部导航栏的组件，这个就是一个组件，我想大家应该都会写的，下面是我项目中写的一份
4.把此组件引入在底部导航栏的页面就可以了，这样就能较为完美的解决底部导航栏这一问题，有兴趣的开发者可以一试，至少本人写自定义导航栏一直都是这么写的，嘿嘿
当然，我依然还是推荐原生的写法，不要整那么多花里胡哨的，除了好看，一无是处，只要是自定义底部导航栏总会有那么几个性能的问题，所以建议还是要给经理，客户，老板提提建议，这样我们开发人员也能省点劲
翻看大厂的微信小程序都是原生配置的底部导航栏，为什么老板总觉得不好看，我觉得还可以啊0.0，脑壳疼
