uniappで底上げタブバーを設定する方法

uniappのタブバーはデフォルトでは真ん中が盛り上がっていませんが、他とは違う真ん中を目立たせたいというデザイナーの考えで、ここではmidButtonを使っています。 

uniapp に付属する midButton 

リストの対称性を維持するために、 pages.json ファイルでタブバーを構成します。そうしないと、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('中间按钮的逻辑操作');
			})