uni-app uni.setTabBarBadge给最后一个tabBar设置角标无效，前面的tabBar都正常

uni-app uni.setTabBarBadge给最后一个tabBar设置角标无效，前面的tabBar都正常

示例代码：

<template>  
    <view class="content">  
        <image class="logo" src="/static/logo.png"></image>  
        <view class="text-area">  
            <text class="title">{{title}}</text>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'bar1'  
            }  
        },  
        mounted() {  
            // 总共有4个tab页  
            uni.setTabBarBadge({  
                index: 3, // 0,1,2均正常，设置为3时，最后一个tab无法显示角标  
                text: '1'  
            })  
        },  
        methods: {  

        }  
    }  
</script>

操作步骤：

uni.setTabBarBadge 修改index值，总共4个tabbar，设置0，1，2均可正常的给前面三个tarbar标上角标，设置3时，第四个tarbar角标无法显示

预期结果：

显示角标

实际结果：

未显示角标

bug描述：

uni.setTabBarBadge给tabbar设置角标时，最后一个tabbar设置无效

相关链接：

表格信息

信息类别 信息详情
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 20H2
HBuilderX类型 Alpha
HBuilderX版本 3.2.12
手机系统 Android
手机系统版本 Android 12
手机厂商 华为
手机机型 mate10
页面类型 nvue
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app uni.setTabBarBadge给最后一个tabBar设置角标无效，前面的tabBar都正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

HX3.2.15+已修复该问题

更多关于uni-app uni.setTabBarBadge给最后一个tabBar设置角标无效，前面的tabBar都正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


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

新版本3.2.13都发布了，这个问题还没修复吗。

这是一个已知的 uni-app 框架问题，通常与 tabBar 的渲染时机有关。最后一个 tabBar 页面可能尚未完成初始化，导致 uni.setTabBarBadge 调用失效。

解决方案：

  1. 延迟设置角标
    在 mounted 中使用 setTimeout 延迟执行：

    mounted() {
  setTimeout(() => {
    uni.setTabBarBadge({
      index: 3,
      text: '1'
    })
  }, 100)
}

  2. 使用 nextTick
    确保 DOM 更新后执行：

    mounted() {
  this.$nextTick(() => {
    uni.setTabBarBadge({
      index: 3,
      text: '1'
    })
  })
}

  3. 在 onShow 生命周期中设置
    页面显示时触发，确保 tabBar 已就绪：

    onShow() {
  uni.setTabBarBadge({
    index: 3,
    text: '1'
  })
}
回到顶部