uni-app uni.setNavigationBarTitle在 onload中无效

uni-app uni.setNavigationBarTitle在 onload中无效

开发环境 版本号 项目创建方式
Windows 10 HBuilderX

示例代码：

onReady() {
uni.setNavigationBarTitle({
title: '七曜水族',
});
},  
onLoad(option) {  
  this.getData();  
    uni.setNavigationBarTitle({  
      title: 'titleText',  
      success:function(){  
        console.log('sucess')  
      },  
      fail:function(err){  
        console.log('fail',err)  
      }  
    });
}

操作步骤：

  1. hbuildx中h5模式编译运行；
  2. 微信小程序网页方式打开

预期结果：

onload中设置标题生效

实际结果：

onload中设置无效

bug描述：

uni.setNavigationBarTitle({
title: titleText,  
});

在onready中设置生效，onload中设置无效，sucess返回设置成功，加setTimeOut也不起作用。在android和微信小程序中有效。


更多关于uni-app uni.setNavigationBarTitle在 onload中无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

偶尔会起作用

更多关于uni-app uni.setNavigationBarTitle在 onload中无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


看看文档，有说明

这个问题是因为在H5平台下，导航栏标题的DOM渲染时机与页面生命周期不同步导致的。

原因分析：

  1. H5平台特性：在H5模式下，导航栏标题的DOM元素可能还未完全初始化完成，导致onLoad中设置标题无效
  2. 生命周期差异：onLoad触发时页面开始加载，但导航栏组件可能尚未挂载完成
  3. 平台兼容性：Android和小程序平台没有此问题，这是H5平台特有的渲染时序问题

解决方案：

方案1：使用onReady替代（推荐）

onReady() {
  uni.setNavigationBarTitle({
    title: '七曜水族'
  });
}

方案2：使用nextTick延迟执行

onLoad(option) {
  this.$nextTick(() => {
    uni.setNavigationBarTitle({
      title: 'titleText'
    });
  });
}

方案3：使用setTimeout微任务延迟

onLoad(option) {
  setTimeout(() => {
    uni.setNavigationBarTitle({
      title: 'titleText'
    });
  }, 0);
}

方案4：使用onShow生命周期

onShow() {
  uni.setNavigationBarTitle({
    title: 'titleText'
  });
}
回到顶部