首页手记滑动到底部无限加载的实现

滑动到底部无限加载的实现

标签：

JavaScript

我们常常会碰到数据条数很多，需要分页显示的情况。对于移动端页面，我们一般会用每次滚动到接近页面底部时，加载更多（下一页）数据的方式。本文就来介绍下滑动到底部无限加载的实现。

实现滑动到底部无限加载，我们要做的是:

监听显示数据内容的元素的滚动事件。
每次元素滚动时，若此时不在加载数据，则计算元素下方没显示的高度值。如果其值小于我们设定的触发加载的值，则加载，显示更多数据；否则什么都不做。
如果没有更多的内容可显示，则不再监视元素的滚动事件。

易知：元素下方没显示的高度值 = 元素总高度 - 元素垂直方向滚动了的距离 - 元素可视区域高度

各种值如下图所示：

我们可知：
元素的 scrollHeight 属性值为其总高度。
元素的 scrollTop 属性值为其垂直方向滚动了的距离。
元素的 clientHeight 属性值为其可视区域高度。

因此，元素下方没显示的高度值 = elem.scrollHeight - elem.clientHeight - elem.scrollTop

伪代码如下

 // 元素下方没显示的高度值小于TRIGGER_SCROLL_SIZE时，触发滚动
var TRIGGER_SCROLL_SIZE = 50;
var isLoading = false;
// $container 为显示数据内容的元素
$container.scroll(function () {
  if(!isLoading){
    var totalHeight = $container.prop('scrollHeight');
    var scrollTop = $container.scrollTop();
    var height = $container.height();
    if(totalHeight - (height + scrollTop) <= TRIGGER_SCROLL_SIZE){
      isLoading = true;
      // 加载更多数据
      fetchData().done(function(data){
        isLoadind = false;
        if(data.length > 0){
          appendData($container);
        } else {
          // 没有更多数据了。
          $container.off('scroll');
        }
      })
    }
  }
});

完整的 Demo 代码见这里。

注意，如果显示内容的元素为 body，则取其垂直方向滚动了的距离要用 $(document).scrollTop()。否则会有兼容性问题。

参考

推荐阅读