自己实现的下拉刷新和浏览器下拉刷新同时触发,页面被刷新两次。碰到这种情况,我一般先确认改动有没有真的生效。

原因不复杂,没有阻止默认手势行为,也没有判断当前滚动位置。

「下拉刷新冲突」相关的验证我通常做两遍,改完一次、隔天再看一次,确认不是临时生效。日志级别临时调高可以,记得改回去,长期开着既占磁盘又掩盖真问题。

el.addEventListener('touchmove', (e) => {
  if (window.scrollY <= 0 && pulling) e.preventDefault();
}, { passive: false });

权限不要一口气开到最大,先加到够用再往上试,范围小才好收。把复现步骤压到三条以内,交给同事也能跑出来,才算真的定位清楚。

改动写完就同步给同事,下一个人踩同一个坑,成本还是你的。验证用真实数据走一遍,测试数据太干净,边界情况根本碰不到。

具体做法是,在顶部时阻止默认行为;超过阈值才触发刷新;非顶部时直接放行。

最后用这个标准收尾,下拉只触发自定义刷新,浏览器自带手势不再介入,页面不会被刷新两次。

作者 9823189