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

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

一、自己封装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组件 的第一个问题的解决方式类似。

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

相关推荐
Q_Q5110082851 天前
python+uniapp基于微信小程序团购系统
spring boot·python·微信小程序·django·uni-app·node.js·php
炒毛豆1 天前
uniapp微信小程序+vue3基础内容介绍~(含标签、组件生命周期、页面生命周期、条件编译(一码多用)、分包))
vue.js·微信小程序·uni-app
盛夏绽放1 天前
关于 uni-app 与原生微信小程序中的生命周期 —— 一次“生命旅程”的解读
微信小程序·小程序·uni-app
知识分享小能手1 天前
uni-app 入门学习教程,从入门到精通,uni-app 基础知识详解 (2)
前端·javascript·windows·学习·微信小程序·小程序·uni-app
2501_916008891 天前
iOS 发布全流程详解,从开发到上架的流程与跨平台使用 开心上架 发布实战
android·macos·ios·小程序·uni-app·cocoa·iphone
风清云淡_A1 天前
【uniapp】uni.uploadFile上传数据多出一个304的get请求处理方法
uni-app
shykevin1 天前
uni-app x商城,商品列表组件封装以及使用
windows·uni-app
cesske1 天前
uniapp 编译支付宝小程序canvas 合成图片实例,支付宝小程序 canvas 渲染图片 可以换成自己的图片即可
小程序·uni-app·apache
Q_Q5110082852 天前
python+uniapp基于微信小程序的旅游信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
2501_916007472 天前
iOS 混淆工具链实战,多工具组合完成 IPA 混淆与加固(iOS混淆|IPA加固|无源码混淆|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview