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

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

上一个页面传递的参数文章来源地址https://www.toymoban.com/news/detail-454395.html

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

到了这里,关于uni-app动态修改导航栏标题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【uni-app】自定义导航栏

    新手刚玩 uniapp 进行微信小程序,甚至多端的开发。 原生uniapp 的导航栏,并不能满足 ui 的需求,所以各种查阅资料,导航栏自定义内容 整理如下: 需要修改的文件如下: 1、pages.json 修改pages.json,启动导航栏自适应,设置\\\" navigationStyle\\\": \\\"custom\\\" 2、system_info.js 新建 system_info

    2024年02月16日
    浏览(53)
  • uni-app顶部导航条固定

    1.准备 scroll-view 滚动容器,包裹需要滚动的区域 2.给父容器page设置高度为100%,完全撑开,开启并flex弹性盒,给滚动容器设值flex值为1 这里父容器必须要给高度,要不然顶部固定不起效

    2024年02月02日
    浏览(42)
  • uni-app 头部导航条改为背景图

    将某一页面的导航条,改为背景图 1.在pages.json文件中将要修改的页面,style中的“navigationStyle”设置为custom,取消默认的原生导航栏 2.在要修改的页面中如index1页面 效果如图   苹果手机导航条文字在中间位置,安卓手机导航条问题在靠左位置,更改某一页面,将会与其他页

    2024年02月11日
    浏览(50)
  • uni-app uView自定义底部导航栏

    因项目需要自定义底部导航栏,我把它写在了组件里,基于uView2框架写的(vue2);   在components下创建tabbar.vue文件,代码如下:  app.vue (有没有大佬知道为什么这个样式加载app.vue里才生效)  pages.json配置 页面使用: ( mine.vue ) 注: current是底部导航栏的下标,你在tabb

    2024年02月14日
    浏览(79)
  • uni-app 微信小程序自定义导航栏

    上面的导航栏主要由状态栏(就是手机电量显示栏)和小程序的导航栏组成,android手机一般为48px,ios手机一般为44px 1、设置navigationStyle:custom 2、页面导航栏div 3、获取statusBarHeight高度 4、获取navTitleHeight的高度

    2024年02月14日
    浏览(58)
  • 【uni-app】【01】底部导航栏与页面切换

    1.(配置文件在哪)uni-app 路由控制是在 pages.json 文件中的。 2.(基本配置项有哪些)初学的时候主要有三个配置项,① pages ② globalStyle ③ tabbar [!TOC] 接下来主要是对这三个配置项做一个简单介绍。 负责页面管理。不需要自己写的,你在项目的 pages 文件夹下创建页面会自动生成配

    2023年04月27日
    浏览(55)
  • uni-app 实现凸起的 tabbar 底部导航栏

    效果图 在 pages.json 中设置隐藏自带的 tabbar 导航栏 新建一个 custom-tabbar.vue 自定义组件页面 底部安全区域的适配问题可查看:uni-app 苹果手机底部安全区域的适配问题 在 main.js 中引用组件 在要用到的页面中直接调用

    2024年02月07日
    浏览(54)
  • uni-app微信小程序,APP都适用自定义顶部导航

    *使用自定义的导航样式,首先需要把原生的顶部的导航方式给隐藏掉(\\\"navigationStyle\\\": \\\"custom\\\") *手机顶部手机状态栏的高度 *微信小程序中胶囊的位置信息存储(使用store存储) *由于微信小程序中带有导航胶囊,所以需要根据胶囊去获取一定的参数信息 在微信小程序中,我们只需要获

    2024年02月06日
    浏览(58)
  • uni-app自定义微信小程序头部导航栏

    目录 一、子组件代码 1、完整子组件代码  2、子组件配置项Props  二、父组件引用代码  1 、将头部导航注册成全局组件(main.js) 2、获取设备信息(App.vue) 3、页面导入自定义导航组件 (3-1)、默认配置效果图例 (3-2)、更改配置效果图例  1、完整子组件代码  2、子组件

    2024年02月03日
    浏览(56)
  • uni-app实现自定义导航栏,兼容H5、App、微信小程序

    很多情况下,系统自带的导航栏无法满足UI设计的要求,这时候就需要我们自定义导航栏来实现需求,要考虑跨端的多种情况,这里我们封装成一个组件来使用,实现效果如下: 一、H5、App、微信小程序的区别 1.H5:导航栏高度可以设为44px,它没有状态栏,因为H5端运行在浏览

    2024年04月13日
    浏览(69)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包