使用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 × 接口调用结束的回调函数(成功、失败都会执行)
相关推荐
花楸树22 分钟前
前端搭建 MCP Client(Web版)+ Server + Agent 实践
前端·人工智能
wuaro22 分钟前
RBAC权限控制具体实现
前端·javascript·vue
程序猿看视界24 分钟前
Uni-app页面信息与元素影响解析
uni-app·状态栏·安全区域·窗口信息·像素比
专业抄代码选手26 分钟前
【JS】instanceof 和 typeof 的使用
前端·javascript·面试
用户00798136209727 分钟前
6000 字+6 个案例:写给普通人的 MCP 入门指南
前端
用户876128290737431 分钟前
前端ai对话框架semi-design-vue
前端·人工智能
干就完了134 分钟前
项目中遇到浏览器跨域前端和后端解决方案以及大概过程
前端
我是福福大王36 分钟前
前后端SM2加密交互问题解析与解决方案
前端·后端
实习生小黄40 分钟前
echarts 实现环形渐变
前端·echarts
清晨細雨1 小时前
UniApp集成极光推送详细教程
android·ios·uni-app·极光推送