uniapp——tabbar中間凸起按鈕

pages.json中tabBar的配置

"tabBar": {
        "selectedColor":"#0c73fe",
        "color":"#ccc",
        "list": [
            {
                "text":"首頁",
                "pagePath":"pages/index/index",
                "iconPath":"static/icon/home.png",
                "selectedIconPath":"static/icon/home_active.png"
            },
            {
                "text":"",
                "pagePath":"pages/project_moments/project_moments",
                "iconPath":"static/icon/moments.png",
                "selectedIconPath":"static/icon/moments_active.png"
            },
            {
                "text":"",
                "pagePath":"pages/project_data/project_data",
                "iconPath":"static/icon/data.png",
                "selectedIconPath":"static/icon/data_active.png"
            },
            {
                "text":"",
                "pagePath":"pages/personal_center/personal_center",
                "iconPath":"static/icon/my.png",
                "selectedIconPath":"static/icon/my_active.png"
            }
        ],
        "midButton": {
            "width": "60px",
            "height": "60px",
            "iconPath": "static/icon/pic.png",
            "iconWidth": "55px"
        }
    }

midButton的節點配置是不包含在tabBar中的，所以中間按鈕 僅在 list 項為偶數時有效

重點突起按鈕的點擊事件監聽

因為中間按鈕是沒有對應的page頁面的，所以將這個監聽注冊在App.vue中比較合適

<script>
    export default {
        onLaunch: function() {
            // tabbar中間按鈕點擊事件
            uni.onTabBarMidButtonTap(function(e){
                uni.showToast({
                    title:'點我干嘛',
                    duration: 1500,
                    icon:'none'
                });
            })
        },
    }
</script>