uni-app ios配置路由tabBar配置midButton无效

uni-app ios配置路由tabBar配置midButton无效

示例代码：

{
    "tabBar": {  
        "color": "#666666",  
        "selectedColor": "#6A5ACD",  
        "borderStyle": "#999999",  
        "backgroundColor": "#ffffff",  
        "fontSize": "16px",  
        "list": [{  
                "pagePath": "pages/index/index",  
                "text": "首页"  
            },  
            {  
                "pagePath": "pages/order/order",  
                "text": "接单"  
            },  
            {  
                "pagePath": "pages/message/message",  
                "text": "消息"  
            },  
            {  
                "pagePath": "pages/my/my",  
                "text": "我"  
            }  
        ],  
        "midButton": {  
            "width": "60px",  
            "height": "50px",  
            "iconWidth": "50px",  
            "iconPath": "/static/tabbar/fb1.png"  
        }  
    }
}

操作步骤：

{
    "tabBar": {  
        "color": "#666666",  
        "selectedColor": "#6A5ACD",  
        "borderStyle": "#999999",  
        "backgroundColor": "#ffffff",  
        "fontSize": "16px",  
        "list": [{  
                "pagePath": "pages/index/index",  
                "text": "首页"  
            },  
            {  
                "pagePath": "pages/order/order",  
                "text": "接单"  
            },  
            {  
                "pagePath": "pages/message/message",  
                "text": "消息"  
            },  
            {  
                "pagePath": "pages/my/my",  
                "text": "我"  
            }  
        ],  
        "midButton": {  
            "width": "60px",  
            "height": "50px",  
            "iconWidth": "50px",  
            "iconPath": "/static/tabbar/fb1.png"  
        }  
    }
}

预期结果：

  • 正常跳转页面

实际结果：

  • ios配置路由tabBar配置midButton无效，点击tabBar切换页面不生效不跳转并且中间哪张图片也没有显示，报错

bug描述：

  • 安卓正常，ios配置路由tabBar配置midButton无效，点击tabBar切换页面不生效不跳转并且中间哪张图片也没有显示，报错

| 信息类别           | 信息内容                   |
|-------------------|----------------------------|
| 产品分类           | uniapp/App                 |
| PC开发环境         | Windows                    |
| PC开发环境版本号   | w10                        |
| HBuilderX类型      | 正式                       |
| HBuilderX版本号    | 4.66                       |
| 手机系统           | iOS                        |
| 手机系统版本号     | iOS 18                     |
| 手机厂商           | 苹果                       |
| 手机机型           | 苹果13                     |
| 页面类型           | vue                        |
| vue版本            | vue2                       |
| 打包方式           | 云端                       |
| 项目创建方式       | HBuilderX                  |

更多关于uni-app ios配置路由tabBar配置midButton无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

来人啊，bug没人处理吗

更多关于uni-app ios配置路由tabBar配置midButton无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


提供一个示例 demo 我看看

在 iOS 上 midButton 配置不生效是 uni-app 的已知兼容性问题。主要原因是 iOS 对中间按钮的实现机制与安卓不同，需要额外配置。

解决方案：

  1. 检查 list 数量
    midButton 仅在 list 为偶数项时生效（如 2、4、6）。你的配置有 4 个项，符合条件。

  2. 补充 midButton 必要参数
    需添加 text 字段（可为空字符串）和点击事件处理：

    "midButton": {
  "text": "",
  "iconPath": "/static/tabbar/fb1.png",
  "iconWidth": "50px",
  "width": "60px",
  "height": "50px"
}

  3. 在 pages.json 中配置全局样式
    确保 tabBar 在首层配置，不在 globalStyle 内。

  4. 处理中间按钮点击事件
    在 App.vue 的 onTabItemTap 中监听：

    onTabItemTap(item) {
  if (item.index === 2) { // 中间按钮对应索引为 list.length/2
    uni.navigateTo({ url: '/pages/publish/publish' }); // 替换为目标页面
  }
}
回到顶部