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

学前端的小朱2024-06-13 22:07

使用场景描述

在一进入到小程序的时候就要将用户在购物车中添加的商品总数，要以角标的形式显示在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	×	接口调用结束的回调函数（成功、失败都会执行）