动态设置当前页面标题
uni.setNavigationBarTitle(OBJECT) ， 用于动态设置当前页面的标题。
-
如果需要在页面进入时设置标题，可以在onReady内执行，以避免被框架内的修改所覆盖。如果必须在onShow内执行需要延迟一小段时间。
Object参数说明
| 参数 |
类型 |
必填 |
说明 |
| title |
String |
是 |
页面标题 |
| success |
Function |
否 |
接口调用成功时回调函数 |
| fail |
Function |
否 |
接口调用失败时回调函数 |
| complete |
Function |
否 |
接口调用结束的回调函数（调用成功、调用失败都会执行） |
示例
uni.setNavigationBarTitle({
title: '新的标题'
});
设置页面导航条颜色
uni.setNavigationBarColor(OBJECT)，设置页面导航栏的颜色。
- 设置页面导航条颜色。如果需要进入页面就设置颜色，请延迟执行，防止被框架内设置颜色逻辑覆盖。
- 如果需要在页面进入时设置标题，可以在
onReady内执行，以避免被框架内的修改所覆盖。如果必须在onShow内执行需要延迟一小段时间。
- Android 上的 backgroundColor 参数有限制，黑色大于 rgb(30,30,30), 白色小于 rgb(235,235,235)。
平台差异说明
| APP |
H5 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节跳动小程序 |
QQ小程序 |
| √ |
√ |
√ |
√ |
√ |
√ |
√ |
Object参数说明
| 参数 |
类型 |
必填 |
说明 |
平台差异 |
| fronColor |
String |
是 |
前景颜色，包括按钮、标题、状态栏的颜色，仅支持#ffffff和#000000 |
App、H5、微信小程序、百度小程序 |
| backgroundColor |
String |
是 |
背景颜色值，有效值为十六进制颜色 |
|
| animation |
Object |
否 |
动画效果，{duration，timeingFunc} |
微信小程序、百度小程序 |
| success |
Function |
否 |
接口盗用成功的回调函数 |
|
| fail |
Function |
否 |
接口调用失败的回调函数 |
|
| complete |
Function |
否 |
接口调用结束的回调函数（调用成功，调用失败都会执行） |
|
animation结构
| 属性 |
类型 |
默认值 |
必填 |
说明 |
| duration |
number |
0 |
否 |
动画变化时间，单位ms |
| timingFunc |
String |
'linear' |
否 |
动画变化方式 |
animation.timingFunc有效值
| 值 |
说明 |
| linear |
动画从头到尾的速度是相同的。 |
| easeln |
动画以低速开始 |
| easeOut |
动画以低速结束 |
| easelnOut |
动画以低速开始和结束 |
success返回参数
| 参数 |
类型 |
说明 |
| errMsg |
String |
调用结果 |
示例
1 uni.setNavigationBarColor({
2 frontColor: '#ffffff',
3 backgroundColor: '#ff0000',
4 animation: {
5 duration: 400,
6 timingFunc: 'easeIn'
7 }
8 })
animation，使得导航栏颜色有渐变的动画过程。
在当前页面显示导航条加载动画
uni.showNavigationBarLoading(Object)。在当前页面显示导航条加载动画。
平台差异说明
| App |
H5 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节跳动小程序 |
QQ小程序 |
| × |
√ |
√ |
√ |
√ |
× |
√ |
注：App平台调用此API时会在屏幕中间悬浮显示loading
Object参数说明
| 参数 |
类型 |
必填 |
说明 |
| sucess |
Function |
否 |
接口调用成功回调函数 |
| fail |
Function |
否 |
接口调用失败回调函数 |
| complete |
Function |
否 |
接口调用结束回调函数（调用成功、调用失败都会执行） |
示例
uni.showNavigationBarLoading()
在当前页面隐藏导航条加载动画
uni.hideNavigationBarLoading(OBJECT)。当前页面隐藏导航条动画。
-
微信小程序自基础库版本2.8.3开始支持
-
当用户打开的小程序最底层页面是非首页时，默认展示“返回首页”按钮，开发者可在页面onShow中调用hideHomeButton进行隐藏。
平台差异说明
| App |
H5 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节跳动小程序 |
QQ小程序 |
| × |
√ |
√ |
√ |
√ |
× |
√ |
Object参数说明
| 参数 |
类型 |
必填 |
说明 |
| sucess |
Function |
否 |
接口调用成功回调函数 |
| fail |
Function |
否 |
接口调用失败回调函数 |
| complete |
Function |
否 |
接口调用结束回调函数（调用成功、调用失败都会执行） |
示例
uni.hideNavigationBarLoading()
隐藏返回首页按钮
uni.hideNavigationBarLoading()。隐藏返回首页按钮。
平台差异说明
| App |
H5 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节跳动小程序 |
QQ小程序 |
| × |
× |
√ |
× |
× |
1.48.0+ |
1.10.0+ |
Object参数说明
| 参数 |
类型 |
必填 |
说明 |
| sucess |
Function |
否 |
接口调用成功回调函数 |
| fail |
Function |
否 |
接口调用失败回调函数 |
| complete |
Function |
否 |
接口调用结束回调函数（调用成功、调用失败都会执行） |
示例
参考网址
- https://uniapp.dcloud.io/api/ui/navigationbar
