Sinea
Sinea
  • 发布:2019-10-18 17:18
  • 更新:2019-12-01 00:33
  • 阅读:2003

【报Bug】iOS真机中,transparentTitle滑动自适应时再设置导航栏背景色会失效

分类:uni-app

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);  
}

滚动过程效果如下:

期待效果是滑动后显示白底黑字导航栏:

2019-10-18 17:18 负责人:无 分享
已邀请:
DCloud_heavensoft

DCloud_heavensoft

虽然你邀请我了,但我看不懂你报的问题。
我只能说,1、onPageScroll在Android上性能不是特别好。2、千万不要用非自定义组件模式,那个性能更差。3、滚动渐变,pages.json里可以原生实现,尽量不要前端实现,性能不好

  • 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() {


        },  
    methods: {

    },
    onPageScroll(e){
    if(isT == false){
    n=n+3;
    if(n<10){
    a = m+'0'+n+r;
    }else if(n<100){
    a= m+n+r;
    }else if(n>100){
    n=99;
    a= m+n+r;
    }
    }else if(isT == true){
    n=n-3;
    if(n<0){
    n=0;
    a = m+'0'+n+r;
    }else if(n<10){
    a = m+'0'+n+r;
    }else if(n<100){
    a= m+n+r;
    }
    }

    if(e.scrollTop >= 40){
    uni.setNavigationBarColor({
    frontColor: '#ffffff',
    backgroundColor: '#000000'
    })
    isT = false;n=99;
    }else if(e.scrollTop>=0 && e.scrollTop<40){
    uni.setNavigationBarColor({
    frontColor: '#000000',
    backgroundColor: a
    })
    isT = true;
    }
    if(e.scrollTop<5&&isT==true){
    uni.setNavigationBarColor({
    frontColor: '#000000',
    backgroundColor: '#ffffff'
    })
    n=99;
    }
    console.log("11111:"+a+"22222:"+e.scrollTop);
    }
    }

    2019-12-09 21:03

该问题目前已经被锁定, 无法添加新回复