XW-AIOT/aiot-uniapp
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(tabbar): 添加角标显示功能

Browse Source 
在自定义 tabbar 组件中新增 badge 属性，支持显示数字或小红点角标
修改 tabbar/index.vue 文件实现角标显示逻辑
This commit is contained in:
feige996
2025-08-07 21:42:04 +08:00
parent e363ef301c
commit c14852d147
3 changed files with 36 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/tabbar/config.ts
View File

@@ -6,6 +6,7 @@ type CustomTabBarItem = Pick<NativeTabBarItem, 'text' | 'pagePath'> & {
iconType: 'uniUi' | 'uiLib' | 'unocss' | 'iconfont' | 'image' // 不建议用 image 模式，需要配置2张图
icon: any // 其实是 string 类型，这里是为了避免 ts 报错 (tabbar/index.vue 里面 uni-icons 那行)
activeIcon?: string // 只有在 image 模式下才需要，传递的是高亮的图片（PS： 不建议用 image 模式）
badge?: number | 'dot' // badge 显示一个数字或 小红点（样式可以直接在 tabbar/index.vue 里面修改）
}
/**
@@ -60,6 +61,7 @@ export const customTabbarList: CustomTabBarItem[] = [
// 图标列表地址：https://uniapp.dcloud.net.cn/component/uniui/uni-icons.html
iconType: 'uniUi',
icon: 'home',
// badge: 'dot',
},
{
text: nativeTabbarList[1].text,
@@ -69,6 +71,7 @@ export const customTabbarList: CustomTabBarItem[] = [
// 2）配置到 unocss.config.ts 的 safelist 中
iconType: 'unocss',
icon: 'i-carbon-code',
// badge: 10,
},
// {
// pagePath: 'pages/mine/index',

49
src/tabbar/index.vue
View File

@@ -63,24 +63,37 @@ function getImageByIndex(index: number, item: { iconActive?: string, icon: strin
:style="{ color: getColorByIndex(index) }"
@click="handleClick(index)"
>
<template v-if="item.iconType === 'uniUi'">
<uni-icons :type="item.icon" size="20" :color="getColorByIndex(index)" />
</template>
<template v-if="item.iconType === 'uiLib'">
<!-- TODO: 以下内容请根据选择的UI库自行替换 -->
<!-- 如：<wd-icon name="home" /> (https://wot-design-uni.cn/component/icon.html) -->
<!-- 如：<uv-icon name="home" /> (https://www.uvui.cn/components/icon.html) -->
<!-- 如：<sar-icon name="image" /> (https://sard.wzt.zone/sard-uniapp-docs/components/icon)(sar没有home图标^_^) -->
<wd-icon :name="item.icon" size="20" />
</template>
<template v-if="item.iconType === 'unocss' || item.iconType === 'iconfont'">
<view :class="item.icon" class="text-20px" />
</template>
<template v-if="item.iconType === 'image'">
<image :src="getImageByIndex(index, item)" mode="scaleToFill" class="h-20px w-20px" />
</template>
<view class="mt-2px text-12px">
{{ item.text }}
<view class="relative px-3">
<template v-if="item.iconType === 'uniUi'">
<uni-icons :type="item.icon" size="20" :color="getColorByIndex(index)" />
</template>
<template v-if="item.iconType === 'uiLib'">
<!-- TODO: 以下内容请根据选择的UI库自行替换 -->
<!-- 如：<wd-icon name="home" /> (https://wot-design-uni.cn/component/icon.html) -->
<!-- 如：<uv-icon name="home" /> (https://www.uvui.cn/components/icon.html) -->
<!-- 如：<sar-icon name="image" /> (https://sard.wzt.zone/sard-uniapp-docs/components/icon)(sar没有home图标^_^) -->
<wd-icon :name="item.icon" size="20" />
</template>
<template v-if="item.iconType === 'unocss' || item.iconType === 'iconfont'">
<view :class="item.icon" class="text-20px" />
</template>
<template v-if="item.iconType === 'image'">
<image :src="getImageByIndex(index, item)" mode="scaleToFill" class="h-20px w-20px" />
</template>
<view class="mt-2px text-12px">
{{ item.text }}
</view>
<!-- 角标显示 -->
<view v-if="item.badge">
<template v-if="item.badge === 'dot'">
<view class="absolute right-0 top-0 h-2 w-2 rounded-full bg-#f56c6c" />
</template>
<template v-else>
<view class="absolute right-0 top-0 h-4 w-4 center rounded-full bg-#f56c6c text-center text-xs text-white">
{{ item.badge }}
</view>
</template>
</view>
</view>
</view>
</view>