uniapp原生Trbbar设置并添加数字角标或小红点提示
2023-06-11 本文已影响0人
小李不小
UNIAPP原生TABBAR设置并添加数字角标或小红点提示
普通用法
uni.showTabBarRedDot
uni.showTabBarRedDot({ //显示红点
index: 4 //tabbar下标
})

实际应用
在我的界面如果有待用户阅读条数大于0,则在该tabbar(我的)顶部显示小红点。
onshow(){
setTimeout(() => {
th.allRedDot = 所有待阅读数量相加
if (th.allRedDot > 0) {
uni.showTabBarRedDot({ //显示红点
index: 4 //tabbar下标
})
}
}, 1000)
}
注意事项
1.在页面加载的时候调用。
2.支付宝开发者工具上面的红点样式比较丑,但是不用调整。真机调试样式会准确些也相对好看。
3.加定时器的原因是因为页面还没计算清楚红点个数就会往后运行,给计算红点个数一点时间,这样就不会导致红点不显示。(个人看法)