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

uni-app 界面TabBar中间大图标设置的两种方法

一、前言

最近写基于uni-app 写app项目的时候,底部导航栏 中间有一个固定的大图标,并且没有激活状态。这里记录下实现方案。效果如下(党组织这个图标):
在这里插入图片描述

方法一:midButton的使用

官方文档:tabber配置
在这里插入图片描述

注意: midButton没有pagePath,需监听点击事件,自行处理点击后的行为逻辑。监听点击事件为调用API:uni.onTabBarMidButtonTap;

配置方法
1. page.json
{
// ...其他配置
"tabBar": {"color": "#808080","selectedColor": "#F0222C","borderStyle": "black","backgroundColor": "#ffffff","list": [{"pagePath": "pages/index/index","iconPath": "static/images/tabbar/home.png","selectedIconPath": "static/images/tabbar/home_active.png","text": "我的"},{"pagePath": "pages/study/index","iconPath": "static/images/tabbar/study.png","selectedIconPath": "static/images/tabbar/study_active.png","text": "学习"},{"pagePath": "pages/dangwu/index","iconPath": "static/images/tabbar/dangwu.png","selectedIconPath": "static/images/tabbar/dangwu_active.png","text": "党务"},{"pagePath": "pages/mine/index","iconPath": "static/images/tabbar/mine_active.png","selectedIconPath": "static/images/tabbar/mine.png","text": "我的"}],"midButton": {// 调整这里面的width、height、iconWidth 就可以实现图标位置、大小的调整"width": "60px","height": "72px","iconWidth": "50px","iconPath": "static/images/tabbar/dangzuzhi.png","text": "党组织"}}
}
2. 监听事件病自定义导航 App.vue
onLaunch: function() {console.log('App Launch')// 监听底部tabbar 中间按钮“党组织”,跳转对应的页面uni.onTabBarMidButtonTap(() => {uni.navigateTo({url: '/pages/dangzuzhi/index',});})
}

注意: 该方法跳转后是进入二级页面,底部导航栏会消失,顶部会有返回按钮。适应于新增类型的页面。

方法二:iconfont 的使用

在这里插入图片描述

使用方法:在 tabbar 里面配置 iconfontSrc 属性(字体文件),然后在 list 数组里面,在想要的tab使用 iconfont 代替 iconPath 。如下:

"tabBar": {"color": "#808080","selectedColor": "#F0222C","borderStyle": "black","backgroundColor": "#ffffff","iconfontSrc": "static/font/iconfont.ttf","list": [{"pagePath": "pages/index/index","iconPath": "static/images/tabbar/home.png","selectedIconPath": "static/images/tabbar/home_active.png","text": "我的"},{"pagePath": "pages/study/index","iconPath": "static/images/tabbar/study.png","selectedIconPath": "static/images/tabbar/study_active.png","text": "学习"},{"pagePath": "pages/dangzuzhi/index","text": "党组织","iconfont": { // 优先级高于 iconPath,该属性依赖 tabbar 根节点的 iconfontSrc// 此处需要注意,从阿里巴巴图标库中复制下来的图标代码是,需要将&#xe转换为\ue"text": "\ue750","selectedText": "\ue750","fontSize": "22px","color": "#808080","selectedColor": "#F0222C"}},{"pagePath": "pages/dangwu/index","iconPath": "static/images/tabbar/dangwu.png","selectedIconPath": "static/images/tabbar/dangwu_active.png","text": "党务"},{"pagePath": "pages/mine/index","iconPath": "static/images/tabbar/mine_active.png","selectedIconPath": "static/images/tabbar/mine.png","text": "我的"}]}

此时,icon 能显示出来了,但可能样式还有点不符合我们的需求,我们可以在全局样式问题 uni.scss 进行调整:

.uni-tabbar-bottom .uni-tabbar .uni-tabbar__item:nth-child(4) .uni-tabbar__icon {width: 46px !important;height: 46px !important;color: #fff;background: linear-gradient(45deg, #F0222C, #FF8F2C);border-radius: 50%;position: relative;top: -20px;left: 0px;margin-bottom: -20px;.uni-tabbar__iconfont {width: 46px;height: 46px;position: relative;top: 10px;}
}

注意:这样调整了样式,在H5端显示是正常的,但 App 端 表现可能不尽人意,修改的样式不生效(因为有兼容性的问题)。
在这里插入图片描述

方法三、折中方案(解决)

折中方案还是基于 midButton ,官方问题有这么一句话:midButton 中间按钮 仅在 list 项为偶数时有效。而 list 数组里面有这个一个属性 visible:该项是否显示,默认显示
 
所以,我添加了两个不显示的 tabbar (设置visible为false);然后设置 midButton 配置大图标即可。
 
但是:请注意,tab 的列表,详见 list 属性说明,最少2个、最多5个 tab;添加了两个不可见的tab后,就有6个了。但目前看来还是没啥问题!!

 
 
文章仅为本人学习过程的一个记录,仅供参考,如有问题,欢迎指出!

http://www.lryc.cn/news/488777.html

相关文章:

  • 什么是Sass,有什么特点
  • 服务器端渲染 (SSR) 与客户端渲染 (CSR)
  • 数据结构(Java版)第一期:时间复杂度和空间复杂度
  • 基于web的音乐网站(Java+SpringBoot+Mysql)
  • 用go语言后端开发速查
  • GeekChallenge 2024 第十五届极客大挑战 pwn AK
  • 禅道是什么,nas是什么,ssh是什么,finalshell是什么,git命令feat 、fix分别什么意思
  • 点云-半径搜索法-Radius Search
  • P11290 【MX-S6-T2】「KDOI-11」飞船
  • WebGIS地图框架有哪些?
  • 量化加速知识点(整理中。。。)
  • BLIP-2模型的详解与思考
  • 2024年11月22日 十二生肖 今日运势
  • 小米C++ 面试题及参考答案上(120道面试题覆盖各种类型八股文)
  • SQL SELECT 语句:基础与进阶应用
  • 微服务即时通讯系统的实现(服务端)----(1)
  • 《Spring 依赖注入方式全解析》
  • 【C++动态规划】1411. 给 N x 3 网格图涂色的方案数|1844
  • 外包干了3年,技术退步明显...
  • SpringBoot 2.x 整合 Redis
  • React的API✅
  • 什么是全渠道客服中心?都包括哪些电商平台?
  • Jtti:如何知晓服务器的压力上限?具体的步骤和方法
  • 贪心算法(1)
  • SpringBoot,IOC,DI,分层解耦,统一响应
  • 目标驱动学习python动力
  • 力扣-Hot100-回溯【算法学习day.39】
  • 小熊派Nano接入华为云
  • 【linux硬件操作系统】计算机硬件常见硬件故障处理
  • 谈学生公寓安全用电系统的涉及方案