uniapp实现导航栏中间图标凸起

 1、使用uniapp官方提供的属性midButton

使用时，list数组须为偶数

pages.json

"tabBar": {
		"color": "#000",
		"selectedColor": "red",
		"list": [{
				"text": "首页",
				"pagePath": "pages/index/index",
				"iconPath": "static/logo.png",
				"selectedIconPath": "static/logo.png"
			},
			{
				"text": "商城",
				"pagePath": "pages/a/a",
				"iconPath": "static/logo.png",
				"selectedIconPath": "static/logo.png"
			},
			// {
			// 	"text": "会员",
			// 	"pagePath": "pages/b/b",
			// 	"iconPath": "static/logo.png",
			// 	"selectedIconPath": "static/logo.png"
			// },
			{
				"text": "任务",
				"pagePath": "pages/c/c",
				"iconPath": "static/logo.png",
				"selectedIconPath": "static/logo.png"
			},
			{
				"text": "我的",
				"pagePath": "pages/d/d",
				"iconPath": "static/logo.png",
				"selectedIconPath": "static/logo.png"
			}


		],
		"midButton": {
			"pagePath": "pages/b/b",
			"iconPath": "static/logo.png",
			"width": "60px",
			"height": "60px",
			"iconWidth": "40px",
			"iconheight": "40px",
			"text": "会员"
		}
	},

App.vue

2、自定义tabBar组件

把pages.json里的tabbar都删掉

新建组件tabBar.vue

tabBar.vue

index.vue