# 导航栏

## wx.showNavigationBarLoading <a href="#wx-shownavigationbarloading-object-object" id="wx-shownavigationbarloading-object-object"></a>

在当前页面显示导航条加载动画

### 参数 <a href="#can-shu" id="can-shu"></a>

#### Object object <a href="#object-object" id="object-object"></a>

| 属性       | 类型       | 默认值 | 必填 | 说明                       |
| -------- | -------- | --- | -- | ------------------------ |
| success  | function |     | 否  | 接口调用成功的回调函数              |
| fail     | function |     | 否  | 接口调用失败的回调函数              |
| complete | function |     | 否  | 接口调用结束的回调函数（调用成功、失败都会执行） |

### 呈现效果

![](https://3789401910-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MF_lLv3y87pOLfxROPC%2F-MGLz_oYOgvqLh6-FIGD%2F-MGM0RsJeAEmBe3DOjQD%2Fimage.png?alt=media\&token=8c6b6d3c-9d6f-4aae-8069-afeb57fd5399)

## wx.setNavigationBarTitle <a href="#wx-setnavigationbartitle-object-object" id="wx-setnavigationbartitle-object-object"></a>

动态设置当前页面的标题

### 参数 <a href="#can-shu" id="can-shu"></a>

#### Object object <a href="#object-object" id="object-object"></a>

| 属性       | 类型       | 默认值 | 必填 | 说明                       |
| -------- | -------- | --- | -- | ------------------------ |
| title    | string   |     | 是  | 页面标题                     |
| success  | function |     | 否  | 接口调用成功的回调函数              |
| fail     | function |     | 否  | 接口调用失败的回调函数              |
| complete | function |     | 否  | 接口调用结束的回调函数（调用成功、失败都会执行） |

### 示例代码 <a href="#shi-li-dai-ma" id="shi-li-dai-ma"></a>

```
wx.setNavigationBarTitle({
  title: '当前页面'
})
```

### 呈现效果

![](https://3789401910-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MF_lLv3y87pOLfxROPC%2F-MGLz_oYOgvqLh6-FIGD%2F-MGM37aLXb5tGtmoGwvT%2Fimage.png?alt=media\&token=e7f697cb-4db8-4597-b1b3-9e9bf8f76df2)

## wx.setNavigationBarColor <a href="#wx-setnavigationbarcolor-object-object" id="wx-setnavigationbarcolor-object-object"></a>

> 基础库 1.4.0 开始支持，低版本需做兼容处理。

设置页面导航条颜色

### 参数 <a href="#can-shu" id="can-shu"></a>

#### Object object <a href="#object-object" id="object-object"></a>

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

**object.animation 的结构**

| 属性         | 类型     | 默认值      | 必填 | 说明           |
| ---------- | ------ | -------- | -- | ------------ |
| duration   | number | 0        | 否  | 动画变化时间，单位 ms |
| timingFunc | string | 'linear' | 否  | 动画变化方式       |

**object.animation.timingFunc 的合法值**

| 值           | 说明            | 最低版本 |
| ----------- | ------------- | ---- |
| 'linear'    | 动画从头到尾的速度是相同的 |      |
| 'easeIn'    | 动画以低速开始       |      |
| 'easeOut'   | 动画以低速结束       |      |
| 'easeInOut' | 动画以低速开始和结束    |      |

### 示例代码 <a href="#shi-li-dai-ma" id="shi-li-dai-ma"></a>

```

wx.setNavigationBarColor({
  frontColor: '#ffffff',
  backgroundColor: '#ff0000',
  animation: {
    duration: 400,
    timingFunc: 'easeIn'
  }
})
```

### 呈现效果

![](https://3789401910-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MF_lLv3y87pOLfxROPC%2F-MGLz_oYOgvqLh6-FIGD%2F-MGM5KWSEWj-YlFGv2wd%2Fimage.png?alt=media\&token=5ece4aa8-a07b-4146-89b6-0bb95fb8a6ad)

## wx.hideNavigationBarLoading <a href="#wx-hidenavigationbarloading-object-object" id="wx-hidenavigationbarloading-object-object"></a>

在当前页面隐藏导航条加载动画

### 参数 <a href="#can-shu" id="can-shu"></a>

#### Object object <a href="#object-object" id="object-object"></a>

| 属性       | 类型       | 默认值 | 必填 | 说明                       |
| -------- | -------- | --- | -- | ------------------------ |
| success  | function |     | 否  | 接口调用成功的回调函数              |
| fail     | function |     | 否  | 接口调用失败的回调函数              |
| complete | function |     | 否  | 接口调用结束的回调函数（调用成功、失败都会执行） |

## wx.hideHomeButton <a href="#wx-hidehomebutton-object-object" id="wx-hidehomebutton-object-object"></a>

> 基础库 2.8.3 开始支持，低版本需做兼容处理。

隐藏返回首页按钮。微信7.0.7版本起，当用户打开的小程序最底层页面是非首页时，默认展示“返回首页”按钮，开发者可在页面 onShow 中调用 hideHomeButton 进行隐藏。

### 参数 <a href="#can-shu" id="can-shu"></a>

#### Object object <a href="#object-object" id="object-object"></a>

| 属性       | 类型       | 默认值 | 必填 | 说明                       |
| -------- | -------- | --- | -- | ------------------------ |
| success  | function |     | 否  | 接口调用成功的回调函数              |
| fail     | function |     | 否  | 接口调用失败的回调函数              |
| complete | function |     | 否  | 接口调用结束的回调函数（调用成功、失败都会执行） |