uni-app setTabBarBadge在非tabBar页面设置时无法生效

uni-app setTabBarBadge在非tabBar页面设置时无法生效

如果当前页面正在任意tab页面时，设置后会显示出来，但是如果不在tab页面的时候设置后无法生效


uni.setTabBarBadge({  
index: 0,  
text: '1'  
})
信息类型 内容
开发环境 未提及
版本号 未提及
项目创建方式 未提及
18 回复

已排查出问题：并不是uniapp的问题，而是微信小程序并不支持在非tabBar页面调用该方法 具体可参考 微信官方回答

更多关于uni-app setTabBarBadge在非tabBar页面设置时无法生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


感谢反馈，已确认该问题，正在排查

跟进下进展~我也是遇到了这个问题，报错：“errMsg”: “setTabBarBadge:fail not TabBar page”

回复 1***@qq.com: 请参考楼上回复，目前该问题已经确认是微信小程序官方不支持，已经在反馈到微信社区，可以参考微信社区的解决方式

微信小程序是不存在这个问题的

手机上测试没未能重现这个问题，你是几级页面了？

稍等我写个demo，一会提交上来

提示的错误内容是：{errMsg: “setTabBarBadge:fail not TabBar page”}

刚才我再写demo的时候做了测试，在小程序里面是不行的，一级页面也不可以，APP里面测试是对的， 附件是我测试demo，主要是一种场景特别需要，通知选项卡收到推送后需要更新数量，所以我只能通过store来实现对选项卡的修改，在tab页面的时候可以使用，离开就不可以用了！

额，测试了一下小程序平台，的确存在这个现象。可能是小程序本身做了限制，详细的你可以去它们论坛咨询下。

按照规范来说，TabBar 相关的 API，只能在 TabBar 页面使用。

回复 Trust:嗯，我看了微信的文档也没有说限制这块，但是如果只能在tab页面使用，很多场景就无法实现了，麻烦http://ask.dcloud.net.cn/question/62499这个问题也看一下，目前APP侧无法上传很纠结

大佬 为啥我在tabber页面设置了 他只执行了一次 第一次是 ok，后面就报错了 fail not TabBar page

这个问题请问有标准答案么

已排查出问题：并不是uniapp的问题，而是微信小程序并不支持在非tabBar页面调用该方法 具体可参考 微信官方回答

2023年12月29日，记录一下，还是有这个问题。

已排查出问题：并不是uniapp的问题，而是微信小程序并不支持在非tabBar页面调用该方法 具体可参考 微信官方回答

这是一个已知的uni-app框架行为。在非tabBar页面调用setTabBarBadge时，由于当前页面不在tabBar导航栈中，框架不会立即更新tabBar状态。

解决方案：

  1. 可以在App.vue的onShow生命周期中设置tabBar徽标
  2. 使用全局状态管理(Vuex/pinia)存储徽标数据，在tabBar页面的onShow中读取并设置
  3. 通过uni.$emit/uni.$on实现跨页面通信，在进入tabBar页面时触发设置

示例代码：

// 在非tabBar页面
uni.$emit('updateTabBarBadge', {index: 0, text: '1'})

// 在tabBar页面
uni.$on('updateTabBarBadge', (data) => {
  uni.setTabBarBadge(data)
})
回到顶部