uniapp底部栏设置未读红点或角标

最新推荐文章于 2024-08-17 14:28:46 发布

毛三仙

最新推荐文章于 2024-08-17 14:28:46 发布

阅读量2.4k

点赞数 29

分类专栏： uniapp 文章标签： uni-app

本文链接：https://blog.csdn.net/m0_74149462/article/details/135929496

版权

uniapp 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

本文介绍了在uni-app开发中如何使用uni框架的API来管理tabBar的红点、文本和通知，包括setTabBarBadge、removeTabBarBadge等方法，以及注意事项如需在tabBar渲染后调用以确保性能。

摘要由CSDN通过智能技术生成

在这里插入图片描述

pages.json

{
    ... // 省略
    "tabBar": {
        "color": "#333333",
         "selectedColor": "#3296fa",
         "backgroundColor": "#ffffff",
         "borderStyle": "white",
             "list": [
                 {
                     "pagePath": "pages/sys/workbench/index",
                     "iconPath": "static/images/tabbar/apply_1.png",
                     "selectedIconPath": "static/images/tabbar/apply_2.png",
                     "text": "首页"
                 },
                 {
                     "pagePath": "pages/sys/msg/index",
                     "iconPath": "static/images/tabbar/msg_1.png",
                     "selectedIconPath": "static/images/tabbar/msg_2.png",
                     "text": "消息"
                 },
                 {
                     "pagePath": "pages/sys/user/index",
                     "iconPath": "static/images/tabbar/my_1.png",
                     "selectedIconPath": "static/images/tabbar/my_2.png",
                     "text": "我的"
                 }
             ]
    }, // 底部按钮栏配置
}

workbench/index.vue(路径自定义，看具体业务)

onShow() {
	this.getMessageInfo();
}

getMessageInfo() {
    this.$u.api.message.noticeAll().then((res) => {
        let count =
            res.data.earlyNum +
            res.data.newsNum +
            res.data.noticeNum +
            res.data.taskNum;
        if (count > 0) {
            uni.setTabBarBadge({
                index: 0,
                text: "11",
            });
            uni.setTabBarBadge({
                index: 1,
                text: "99+", 
            });
        } else {
            uni.removeTabBarBadge({
                index: 1, 
                text: "",
            });
        }
    });
},

API

uni.setTabBarBadge(OBJECT)

为 tabBar 某一项的右上角添加文本。

OBJECT参数说明：

参数	类型	必填	说明
index	Number	是	tabBar的哪一项，从左边算起
text	String	是	显示的文本，不超过 3 个半角字符
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

uni.removeTabBarBadge(OBJECT)

移除 tabBar 某一项右上角的文本。

OBJECT参数说明：

参数	类型	必填	说明
index	Number	是	tabBar的哪一项，从左边算起
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

uni.showTabBarRedDot(OBJECT)

显示 tabBar 某一项的右上角的红点。

OBJECT参数说明：

参数	类型	必填	说明
index	Number	是	tabBar的哪一项，从左边算起
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

uni.hideTabBarRedDot(OBJECT

隐藏 tabBar 某一项的右上角的红点。

OBJECT参数说明：

参数	类型	必填	说明
index	Number	是	tabBar的哪一项，从左边算起
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）