当前位置：首页 > uni-app

uniapp 图标角标

2026-02-06 08:10:42uni-app

uniapp 图标角标实现方法

在 uniapp 中实现图标角标功能，可以通过以下几种方式实现：

使用 uni.setTabBarBadge API

适用于底部 tabBar 的角标设置，支持动态更新数字或红点。

uni.setTabBarBadge({
  index: 0, // tabBar 的哪一项，从0开始
  text: '1' // 角标内容，可以是数字或空字符串（显示红点）
})

自定义组件实现

在页面任意位置实现角标效果，可以使用 CSS 绝对定位和样式控制。

<view class="icon-container">
  <image src="/static/icon.png"></image>
  <view class="badge">5</view>
</view>

.icon-container {
  position: relative;
  width: 50px;
  height: 50px;
}

.badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 8px;
  background-color: #ff0000;
  color: #ffffff;
  font-size: 10px;
  padding: 0 3px;
}

使用第三方 UI 库

如 uView、ColorUI 等组件库都提供了现成的角标组件。

<u-badge :count="3" :offset="[10, 10]">
  <image src="/static/icon.png" style="width: 50px; height: 50px;"></image>
</u-badge>

注意事项

在 H5 端，tabBar 角标可能受浏览器限制
小程序端需要真机调试才能看到效果
角标位置和样式需要根据实际需求调整
动态更新角标内容时，注意数据绑定的使用

兼容性处理

不同平台对角标的支持程度不同，建议通过条件编译处理差异：

// #ifdef APP-PLUS || MP-WEIXIN
uni.setTabBarBadge({
  index: 0,
  text: '1'
})
// #endif

// #ifdef H5
// 使用自定义角标方案
// #endif

uniapp 图标角标

标签: 图标 uniapp

分享给朋友：

uniapp教程

uniapp 基础介绍 uniapp 是一个基于 Vue.js 的跨平台开发框架，支持一次开发，多端发布（如微信小程序、H5、App、快应用等）。其核心优势在于代码复用率高，学习成本低，适合快速构建多…

uniapp实名认证

uniapp实名认证实现方法使用uniCloud实名认证插件 uniapp官方提供了uniCloud的实名认证插件，可快速集成到项目中。插件支持身份证识别、活体检测等功能，需在uniCloud控制台…

uniapp请求超时处理

uniapp请求超时处理方法在uniapp中处理请求超时可以通过多种方式实现，以下是几种常见的处理策略：设置全局请求超时时间在main.js中配置全局请求超时时间，适用于所有请求：…

uniapp多环境配置

多环境配置的必要性在UniApp开发中，多环境配置能有效区分开发、测试、生产等不同环境的API地址、密钥等参数，避免手动修改代码导致的错误。创建环境配置文件在项目根目录下创建env.js或c…

uniapp分享到facebook

使用uniapp分享到Facebook的方法在uniapp中实现分享到Facebook功能，可以通过调用原生插件或使用第三方SDK。以下是具体实现方式：安装Facebook SDK插件在uni…

uniapp视频

uniapp视频开发基础 uniapp支持通过video组件实现视频播放功能，该组件兼容多端（H5、小程序、App等），基本用法如下： <template> <video…

uniapp 图标角标