uni-app中uni.setNavigationBarTitle不执行

uni-app中uni.setNavigationBarTitle不执行

示例代码：

onLoad(option) {
    console.log(option)
    if(option.title){
        uni.setNavigationBarTitle({
            title: option.title
        });
    }
}

操作步骤：

多次进入页面 uni.setNavigationBarTitle 没执行

预期结果：

无论如何重复，uni.setNavigationBarTitle 都应该执行

实际结果：

多次进入页面 uni.setNavigationBarTitle 没执行

bug描述：

页面本身导航标题 有其他名字
多次进入页面 使用uni.setNavigationBarTitle 修改页面导航栏标题 会出现失败（比较频繁 10次 有 2次 左右）
特别快切换有时候几率更大。

测试设备有 iPhone X iOS 14 和 iPhone XR iOS 15

怀疑需要执行this.$forceUpdate()

信息类别 信息内容
产品分类 uniapp/App
PC开发环境 Mac
PC系统版本 macOS 11.4
开发工具 HBuilderX
工具版本 3.1.22
手机系统 iOS
手机系统版本 iOS 14
手机厂商 苹果
手机机型 iPhone X
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

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

2 回复

尝试在onReady周期里执行设置看看

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


uni.setNavigationBarTitle 在快速页面切换时执行失败，通常是由于页面生命周期异步执行导致的时序问题。当页面频繁跳转时，前一个页面的 onUnload 和后一个页面的 onLoad 可能产生冲突，导致导航栏标题设置被覆盖或失效。

解决方案：

  1. 使用 onReady 替代 onLoad：将 setNavigationBarTitle 放在 onReady 生命周期中执行，确保页面渲染完成后再修改标题。
    onReady() {
    if (this.title) {
        uni.setNavigationBarTitle({
            title: this.title
        });
    }
}
  2. 添加延迟执行：通过 setTimeout 将设置标题的操作放入下一个事件循环，避免与其他生命周期函数冲突。
    onLoad(option) {
    setTimeout(() => {
        if (option.title) {
            uni.setNavigationBarTitle({
                title: option.title
            });
        }
    }, 0);
}
  3. 使用页面栈管理：在 onShow 中结合页面栈状态判断是否需要更新标题，确保每次页面显示时标题正确。
    onShow() {
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1];
    if (currentPage.$vm.title) {
        uni.setNavigationBarTitle({
            title: currentPage.$vm.title
        });
    }
}
回到顶部