uni-app动态修改导航栏标题

对导航栏标题进行修改，直接使用就可以

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
     });}

通过借助两个页面周期函数，可以实现动态修改导航栏标题

上一个页面传递的参数

const type ='create';//传递给下一个页面的参数
uni.navigateTo({url:`/pages/bookAMeeting/index?title=${type}`})