likes
comments
collection
share

uniapp H5 tabBar显示图标 两行文字

作者站长头像
站长
· 阅读数 53

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

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

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

UI效果图:

uniapp H5 tabBar显示图标 两行文字

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

"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. 使用图标显示三行内容😁

"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高度固定和图标的宽高做了缩放,这样写其实是实现的了的,但是并不兼容苹果手机的显示,图标会溢出去,当时是很费解的。

.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部分的内容。

uniapp H5 tabBar显示图标 两行文字

uniapp H5 tabBar显示图标 两行文字

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

.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. 自定义组件😒

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

uniapp H5 tabBar显示图标 两行文字

4.🧠思考

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

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

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

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

转载自:https://juejin.cn/post/7278592935468777507
评论
请登录