您的位置:首页 > 移动开发

jquery移动端往下拉加载数据插件

2017-10-26 16:23 651 查看
jquery移动端往下拉加载数据插件

(function($){
var methods={
init:function(options){
var defaults={
page:1, //当前的页数
size:10, //加载的数据的条数
num:100, //总数据数
type:'POST', //ajax请求类型
ajax_data:{} //ajax请求的数据
},
//保护包默认参数。也就是defaults里面的参数
options=$.extend(true,defaults,options);
return this.each(function(){
var $this=$(this);
$this.data({
"page":options.page,
"size":options.size,
"type":options.type,
"num":options.num,
"ajax_data":options.ajax_data
})
$this.mCustomScrollbar("scrollTo",options.size,options.num);
})
},
scrollTo:function(size,num){
var $this=$(this);
//下拉加载更多
$(window).scroll(function () {
var scr_top = $(this).scrollTop();
var doc_height = $(document).height();
var win_height = $(this).height();
var page=$this.data("page");
if(page<Math.ceil(num/size)){
$("#pullUp").show();
if (scr_top + win_height == doc_height) {
$("#pullUp").addClass('loading').find(".pullUpLabel").text("玩命加载中...");
setTimeout(function(){
page++;
console.log(page);
$this.data({"page":page});
$this.mCustomScrollbar("doAjax",page);
$("#pullUp").removeClass('loading').find(".pullUpLabel").text("上拉加载更多");
},1500);
clearTimeout();
}
}else if(page==Math.ceil(num/size)){
$("#pullUp").hide();
}
});
},
doAjax : function(page){
var $this=$(this),
type=$this.data("type"),
data=$this.data("data");
$.ajax({
url: 'index.php?m=default&c=integralCard&a=index&page='+page,
type: type,
data:data,
success: function(res){
//动态调用
getData(res);

}
});
}
}
$.fn.mCustomScrollbar=function(method){
if(methods[method]){
//Array.prototype.slice.call(arguments, 1)可以理解成是让arguments转换成一个数组对象,让arguments具有slice()方法。
return methods[method].apply(this,Array.prototype.slice.call(arguments,1));
}else if(typeof method==="object" || !method){
return methods.init.apply(this,arguments);
}else{
$.error("Method "+method+" does not exist");
}
};
})(jQuery);
function getData(data){
console.log(data)
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: