滚动加载更多

<div class="list-loading"></div>

.list-loading{
  1. vertical-alignmiddle;
  2. bottom: 0
  3. animation: spin 1s 
     
    linear 0s infinite;
  4. transition: all .5s 
     
    ease 0s;
  5. transition-property: height;
  6. transition-duration: .5s !important;
  7. position: relative;
  8. overflow: hidden;
  9.  0;
  10. height:0;
  11. margin: 0 auto;
}

function PullLoadDate(dom,option){

    this.dom = $(dom); // 最大的父容器
this.wrapper = this.dom.find(option.wrapper); // 模板的容器
this.template = $(option.template); // 模板的ID
this.ajax = option.ajax; // 请求地址
this.noData = option.noData; // 没数据的时候,让提示文字显示
this.pending = false; // 是否加载完
this.hasData = true; // 是否有数据
this.pageNationInit = { // 初始
pageSize:10,
pageNo:1
};

this.pageNation = $.extend({},this.pageNationInit,option.pageNation);

this.init = function(){
this.pull();
this.scroll();
};
this.templateInit = function(data){
var templateInvitation = this.template.html();
var templateInit = Template7.compile(templateInvitation);
return templateInit(data);
};
this.pull = function(){
if(!this.hasData || this.pending) return;
this.pending = true;
var self = this;
$(".list-loading").addClass("active");
this.dataInit(function(data){
self.pageNation.pageNo++;
var totalPage = Math.ceil(data.totalRow / self.pageNation.pageSize);
if(self.pageNation.pageNo > totalPage){
self. hasData = false;
}
var html = self.templateInit(data);
self.wrapper.append(html);
self.pending = false;
$(".list-loading").removeClass("active");
},function(){
self.dom.find(self.noData).show();
self.pending = false;
$(".list-loading").removeClass("active");
});

};
this.dataInit = function(success,error){
var self = this;
$.ajax({
url:self.ajax,
type:"post",
data:{pagenation:JSON.stringify(self.pageNation)},
success:function(res){
if(res.list && res.list.length){
success(res);
}else{
error();
}
},
error:function(){
if(typeof error == "function"){
error();
}
}
});

};

this.scroll = function(){
var self = this;
self.dom.scroll(function () {
var pageScrollTop = this.scrollHeight - this.clientHeight;
if (pageScrollTop - this.scrollTop < 2) {
self.pull();
}
});
};
this.init();
}
 
原文地址:https://www.cnblogs.com/founderswitch/p/7212057.html