由于业务需要，开发的微信小程序需要动态加载底部的导航栏，根据不同角色显示对应的导航。因此，小程序的开发就不能用原生的导航栏。在这里我用了uniapp使用频率比较高的框架（colorUI）。实现动态加载的组件很多，可以自行到uniapp的插件市场寻找，colorui也有对应的模块，不过我使用的是（ADTabbar）这款插件，并且修改了他的插件。
简述一下实现动态生成导航栏的原理（个人拙见，不对的欢迎指正）：
1.index.vue这个页面作为母页面，其他的导航栏页面以组件的形式导入到这个页面中。
2.定义一个导航栏组件，（参考上述的ADTTabbar或者colorui自带的）。为组件的每个导航设置同一个click事件。记住，每一个导航都要做好命名，在click 事件里，需要根据这些命名来显示不同的导航栏页面。
3.对页面组件可以选择用if条件来判断加载的组件或者根据css来判断显示的组件。
注意：if是通过渲染来加载满足条件的组件，而css则会加载所有组件，然后显示满足条件的组件。个人推荐通过if的形式，这样一次只渲染我们想要的组件。还有需要注意的是，当我们以组件的形式显示页面时，页面的生命周期函数会失效。临时解决的方式我给个参考：在各个页面定义一个方法，在index页面里，点击导航栏时触发一个自己写的方法，这个方法使用ref去调用各个页面模拟的生命周期函数。
// 导航栏切换 navClick: function(e) { this.curPage = e.currentTarget.dataset.cur //保存当前页面的名字 if(this.curPage==‘a‘){ this.$nextTick(function(){ this.$refs.a.load() }) }else if(this.curPage ==‘b‘){ this.$nextTick(function(){ this.$refs.b.load() }) } },
上述方法并未最好的解决方法，貌似是使用mixins更好，不过具体的我也记不清楚了，我之后会跟朋友讨论一下有什么解决方案，大神看了话，希望不吝赐教。
对了，在这些导航页面进行页面跳转时，切记跳转的路径要从index.vue开始，（导航栏页面组件或者导航栏页面组件中有子组件可能会用到跳转）因为页面组件是组件，不能跟页面一样的进行跳转，所以uniapp是以index.vue这个页面作为当前页面。