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
        }
    }
},

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！