navigationbar.md 5.0 KB
Newer Older
Q
qiang 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167
### uni.setNavigationBarTitle(OBJECT)

动态设置当前页面的标题。

**OBJECT参数说明**

|参数|类型|必填|说明|
|:-|:-|:-|:-|
|title|String|是|页面标题|
|success|Function|否|接口调用成功的回调函数|
|fail|Function|否|接口调用失败的回调函数|
|complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)|

**示例**

```javascript
uni.setNavigationBarTitle({
	title: '新的标题'
});
```

**注意**

- 如果需要在页面进入时设置标题,可以在`onReady`内执行,以避免被框架内的修改所覆盖。如果必须在`onShow`内执行需要延迟一小段时间


### uni.setNavigationBarColor(OBJECT)

设置页面导航条颜色。**如果需要进入页面就设置颜色,请延迟执行,防止被框架内设置颜色逻辑覆盖**

**平台差异说明**

|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|√|√|√|

**OBJECT参数说明**

|参数|类型|必填|说明|平台差异说明|
|:-|:-|:-|:-|:-|
|frontColor|String|是|前景颜色值,包括按钮、标题、状态栏的颜色,仅支持 #ffffff 和 #000000|App、H5、微信小程序、百度小程序|
|backgroundColor|String|是|背景颜色值,有效值为十六进制颜色||
|animation|Object|否|动画效果,{duration,timingFunc}|微信小程序、百度小程序|
|success|Function|否|接口调用成功的回调函数||
|fail|Function|否|接口调用失败的回调函数||
|complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)| |

**注意**
- Android 上的 backgroundColor 参数有限制,黑色大于 rgb(30,30,30), 白色小于 rgb(235,235,235)
- 如果需要在页面进入时设置标题,可以在`onReady`内执行,以避免被框架内的修改所覆盖。如果必须在`onShow`内执行需要延迟一小段时间

**animation 结构**

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

**animation.timingFunc 有效值**

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

**success返回参数说明**

|参数名|类型|说明|
|:-|:-|:-|
|errMsg|String|调用结果|

**示例**

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

### uni.showNavigationBarLoading(OBJECT)

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

**平台差异说明**

|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|√|√|√|√|x|√|√|

App平台调用此API时会在屏幕中间悬浮显示loading

**OBJECT参数说明**

|参数|类型|必填|说明|
|---|---|---|---|
|success|Function|否|接口调用成功的回调函数|
|fail|Function|否|接口调用失败的回调函数|
|complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)|

**示例**

```javascript
uni.showNavigationBarLoading()
```

### uni.hideNavigationBarLoading(OBJECT)

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

**平台差异说明**

|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|√|√|√|√|x|√|√|

App平台调用此API时会关闭屏幕中间悬浮显示的loading

**OBJECT参数说明**

|参数|类型|必填|说明|
|---|---|---|---|
|success|Function|否|接口调用成功的回调函数|
|fail|Function|否|接口调用失败的回调函数|
|complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)|

**示例**

```javascript
uni.hideNavigationBarLoading()
```


### uni.hideHomeButton(OBJECT)

隐藏返回首页按钮。

**平台差异说明**

|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|快手小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|x|x|√|x|x|1.48.0+|1.10.0+|x|


**OBJECT参数说明**

|参数|类型|必填|说明|
|---|---|---|---|
|success|Function|否|接口调用成功的回调函数|
|fail|Function|否|接口调用失败的回调函数|
|complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)|

**示例**

```javascript
uni.hideHomeButton()
```

**说明**
- 微信小程序自基础库版本2.8.3开始支持
- 当用户打开的小程序最底层页面是非首页时,默认展示“返回首页”按钮,开发者可在页面`onShow`中调用`hideHomeButton`进行隐藏。