美文网首页
uniapp原生Trbbar设置并添加数字角标或小红点提示

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

作者: 小李不小 | 来源:发表于2023-06-11 10:21 被阅读0次

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

    普通用法

    uni.showTabBarRedDot

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

    实际应用

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

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

    1.在页面加载的时候调用。
    2.支付宝开发者工具上面的红点样式比较丑,但是不用调整。真机调试样式会准确些也相对好看。
    3.加定时器的原因是因为页面还没计算清楚红点个数就会往后运行,给计算红点个数一点时间,这样就不会导致红点不显示。(个人看法)

    相关文章

      网友评论

          本文标题:uniapp原生Trbbar设置并添加数字角标或小红点提示

          本文链接:https://www.haomeiwen.com/subject/oxvxydtx.html