一开始准备自定义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 }); });