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

pages.json

javascript 复制代码
{
    ... // 省略
    "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(路径自定义,看具体业务)

javascript 复制代码
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 接口调用结束的回调函数(调用成功、失败都会执行)
uni.onTabBarMidButtonTap(CALLBACK)
监听中间按钮的点击事件

Tip

  • tabbar是原生的,层级高于前端元素
  • uni-app插件市场有封装的前端tabbar,但性能不如原生tabbar
  • 如果想要一个中间带+号的tabbar,在HBuilderX中新建uni-app项目、选择 底部选项卡 模板
  • 以上大部分操作 tabbar 的 API 需要在 tabbar 渲染后才能使用,避免在 tabbar 未初始化前使
相关推荐
小徐_23331 天前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
iOS阿玮1 天前
永远不要站在用户的对立面,挑战大众的公知。
uni-app·app·apple
xw51 天前
uni-app中v-if使用”异常”
前端·uni-app
!win !1 天前
uni-app中v-if使用”异常”
前端·uni-app
2501_915918411 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张1 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
00后程序员张2 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬2 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106322 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
xkxnq2 天前
Uniapp崩溃监控体系构建:内存泄漏三维定位法(堆栈/资源/线程)
uni-app