对导航栏标题进行修改,直接使用就可以
uni.setNavigationBarTitle({
title: "标题名称"
});
动态修改标题名称,数据可能是从上一个页面传递过来的,直接在onLoad
页面周期函数中使用
onLoad(props) {
console.log(props,"onLoad");//获取上一个页面传递的数据
if (props?.title) {
const titleType = props.title;
let barTitle = "预约会议";
switch (titleType) {
case "order":
barTitle = '预约会议';
break;
case "create":
barTitle = '创建会议';
break;
case "edit":
barTitle = '编辑会议';
break;
default:
break;
}
uni.setNavigationBarTitle({
title: barTitle
});
}
}
⚠️可能会出现在网页中切换标题正常,但是在真机中没有效果,通过查看官网看到这么一句话
如果需要在页面进入时设置标题,可以在
onReady
内执行,以避免被框架内的修改所覆盖。如果必须onShow
内执行需要延迟一小段时间
打印页面生命周期发现onLoad
先于onReady
执行,所以即使数据是上一个页面传递过来的,也不会影响标题的展示。
第一步,我们可以在data中定义一个变量headerTitle
data(){
return {
headerTitle:"",//导航栏的标题
}
}
第二步,在onLoad
页面周期中去获取上一个页面传递的参数,然后对headerTitle
进行赋值,方便我们接下来的使用
onLoad(props) {
console.log(props,"onLoad");//获取上一个页面传递的数据
if (props?.title) {
const titleType = props.title;
let barTitle = "预约会议";
switch (titleType) {
case "order":
barTitle = '预约会议';
break;
case "create":
barTitle = '创建会议';
break;
case "edit":
barTitle = '编辑会议';
break;
default:
break;
}
this.headerTitle=barTitle
}
}
最后,需要在onReady
中进行设置标题,⚠️onReady中没有接收的参数
onReady(){
uni.setNavigationBarTitle({
title: this.headerTitle
});
}
通过借助两个页面周期函数,可以实现动态修改导航栏标题文章来源:https://www.toymoban.com/news/detail-454395.html
上一个页面传递的参数文章来源地址https://www.toymoban.com/news/detail-454395.html
const type = 'create';//传递给下一个页面的参数
uni.navigateTo({
url: `/pages/bookAMeeting/index?title=${type}`
})
到了这里,关于uni-app动态修改导航栏标题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!