uniapp 怎么设置凸起的底部tabbar

uniapp的tabbar 默认的话 是 没有中间凸起的  但是耐不住我们的设计师的想法  就是想让中间的突出  跟别人不一样 这里就用到了midButton 

uniapp自带的midButton 

在pages.json的文件里面配置tabbar，要保持list的对称性  不然的话midButton 是不会生效

"tabBar": {
		"color": "#616161",
		"selectedColor": "#37C8D7",
		"borderStyle": "black",
		"backgroundColor": "#fff",
		"list": [{
				"pagePath": "pages/home/home",
				"text": "首页",
				"iconPath": "/static/tabbar/tabbar_1.png",
				"selectedIconPath": "/static/tabbar/tabbar_sel_1.png"
			},
			{
				"pagePath": "pages/product/product",
				"text": "产品中心",
				"iconPath": "/static/tabbar/tabbar_2.png",
				"selectedIconPath": "/static/tabbar/tabbar_sel_2.png"
			},
			{
				"pagePath": "pages/cart/cart",
				"text": "购物车",
				"iconPath": "/static/tabbar/tabbar_4.png",
				"selectedIconPath": "/static/tabbar/tabbar_sel_4.png"
			},
			{
				"pagePath": "pages/mine/mine",
				"text": "我的",
				"iconPath": "/static/tabbar/tabbar_5.png",
				"selectedIconPath": "/static/tabbar/tabbar_sel_5.png"
			}
		],
		"midButton": {
			"width": "136rpx",
			"height": "150rpx",
			"text": "营养医嘱",
			"iconPath": "/static/tabbar/tabbar_3.png",
			"iconWidth": "116rpx"
		}
	}

配置这个中间按钮的时候是没有路径的  需要自己写监听方法.在入口文件APP.vue写入监听

	/* 监听底部中间按钮 */
			uni.onTabBarMidButtonTap(()=>{
				console.log('中间按钮的逻辑操作');
			})