技术背景:基于vue得微信小程序(mpvue)
需求场景:不同得用户角色,tabbar不一样,并且一个角色可以切换至另一个角色
方法:
1,在app.vue的生命周期函数created里隐藏原生的tabbar
wx.hideTabBar()
在这里判断当前的角色,走接口或者其他逻辑,我这里写的demo就用的缓存wx.setStorageSync('type','student')
2,封装tabbar组件
html:
js逻辑:
在生命周期函数created中根据不同的角色给navList赋值,这里onShow也写了同样的代码是因为第一次加载组件的时候只会执行created,但是后面用这个组件的时候只会执行onShow,这里优化项就是把赋值这一步封装起来再两个周期函数中调用,代码复用
3,在tabbar页面调用组件
导入:import tabBar from "@/components/tabBar";
声明:components: { tabBar },
用:<tab-bar :selectNavIndex="
mpvue自定义tabbar
最新推荐文章于 2021-11-22 09:34:48 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)