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动态修改导航栏标题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js实现iPhone界面风格的单选框和复选框按钮实例

    js实现iPhone界面风格的单选框和复选框按钮实例

    这篇文章主要介绍了js实现iPhone界面风格的单选框和复选框按钮,涉及javascript动态操作页面元素样式的相关技巧,非常美观大方,需要的朋友可以参考下
    2015-08-08
  • ES6扩展运算符的理解与使用场景

    ES6扩展运算符的理解与使用场景

    扩展运算符( spread )是三个点(...),它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列,这篇文章主要给大家介绍了关于ES6扩展运算符的理解与使用场景的相关资料,需要的朋友可以参考下
    2021-09-09
  • Bootstrap基础学习

    Bootstrap基础学习

    Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。它使用了流行的浏览器技术,给web开发提供了时尚的版式,表单,buttons,表格,网格系统等等。
    2015-06-06
  • JS中数组与对象相互转换的实现方式

    JS中数组与对象相互转换的实现方式

    这篇文章主要介绍了JS中数组与对象相互转换的实现方式,文章通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-04-04
  • JavaScript之json_动力节点Java学院整理

    JavaScript之json_动力节点Java学院整理

    这篇文章主要介绍了JavaScript之json,JSON它是一种数据交换格式。有兴趣的可以了解一下
    2017-06-06
  • 纯js封装的ajax功能函数与用法示例

    纯js封装的ajax功能函数与用法示例

    这篇文章主要介绍了纯js封装的ajax功能函数与用法,结合实例形式分析了基于JavaScript封装的ajax功能函数定义及与php后台交互相关操作技巧,需要的朋友可以参考下
    2018-05-05
  • js实现简单div拖拽功能实例

    js实现简单div拖拽功能实例

    这篇文章主要介绍了js实现简单div拖拽功能的方法,实例分析了javascript针对div层拖拽的实现技巧,需要的朋友可以参考下
    2015-05-05
  • 前端图片懒加载的原理与3种实现方式举例

    前端图片懒加载的原理与3种实现方式举例

    图片懒加载又称图片延时加载、惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力,下面这篇文章主要给大家介绍了关于前端图片懒加载的原理与3种实现方式的相关资料,需要的朋友可以参考下
    2023-03-03
  • js确认删除对话框适用于a标签及submit

    js确认删除对话框适用于a标签及submit

    这篇文章主要介绍的是一个js确认删除对话框适用于a标签及submit,非常好用,需要的朋友不要错过
    2014-07-07
  • js 手机号码合法性验证代码集合

    js 手机号码合法性验证代码集合

    下面是JS验证电话号码的代码,很实用,献给大家
    2012-09-09

最新评论