# navigation-bar

> 基础库 2.9.0 开始支持，低版本需做[兼容处理](1003706)。

> __微信 Windows 版__：支持
> 
> __微信 Mac 版__：支持
> 
> __微信 鸿蒙 OS 版__：支持

渲染框架支持情况：WebView

## 功能描述

页面导航条配置节点，用于指定导航栏的一些属性。只能是 [page-meta](/miniprogram/dev/component/page-meta) 组件内的第一个节点，需要配合它一同使用。

通过这个节点可以获得类似于调用 [`wx.setNavigationBarTitle`](/miniprogram/dev/api/ui/navigation-bar/wx.setNavigationBarTitle.md) [`wx.setNavigationBarColor`](/miniprogram/dev/api/ui/navigation-bar/wx.setNavigationBarColor.md) 等接口调用的效果。

## 属性说明

| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
| ---- | ---- | ------ | -------- | ---- | -------- |
| title | string |  | 否 | 导航条标题 | [2.9.0](1003706) |
| loading | boolean | false | 否 | 是否在导航条显示 loading 加载提示 | [2.9.0](1003706) |
| front-color | string |  | 否 | 导航条前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 `#ffffff` 和 `#000000` | [2.9.0](1003706) |
| background-color | string |  | 否 | 导航条背景颜色值，有效值为十六进制颜色 | [2.9.0](1003706) |
| color-animation-duration | number | 0 | 否 | 改变导航栏颜色时的动画时长，默认为 `0` （即没有动画效果） | [2.9.0](1003706) |
| color-animation-timing-func | string | "linear" | 否 | 改变导航栏颜色时的动画方式，支持 `linear` 、 `easeIn` 、 `easeOut` 和 `easeInOut` | [2.9.0](1003706) |

## 示例代码

```html
<page-meta>
  <navigation-bar
    title="{{nbTitle}}"
    loading="{{nbLoading}}"
    front-color="{{nbFrontColor}}"
    background-color="{{nbBackgroundColor}}"
    color-animation-duration="2000"
    color-animation-timing-func="easeIn"
  />
</page-meta>
```

```javascript
Page({
  data: {
    nbFrontColor: '#000000',
    nbBackgroundColor: '#ffffff',
  },
  onLoad() {
    this.setData({
      nbTitle: '新标题',
      nbLoading: true,
      nbFrontColor: '#ffffff',
      nbBackgroundColor: '#000000',
    })
  }
})
```