小程序tabBar右上角添加角标

墨蓝 2023-03-02 05:19 44阅读 0赞

小程序可以在 `pages.json` 中使用 `tabBar` 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。

关于 `tabBar` 的配置可以查看 [https://uniapp.dcloud.io/collocation/pages?id=tabbar][https_uniapp.dcloud.io_collocation_pages_id_tabbar] 。但我们有时候在某个 tab 展示角标，比如微信第一个 tab 的未读消息提示，第三个 tab 的朋友圈未读消息，这些信息是不能通过 `pages.json` 中的 `tabBar` 来配置的，而是使用如下API进行设置：

1.  [uni.setTabBarBadge(OBJECT)][uni.setTabBarBadge_OBJECT] 为 tabBar 某一项的右上角添加文本；
2.  [uni.removeTabBarBadge(OBJECT)][uni.removeTabBarBadge_OBJECT] 移除 tabBar 某一项右上角的文本；
3.  [uni.showTabBarRedDot(OBJECT)][uni.showTabBarRedDot_OBJECT] 显示 tabBar 某一项的右上角的红点；
4.  [uni.hideTabBarRedDot(OBJECT)][uni.hideTabBarRedDot_OBJECT] 隐藏 tabBar 某一项的右上角的红点。

[https_uniapp.dcloud.io_collocation_pages_id_tabbar]: https://uniapp.dcloud.io/collocation/pages?id=tabbar
[uni.setTabBarBadge_OBJECT]: https://uniapp.dcloud.io/api/ui/tabbar?id=settabbarbadge
[uni.removeTabBarBadge_OBJECT]: https://uniapp.dcloud.io/api/ui/tabbar?id=removetabbarbadge
[uni.showTabBarRedDot_OBJECT]: https://uniapp.dcloud.io/api/ui/tabbar?id=showtabbarreddot
[uni.hideTabBarRedDot_OBJECT]: https://uniapp.dcloud.io/api/ui/tabbar?id=hidetabbarreddot

发表评论取消回复

表情：

评论列表（有 0 条评论，44人围观）

还没有评论，来说两句吧...

相关阅读

相关在文章右上角添加目录导航

在文章右上角添加目录导航 1、添加css代码到“页面定制css代码” 1 /生成博客目录的CSS/ 2 uprightsideBar{

爱被打了一巴掌/ 2023年08月17日 15:47/ 0 赞/ 171 阅读

相关小程序tabBar右上角添加角标

小程序可以在 `pages.json` 中使用 `tabBar` 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。关于 `tabBar` 的配置可以查看 [

墨蓝/ 2023年03月02日 05:19/ 0 赞/ 45 阅读

相关 [小技巧][Markdown]上标 /下标上下角标

<table> <thead> <tr> <th align="center">标签</th> <th align="center">写法</th>

r囧r小猫/ 2023年02月27日 14:58/ 0 赞/ 30 阅读

相关 Android TextView 右上角文字角标(TM, ©，® )

![实现效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

Love The Way You Lie/ 2023年01月02日 08:26/ 0 赞/ 37 阅读

相关 UNI-APP_uni-app微信小程序右上角分享，右上角分享朋友圈

利用uni-app的onShareAppMessage与onShareTimeline来实现的分享给朋友或分享朋友圈！ onShareAppMessage：官网详细讲解地址：

叁歲伎倆/ 2022年12月28日 09:15/ 0 赞/ 570 阅读

相关成功解决matplotlib绘图中描述性字体特殊符号(比如数值的右上角标和右下角标表示)

成功解决matplotlib绘图中描述性字体特殊符号(比如数值的右上角标和右下角标表示) 目录解决问题解决思路解决方法 -----------

川长思鸟来/ 2022年12月25日 05:59/ 0 赞/ 99 阅读

相关 python右上角_Python密封PDF的右上角,python,给,pdf,盖章

\ function:给pdf添加水印、公章 from PyPDF2 import PdfFileWriter, PdfFileReader \ 所有路径为绝对路径 de

心已赠人/ 2022年11月19日 09:47/ 0 赞/ 267 阅读

相关 iOS控件右上角添加文字/icon

文章目录引言 I、控件右上角添加文字（Frame） II、控件右上角添加icon(Masonry) 引言应用场景： > 1、因银行代发通道

古城微笑少年丶/ 2022年11月15日 15:45/ 0 赞/ 214 阅读

相关 html图标右上角添加小图标,图片右上角增加删除图标(css布局示例)

【实例简介】【实例截图】 ![002b4c2b148e10bf43d68e72dbc50b66.png][] 【核心代码】删除图标示例 .img-wrap \{

悠悠/ 2022年10月06日 03:53/ 0 赞/ 495 阅读

相关微信小程序获取右上角胶囊按钮布局信息

let res=wx.getMenuButtonBoundingClientRect() 返回值 width number 宽度，单位：px

谁践踏了优雅/ 2021年07月25日 01:13/ 0 赞/ 756 阅读