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