一、前提提要(●'◡'●)

客户不停地提需求，公司不停地改需求。苦逼的只有开发了。。。。。

客户的需求是：首页显示中英文（其实都挺好实现的，但是在实际开发中卡在tabBar的显示问题上，默认的tabBar是显示两行内容，实际需求要显示三行）

UI效果图：

二、处理方法(●ˇ∀ˇ●)

json 复制代码

"tabBar": {
    "blurEffect":"extralight", // 高斯模糊 iOS支持
    "color": "#999999",
    "selectedColor": "#222222",
    "backgroundColor": "#FFFFFF",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/home",
        "text": "首页",
        "iconPath": "/static/home_default.png",
        "selectedIconPath":"/static/home_active.png"
      },
      {
        "pagePath": "pages/scan",
        "text": "扫码",
        "iconPath": "/static/scan_default.png",
        "selectedIconPath":"/static/scan_active.png"
      },
      {
        "pagePath": "pages/my",
        "text": "我的",
        "iconPath": "/static/my_default.png",
        "selectedIconPath":"/static/my_active.png"
      }
    ]

1. 在text属性里面使用`<br/>` `\n` 换行🤔

实际的效果并未实现换行操作，只能放弃

2. 使用图标显示三行内容😁

perl 复制代码

"tabBar": {
   "blurEffect":"extralight", // 高斯模糊 iOS支持
   "color": "#999999",
   "selectedColor": "#222222",
   "backgroundColor": "#FFFFFF",
   "borderStyle": "black",
   "list": [
     {
       "pagePath": "pages/home",
       //"text": "首页",
       "iconPath": "/static/home_default.png",
       "selectedIconPath":"/static/home_active.png"
     },
     {
       "pagePath": "pages/scan",
       //"text": "扫码",
       "iconPath": "/static/scan_default.png",
       "selectedIconPath":"/static/scan_active.png"
     },
     {
       "pagePath": "pages/my",
       //"text": "我的",
       "iconPath": "/static/my_default.png",
       "selectedIconPath":"/static/my_active.png"
     }
   ]

开始任务之前，看uniapp官方文档，了解到tabBar的默认高度是50。由于图标的显示三行，所以尺寸方面比较的大，放到tabBar里面会被缩小，高度也会受限。开始调整tabBar的高度，H5相对来说是比较好调节的，目前我依旧不太清楚小程序如何调试tabBar的高度，图标的大小等操作。在App.vue里面把H5的tabBar高度固定和图标的宽高做了缩放，这样写其实是实现的了的，但是并不兼容苹果手机的显示，图标会溢出去，当时是很费解的。

css 复制代码

.uni-tabbar-bottom {
  .uni-tabbar { // tab背景
    height: 60px!important;
    .uni-tabbar-border {
        background-color: #eeeeee!important;
    }
    .uni-tabbar__bd { // tabBar单项
      .uni-tabbar__icon { // 图标
        width: 130rpx!important;
        height: 130rpx!important;
      }
    }
  }
}

为了解决溢出问题，我又重新查阅官方文档CSS部分的内容。

看到这些内容之后，我觉得可以用var(--window-bottom)试一试

css 复制代码

.uni-tabbar-bottom {
  .uni-tabbar { // tab背景
    height: calc(var(--window-bottom) - 60px)!important;
    .uni-tabbar-border {
        background-color: #eeeeee!important;
    }
    .uni-tabbar__bd { // tabBar单项
      .uni-tabbar__icon { // 图标
        width: 130rpx!important;
        height: 130rpx!important;
      }
    }
  }
}

解决了苹果手机的显示问题，同时tabBar的高度调节起来更好的可以控制，但是此方法对于小程序是不适用的，不过还好只是修改H5。

3. 自定义组件😒

搜索一圈，发现使用自定义组件会出现不少的问题，而且改动的地方比较大，自己又是一个新手不敢贸然进行改动就没有使用自定义组件。

4.🧠思考

其实我自己也在思考为什么修改的tabBar对于微信小程序不生效，但是对H5确实可以的。那又怎么调试和修改微信小程序的tabBar满足项目的需求呢？

目前是没有想到可行的方法解决自己想到的问题，看来还是要进修一下官方文档的内容。

仅此记录一下开发过程中遇到的问题以及解决问题使用的方法。

希望大佬们可以留下更好的解决方法💕💕💕(❁´◡`❁)

uniapp H5 tabBar显示图标 两行文字