js滚动条滚动翻页加载数据

滚动刷新

使用场景介绍

在做分页功能时，可能会有当滚动条滚动到某一位置时触发加载下一页的资源（商品、内容）到本页面的需求。下面的js代码实现的功能是，当滚动条滚动的位置距离id为footerApp的Dom元素之上30像素时触发加载下一页的资源到当前页面。

<script type="text/javascript">
var gPage = 1;
var gIsRequestPage = 1;
var gRequestTimer = null;
var goodsListApp = {};
var goodsPage = {};
goodsPage.pageCount = 2;
goodsListApp.goodsPage = goodsPage;
$(window).scroll(function(){
	var scrollTop = $(this).scrollTop();
    var windowHeight = $(this).height();
    var documentScrollHeight = $(document).height();
    var footerHeight = $("#footerApp").height();
    var requestPageHeight = documentScrollHeight - footerHeight - windowHeight - 30;
    if(scrollTop >= requestPageHeight && gIsRequestPage == 1 && goodsListApp.goodsPage.pageCount!=undefined){
      gIsRequestPage = 0;
      console.log('1111 gPage:',gPage,'goodsPage.pageCount:',goodsListApp.goodsPage.pageCount);
      if(gPage >= goodsListApp.goodsPage.pageCount){
        if(gPage > 1){
          $("#pageLodingOver").removeClass('acu-display-none').addClass('acu-display-block');
        }
        return;
      }
      gPage = gPage + 1;
      console.log('gPage+1:',gPage);
      if(gRequestTimer){
        clearTimeout(gRequestTimer);
      }
      $("#pageLoding").removeClass('acu-display-none').addClass('acu-display-block');
      gRequestTimer = setTimeout(function(){
        $.get('../db/get_goods.php?act=init&load_all=0&page='+gPage,function(data){
          dataObj = eval('('+data+')');
          console.log('dataObj.data:',dataObj.data);
          goodsListApp.confMyArr = goodsListApp.confMyArr.concat(dataObj.data);
          gIsRequestPage = 1;
          $("#pageLoding").removeClass('acu-display-block').addClass('acu-display-none');
        })
      },200);
    }
    //console.log(scrollTop,windowHeight,documentScrollHeight,footerHeight,requestPageHeight);
    //console.log($("#footerApp"));
  });
</script>