您的位置:首页 > Web前端 > JavaScript

[require-js]向下滑动ajax加载的javascript实现

2016-01-07 15:00 609 查看
define(function(){
function ScrollMoreInfo($wraper , loadDataFunc , json_ids , perNum  , tpl_info)
{
this.$wraper = $wraper;
this.loadDataFunc = loadDataFunc;
this.originIds = json_ids;
this.tpl = tpl_info;
this.isAppendIng = false;
this.perNum = perNum;
this.leftData = [];
}
ScrollMoreInfo.prototype = new Hnb.event();
$.extend(ScrollMoreInfo.prototype , {
init: function(){
var self = this;
self.initData();
self.register();
},
initData: function(){
var self = this;
self.start = self.originIds.length;
self.isEnd = false;

self.idRef = {};
for(var i in self.originIds)
{
if(self.originIds[i]){
self.idRef[self.originIds[i] + "_"] = true;
}
}
},
register: function(){
var self = this;
$(window).scroll(function(){
var height = $(window).height();
var top = $(window).scrollTop();
var bodyHeight = $("#id_top_wrap").height();
if(height + top > bodyHeight - 100) {
//加载数据...
self.appendMoreData();
}
});
$(window).trigger("scroll");
},
appendMoreData: function(){
var self = this;

if(self.isAppendIng){
return;
}
if(self.leftData.length >= self.perNum){
var arr_data = self.leftData.splice(0 , self.perNum);
self.renderData(arr_data);
} else if(self.isEnd) {
if(self.leftData.length == 0){
self.renderNoMore();
return;
}
var arr_data = self.leftData.splice(0 , self.perNum);

self.renderData(arr_data);

if(self.leftData.length == 0){
self.renderNoMore();
}
} else {

//加载更多数据
self.isAppendIng = true;
self._loadData().fail(function(){
self.isEnd = true;
}).always(function(){
self.isAppendIng = false;
self.appendMoreData();
});

}
},
// 尾部图片(no-more-data / data-loading)的展示
renderNoMore: function(){
var self = this;
self.$wraper.find(".c-data-no-more").removeClass("dn");
self.$wraper.find(".c-data-loading").addClass("dn");
},
//  数据模板渲染
renderData: function(arr_data){
var self = this;
var html = Hnb.ui.tmpl(self.tpl , {
arr_infoList : arr_data
});
self.$wraper.find(".c-data-loading").before(html);
self.trigger("after:render:more:data");
},
// 数据加载
_loadData: function(){
var self = this;
var defer = $.Deferred();
self.loadDataFunc(self.start , self.perNum).done(function(json_msg){

if(json_msg.state){
//失败,将现有数据展示到页面,设置为结束
defer.reject(-1);
} else {
if(json_msg.data.infoList.length < self.perNum){
self.isEnd = true;
}
self._storeData(json_msg.data.infoList);
defer.resolve();
}
}).fail(function(){
defer.reject(-1);
});
// 数据读取起点
self.start += self.perNum;
return defer;
},
// 当加载的数据小于每页的长度时,先存储起来
_storeData: function(arr_data){
var self = this;
for(var i in arr_data)
{
if(arr_data[i].id && !self.idRef[arr_data[i].id + "_"])
{
self.leftData.push(arr_data[i]);
self.idRef[arr_data[i].id + "_"] = true;
}
}
}
});

return {
create: function($wraper , loadDataFunc , json_dataInit , perNum  , tpl_info){
var obj = new ScrollMoreInfo($wraper , loadDataFunc , json_dataInit , perNum  , tpl_info);
obj.init();
return obj;
}
}
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: