uniapp中多角色导致tabbar过多的解决方式

阿巴阿巴Ovo2024-11-15 14:49

由于项目时间较紧张，找了很多却没找到特别合适的方法，最后使用了此方式。

一、自己封装tabbar组件

这里就不介绍怎么封装了，先说一下缺点：

1.跳转会有白屏问题（并且搜了好多资料以及查看官网发现没有特别合适的方法，当然也有可能是我搜的太少了）。

解决方式：

采用v-show指令来解决，当tab在a页面时，则显示页面中的a部分程序；当tab在b页面时，则显示页面中b部分的程序。

这里并没有跳转，变动的只有某一个变量。

2.跳转后左上角会有返回按钮

解决方式：采用以下跳转方式

javascript 复制代码

// 关闭 当前 界面并跳转到其他界面
uni.redirectTo({
  url:'./home/index'
})

// 关闭 所有 页面并跳转到其他页面
uni.reLaunch({
  url:'./home/index'
})

3.当使用这种跳转方式后会发现左上角又返回键变成home键

解决方式：

javascript 复制代码

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指令判断这个私有页面应该显示什么。

可以使用这个方法来修改页面的标题

javascript 复制代码

uni.setNavigationBarTitle({
	title: '页面标题'
})

其实这里跟自己封装tabbar组件的第一个问题的解决方式类似。

到这里就结束了，如果有更好的解决方式可以评论一下哈！！！