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

最新推荐文章于 2025-03-31 17:31:07 发布

学前端的小朱

最新推荐文章于 2025-03-31 17:31:07 发布

阅读量1.9k

点赞数 9

文章标签： uni-app 前端微信小程序 vue.js javascript

本文链接：https://blog.csdn.net/qq_45569925/article/details/139613279

版权

使用场景描述

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

代码实现

//index.vue

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

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