uni-app自定义底部导航栏（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}` })