uni-app-x

展示全部

# uni.setNavigationBarColor(options) GitCode GitHub

设置导航条、状态栏颜色

# setNavigationBarColor 兼容性

Web	微信小程序	Android	iOS	HarmonyOS
4.0	4.41	√	4.11	4.61

注意当pages.json中设置导航栏为custom时：

状态栏的背景色将恒为透明。此时无法通过本API设置状态栏背景色。开发者可自行在状态栏区域放置view，设置背景色。
本API设置前景色frontColor时，会修改状态栏的前景色。

# 参数

名称

类型

必填

默认值

兼容性

描述

options

SetNavigationBarColorOptions

是

名称

类型

必备

默认值

兼容性

描述

frontColor

string

是

前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000

合法值

兼容性

描述

#ffffff

#000000

backgroundColor

string.ColorString

是

背景颜色值，有效值为十六进制颜色

success

(result: SetNavigationBarColorSuccess) => void

否

接口调用成功的回调函数

fail

(error: SetNavigationBarColorFail) => void

否

接口调用失败的回调函数

complete

(res: SetNavigationBarColorComplete) => void

否

接口调用结束的回调函数（调用成功、失败都会执行）

animation

SetNavigationBarColorOptionsAnimation

否

动画效果

名称

类型

必备

默认值

兼容性

描述

duration

number

否

动画变化时间，单位 ms

timingFunc

string

否

动画变化方式

可选值：
- 'linear': 动画从头到尾的速度是相同的;
- 'easeIn': 动画以低速开始;
- 'easeOut': 动画以低速结束;
- 'easeInOut': 动画以低速开始和结束;

合法值

兼容性

描述

linear

easeIn

easeOut

easeInOut

# SetNavigationBarColorSuccess 的属性值

名称

类型

必备

默认值

兼容性

描述

errMsg

string

是

# SetNavigationBarColorFail 的属性值

名称

类型

必备

默认值

兼容性

描述

errCode

number

是

设置导航栏字体颜色错误码
- 4: 框架内部异常

errSubject

string

是

统一错误主题（模块）名称

data

any

否

错误信息中包含的数据

cause

Error

否

源错误信息，可以包含多个错误，详见SourceError

errMsg

string

是

# SetNavigationBarColorComplete 的属性值

名称

类型

必备

默认值

兼容性

描述

errMsg

string

是

# 返回值

类型

必备

Promise<SetNavigationBarColorSuccess>

否

名称

类型

必备

默认值

兼容性

描述

errMsg

string

是

# 示例

示例为hello uni-app x alpha分支，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例另见

示例

<template>
  <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="goNavbarLite" class="uni-btn">
      跳转自定义导航栏页面
    </button>
  </view>
</template>

<script>
  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)
      },
      goNavbarLite() {
        uni.navigateTo({
          url: '/pages/template/navbar-lite/navbar-lite'
        })
      }
    },
  }
</script>