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

灰太狼 2023-02-17 11:10 33阅读 0赞

动态修改顶部导航栏标题有两种方法  
方式一、使用自定义到导航栏，覆盖原生导航栏

缺点：  
自定义到导航栏性能远远不如原生导航栏，手机顶部状态栏区域会被页面内容覆盖，这是因为窗体是沉浸式的原因，即全屏可写  
内容；如果存在下拉刷新，下拉刷新会从导航栏上面开始下拉加载，解决方案可采用offset偏移量，自定义下拉圈出现的位置  
优点：可根据实际业务场景，开发符合自己UI的样式  
1、会覆盖手机屏幕状态栏，解决方法:  
1.1、要把状态栏的位置从前景部分让出来,可写一个占位符div

<view class="status_bar">
        
    </view>
    <style>
      .status_bar { 
          height: var(--status-bar-height);
          width: 100%;
      }
    </style>

2、需要配置pages.json里面的pages下style下navigationStyle:false  
2.2、在指定页面用自定义到导航栏  
2.3、代码如下：

<view class="status_bar">
        
    </view>
    <view class="header">
    	<view @click="backButton" class="back-image-box">
    		<image class="back-image" src="/static/img/back.png" mode=""></image>
    	</view>
    	<view class="title">{ { info.title}}</view>
    	<view class="share-image-box">
    		<image @click="FenXiang()" class="share-image" src="/static/img/share.png" mode=""></image>
    	</view>
    </view>
    <style  scoped lang="scss">
    	.header{ 
    		position: fixed;
    		top: var(--status-bar-height);
    		left: 0;
    		z-index: 9;
    		height: 90rpx;
    		width: 100%;
    		z-index: 100;
    		display: flex;
    		justify-content: space-between;
    		white-space: nowrap;
    		text-overflow: ellipsis;
    		overflow: hidden;
    		background: -webkit-linear-gradient(left,#f53a3a,#f53b3a,#f64f46);
    		.back-image-box{ 
    			display: flex;
    			justify-content: flex-start;
    			height: 90rpx;
    			.back-image{ 
    				width: 50rpx;
    				height: 50rpx;
    				padding-top: 16rpx;
    				padding-left: 16rpx;
    			}
    		}
    		.title{ 
    			display: flex;
    			justify-content: center;
    			padding-top: 20rpx;
    			font-size: 32rpx;
    			color: #FFFFFF;
    			overflow: hidden;
    		}
    		.share-image-box{ 
    			display: flex;
    			justify-content: flex-end;
    			padding-left: 20rpx;
    			height: 90rpx;
    			.share-image{ 
    				width: 50rpx;
    				height: 50rpx;
    				padding-top: 16rpx;
    				padding-right: 30rpx;
    			}
    		}
    	}
    </style>

如果var(–status-bar-height)没有用或者报错，请引入uni.scss，uni.scss文件可以创建一个hello-uniapp，从里面拷贝过来  
注意事项 https://uniapp.dcloud.io/collocation/pages?id=customnav，访问此处链接查看

方法二、  
使用原生导航栏，通过API 动态修改  
pages.json 里面的配置原始的值不要改变  
如果需要在页面进入时设置标题，可以在onReady内执行，以避免被框架内的修改所覆盖。如果必须在onShow内执行需要延迟一小段时间  
在指定页面使用如下代码：

uni.setNavigationBarTitle({ 
        title: '新的标题'
    });
    uni.setNavigationBarColor({ 
        frontColor: '#000000', //前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000
        backgroundColor: '#F0AD4E', //背景颜色值，有效值为十六进制颜色
        animation: {   //动画效果
            duration: 400,
            timingFunc: 'easeIn'
        }
    })

文档地址：https://uniapp.dcloud.io/api/ui/navigationbar?id=setnavigationbartitle