首页 > 建站教程 > 前端框架 >  uni-app实现中间加号正文

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
    });
});