uni-app midButton的使用

midButton没有pagePath，需监听点击事件调用API：uni.onTabBarMidButtonTap

官方文档如下注：list必须是偶数

 

 uni.onTabBarMidButtonTap只支持app，所以使用midButton需要跳转的话，记得加上条件判断

pages.json配置如下

"tabBar": {
        "color": "#474747",
        "selectedColor": "#07C160",
        "borderStyle": "black",
        "backgroundColor": "#ffffff",
        "list": [
            {
                "pagePath": "pages/index/index",
                "text": "首页",
                "iconPath": "static/images/tab_home_nor.png",
                "selectedIconPath": "static/images/tab_home_sel.png"
            },
            {
                "pagePath": "pages/my/my",
                "text": "我的",
                "iconPath": "static/images/tab_me_nor.png",
                "selectedIconPath": "static/images/tab_me_sel.png"
            }
        ],
        /* #ifdef APP-PLUS */
        "midButton": {
            "width": "51px",
            "height": "50px",
            "text": "",
            "iconPath": "static/images/tab-add.png",
            "iconWidth": "51px",
            "backgroundImage": ""
        }
        /* #endif */
    },

app.vue跳转方法如下

<script>
    export default {
        onLaunch: function() {
            // console.log('App Launch')
            /* #ifdef APP-PLUS */
            uni.onTabBarMidButtonTap(()=>{
                uni.navigateTo({
                    url: '/pages/add/add',
                });
            })
            /* #endif */
        },
        onShow: function() {
            // console.log('App Show')
        },
        onHide: function() {
            // console.log('App Hide')
        }
    }
</script>

效果如下图