uniapp 底部菜单_【uniapp开发微信小程序】自定义底部导航栏

由于业务需要，开发的微信小程序需要动态加载底部的导航栏，根据不同角色显示对应的导航。因此，小程序的开发就不能用原生的导航栏。在这里我用了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这个页面作为当前页面。