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

一家之言 發表於 2020-9-27 16:52:00

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

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

頁: [1]

琼殿技术论坛's Archiver

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