uniapp 怎么设置凸起的底部tabbar |
您所在的位置：网站首页 › 如何设置底部导航栏图标 › uniapp 怎么设置凸起的底部tabbar |
uniapp 怎么设置凸起的底部tabbar
|
uniapp的tabbar 默认的话 是 没有中间凸起的 但是耐不住我们的设计师的想法 就是想让中间的突出 跟别人不一样 这里就用到了midButton uniapp自带的midButton在pages.json的文件里面配置tabbar，要保持list的对称性 不然的话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('中间按钮的逻辑操作'); })
|
【本文地址】
今日新闻 |
推荐新闻 |