uniapp - 设置底部tab栏角标

2021-12-01 1,980 阅读1分钟

给底部tab栏设置或删除 `文本角标`

设置文本角标 uni.setTabBarBadge(OBJECT)

缺点就是需要手动清空角标
```
    uni.setTabBarBadge({
        index: 0,//tabbar中的索引
        text: '1',//角标内容字符串  不超过三个 `半角字符`
    })
```
深入理解半角字符_百度知道 (baidu.com)
- text为' '时效果图
- text为3个字符以内时效果图
- text大于3个字符时效果图

删除`文本角标`

删除文本角标 uni.removeTabBarBadge(OBJECT)

    uni.removeTabBarBadge({
        index:1
    })

给底部tabbar某一项设设置`红点`

设置红点 uni.showTabBarRedDot(OBJECT)

    uni.showTabBarRedDot({
        index:2
    })

效果图

隐藏红点 uni.hideTabBarRedDot(OBJECT)

    uni.hideTabBarRedDot({
        index:2
    })