分页加载时若处于列表刷新状态如何停止加载新列表项
列表分页加载防重复触发问题修复
你的代码存在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
相关产品推荐
相关产品推荐

