动态修改顶部导航栏标题有两种方法
方式一、使用自定义到导航栏，覆盖原生导航栏
缺点：
自定义到导航栏性能远远不如原生导航栏，手机顶部状态栏区域会被页面内容覆盖，这是因为窗体是沉浸式的原因，即全屏可写
内容；如果存在下拉刷新，下拉刷新会从导航栏上面开始下拉加载，解决方案可采用offset偏移量，自定义下拉圈出现的位置
优点：可根据实际业务场景，开发符合自己UI的样式
1、会覆盖手机屏幕状态栏，解决方法:
1.1、要把状态栏的位置从前景部分让出来,可写一个占位符div
height:var(--status-bar-height);
width:100%;
}
2、需要配置pages.json里面的pages下style下navigationStyle:false
2.2、在指定页面用自定义到导航栏
2.3、代码如下：
{{info.title}}
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;
}
}
}
如果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
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |