微信小程序动态tabBar实现

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

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

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

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

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

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

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

然后去index.js里面调用tabBar

然后下面是效果图。

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

参照微信小程序官方文档， 自定义tabbar ，但该文档只是实现了自定义tabbar，没有实现不同角色不同的梁棚睁tabbar，且官方文档中的custom-bab-bar组件中的setData方法存在在真机上不能重新渲染的bug，可能是由于缓存造成的。

本项目仓库： customtabbar 。

主要是在tab的页面组件中调用getTabBar接橡岁口后再调用setData方法和铅，从而实现了tabbar的重新渲染。

---