uni-app iOS导航栏按钮角标无法显示，只能显示红点

uni-app iOS导航栏按钮角标无法显示，只能显示红点

开发环境 版本号 项目创建方式
Windows 18363 HBuilderX
iOS iOS 13.4

示例代码：

var webView = this.$mp.page.$getAppWebview();  
webView.setTitleNViewButtonBadge({    
index: 0,  
text: 9  
});

操作步骤：

运行以上脚本即可，必现

预期结果：

正常显示角标

实际结果：

只显示红点

bug描述：

iOS端只能显示红点，无法正常显示角标：

var webView = this.$mp.page.$getAppWebview();  
webView.setTitleNViewButtonBadge({    
index: 0,  
text: 9  
});

更多关于uni-app iOS导航栏按钮角标无法显示，只能显示红点的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

hello uni-app 中模板-顶部导航标题栏-导航栏带红点和角标，跑一下看看有没有问题

更多关于uni-app iOS导航栏按钮角标无法显示，只能显示红点的实战教程也可以访问 https://www.itying.com/category-93-b0.html


已解决，iOS对text字段类型有要求，我设置为数字就不行，必须是字符串才可以。

这是iOS系统对导航栏按钮角标的限制问题。在iOS上，原生导航栏按钮默认只支持显示红点而不支持显示数字角标。这是平台特性而非uni-app的bug。

解决方案：

  1. 使用自定义导航栏替代原生导航栏
  2. 在自定义导航栏中实现带数字的角标样式
  3. 或者考虑使用tabBar的角标功能，它支持数字显示

示例代码修改为自定义导航栏方案：

// 在pages.json中配置自定义导航栏
{
  "navigationStyle": "custom"
}

// 页面中使用view模拟导航栏和角标
<view class="custom-nav">
  <view class="nav-btn" [@click](/user/click)="handleClick">
    <view class="badge">9</view>
  </view>
</view>

<style>
.badge {
  position: absolute;
  top: 0;
  right: 0;
  background-color: red;
  color: white;
  border-radius: 10px;
  padding: 2px 6px;
  font-size: 12px;
}
</style>
回到顶部