uniapp在tabbar上添加角标

在UniApp中，可以通过以下步骤在TabBar上添加角标：

1. 在App.vue中定义一个计算属性，用于获取需要显示角标的数量：

computed: {
    badgeCount() {
      return this.$store.state.badgeCount;
    }
}

2. 在TabBar.vue中，使用uni-icons组件添加角标图标，并根据计算属性的值控制角标是否显示：

<template>
  <view>
    <view class="tabbar">
      <view
        v-for="(item, index) in tabbarList"
        :key="index"
        class="tabbar-item"
        :class="currentIndex === index ? 'active' : ''"
        @click="changeTabbar(index)"
      >
        <view class="icon">
          <uni-icons :type="item.icon" size="24"></uni-icons>
          <!-- 添加角标 -->
          <view v-if="index === 2 && badgeCount > 0" class="badge">{{badgeCount}}</view>
        </view>
        <view class="title">{{item.text}}</view>
      </view>
    </view>
  </view>
</template>

<style>
  .badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 16px;
    height: 16px;
    background-color: red;
    color: #fff;
    font-size: 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>

在这个例子中，我们假设需要在第三个Tab上添加角标，并且角标的数量通过Vuex状态管理实现。当badgeCount的值大于0时，角标会显示出来。

3. 在Vuex中定义state和mutations用于管理角标数量：

const store = new Vuex.Store({
  state: {
    badgeCount: 0
  },
  mutations: {
    increment(state) {
      state.badgeCount++;
    },
    decrement(state) {
      state.badgeCount--;
    }
  }
});

4. 在需要更新角标数量的地方，调用Vuex的mutations方法更新状态：

this.$store.commit('increment');

这样，在TabBar上就可以动态地显示角标了。