有关自定义底部导航栏 / 自定义tabbar的一些经验

分类：uni-app

在开发的过程中，我们经常会遇到一些设计的很好看的底部导航栏，最常见的比如下面这种的

中间会有凸起的一部分，这个时候我们再次使用常规的做法显然已经不再合适了，在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.把此组件引入在底部导航栏的页面就可以了，这样就能较为完美的解决底部导航栏这一问题，有兴趣的开发者可以一试，至少本人写自定义导航栏一直都是这么写的，嘿嘿
当然，我依然还是推荐原生的写法，不要整那么多花里胡哨的，除了好看，一无是处，只要是自定义底部导航栏总会有那么几个性能的问题，所以建议还是要给经理，客户，老板提提建议，这样我们开发人员也能省点劲