滚动加载案例

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u012615439/article/details/88015042

• 工具类

var Util = {
	//事件节流
  throttle:function(fn,delay){
    var last = 0;
    return function(){
      var curr = +new Date();
      if (curr - last > delay){
        fn.apply(this, arguments);
        last = curr;
      }
    }
  },
  //事件防抖
  debounce:function(fn,delay){
    var last;
    return function(){
      var ctx = this, args = arguments;
      clearTimeout(last);
      last = setTimeout(function(){
        fn.apply(ctx, args);
      }, delay)
    }
  }
};

• 具体实现方法

var Page = {
    pageNum:0,
    pageSize:10,
    totalNum:0,
    scrollTop:0,
    bind: function () {
      var resolve = Util.debounce(Page.loadData,100);//工具类初始化
      $(".product").scroll(function () {
          resolve();//工具类调用
      });
    },
    loadData: function () {
      var container = document.querySelector(".product");
      if(container.scrollTop <= Page.scrollTop){//向上滚动不加载
          return false;
      }
      var height = parseFloat(container.offsetHeight) + parseFloat(container.scrollTop);
      var totalHeight = container.scrollHeight;
      if((totalHeight - height <= 50) && (container.scrollTop > Page.scrollTop)){//滚动条距离底部小于50
        Page.scrollTop = container.scrollTop;
        Page.pageNum ++;
        if(Page.pageNum <= Math.ceil(Page.totalNum / Page.pageSize)){
            Service.getList(Page.pageNum);
        }else{//没有更多数据

        }
      }
    }
};
var Service = {
	getList:function(){
		$.ajax(url,params,function(data){
			
		})
	}
};