uni-app 底部导航设置midButton中间凸起按钮在安卓与IOS端显示不一致

uni-app 底部导航设置midButton中间凸起按钮在安卓与IOS端显示不一致

测试过的手机

redmi k30尊享版、ios X

示例代码：

{
  "midButton": {
    "width": "63px",
    "height": "70px",
    "iconPath": "/static/images/spellGroup.png",
    "iconWidth": "28px",
    "text": "火拼"
  }
}

操作步骤：

  • 进入app

预期结果：

  • 安卓端与IOS端显示一致

实际结果：

  • 安卓端中间凸起的图标按高度自适应，IOS端中间凸起图片按宽度自适应

bug描述：

uniapp 底部导航tabBar使用midButton设置中间凸起大按钮在安卓端与IOS端显示不一致，在安卓端midButton图片是按高度自适应缩放，在IOS端是按宽度自适应缩放

Image 1 Image 2

信息项 内容
产品分类 uniapp/App
PC开发环境 Windows
PC操作系统版本 win10
HBuilderX类型 正式
HBuilderX版本 3.1.4
手机系统 全部
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app 底部导航设置midButton中间凸起按钮在安卓与IOS端显示不一致的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

以前用过圆形的图放中间，没发现这个问题。不过你这个火确实喜感

更多关于uni-app 底部导航设置midButton中间凸起按钮在安卓与IOS端显示不一致的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的uni-app平台差异问题。在Android和iOS上，tabBar的midButton图标缩放策略确实存在不一致。

从你的截图可以看出，Android端图标按高度等比例缩放，导致宽度不足；而iOS端按宽度等比例缩放，导致高度被压缩。

解决方案：

  1. 使用正方形图标：准备一个正方形的图标源文件（如1:1比例），这样可以避免在两种缩放策略下产生明显变形。

  2. 调整图标尺寸：将iconWidth设置为与图标实际宽高接近的值，避免过度缩放。

  3. 使用绝对路径：确保图标路径正确，建议使用绝对路径。

建议修改配置为：

{
  "midButton": {
    "width": "63px",
    "height": "70px", 
    "iconPath": "/static/images/spellGroup.png",
    "iconWidth": "40px",
    "text": "火拼"
  }
}
回到顶部