本文实例为大家分享了dropload.js下拉刷新和上拉加载的具体代码，供大家参考，具体内容如下
第一步
，下载dropload插件，dropload插件下载地址 官方文档：第二步
，将下载好的dropload插件中的dropload.css，dropload.min.js文件引入到页面中，注意还要引入 Jquery1.7 以上 或者 Zepto 二选一，不要同时都引用，因为dropload是基于jquery实现的第三步
，将以下代码放到页面的最底部，注意是最底部，否则dropload插件获取不了高度',domUpdate : '
},domDown : {
domClass : 'dropload-down',domRefresh : '<div class="dropload-refresh">↑上拉加载更多-自定义内容
',domLoad : '<div class="dropload-load"><span class="loading">加载中-自定义内容...',domLoad : '
'加载中...
'
},domDown : {
domClass : 'dropload-down',domRefresh : '',domLoad : '
',domLoad : '<div class="dropload-load"><span class="loading">加载中-自定义内容...加载中...
',domNoData : ''
},loadUpFn : function(me){
//下拉刷新需要调用的函数
alert("下拉刷新需要调用的函数");
//重置下拉刷新
me.resetload();
},loadDownFn : function(me){
//上拉加载更多需要调用的函数
alert("上拉加载更多需要调用的函数");
//定时器函数,为了看出上拉加载更多效果
setTimeout(function(){
// 每次数据加载完，必须重置
me.resetload();
},1000);
}
});
一些完整的例子 按需查看就好
示例一、
加载底部
$(function(){
// 页数
var page = 0;
// 每页展示5个
var size = 5;
+'<span class="date">'+data[i].date+''
+'';
}
// 如果没有数据
}else{
// 锁定
me.lock();
// 无数据
me.noData();
}
// 为了测试，延迟1秒加载
setTimeout(function(){
// 插入数据到页面，放到最后面
$('.lists').append(result);
// 每次数据插入，必须重置
me.resetload();
},1000);
},error: function(xhr,type){
alert('Ajax error!');
// 即使加载出错，也得重置
me.resetload();
}
});
}
});
});
// dropload调用
$('.content').dropload({
scrollArea : window,loadDownFn : function(me){
page++;
// 拼接HTML
var result = '';
$.ajax({
type: 'GET',url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,//配合后台接口
dataType: 'json',success: function(data){
var arrLen = data.length;
if(arrLen > 0){
for(var i=0; i<arrLen; i++){
result += '<a class="item opacity" href="'+data[i].link+'">'
+'<img src="'+data[i].pic+'" alt="">'
+'
'+data[i].title+'
'+'<span class="date">'+data[i].date+''
+'';
}
// 如果没有数据
}else{
// 锁定
me.lock();
// 无数据
me.noData();
}
// 为了测试，延迟1秒加载
setTimeout(function(){
// 插入数据到页面，放到最后面
$('.lists').append(result);
// 每次数据插入，必须重置
me.resetload();
},1000);
},error: function(xhr,type){
alert('Ajax error!');
// 即使加载出错，也得重置
me.resetload();
}
});
}
});
});
示例二、
加载顶部、底部
$(function(){
// 页数
var page = 0;
// 每页展示10个
var size = 10;
',domUpdate : '<div class="dropload-update">↑释放更新-自定义内容// dropload
$('.content').dropload({
scrollArea : window,domUp : {
domClass : 'dropload-up',domRefresh : '<div class="dropload-refresh">↓下拉刷新-自定义内容
},domDown : {
domClass : 'dropload-down',domRefresh : '<div class="dropload-refresh">↑上拉加载更多-自定义内容
