源代码如下:
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 } } },