uni-app ios的tabbar设置iconWidth和fontSize无效

uni-app ios的tabbar设置iconWidth和fontSize无效

操作步骤：

  • ios的tabbar设置iconWidth和fontSize无效并且在纯文字的时候不能水平居中

预期结果：

  • ios的tabbar设置iconWidth和fontSize无效并且在纯文字的时候不能水平居中

实际结果：

  • ios的tabbar设置iconWidth和fontSize无效并且在纯文字的时候不能水平居中

bug描述：

  • ios的tabbar设置iconWidth和fontSize无效并且在纯文字的时候不能水平居中
9 回复

HBuilderX 4.25.2024081703-alpha 已修复。

更多关于uni-app ios的tabbar设置iconWidth和fontSize无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


HBuilderX4.13-alpha未复现此问题 ，设置后重新运行试试。如果确认是框架问题提供最小化复现示例（上传附件）【咨询问题/bug处理优先级规则】：https://ask.dcloud.net.cn/article/38139

大佬，我传附件了，有空瞅瞅啊 谢谢

好看是的我也遇到这个问题了，icon图片是80*80的。我是使用cli创建的项目

必现啊HBuilderX4.13-alpha 设置的图标文字大小都不起作用，如果去掉图标，文字不会水平居中，而是在空的图标位置下面并且也无法改变大小

uni-app-x复现此问题，注意报bug时选择uni-app-x，看帖子分类之前测试的是uni-app呢。已反馈相关人员处理，已加分感谢反馈！

回复 DCloud_UNI_Anne: 收到，谢谢大佬

HBuilderX4.18 tabbar 支持 fontSize、iconWidth、spacing、iconfontSrc、backgroundImage 等属性详情

在 uni-app 中，tabBar 的 iconWidth 和 fontSize 属性在 iOS 上无效的问题，可能是由于 iOS 系统本身对 tabBar 的样式有一定的限制。以下是一些可能的原因和解决方案：

1. iOS 系统限制

  • iOS 系统对 tabBar 的图标和文字大小有一定的默认样式，开发者无法完全自定义这些样式。因此，iconWidth 和 fontSize 在 iOS 上可能不会生效。

2. 使用自定义 tabBar

  • 如果需要完全自定义 tabBar 的样式，可以考虑使用自定义的 tabBar 组件，而不是使用原生 tabBar。
  • 你可以通过 flex 布局或 fixed 定位来实现自定义的 tabBar，并完全控制图标和文字的大小。

3. 使用 uni-app 插件

  • 你可以在 uni-app 插件市场中寻找一些第三方插件，这些插件可能提供了更灵活的 tabBar 样式配置。

4. 使用 nvue 页面

  • 如果你使用的是 nvue 页面，tabBar 的样式可能会有所不同。你可以尝试在 nvue 页面中自定义 tabBar 的样式。

5. 反馈给官方

  • 如果这是一个普遍的问题，你可以将问题反馈给 uni-app 官方团队，看看是否有解决方案或未来的更新中会修复这个问题。

6. 使用 CSS 样式

  • 虽然 iconWidth 和 fontSize 可能无效，但你可以尝试通过 CSS 样式来调整 tabBar 的图标和文字大小，尽管效果可能有限。
/* 在 App.vue 或页面的样式文件中 */
.uni-tabbar__icon {
  width: 30px !important; /* 调整图标宽度 */
}

.uni-tabbar__label {
  font-size: 12px !important; /* 调整文字大小 */
}

7. 检查 manifest.json 配置

  • 确保 manifest.json 中的 tabBar 配置正确，并且没有其他配置覆盖了 iconWidth 和 fontSize。
{
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/home.png",
        "selectedIconPath": "static/tabbar/home_selected.png"
      }
    ],
    "iconWidth": 30,
    "fontSize": 12
  }
}
回到顶部