uniapp 小程序 showTabBarRedDot / setTabBarBadge 非tab页调用无效

追格官方小助手/ 2022年12月17日/ 小程序/ 浏览 2315

自从微信小程序 showTabBarRedDot / setTabBarBadge 这两个API被推出以来,就受到广大开发者的喜欢和吐槽。


喜欢是因为这两个API需求很旺盛,吐槽是因为这两个API在非tab页调用是无效的。


究其根本原因:在 tabbar 不存在的时候,是无法对其进行操作的。


如果手机或电脑比较垃圾的情况下,可以看到从tab页跳转到非tab页的时候,tabbar会先消失,然后新页面进入。


也就是说,一旦进入非tab页面,tabbar就不存在了。


showTabBarRedDot / setTabBarBadge 在非tab页调用无效这个问题,已经在微信官方挂了很久了,至今也没解决。


我猜想,从tab页面进入非tab页面隐藏tabbar,是有重要原因的。比如,如果不隐藏tabbar,页面栈会乱掉……


现在关键是如何解决这个问题。


也没什么好办法,无非就是在tabbar不显示的时候,只记录红点变化的数据,待tabbar显示的时候,再根据记录的数据,决定是否显示红点。


最简单的实践方法,可以设置一个全局变量,记录红点,在tab页显示的时候,根据全局变量决定是否显示红点


这个方法,让人不太舒服的地方,就是需要在每个tab页都要进行同样的操作……


代码示例:


function setNoticeRedDot() {
	if (getApp().globalData.noticeRedDot) {
		uni.showTabBarRedDot({
			index: 3
		})
	} else {
		uni.hideTabBarRedDot({
			index: 3
		})
	}
}


根据需要,随时改变 getApp().globalData.noticeRedDot 的数值,在tab页显示的时候调用上面的方法。


发表评论

暂无评论,抢个沙发...

客服 工单