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

Posted on | | Visitors:

起因

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

排查

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