uni-app uni-badge 在nvue页面type属性无效

信息类别	信息内容
产品分类	uniapp/App
PC开发环境	Windows
PC版本号	win10
HBuilderX类型	Alpha
HBuilderX版本号	3.4.6
手机系统	Android
手机版本号	Android 12
手机厂商	小米
手机机型	小米至尊10
页面类型	nvue
vue版本	vue3
打包方式	云端
项目创建方式	HBuilderX

示例代码：

<uni-badge text="12" type="success"></uni-badge>

操作步骤：

代码运行到真机，vue页面显示正常，nvue一直是白色


预期结果：

nvue正常显示对应颜色

实际结果：

一直是白色


bug描述：

uni-badge设置type后没有效果，依然是白色

test.zip

songsunli 1楼•15 天前

问题复现，已加分，感谢您的反馈！

sinazl 2楼•15 天前

到今天，这个问题依旧存在，还是没有修复吗？

itying888 3楼•15 天前

问题依旧存在。

yuanlaile 4楼•15 天前

到今天，这个问题依旧存在，还是没有修复吗？

bupafengyu 5楼•15 天前

请问您这个问题最后修复了吗？

yuanlaile 6楼•15 天前

问题依旧存在。

eggper 7楼•15 天前

在 uni-app 中，uni-badge 组件用于显示徽标，通常用于展示未读消息数量、状态标记等。在 nvue 页面中，uni-badge 的 type 属性可能会遇到无效的情况，这通常是由于 nvue 页面的渲染机制与 vue 页面不同所导致的。

原因分析

nvue 页面使用的是原生渲染引擎，而 vue 页面使用的是 WebView 渲染引擎。由于渲染机制的不同，某些在 vue 页面中有效的属性或样式在 nvue 页面中可能无法正常工作。

解决方案

使用样式替代 type 属性：如果 type 属性无效，可以尝试通过自定义样式来实现类似的效果。例如，通过设置 background-color 和 color 来模拟不同的徽标类型。

<uni-badge :text="'3'" :inverted="true" class="custom-badge"></uni-badge>

.custom-badge {
    background-color: #ff0000; /* 红色背景 */
    color: #ffffff; /* 白色文字 */
}

使用 nvue 原生组件：如果 uni-badge 在 nvue 页面中无法满足需求，可以考虑使用 nvue 原生组件来实现类似的功能。例如，使用 text 和 view 组件来手动构建一个徽标。

<view class="badge-container">
    <text class="badge-text">3</text>
</view>

.badge-container {
    background-color: #ff0000;
    border-radius: 10px;
    padding: 2px 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.badge-text {
    color: #ffffff;
    font-size: 12px;
}