uni-app tabBar中間按鈕 之 midButton

midButton 中間按鈕 僅在 list 項為偶數時有效 ， 需要App 2.3.4+、H5 3.0.0+以上版本

 

 

midButton 屬性說明

屬性	類型	必填	默認值	描述
width	String	否	80px	中間按鈕的寬度，tabBar 其它項為減去此寬度后平分，默認值為與其它項平分寬度
height	String	否	50px	中間按鈕的高度，可以大於 tabBar 高度，達到中間凸起的效果
text	String	否		中間按鈕的文字
iconPath	String	否		中間按鈕的圖片路徑
iconWidth	String	否	24px	圖片寬度（高度等比例縮放）
backgroundImage	String	否		中間按鈕的背景圖片路徑

midButton沒有pagePath，需監聽點擊事件，自行處理點擊后的行為邏輯。監聽點擊事件為調用API：uni.onTabBarMidButtonTap，詳見https://uniapp.dcloud.io/api/ui/tabbar?id=ontabbarmidbuttontap

 導航代碼演示：

"tabBar": {
        "color": "#808080",
        "selectedColor": "#dd0000",
        "backgroundColor": "#ffffff",
        //中間件  2~4生效
        "midButton":{
                "iconPath":"static/tab-find-current.png",
                "height":"80px",
                "iconWidth":"60px",
                "text":"發布"
            },
        "list": [{
                "text": "首頁",
                "iconPath": "static/tab-home.png",
                "selectedIconPath": "static/tab-home-current.png",
                "pagePath": "pages/index/index"
            },
            {
                "text": "分類",
                "iconPath": "static/tab-find.png",
                "selectedIconPath": "static/tab-find-current.png",
                "pagePath": "pages/category/category"
            },
            
            {
                "text": "消息",
                "iconPath": "static/tab-msg.png",
                "selectedIconPath": "static/tab-msg-current.png",
                "pagePath": "pages/message/message"
                
            },
            {
                "text": "我的",
                "iconPath": "static/tab-me.png",
                "selectedIconPath": "static/tab-me-current.png",
                "pagePath": "pages/me/me"
            }
        ]
    }

 

監聽中間按鈕的點擊事件演示

 在 App.vue 全局里面添加下面代碼：

uni.onTabBarMidButtonTap(()=>{
        console.log("點擊了");

        });