title: swan.setNavigationBarColor header: develop nav: api sidebar: navigationbar_swan-setNavigationBarColor

webUrl: https://qft12m.smartapps.cn/swan-api/set-navigation-bar-color/set-navigation-bar-color

解释：动态设置当前页面导航条的颜色。

方法参数

Object object

object参数说明

属性名 类型 必填 默认值 说明
frontColor String 是 前景颜色值，包括按钮、标题、状态栏的颜色，有效值 #ffffff 和 #000000。
backgroundColor String 是 背景颜色值，有效值为十六进制颜色。
animation Object 否 动画效果
success Function 否 接口调用成功的回调函数
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）

animation

属性名 类型 必填 默认值 说明
duration Number 否 0 动画变化时间，单位：毫秒。
timingFunc String 否 linear 动画变化方式

animation.timingFunc 有效值

值 说明
linear 动画从头到尾的速度是相同的。
easeIn 动画以低速开始
easeOut 动画以低速结束。
easeInOut 动画以低速开始和结束。

示例

扫码体验

webUrl: https://qft12m.smartapps.cn/swan-api/set-navigation-bar-color/set-navigation-bar-color - 图1 请使用百度APP扫码

代码示例1 ：

在开发者工具中预览效果

:::codeTab

  1. <view class="container">
  2.     <view class="card-area">
  3.         <view class="top-description border-bottom">
  4.             <view>设置当前页面导航条颜色</view>
  5.             <view>色值为: #ff0000</view>
  6.         </view>
  7.         <button bind:tap="setNavigationBarColor" type="primary" hover-stop-propagation="true">点击设置</button>
  8.     </view>
  9. </view>
  1. Page({
  2.     setNavigationBarColor() {
  3.         swan.setNavigationBarColor({
  4.             frontColor: '#ffffff',
  5.             backgroundColor: '#3C76FF',
  6.             animation: {
  7.                 duration: 500,
  8.                 timingFunc: 'linear'
  9.             },
  10.             success: res => {
  11.                 console.log('setNavigationBarColor success');
  12.             },
  13.             fail: err => {
  14.                 console.log('setNavigationBarColor fail', err);
  15.             }
  16.         });
  17.     }
  18. });

:::

代码示例2 ：

在开发者工具中预览效果

:::codeTab

  1. Page({
  2.     setNavigationBarColor() {
  3.         swan.setNavigationBarColor({
  4.             frontColor: '#000000',
  5.             backgroundColor: '#3C76FF',
  6.             animation: {
  7.                 duration: 500,
  8.                 timingFunc: 'linear'
  9.             },
  10.             success: res => {
  11.                 console.log('setNavigationBarColor success');
  12.             },
  13.             fail: err => {
  14.                 console.log('setNavigationBarColor fail', err);
  15.             }
  16.         });
  17.     }
  18. });

:::

错误码

Android

错误码 说明
1001 执行失败

iOS

错误码 说明
202 解析失败，请检查参数是否正确