Uni-app Uni-badge数字角标组件使用示例

以下是一个简单易懂的Uni-app项目示例，展示了如何使用Uni-badge数字角标组件。这个示例将包含一个带有数字角标的页面，用户可以点击角标来触发某个操作（如跳转到消息列表）。

1. 创建Uni-app项目

首先，确保你已经安装了Uni-app的开发环境。然后，创建一个新的Uni-app项目。

2. 引入Uni-badge组件

在页面的<template>中引入uni-badge组件，并设置其属性。

3. 编写代码

在pages/index/index.vue文件中，编写如下代码：

<template>
<view class=”container”>
<!– 应用图标（这里用文本代替） –>
<view class=”app-icon”>
App Icon
<!– 数字角标组件 –>
<uni-badge :count=”unreadMessages” class=”badge” @click=”handleBadgeClick”></uni-badge>
</view>

<!– 其他页面内容 –>
<view class=”content”>
<!– … 其他内容 … –>
</view>
</view>
</template>

<script>
// 导入uni-badge组件（如果是uni-ui库中的组件，则需要先安装uni-ui）
// import { Uni-badge } from ‘@dcloudio/uni-ui’;
// 如果已经全局注册了uni-ui组件库，则无需单独导入

export default {
data() {
return {
// 假设未读消息数量
unreadMessages: 5
};
},
methods: {
// 处理角标点击事件
handleBadgeClick() {
// 这里可以跳转到消息列表页面或执行其他操作
uni.showToast({
title: ‘跳转到消息列表’,
icon: ‘none’
});
// 示例：跳转到消息列表页面（假设页面路径为/pages/messages/messages）
// uni.navigateTo({ url: ‘/pages/messages/messages’ });
}
}
};
</script>

<style>
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
flex-direction: column;
}

.app-icon {
position: relative;
padding: 20px;
background-color: #f0f0f0;
border-radius: 10px;
font-size: 24px;
text-align: center;
}

.badge {
position: absolute;
top: 0;
right: 0;
transform: translate(50%, -50%);
}

/* 可选：自定义角标样式 */
.uni-badge {
background-color: red;
color: white;
border-radius: 50%;
padding: 5px 10px;
font-size: 16px;
}
</style>

4. 解释代码

• <template>部分：
  • uni-badge组件被嵌套在app-icon视图内部，表示应用图标上的数字角标。
  • :count="unreadMessages"绑定了未读消息的数量，这是一个动态属性，会根据data中的unreadMessages值变化。
  • @click="handleBadgeClick"设置了角标的点击事件处理器。
• <script>部分：
  • data函数返回了一个对象，其中unreadMessages表示未读消息的数量。
  • handleBadgeClick方法定义了角标点击时的行为，这里只是简单地显示了一个Toast消息，但你可以根据需要跳转到其他页面或执行其他操作。
• <style>部分：
  • 定义了一些基本的样式来布局应用图标和角标。
  • .uni-badge类（如果使用了默认的uni-ui库中的uni-badge组件）用于自定义角标的样式，如背景色、文字颜色、边框半径等。

5. 运行项目

确保你的Uni-app开发环境已经配置好，然后运行项目。你应该能看到一个带有数字角标的应用图标，点击角标会触发你定义的行为。

这个示例展示了如何在Uni-app中使用Uni-badge数字角标组件，并通过简单的属性设置和事件处理来实现基本的功能。你可以根据自己的需求进一步定制和扩展这个组件。