uni-app 原生导航栏中配置自定义按钮初次进入页面偶尔不显示

uni-app 原生导航栏中配置自定义按钮初次进入页面偶尔不显示

测试过的手机：

  • ios13.6，ios15.6
  • Android红米

示例代码：

"titleNView": {  
    "buttons": [{  
        "text": "\ue61b",  
            "fontSize": "24",  
            "fontSrc": "/static/fonts/iconfont.ttf"  
        }]  
    }

操作步骤：

  1. 初次进入页面
  2. 退出重新进入页面

预期结果：

不管什么时候进入页面都会显示自定义按钮

实际结果：

初次进入页面不显示自定义按钮

bug描述：

给页面配置原生导航栏，在导航栏右侧自定义一个搜索按钮，初次进入页面时候右上角的搜索图标没有显示出来，重新进入页面，显示正常【偶现】


| 信息类别     | 信息内容       |
|--------------|----------------|
| 产品分类     | uniapp/App     |
| PC开发环境   | Windows        |
| PC版本号     | 19044.1766     |
| HBuilderX类型| 正式           |
| HBuilderX版本| 3.5.3          |
| 手机系统     | 全部           |
| 手机厂商     | 华为           |
| 页面类型     | vue            |
| vue版本      | vue3           |
| 打包方式     | 云端           |
| 项目创建方式 | HBuilderX      |

更多关于uni-app 原生导航栏中配置自定义按钮初次进入页面偶尔不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

Android 11 Redmi K40 ,未复现问题。能否提供简单可复现示例（上传附件）【bug优先处理规则】https://ask.dcloud.net.cn/article/38139

更多关于uni-app 原生导航栏中配置自定义按钮初次进入页面偶尔不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


不好意思，是负责那页面开发的同事自己写错了，后面我才检查出来

这是一个已知的uni-app原生导航栏渲染问题，主要出现在页面初次加载时字体图标未能及时渲染的情况。以下是具体分析和解决方案：

  1. 问题原因：
  • 字体文件加载时机与导航栏渲染存在时序问题
  • iOS平台对字体加载的缓存机制较为严格
  • 云端打包时资源加载路径可能不稳定
  1. 解决方案： (1) 预加载字体方案：
// 在App.vue的onLaunch中预加载字体
onLaunch: function() {
    plus.io.resolveLocalFileSystemURL('_www/static/fonts/iconfont.ttf');
}

(2) 使用base64编码方案（推荐）：

"titleNView": {
    "buttons": [{
        "text": "",  // 直接使用unicode字符
        "fontSize": "24"
    }]
}
回到顶部