当前位置: 首页 > article >正文

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

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


http://www.kler.cn/a/392846.html

相关文章:

  • LangChain教程 - 表达式语言 (LCEL) -构建智能链
  • scala基础学习_运算符
  • 【安全编码】Web平台如何设计防止重放攻击
  • CSS系列(36)-- Containment详解
  • 《计算机组成及汇编语言原理》阅读笔记:p86-p115
  • 如何在谷歌浏览器中进行网络速度测试
  • 基于Python的自然语言处理系列(59):MultiRetrievalQAChain 实现
  • 基于SSM的“汽车销售分析与管理系统”的设计与实现(源码+数据库+文档+PPT)
  • 笔记本电脑定期保养
  • SwiftUI开发教程系列 - 第十二章:本地化与多语言支持
  • 贪心算法入门(二)
  • 【ROS的Navigation导航系统】
  • (附项目源码)Java开发语言,监督管家APP的设计与实现 58,计算机毕设程序开发+文案(LW+PPT)
  • 传奇996_19——常用函数
  • redis 原理篇 30 redis内存回收 过期key处理
  • 前端框架大比拼:React.js, Vue.js 及 Angular 的优势与适用场景探讨
  • linux,源码编译安装、rsync本地同步、rsync远程同步、inotifywaite实时同步、数据库服务基础、邮件的收发
  • LuaRocks如何安装数据库驱动?
  • Dubbo 3.x源码(24)—Dubbo服务引用源码(7)接口级服务发现订阅refreshInterfaceInvoker
  • Database Advantages (数据库系统的优点)
  • HTML文本标签学习记录
  • 乐理的学习(助音延伸,力度,速度,省略记号)
  • Rust,删除cargo安装的可执行文件
  • 计算机毕业设计Python+大模型农产品价格预测 ARIMA自回归模型 农产品可视化 农产品爬虫 机器学习 深度学习 大数据毕业设计 Django Flask
  • JVM详解:JVM的系统架构
  • IO技术详解