uni-app动态修改导航栏标题简单步骤

 更新时间:2023年06月12日 14:30:47   作者:Ciao_Traveler  
uniapp作为一款开源软件,可以做到一端多用,不过也有局限,在开发中有时候需要动态的去修改标题,下面这篇文章主要给大家介绍了关于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}`
})

总结

到此这篇关于uni-app动态修改导航栏标题的文章就介绍到这了,更多相关uni-app动态修改导航栏标题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript 进度条实现代码(Firefox等相似浏览器下不支持)

    JavaScript 进度条实现代码(Firefox等相似浏览器下不支持)

    JavaScript实现的进度条,可惜在Firefox等相似浏览器下不支持(远程)
    2009-07-07
  • javascript实现对表格元素进行排序操作

    javascript实现对表格元素进行排序操作

    这篇文章主要介绍了javascript实现对表格元素进行排序操作,分别可以实现点击之后排序和还原,和排升序和降序的功能,文章末尾附完整代码,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 如何使用json在前后台进行数据传输实例介绍

    如何使用json在前后台进行数据传输实例介绍

    需要把这些输入写入数据库,这里就用到json传入,先看一下后台如何生成要传输的数据,感兴趣的朋友可以参考下,希望可以帮助到你
    2013-04-04
  • 微信小程序实现虎年春节头像制作

    微信小程序实现虎年春节头像制作

    春节来临之际,看到有网友分享了网页版的虎年头像制作工具。本文将为大家介绍一个虎年春节头像制作小程序,文中的示例代码讲解详细,需要的可以参考一下
    2022-02-02
  • javascript中键盘事件用法实例分析

    javascript中键盘事件用法实例分析

    这篇文章主要介绍了javascript中键盘事件用法,实例分析了键盘事件包含的方法及具体使用技巧,需要的朋友可以参考下
    2015-01-01
  • javascript ES6中箭头函数注意细节小结

    javascript ES6中箭头函数注意细节小结

    这篇文章主要给大家总结了关于javascript ES6中箭头函数注意细节的相关资料,文中介绍的比较详细,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-02-02
  • JavaScript判断数据类型的四种方式总结

    JavaScript判断数据类型的四种方式总结

    JavaScript 作为一门动态语言,其灵活性是把双刃剑,一方面带来了开发的便利性,另一方面也给我们在类型判断时带来了挑战,特别是在处理类型转换和隐式转换的时候,所以本篇文章我们将探讨 JavaScript 中的数据类型判断方式及在实际项目中的应用,需要的朋友可以参考下
    2025-04-04
  • javascript中toFixed()四舍五入使用方法详解

    javascript中toFixed()四舍五入使用方法详解

    最近做的项目涉及到金额的计算,有一种方式就是进行四舍五入的规则进行小数点后面的尾数处理,以前一直以为toFixed方法就是四舍五入的,这里为大家分享一下
    2018-09-09
  • JavaScript实现拖拽效果

    JavaScript实现拖拽效果

    这篇文章主要为大家详细介绍了JavaScript实现拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析

    JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)

    这篇文章主要介绍了JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法,结合实例形式分析了javascript函数式编程中箭头函数相关概念、原理、用法及操作注意事项,需要的朋友可以参考下
    2019-05-05

最新评论