UNIAPP原生TABBAR设置并添加数字角标或小红点提示
普通用法
uni.showTabBarRedDot
uni.showTabBarRedDot({ //显示红点
index: 4 //tabbar下标
})
如下图所示：
uni.setTabBarBadge
uni.setTabBarBadge({ //显示数字
index: 4, //tabbar下标
text: '6' //数字
})
如下图所示：
文章来源：https://www.toymoban.com/news/detail-521497.html
uni.removeTabBarBadge
uni.removeTabBarBadge({ //隐藏数字标
index: 2 //tabbar下标
})
uni.hideTabBarRedDot
uni.hideTabBarRedDot({ //隐藏红点
index: 2 //tabbar下标
})
实际应用
在我的界面如果有待用户阅读条数大于0，则在该tabbar(我的)顶部显示小红点。文章来源地址https://www.toymoban.com/news/detail-521497.html
onshow(){
setTimeout(() => {
th.allRedDot = 所有待阅读数量相加
if (th.allRedDot > 0) {
uni.showTabBarRedDot({ //显示红点
index: 4 //tabbar下标
})
}
}, 1000)
}
注意事项
- 在页面加载的时候调用。
- 支付宝开发者工具上面的红点样式比较丑，但是不用调整。真机调试样式会准确些也相对好看。
- 加定时器的原因是因为页面还没计算清楚红点个数就会往后运行，给计算红点个数一点时间，这样就不会导致红点不显示。（个人看法）
到了这里，关于UNIAPP原生TABBAR设置并添加数字角标或小红点提示的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![uniapp - [ H5 网页 / App ] 高性能 tabbar 底部菜单凸起效果，原生系统自定义底部菜单不卡顿、切换页面不闪烁、自动缓存页面（底部菜单中间自定义一个图片并悬浮起来）](https://imgs.yssmx.com/Uploads/2024/02/831617-1.gif)
