- /*样式直接复制到项目的App.vue即可*/
-
- .uni-tabbar {
- /*.uni-tabbar__item:nth-last-child(3) 修改倒数第三个 也就是中间的图标 我这边底部栏是五个*/
- .uni-tabbar__item:nth-last-child(3) {
- .uni-tabbar__bd {
- /*.uni-tabbar__icon 去掉原图标大小,强制为自适应宽高*/
- .uni-tabbar__icon {
- width: auto !important;
- height: auto !important;
- }
- /*图标大小 !important 强制覆盖*/
- img {
- height: 70rpx !important;
- width: 70rpx !important;
- }
- }
- }
- }
方法2:配置midButton(和tabbar中list同级)
- "midButton": {
- "width": "48px",
- "height": "48px",
- "text": "",
- "iconPath": "static/tabbar/home-s.png",
- "iconWidth": "48px",
- }
- API放在一个app.vue的页面内就好了。url里填写你要跳转的路径。
-
- uni.onTabBarMidButtonTap(()=>{
-
- uni.navigateTo({
-
- url: '/pages/card/card'
-
- });
-
- })
官网资料:uni-app官网