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这个页面作为当前页面。

你可能感兴趣的:(uniapp,底部菜单)