uniapp-tabBar中間凸起按鈕

前言：以下是使用的是原生方法，兼容會比繪製按鈕的好，不用寫更多代碼去讓圖標固定到tabBar位置。官網有提到“中間按鈕 僅在 list 項爲偶數時有效”，這需要注意，另外在中間按鈕的圖標有的凸出的部分的圖標有個描邊的邊框之類的，這點在當前uniapp版本已經自動適應了，在之前的開發版本是不會自適應的。比如在安卓上面能夠自適應凸出部分的描邊可以剛剛好跟tabBar水平對齊，但是在蘋果上面是不會的。

---

下面我們講下怎麼實現。。。。

---

（以下圖片效果是在蘋果手機基座運行的）
不帶描邊的中間按鈕圖標效果：

PS：這裏可以看到中間按鈕可以正常凸出來，圖片除了有無描邊的區別，還有一個問題就是圖片中的白色“+”號那個區域可以看到背景，這個修改圖片背景就可以覆蓋掉。

帶描邊的中間按鈕圖標效果：

PS：這個圖片有的白色背景，可以覆蓋下面的，效果看起來比上面的會好很多。此外，凸出部分還有一點很細的灰色描邊可以自適應到水平對齊。

---

• 在以下兩個文件中寫代碼就可以實現了
  1：頁面效果實現，也是顯示tabBar;
  2：點擊中間按鈕事件，也就是點擊中間按鈕觸發一個點擊事件

---

實現tabBar部分代碼,在pages.json文件寫

PS:midButton就是中間按鈕 僅在 list 項爲偶數時有效

{
	"pages": [ //pages數組中第一項表示應用啓動頁，參考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/home/home",
			"style": {
				"navigationBarTitleText": "home"
			}
		}, {
			"path": "pages/news/news",
			"style": {
				"navigationBarTitleText": "news"
			}
		}, {
			"path": "pages/more/more",
			"style": {
				"navigationBarTitleText": "more"
			}
		}, {
			"path": "pages/mine/mine",
			"style": {
				"navigationBarTitleText": "mine"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
		"color": "#8f8f8f",
		"selectedColor": "#FD5C5C",
		"borderStyle": "white",
		"backgroundColor": "#ffffff",
		"list": [{
				"pagePath": "pages/home/home",
				"text": "首頁",
				"iconPath": "static/tabBar/shouye.png",
				"selectedIconPath": "static/tabbar/tabbar_home_select.png"
			},
			{
				"pagePath": "pages/news/news",
				"text": "消息",
				"iconPath": "static/tabBar/xiaoxi.png",
				"selectedIconPath": "static/tabbar/tabbar_play_select.png"
			},
			{
				"pagePath": "pages/more/more",
				"text": "更多",
				"iconPath": "static/tabBar/gengduo.png",
				"selectedIconPath": "static/tabbar/tabbar_money_select.png"
			},
			{
				"pagePath": "pages/mine/mine",
				"text": "我的",
				"iconPath": "static/tabBar/wode.png",
				"selectedIconPath": "static/tabbar/tabbar_personal_select.png"
			}
		],
		"midButton": {
			"width": "63px",
			"height": "63px",
			"iconPath": "static/tabBar/plus.png",
			"iconWidth": "55px"
			// "backgroundImage":"static/images/tabbar/plus.png"
		}
	}
}

---

中間按鈕點擊事件
PS：在項目根目錄下的App.vue文件寫