uniapp的API之设置导航条

动态设置当前页面标题

uni.setNavigationBarTitle(OBJECT) ， 用于动态设置当前页面的标题。

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

Object参数说明

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

示例

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

设置页面导航条颜色

uni.setNavigationBarColor(OBJECT)，设置页面导航栏的颜色。

• 设置页面导航条颜色。如果需要进入页面就设置颜色，请延迟执行，防止被框架内设置颜色逻辑覆盖。
• 如果需要在页面进入时设置标题，可以在onReady内执行，以避免被框架内的修改所覆盖。如果必须在onShow内执行需要延迟一小段时间。
• Android 上的 backgroundColor 参数有限制，黑色大于 rgb(30,30,30), 白色小于 rgb(235,235,235)。

平台差异说明

APP	H5	微信小程序	支付宝小程序	百度小程序	字节跳动小程序	QQ小程序
√	√	√	√	√	√	√

 Object参数说明

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

animation结构

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

 animation.timingFunc有效值

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

 success返回参数

参数	类型	说明
errMsg	String	调用结果

示例

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

 animation，使得导航栏颜色有渐变的动画过程。

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

uni.showNavigationBarLoading(Object)。在当前页面显示导航条加载动画。

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	字节跳动小程序	QQ小程序
×	√	√	√	√	×	√

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

Object参数说明

参数	类型	必填	说明
sucess	Function	否	接口调用成功回调函数
fail	Function	否	接口调用失败回调函数
complete	Function	否	接口调用结束回调函数（调用成功、调用失败都会执行）

示例

uni.showNavigationBarLoading()

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

uni.hideNavigationBarLoading(OBJECT)。当前页面隐藏导航条动画。

• 微信小程序自基础库版本2.8.3开始支持

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

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	字节跳动小程序	QQ小程序
×	√	√	√	√	×	√

Object参数说明

参数	类型	必填	说明
sucess	Function	否	接口调用成功回调函数
fail	Function	否	接口调用失败回调函数
complete	Function	否	接口调用结束回调函数（调用成功、调用失败都会执行）

示例

uni.hideNavigationBarLoading()

隐藏返回首页按钮

uni.hideNavigationBarLoading()。隐藏返回首页按钮。

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	字节跳动小程序	QQ小程序
×	×	√	×	×	1.48.0+	1.10.0+

Object参数说明

参数	类型	必填	说明
sucess	Function	否	接口调用成功回调函数
fail	Function	否	接口调用失败回调函数
complete	Function	否	接口调用结束回调函数（调用成功、调用失败都会执行）

示例

uni.hideHomeButton()

参考网址

• https://uniapp.dcloud.io/api/ui/navigationbar