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