nuve页面预加载之后动态设置导航栏标题不生效在uni-app中不进行预加载就可以设置

nuve页面预加载之后动态设置导航栏标题不生效在uni-app中不进行预加载就可以设置

测试过的手机：

华为mate40pro, 苹果12

示例代码：

uni.preloadPage({  
    url: '/pages/chat/test',  
    fail: (err) => {  
        console.log(err);  
    },  
    success: (res) => {  
        console.log(res);  
    }  
});

操作步骤：

uni.preloadPage({  
    url: '/pages/chat/test',  
    fail: (err) => {  
        console.log(err);  
    },  
    success: (res) => {  
        console.log(res);  
    }  
});

uni.setNavigationBarTitle({  
    title: '我尼玛'  
});

预期结果：

导航栏标题更改

实际结果：

导航栏标题更改不生效

bug描述：

对nvue进行预加载的处理之后，进入nvue的页面之后然后延迟2秒调用设置导航栏标题的Api:

setTimeout(() => {
    uni.setNavigationBarTitle({
        title: '我尼玛'
    });
}, 2000)

不会生效，不管延迟不延迟，都不会生效。如果不对当前的nvue页面预加载的话，就生效。


更多关于nuve页面预加载之后动态设置导航栏标题不生效在uni-app中不进行预加载就可以设置的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

没发现啥问题啊 <template>
<view>
ffffffffffff
<button @click=“test”>点</button>

</view>
</template> <script> export default { methods: { test() { uni.navigateTo({ url:'/pages/index/test' }) } }, onLoad() { } }; </script> <template> <view> nvue界面啊啊啊啊 </view> </template> <script> export default { data() { return { } }, onReady() { uni.setNavigationBarTitle({ title: '我尼玛' }); }, methods: { } } </script> <style> </style>

更多关于nuve页面预加载之后动态设置导航栏标题不生效在uni-app中不进行预加载就可以设置的实战教程也可以访问 https://www.itying.com/category-93-b0.html


先预加载nvue的页面，在你的第一个页面调用nvue的预加的页面方法之后，再进nvue的页面设置导航栏标题试试，这是预加载的代码 uni.preloadPage({ url: ‘/pages/chat/test’, fail: (err) => { console.log(err); }, success: (res) => { console.log(res); } });

这是一个已知的uni-app中nvue页面的预加载与导航栏标题设置的兼容性问题。在预加载nvue页面后，动态设置导航栏标题确实会出现失效的情况。

根本原因是预加载机制与nvue页面渲染流程的冲突。当使用uni.preloadPage预加载nvue页面时，页面实例已经提前创建，但导航栏的初始化可能已经完成，导致后续的setNavigationBarTitle调用无法正确更新。

目前可行的解决方案有：

  1. 在页面的onReady生命周期中设置标题：
onReady() {
    uni.setNavigationBarTitle({
        title: '新标题'
    });
}
  1. 使用页面配置的navigationBarTitleText属性：
{
    "navigationBarTitleText": "页面标题"
}
回到顶部