发现流设计中底部加载更多的实用技巧

刷短视频、看新闻或者逛购物App的时候，你有没有注意到，页面拉到最底下，稍微停顿一下，新的内容就自动冒出来了？这种体验背后，其实就是“发现流设计底部加载更多”的功劳。它让信息呈现更自然，用户也不用频繁点击“下一页”。

为什么选择底部加载？

传统的分页按钮，比如“上一页”“下一页”，在移动端操作起来总有点别扭。手指要精准点，有时候还误触。而底部加载更多，顺应了用户下滑的手势习惯，轻轻一拉，内容就续上了，体验顺滑很多。

比如你在某资讯App上看热点新闻，一条接一条地刷，不知不觉半小时过去了——这背后不只是内容吸引人，加载方式也功不可没。内容不断“涌现”，让人更容易沉浸进去。

实现原理其实不复杂

前端监听滚动事件，判断当前滚动位置是否接近页面底部。一旦触发阈值，就向服务器请求下一批数据，渲染追加到现有列表后面。整个过程对用户来说几乎是无感的。

window.addEventListener('scroll', function() {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const windowHeight = window.innerHeight;
  const scrollHeight = document.documentElement.scrollHeight;

  if (scrollTop + windowHeight >= scrollHeight - 100) {
    loadMoreData(); // 加载更多函数
  }
});

几点优化建议

别一滚动到底就疯狂请求。设置一个防抖机制，避免短时间内多次触发。可以加个状态锁，比如正在加载时，禁用下一次请求，直到当前批次完成。

另外，给用户一点反馈也很重要。可以在底部加个 loading 动画，比如转圈的小图标，告诉用户“别急，新内容在路上了”。不然空等几秒，容易让人以为卡了。

最后，数据量太大时，考虑懒加载图片。先加载文字和占位图，等快看到那条内容时再加载真实图片，这样页面更轻快，流量消耗也少。

这种设计现在几乎成了标配，但细节处理得好不好，直接影响用户体验。做得丝滑，用户愿意多留一会儿；做得生硬，可能下一秒就退出了。