uniapp 动态改变胶囊颜色

uni.setNavigationBarColor(OBJECT)

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

一、 OBJECT参数说明

参数	类型	必填	说明	平台差异说明
frontColor	String	是	前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000	App、H5、微信小程序、百度小程序、字节跳动小程序、QQ小程序、快手小程序、京东小程序
backgroundColor	String	是	背景颜色值，有效值为十六进制颜色
animation	Object	否	动画效果，{duration,timingFunc}	微信小程序、百度小程序、QQ小程序、快手小程序、京东小程序
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	调用结果

示例

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

 

二、有这样一种设定，一进来没有导航栏只有返回按钮，胶囊颜色为黑色半透明，等滑动到一定高度以后导航栏出现，胶囊变成白色。
需要在js里面用到 uni.setNavigationBarColor，它有两个参数一起设定可以改变胶囊颜色，需要注意颜色要用十六进制

当胶囊为黑色半透明

uni.setNavigationBarColor({
      backgroundColor:'#ffffff',
      frontColor:'#ffffff',
})

当胶囊为白色

uni.setNavigationBarColor({
      backgroundColor:'#000000',
      frontColor:'#000000',
})

 

三、如果是指定页面胶囊颜色，之后不做改变，可以直接在pages.json文件里面配置：

胶囊为白色背景，黑色图标

"globalStyle": {
		"navigationBarTextStyle": "black",
	}

胶囊为黑色半透明，白色图标

"globalStyle": {
		"navigationBarTextStyle": "white",
    }

 

四、附带监听页面滚动，滑动到某一节点位置时改变胶囊颜色的方法：

onPageScroll(e){
        this.pageScrollTop = Math.floor(e.scrollTop);
},
computed: {
			// 渐变导航
			topNavStyle() {
				let r = this.pageScrollTop / 300;
				let re = 0.5 / this.pageScrollTop;
				let topNavStyle = 0;
				if (r >= 1) {
					topNavStyle = 1;
					uni.setNavigationBarColor({
						backgroundColor:'#000000',
						frontColor:'#000000'
					})
				} else {
					topNavStyle = r;
					uni.setNavigationBarColor({
						backgroundColor:'#ffffff',
						frontColor:'#ffffff'
					})
				}
				return topNavStyle
			},
}