使用uniapp设置tabbar的角标和移除tabbar的角标

使用场景描述

在一进入到小程序的时候就要将用户在购物车中添加的商品总数,要以角标的形式显示在tababr中。

代码实现

javascript 复制代码
//index.vue

<script setup>
import { onLoad } from '@dcloudio/uni-app'

    onLoad(()=>{
        uni.setTabBarBadge({
          index: 1,
          text: '5' //为了实现效果所随便写的数字,正式开发中从需要从后端或者本地进行获取
        })
    })
</script>

由于一进入到小程序的时候最先展示的为index.vue所以我在这个文件中设置的。

效果展示

uni.setTabBarBadge(OBJECT)介绍

作用

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

平台差异

App H5 微信小程序 支付宝 小程序 百度 小程序 抖音小程序 飞书小程序 QQ小程序 快手小程序 京东小程序

OBJECT参数说明

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

uni.removeTabBarBadge(OBJECT)介绍

作用

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

平台差异说明

OBJECT参数说明

参数 类型 必填 说明
index Number tabBar的哪一项,从左边算起,从0开始
success Function × 接口调用成功的回调函数
fail Function × 接口调用失败的回调函数
complete Function × 接口调用结束的回调函数(成功、失败都会执行)
相关推荐
佛系菜狗2 分钟前
element-ui、element-plus表单resetFields()无效的坑
前端·javascript·vue.js
爱的叹息23 分钟前
【前端】基于 Promise 的 HTTP 客户端工具Axios 详解
前端·网络·网络协议·http
遗憾随她而去.30 分钟前
从 0 开始认识 WebSocket:前端实时通信的利器!
前端·websocket·网络协议
盛夏绽放1 小时前
uni-app中获取用户实时位置完整指南:解决权限报错问题
uni-app·notepad++
老兵发新帖1 小时前
pnpm常见报错解决办法
前端
Sonetto19991 小时前
Nginx 反向代理,啥是“反向代理“啊,为啥叫“反向“代理?而不叫“正向”代理?它能干哈?
运维·前端·nginx
沐土Arvin1 小时前
理解npm的工作原理:优化你的项目依赖管理流程
开发语言·前端·javascript·设计模式·npm·node.js
好_快1 小时前
Lodash源码阅读-baseUniq
前端·javascript·源码阅读
不秃的开发媛1 小时前
前端技术Ajax入门
java·开发语言·前端
牧羊狼的狼2 小时前
React.memo 和 useMemo
前端·javascript·react.js