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

    使用场景描述

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

    代码实现

    1. //index.vue
    2.

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

    效果展示

     

    uni.setTabBarBadge(OBJECT)介绍

    作用

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

    平台差异

    AppH5

    微信小程序

    支付宝

    小程序

    百度

    小程序

    		抖音小程序
    飞书小程序    		QQ小程序快手小程序京东小程序
    √√√√√√√√√

    OBJECT参数说明

    参数类型必填说明
    indexNumber√tabBar的哪一项，从左边算起，从0开始
    textString√显示的文本，不超过3个半角字符
    successFunction×接口调用成功的回调函数
    failFunction×接口调用失败的回调函数
    completeFunction×接口调用结束的回调函数（成功、失败都会执行）

    uni.removeTabBarBadge(OBJECT)介绍

    作用

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

    平台差异说明

    OBJECT参数说明

    参数类型必填说明
    indexNumber√tabBar的哪一项，从左边算起，从0开始
    successFunction×接口调用成功的回调函数
    failFunction×接口调用失败的回调函数
    completeFunction×接口调用结束的回调函数（成功、失败都会执行）

  • 相关阅读:
    vue3 日期延后一天
    Nacos使用教程（五）——配置管理中心
    【数据测试】之迁移（三）
    Pandas统计分析中（数据计算、数据格式化、数据分组统计、数据移位、数据转换、数据合并、数据导出）
    增强负样本提高CPI表现
    Day13--搜索历史-清空搜索历史记录
    JDK21的虚拟线程是什么？和平台线程什么关系？
    从文件1到文件2传输内容
    数据库安全与保护
    保姆级教程——VSCode如何在Mac上配置C++的运行环境
  • 原文地址：https://blog.csdn.net/qq_45569925/article/details/139613279