uniapp 图标角标

添加角标的方法

在 UniApp 中实现图标角标功能，可以通过以下方法实现：

使用原生 TabBar 角标
UniApp 的 uni.setTabBarBadge API 可直接为底部 TabBar 添加角标。示例代码：

uni.setTabBarBadge({
  index: 0, // TabBar 索引
  text: '3' // 角标内容（字符串）
})

移除角标
通过 uni.removeTabBarBadge 清除指定角标：

uni.removeTabBarBadge({ index: 0 })

自定义组件实现角标

若需在非 TabBar 位置（如首页图标）添加角标，可通过 CSS 和组件实现：

结构示例

<view class="icon-container">
  <image src="/static/icon.png"></image>
  <view class="badge" v-if="showBadge">{{count}}</view>
</view>

样式关键代码

.icon-container {
  position: relative;
  display: inline-block;
}
.badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: #ff0000;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  text-align: center;
  font-size: 12px;
}

第三方组件库

使用 uni-ui 或 uView 等库可快速集成角标：

1. uni-ui 的 Badge 组件

   <uni-badge :text="5" type="error"></uni-badge>

2. uView 的 Badge

   <u-badge :count="3" :offset="[15,15]"></u-badge>

注意事项

• 角标内容需动态更新时，建议结合 Vue 的响应式数据（如 data 或 computed）。
• 在 NVUE 页面中需使用原生渲染兼容的样式写法。
• 小程序端部分样式（如 position: fixed）可能需要平台适配。