You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

分页加载时若处于列表刷新状态如何停止加载新列表项

列表分页加载防重复触发问题修复

你的代码存在3个核心问题,完全没达到"加载中阻断新请求"的预期:

  • 写死了const isRefresh = true常量,这个值永远为真,根本不能动态反映当前是否处于刷新/加载状态
  • 就算判断了isRefresh分支,也没有阻断后续_loadPlaces()的执行,不管是不是在刷新,滚到底都会触发新的拉取任务
  • 命中isRefresh分支时直接清空列表内容,不符合分页加载追加数据的逻辑,会导致已加载的内容丢失

正确实现步骤如下:

  • 定义可变的加载状态标记,用来实时记录当前是否有正在执行的列表拉取/刷新任务
  • 滚动监听触发时,先判断是否到达加载阈值,再判断加载状态,如果正在执行任务直接终止逻辑,不启动新请求
  • 拉取任务启动前先把状态标记设为进行中,任务执行完成(无论成功、失败)都要把标记重置为待触发状态,避免后续加载被永久拦截

修正后的可运行代码:

// 全局维护可变更的加载状态,不要用const写死
bool _isLoading = false;

void _onScroll() {
  // 提前200px触发预加载,比完全滚到底体验更好,可根据需求调整阈值
  final loadThreshold = scrollController.position.maxScrollExtent - 200;
  if (scrollController.position.pixels < loadThreshold) return;

  // 核心拦截:正在加载/刷新时直接返回,不启动新任务
  if (_isLoading) return;

  // 标记进入加载状态
  _isLoading = true;
  try {
    // 执行分页数据拉取逻辑,注意是追加数据不要直接清空原列表
    await _loadPlaces();
  } finally {
    // 无论请求成功失败,都要重置加载状态
    _isLoading = false;
  }
}

如果要同时兼容下拉刷新逻辑,只需要在下拉刷新任务启动时把_isLoading设为true,刷新任务结束后重置状态即可,和上拉加载共用同一个状态标记,就能实现刷新过程中自动拦截分页加载请求的效果。

内容的提问来源于stack exchange,提问作者user16357470

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.27 22:09:17