기본적으로 uniapp의 탭바는 중간이 돌출되어 있지 않지만, 우리 디자이너의 아이디어는 중간을 돋보이게 하는 것으로 다른 것과는 다르며 여기서는 midButton을 사용합니다.
uniapp과 함께 제공되는 midButton
목록의 대칭을 유지하도록 pages.json 파일에서 tabbar를 구성합니다 . 그렇지 않으면 midButton이 적용되지 않습니다.
"tabBar": {
"color": "#616161",
"selectedColor": "#37C8D7",
"borderStyle": "black",
"backgroundColor": "#fff",
"list": [{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "/static/tabbar/tabbar_1.png",
"selectedIconPath": "/static/tabbar/tabbar_sel_1.png"
},
{
"pagePath": "pages/product/product",
"text": "产品中心",
"iconPath": "/static/tabbar/tabbar_2.png",
"selectedIconPath": "/static/tabbar/tabbar_sel_2.png"
},
{
"pagePath": "pages/cart/cart",
"text": "购物车",
"iconPath": "/static/tabbar/tabbar_4.png",
"selectedIconPath": "/static/tabbar/tabbar_sel_4.png"
},
{
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath": "/static/tabbar/tabbar_5.png",
"selectedIconPath": "/static/tabbar/tabbar_sel_5.png"
}
],
"midButton": {
"width": "136rpx",
"height": "150rpx",
"text": "营养医嘱",
"iconPath": "/static/tabbar/tabbar_3.png",
"iconWidth": "116rpx"
}
}
이 중간 버튼을 구성할 때 경로가 없습니다. 모니터링 방법을 직접 작성해야 합니다. APP.vue 항목 파일에 모니터링을 작성하십시오.
/* 监听底部中间按钮 */
uni.onTabBarMidButtonTap(()=>{
console.log('中间按钮的逻辑操作');
})