本文介绍: uniapp底部栏设置未读红点或角标
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 | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
uni.onTabBarMidButtonTap(CALLBACK)
监听中间按钮的点击事件
Tip
- tabbar是原生的,层级高于前端元素
- uni-app插件市场有封装的前端tabbar,但性能不如原生tabbar
- 如果想要一个中间带+号的tabbar,在HBuilderX中新建uni-app项目、选择 底部选项卡 模板
- 以上大部分操作 tabbar 的 API 需要在 tabbar 渲染后才能使用,避免在 tabbar 未初始化前使
原文地址:https://blog.csdn.net/m0_74149462/article/details/135929496
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_65993.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。