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

一、前言

最近写基于uni-app 写app项目的时候，底部导航栏中间有一个固定的大图标，并且没有激活状态。这里记录下实现方案。效果如下（党组织这个图标）：

方法一：midButton的使用

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

配置方法

1. page.json

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 进行调整：

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个了。但目前看来还是没啥问题！！

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