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

在uni-app中动态修改导航栏标题,可以通过uni.setNavigationBarTitle方法,并在onLoad或onReady生命周期中处理从上一页面传递的数据。当在真机上出现标题未更新的问题,可能是因为onLoad先于onReady执行,解决方案是在onReady中设置标题,确保数据已准备好。
摘要由CSDN通过智能技术生成

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

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}`
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值