当前位置：首页 > 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教程

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

uniapp实现支付功能

支付功能实现概述在UniApp中实现支付功能通常需要对接第三方支付平台（如微信支付、支付宝支付等）。以下是基于微信支付和支付宝支付的通用实现流程。微信支付实现步骤 1. 配置支付权限在微信开放…

uniapp旋转横屏

实现横屏模式的方法在UniApp中实现横屏模式，可以通过配置页面方向或使用CSS旋转实现。以下是两种常见方法：修改manifest.json配置在项目的manifest.json文件中…

uniapp前端项目

Uniapp 前端项目开发指南 Uniapp 是一个基于 Vue.js 的跨平台开发框架，支持一次开发，多端发布（如微信小程序、H5、App 等）。以下是关于 Uniapp 前端项目的关键信息：环…

uniapp设置背景

设置全局背景样式在App.vue文件中添加全局样式，使用page选择器设置页面背景。这种方式会影响所有页面背景。 <style> page { background-color:…

css3 图标制作

CSS3 图标制作方法使用伪元素和边框通过 ::before 和 ::after 伪元素结合 CSS 边框属性可以创建简单图标。例如三角形图标： .triangle { width: 0;…

uniapp 图标角标