uniapp H5 tabBar显示图标 两行文字

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

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

客户的需求是:首页显示中英文(其实都挺好实现的,但是在实际开发中卡在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里面把H5tabBar高度固定和图标的宽高做了缩放,这样写其实是实现的了的,但是并不兼容苹果手机的显示,图标会溢出去,当时是很费解的。

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满足项目的需求呢?

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

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

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

相关推荐
中微子1 分钟前
React 状态管理 源码深度解析
前端·react.js
加减法原则1 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele2 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4532 小时前
React移动端开发项目优化
前端·react.js·前端框架
你的人类朋友2 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维
web_Hsir2 小时前
vue3.2 前端动态分页算法
前端·算法
烛阴2 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子2 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
DoraBigHead3 小时前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构
Xiaouuuuua4 小时前
一个简单的脚本,让pdf开启夜间模式
java·前端·pdf