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

最新推荐文章于 2024-11-20 12:10:21 发布

原创最新推荐文章于 2024-11-20 12:10:21 发布 · 2.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #前端 #vue.js

uniapp 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用uni-app框架中的API来显示或隐藏TabBar上的红点及数字徽标。通过简单的JS代码实现对指定TabBar项的状态控制，适用于各种页面事件触发。


uni.setTabBarBadge({ //显示数字
  index: 2,//tabbar下标
  text: '1'//数字
})
uni.removeTabBarBadge({ //隐藏数字标
  index:2
})  
uni.showTabBarRedDot({ //显示红点
  index: 2
})
uni.hideTabBarRedDot({ //隐藏红点
  index:2
})
添加至任何页面的js事件里即可，事件执行，则显示或移除
详情可以看官网地址https://uniapp.dcloud.io/api/ui/tabbar?id=showtabbarreddot