php滑到底部自动加载更多,滑动到底部无限加载的实现

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

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

监听显示数据内容的元素的滚动事件。

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

如果没有更多的内容可显示，则不再监视元素的滚动事件。

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

各种值如下图所示：

我们可知：

元素的 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()。否则会有兼容性问题。

参考

推荐阅读

网络平台如需转载必须与本人联系确认。