当前位置：首页 > uni-app

uniapp 图标角标

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

uniapp 图标角标实现方法

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

使用 uni.setTabBarBadge API

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

uniapp 图标角标

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

自定义组件实现

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

uniapp 图标角标

<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开发电视应用

开发环境准备确保已安装HBuilderX最新版本，这是uniapp官方推荐的开发工具。安装Node.js环境，用于依赖管理和打包构建。准备Android Studio或Xcode用于调试和打包TV应…

uniapp设置title

设置页面标题的方法在UniApp中设置页面标题可以通过以下几种方式实现，适用于不同场景和需求。通过pages.json配置在pages.json文件中，可以为每个页面单独配置导航栏标题。找到对…

uniapp使用axios无法请求

uniapp中使用axios请求问题解决方案在uniapp中使用axios可能会遇到跨域、请求失败或兼容性问题。以下是常见原因及解决方法：检查axios安装与引入确保已正确安装axios：…

丸子uniapp

丸子UniApp简介丸子UniApp是一个基于UniApp框架开发的移动应用解决方案，通常用于快速构建跨平台应用（如微信小程序、H5、Android/iOS等）。其核心特点是利用UniApp的“一次…

美颜uniapp

美颜功能在UniApp中的实现方法在UniApp中实现美颜功能，可以通过以下几种方式：使用第三方SDK或插件腾讯云美颜SDK：提供直播推流场景下的美颜、滤镜、贴纸等功能，支持UniA…

uniapp弹出选择

实现方式一：使用uni.showActionSheet 在UniApp中，可以通过uni.showActionSheet实现底部弹出的选择菜单。该方法支持自定义选项列表和回调处理。代码示例：…

uniapp 图标角标