UNIAPP原生TABBAR设置并添加数字角标或小红点提示

UNIAPP原生TABBAR设置并添加数字角标或小红点提示

普通用法

uni.showTabBarRedDot

uni.showTabBarRedDot({ //显示红点 
	index: 4 //tabbar下标
})

如下图所示:
在这里插入图片描述

uni.setTabBarBadge

uni.setTabBarBadge({ //显示数字  
	index: 4, //tabbar下标
	text: '6' //数字
})

如下图所示:
在这里插入图片描述

uni.removeTabBarBadge

uni.removeTabBarBadge({ //隐藏数字标
	index: 2 //tabbar下标
})

uni.hideTabBarRedDot

uni.hideTabBarRedDot({ //隐藏红点
	index: 2 //tabbar下标
})

实际应用

在我的界面如果有待用户阅读条数大于0,则在该tabbar(我的)顶部显示小红点。

onshow(){
 setTimeout(() => {
	th.allRedDot = 所有待阅读数量相加
	if (th.allRedDot > 0) {
		uni.showTabBarRedDot({ //显示红点 
			index: 4 //tabbar下标
		})
	}			
 }, 1000)
}

注意事项

  1. 在页面加载的时候调用。
  2. 支付宝开发者工具上面的红点样式比较丑,但是不用调整。真机调试样式会准确些也相对好看。
  3. 加定时器的原因是因为页面还没计算清楚红点个数就会往后运行,给计算红点个数一点时间,这样就不会导致红点不显示。(个人看法)
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>