uniapp中的Tabbar中间突起样式，并且绑定点击方法_uniapp对tabber绑定点击事件

一、效果图

二、官网平台差异说明

所以说，想要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"
		}
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

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

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

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

<script>
	export default {
		onLaunch: function() {
			// tabbar中间按钮点击事件
			uni.onTabBarMidButtonTap(function(e){
				uni.showToast({
					title:'点我干嘛',
					duration: 1500,
					icon:'none'
				});
			})
		},
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

完事