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

javascript">onLaunch: function() {console.log('App Launch')// 监听底部tabbar 中间按钮“党组织”，跳转对应的页面uni.onTabBarMidButtonTap(() => {uni.navigateTo({url: '/pages/dangzuzhi/index',});})
}

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

方法二：iconfont 的使用

在这里插入图片描述

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

javascript">"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// 此处需要注意，从阿里巴巴图标库中复制下来的图标代码是&#xe750;，需要将&#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个了。但目前看来还是没啥问题！！

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