uni-app setTabBarBadge 设置角标 最后一项tabbar设置无效

uni-app setTabBarBadge 设置角标 最后一项tabbar设置无效

项目信息 详情
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win7
HBuilderX类型 正式
HBuilderX版本号 3.2.12
手机系统 Android
手机系统版本号 Android 12
手机厂商 华为
手机机型 华为Mate 10 Pro
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

  1. 打开官方项目Hello uni-app项目
  2. 在页面/pages/tabBar/component/component中添加给四个tabbarItem设置角标的代码
  3. 运行至华为鸿蒙系统手机

预期结果：

四个tabbarItem都应出现角标

实际结果：

第四个tabbarItem未出现角标

bug描述：

使用Hello uni-app项目测试，测试代码页面/pages/tabBar/component/component

onShow(){  
    uni.setTabBarBadge({  
        index:0,  
        text:"20"  
    })  
    uni.setTabBarBadge({  
        index:1,  
        text:"20"  
    })  
    uni.setTabBarBadge({  
        index:2,  
        text:"20"  
    })  
    uni.setTabBarBadge({  
        index:3,  
        text:"20"  
    })  
}

效果：只有前三项tabbr角标设置生效

相关链接：


更多关于uni-app setTabBarBadge 设置角标 最后一项tabbar设置无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

问题复现，已反馈给相关组排查，已加分，感谢您的反馈！

更多关于uni-app setTabBarBadge 设置角标 最后一项tabbar设置无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


感谢

回复 1***@qq.com: HX3.2.15+已修复该问题

这是一个已知的 uni-app 框架问题，主要出现在 Android 平台。当 TabBar 的 index 参数为最后一项（即 index 等于 tabBar.list.length - 1）时，uni.setTabBarBadge 方法可能无法正确设置角标。

问题原因：
底层原生实现中，对 TabBar 角标的索引处理可能存在边界判断错误，导致最后一个 TabBarItem 的角标渲染异常。

临时解决方案：

  1. 延迟设置：对最后一个 TabBarItem 的角标设置添加短暂延迟（例如使用 setTimeout）。
    onShow() {
  uni.setTabBarBadge({ index: 0, text: "20" });
  uni.setTabBarBadge({ index: 1, text: "20" });
  uni.setTabBarBadge({ index: 2, text: "20" });
  setTimeout(() => {
    uni.setTabBarBadge({ index: 3, text: "20" });
  }, 100);
}
  2. 使用条件编译：针对 Android 平台单独处理最后一个角标的设置逻辑。
    onShow() {
  // #ifdef APP-PLUS
  if (uni.getSystemInfoSync().platform === 'android') {
    // Android 平台先设置前三个，延迟设置最后一个
    uni.setTabBarBadge({ index: 0, text: "20" });
    uni.setTabBarBadge({ index: 1, text: "20" });
    uni.setTabBarBadge({ index: 2, text: "20" });
    setTimeout(() => {
      uni.setTabBarBadge({ index: 3, text: "20" });
    }, 50);
  } else {
    // 其他平台正常设置
    for (let i = 0; i < 4; i++) {
      uni.setTabBarBadge({ index: i, text: "20" });
    }
  }
  // #endif
}
回到顶部