iOS真机中,页面配置中transparentTitle设置为auto滑动自适应时,滚动页面进行动态设置导航栏uni.setNavigationBarColor,状态栏前景色设置成功,导航栏标题消失了,导航栏背景色变成透明状态,并且滚动中采用的防抖延迟执行设置导航栏。
HBuilderX版本为2.3.3.20190923
pages.json
"pages": [
{
"path": "pages/xx/xx",
"style" : {
"navigationBarTitleText": "页面标题",
"transparentTitle": "auto",
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#ffffff"
}
}
]
页面js
var gapTime = 1000;//间隔时间
var timer;
···
onPageScroll(e){
clearTimeout(timer);
timer = setTimeout(function() {
if(e.scrollTop >= 15){
uni.setNavigationBarColor({
frontColor: '#000000',
backgroundColor: '#ffffff'
})
}else{
uni.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#ffffff'
})
}
}, gapTime);
}
滚动过程效果如下:
期待效果是滑动后显示白底黑字导航栏:
Sinea (作者)
页面配置了pages.json的滚动渐变"transparentTitle": "auto",期望:在未滚动时状态栏白色字体、透明底色,滚动后状态栏黑色字体、白色底色,所以需要在滚动过程中设置前景色,这时候状态栏字体色是变了,但是导航栏不见了
2019-12-02 09:54
CLP
回复 Sinea: titleNView的type为transparent时,刚进页面不滚时,titleNview是透明的,所以看不到,只有滚动之后,会渐渐变为设置的颜色。你描述的黑色字体是按钮的字体对吧,底色只的是titleNview的颜色对吧
2019-12-04 15:31
Sinea (作者)
回复 CLP: 嗯是的。也是uni.setNavigationBarColor中对应的frontColor(字体色)、backgroundColor(底色)
2019-12-04 16:22
CLP
回复 Sinea: 那你有什么问题?你说的滚动的过程中设置前景色什么意思? 视图往上移动的时候,导航栏的颜色没有从透明变成你设置的颜色吗?
2019-12-04 16:39
Sinea (作者)
回复 CLP: 现在更新了问题,我把手机录屏上传了效果图片,你可以看一下
2019-12-06 10:55
CLP
回复 Sinea: HBuilderX版本是多少? 代码这部分代码怎么写的?
2019-12-06 11:22
CLP
我们官方的demo没有这问题啊
2019-12-06 11:23
Sinea (作者)
回复 CLP: 版本是2.4.2.20191115,另外pages.json中的"navigationBarTextStyle": "white", 我之前写错了,这样才可以页面一开始是白色状态栏字体,然后滚动后是通过uni.setNavigationBarColor设置黑色字体、白色背景
2019-12-06 11:32
CLP
回复 Sinea: 你提供个demo吧
2019-12-06 11:57
Sinea (作者)
回复 CLP: demo文件上传了
2019-12-06 14:29
CLP
回复 Sinea: 你代码写的有问题,你把onPageScroll这个全注释调。然后 白色改成 "navigationBarTextStyle": "black",
2019-12-06 18:38
CLP
滚动的过程,原生层会处理逻辑
2019-12-06 18:39
Sinea (作者)
回复 CLP: 不是哦, 我原代码是希望页面状态栏默认是白色字体,滚动后变成黑字白底啊
2019-12-07 12:46
CLP
回复 Sinea: 目前的逻辑做不到你想要的默认白色字体,默认只能是透明的,然后滚动之后,变成你要的黑字白底。
2019-12-09 16:41
CLP
回复 Sinea: 你试试,我的这个思路,先配置为float模式。然后看看我的代码,var n = 99;
var m = "#";
var r = 'ffffff';
var a = m+n+r;
var isT = true ;
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
2019-12-09 21:03