uni-app实现中间加号

uni-app的midButton非常强大，可以实现中间加号效果，先看下效果图：


一开始准备自定义tabbar，但是这样就不是原生的，性能很差。看了下官网，发现tabBar里面有个midButton，完全可以实现上图的效果：

"tabBar": {
    "color": "#999999",
    "selectedColor": "#49C787",
    "borderStyle": "white",
    "backgroundColor": "#ffffff",
    "height": "50px",
    "fontSize": "12px",
    "iconWidth": "24px",
    "spacing": "3px",
    "list": [
        {
            "pagePath": "pages/index/index",
            "iconPath": "static/tabs/tab1.png",
            "selectedIconPath": "static/tabs/tab1_1.png",
            "text": "首页"
        }, {
            "pagePath": "pages/watch/watch",
            "iconPath": "static/tabs/tab2.png",
            "selectedIconPath": "static/tabs/tab2_1.png",
            "text": "看点"
        }, {
            "pagePath": "pages/news/news",
            "iconPath": "static/tabs/tab4.png",
            "selectedIconPath": "static/tabs/tab4_1.png",
            "text": "消息"
        }, {
            "pagePath": "pages/home/home",
            "iconPath": "static/tabs/tab5.png",
            "selectedIconPath": "static/tabs/tab5_1.png",
            "text": "我的"
        }
    ],
    "midButton": {
        "width": "80px",
        "height": "45px",
        "text": "",
        "iconPath": "static/img/center-bg.png",
        "iconWidth": "43px"
    }
},

上面代码的iconPath，就是中间的绿色背景+文字+加号的图片。适当调整iconWidth和height，就可以做出这种效果。而且，调整iconWidth、height等，还可以做出类似于咸鱼的中间突出的效果，即中间按钮的height，大于 tabBar的height，可以实现中间凸起的效果。
但是midButton配置中并不能写点击事件，需要在app.vue的onLaunch中监听中间的点击事件：

uni.onTabBarMidButtonTap(() => {
    uni.navigateTo({
        url: '/pages/release/release',
        animationType: 'slide-in-bottom',
        animationDuration: 150
    });
});

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！