uniapp中的Tabbar中间突起样式，并且绑定点击方法_uniapp对tabber绑定点击事件-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43242112/article/details/108019977

本文介绍了如何在uniapp中创建一个中间突起的Tabbar，并详细讲解了在不同平台的效果差异，pages.json的配置方法，以及如何监听并处理重点突起按钮的点击事件。具体实现将监听事件注册在App.vue组件中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、效果图

在这里插入图片描述

二、官网平台差异说明

在这里插入图片描述
所以说，想要h5或者小程序支持，请另寻其他文章

三、pages.json中tabBar的配置

"tabBar": {
		"selectedColor":"#0c73fe",
		"color":"#ccc",
		"list": [
			{
				"text":"首页",
				"pagePath":"pages/index/index",
				"iconPath":"static/icon/home.png",
				"selectedIconPath":"static/icon/home_active.png"
			},
			{
				"text":"项目圈",
				"pagePath":"pages/project_moments/project_moments",
				"iconPath":"static/icon/moments.png",
				"selectedIconPath":"static/icon/moments_active.png"
			},
			{
				"text":"资料",
				"pagePath":"pages/project_data/project_data",
				"iconPath":"static/icon/data.png",
				"selectedIconPath":"static/icon/data_active.png"
			},
			{
				"text":"我的",
				"pagePath":"pages/personal_center/personal_center",
				"iconPath":"static/icon/my.png",
				"selectedIconPath":"static/icon/my_active.png"
			}
		],
		"midButton": {
			"width": "60px",
			"height": "60px",
			"iconPath": "static/icon/pic.png",
			"iconWidth": "55px"
		}
	}

midButton的节点配置是不包含在tabBar中的，所以中间按钮仅在 list 项为偶数时有效

四、重点突起按钮的点击事件监听

因为中间按钮是没有对应的page页面的，所以将这个监听注册在App.vue中比较合适：

<script>
	export default {
		onLaunch: function() {
			// tabbar中间按钮点击事件
			uni.onTabBarMidButtonTap(function(e){
				uni.showToast({
					title:'点我干嘛',
					duration: 1500,
					icon:'none'
				});
			})
		},
	}
</script>

完事