首页 > 建站教程 > 前端框架 >  uni-app页面滚动onPageScroll渲染问题正文

uni-app页面滚动onPageScroll渲染问题

进行uni-app开发wx小程序时,测试那边遇到了一个情况:页面有概率拉到最顶端的时候 本应判断scrolltop<100的情况下导航条消失,但是小概率会发现置顶时仍带有透明度。根据手机配置,越老的手机出现的概率越高。



源代码如下:
onPageScroll(res) {
    //获取距离顶部距离
    const scrollTop = res.scrollTop;
    if(scrollTop > 0){
        // 导航条颜色透明渐变
        if(scrollTop<=100){
            this.tabOpacity = 0
        }else if(100<scrollTop&&scrollTop<=300){
            this.tabOpacity = scrollTop/300
        }else if(scrollTop>300){
            this.tabOpacity = 1
        }
    }
},
此时导航条有一定概率(还要看手机硬件配置)页面渲染出现渲染不及时。到顶部之后导航条没有完全消失的情况。
排查了很多因素,最后确定是由于onPageScroll 的使用,onPageScroll 进行监听时,视图层会频繁的向逻辑层发送数据导致出现问题;
所以简单的采用了减少实时渲染的次数:

修改后的代码:
onPageScroll(res) {
    //获取距离顶部距离
    const scrollTop = res.scrollTop;
    if(scrollTop > 0){
        // 导航条颜色透明渐变
        if(scrollTop<=100){
            this.tabOpacity = 0
        }else if(100<scrollTop&&scrollTop<=200){
            this.tabOpacity = 0.3
        }else if(200<scrollTop&&scrollTop<=300){
            this.tabOpacity = 0.6
        }else if(scrollTop>300){
            this.tabOpacity = 1
        }
    }
},