微信小程序页面滚动事件导致的点击事件延迟

起因

小程序上线之后发现一个奇怪的现象,页面向下滑动,点击事件会延迟几秒。滑动的越多,延迟就越久,点击会出现几秒才会能打开新的页面。前端同学没有排查出原因,更换了几种跳转方式问题依旧。

排查

review了一下代码,发现如下代码。能看出问题吗?

1
2
3
4
5
6
7
8
9
10
11
12
13
onPageScroll(e) {
if (this.data.offsetTop >= e.scrollTop && this.data.isFixed) {
this.getHeaderHeight();
this.setData({
isFixed: false
})
} else {
this.getHeaderHeight();
this.setData({
isFixed: true
})
}
}

页面滚动事件中会不断的执行 setData事件,导致事件阻塞。

更改成如下代码解决:

1
2
3
4
5
6
7
8
9
10
11
12
13
onPageScroll(e) {
if (this.data.offsetTop >= e.scrollTop && this.data.isFixed) {
this.getHeaderHeight();
this.setData({
isFixed: false
})
} else if(e.scrollTop > this.data.offsetTop && !this.data.isFixed){
this.getHeaderHeight();
this.setData({
isFixed: true
})
}
}