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. 加定时器的原因是因为页面还没计算清楚红点个数就会往后运行，给计算红点个数一点时间，这样就不会导致红点不显示。（个人看法）