文章一共四十三篇,每页十条,翻到第五页只剩三条,按钮还在,点一下转两秒,回来列表没变化,再点还是转圈。日志里能对上时间点,这种反而好排。

前端只看按钮有没有被点,不看服务端返回的数量,接口也没有 has_more 字段。最后一页条数不足一页时,仍然按满页处理。这一点先确认清楚,后面就不用反复试。

const { items } = await fetchList(page);
append(items);
if (items.length < PAGE_SIZE) {
  btn.textContent = '没有更多了';
  btn.disabled = true;
}

围绕「加载更多到底提示」排查时,命令行跑一遍比在面板里点十次有用,面板会替你做掉不少隐式操作。偶发问题先统计频率,一小时几次和一天一次,查法完全不同。

改完顺手把文档补一句,省得下次自己重新推一遍。

处理上按这个顺序:接口返回 has_more 或总数,前端据此决定按钮显不显示;返回条数小于每页数量时,直接把按钮换成没有更多了的提示;空结果不要再追加,滚动位置保持不变,别让用户以为卡住了。

结果对不对很好判断,翻到最后一页,按钮变成没有更多了并且不可点,不会再发出空请求。

作者 9823189