uni.setNavigationBarColor(options) @setnavigationbarcolor

uni.setNavigationBarColor(options)

Parameters

SetNavigationBarColorOptions Values

Return value

AsyncApiSuccessResult Values

setNavigationBarColor Compatibility

# uni.setNavigationBarColor(options)

设置导航条、状态栏颜色

即便pages.json里没有配置NavigationBar，如需修改状态栏的前景背景，也需要本API。

# # Parameters

name	type	required	default	description
options	SetNavigationBarColorOptions	YES	-	-

# # SetNavigationBarColorOptions Values

name	type	optinal	default	description
frontColor	"#ffffff" \| "#000000"	YES	-	前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000
backgroundColor	string	YES	-	背景颜色值，有效值为十六进制颜色
success	(result: AsyncApiSuccessResult) => void	NO	-	接口调用成功的回调函数
fail	(error: UniError) => void	NO	-	接口调用失败的回调函数
complete	(res: AsyncApiResult) => void	NO	-	接口调用结束的回调函数（调用成功、失败都会执行）

# # AsyncApiResult Values

name	type	optinal	default	description
errMsg	string	YES	-	-

# # SetNavigationBarColorOptions Compatibility

	Android version	Android uni-app	Android uni-app-x	iOS version	iOS uni-app	iOS uni-app-x
frontColor	5.0	√	√	10.0	√	x
backgroundColor	5.0	√	√	10.0	√	x
success	5.0	√	√	10.0	√	x
fail	5.0	√	√	10.0	√	x
complete	5.0	√	√	10.0	√	x

# # Return value

Type	optinal
Promise<AsyncApiSuccessResult>	NO

# # AsyncApiSuccessResult Values

name	type	optinal	default	description
errMsg	string	YES	-	-

# # setNavigationBarColor Compatibility

Android version	Android uni-app	Android uni-app-x	iOS version	iOS uni-app	iOS uni-app-x
5.0	√	√	10.0	√	x

# # See also

setNavigationBarColor

Related Bug

# # Example

hello uni-app x

<template>
 <view>
   <page-head title="setNavigationBarColor"></page-head>
   <view class="uni-padding-wrap uni-common-mt">
     <button @tap="setNavigationBarColor1" class="uni-btn">
       设置导航条背景绿色，标题白色
     </button>
     <button @tap="setNavigationBarColor2" class="uni-btn">
       设置导航条背景红色，标题黑色
     </button>
     <button @tap="goCustomNavigation" class="uni-btn">
       跳转自定义导航栏页面
     </button>
   </view>
 </view>
</template>

<script lang="uts">
import { state, setLifeCycleNum } from '@/store/index.uts'

export default {
 methods: {
   setNavigationBarColor1() {
     uni.setNavigationBarColor({
       frontColor: '#ffffff',
       backgroundColor: '#00ff00',
       success: () => {
         console.log('setNavigationBarColor success')
         this.setLifeCycleNum(state.lifeCycleNum + 1)
       },
       fail: () => {
         console.log('setNavigationBarColor fail')
         this.setLifeCycleNum(state.lifeCycleNum - 1)
       },
       complete: () => {
         console.log('setNavigationBarColor complete')
         this.setLifeCycleNum(state.lifeCycleNum + 1)
       }
     })
   },
   setNavigationBarColor2() {
     uni.setNavigationBarColor({
       frontColor: '#000000',
       backgroundColor: '#ff0000',
       success: () => {
         console.log('setNavigationBarColor success')
         this.setLifeCycleNum(state.lifeCycleNum + 1)
       },
       fail: () => {
         console.log('setNavigationBarColor fail')
         this.setLifeCycleNum(state.lifeCycleNum - 1)
       },
       complete: () => {
         console.log('setNavigationBarColor complete')
         this.setLifeCycleNum(state.lifeCycleNum + 1)
       }
     })
   },
   // 自动化测试
   getLifeCycleNum(): number {
     return state.lifeCycleNum
   },
   // 自动化测试
   setLifeCycleNum(num: number) {
     setLifeCycleNum(num)
   },
   goCustomNavigation(){
     uni.navigateTo({
       url: '/pages/API/set-navigation-bar-color/set-custom-navigation-bar-color'
     })
   }
 },
}
</script>