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
},
}
蓦然、回首,那人就在灯火阑珊处