uniapp中多角色导致tabbar过多的解决方式
由于项目时间较紧张,找了很多却没找到特别合适的方法,最后使用了此方式。
一、自己封装tabbar组件
这里就不介绍怎么封装了,先说一下缺点:
1.跳转会有白屏问题(并且搜了好多资料以及查看官网发现没有特别合适的方法,当然也有可能是我搜的太少了)。
解决方式:
采用v-show指令来解决,当tab在a页面时,则显示页面中的a部分程序;当tab在b页面时,则显示页面中b部分的程序。
这里并没有跳转,变动的只有某一个变量。
2.跳转后左上角会有返回按钮
解决方式:采用以下跳转方式
// 关闭 当前 界面并跳转到其他界面
uni.redirectTo({
url:'./home/index'
})
// 关闭 所有 页面并跳转到其他页面
uni.reLaunch({
url:'./home/index'
})
3.当使用这种跳转方式后会发现左上角又返回键变成home键
解决方式:
uni.hideHomeButton()
这是目前发现的缺点,其中后两个有解决方式
二、采用指令解决
这种方式光靠标题看着可能有些抽象,没关系,这里介绍一下,其实也不是特别好的一个方式,如果有更好的方式可以评论一下哈。
我这个项目中包含3个角色:a、b、c;一共需要6个tab,但最多只能5个。
a角色有3个tab,2个公共的,1个私有的;
b角色有3个tab,2个公共的,1个私有的;
c角色有4个tab,2个公共的,2个私有的;
于是我将c角色其中第一个私有的页面程序放到了b角色的私有页面中,通过角色id来结合v-if指令判断这个私有页面应该显示什么。
可以使用这个方法来修改页面的标题
uni.setNavigationBarTitle({
title: '页面标题'
})
其实这里跟 自己封装tabbar组件 的第一个问题的解决方式类似。
到这里就结束了,如果有更好的解决方式可以评论一下哈!!!