本文主要为大家详细介绍了dropload.js插件下拉刷新和上拉加载的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
第一步，下载dropload插件，dropload插件下载地址 官方文档：https://github.com/ximan/dropload
第二步，将下载好的dropload插件中的dropload.css，dropload.min.js文件引入到页面中，注意还要引入 Jquery1.7 以上 或者 Zepto 二选一，不要同时都引用，因为dropload是基于jquery实现的
第三步，将以下代码放到页面的最底部，注意是最底部，否则dropload插件获取不了高度
**基本代码结构**
//#content为某个p的id
var dropload = $('#content').dropload({
//scrollArea很关键，要不然加载更多不起作用
scrollArea : window,
domUp : {
domClass : 'dropload-up',
domRefresh : '↓下拉刷新
',
domUpdate : '↑释放更新
',
domLoad : '加载中...
'
},
domDown : {
domClass : 'dropload-down',
domRefresh : '↑上拉加载更多
',
domLoad : '加载中...
',
domNoData : '暂无数据
'
},
loadUpFn : function(me){
//下拉刷新需要调用的函数
alert("下拉刷新需要调用的函数");
//重置下拉刷新
me.resetload();
},
loadDownFn : function(me){
//上拉加载更多需要调用的函数
alert("上拉加载更多需要调用的函数");
//定时器函数,为了看出上拉加载更多效果
setTimeout(function(){
// 每次数据加载完，必须重置
me.resetload();
},1000);
}
});一些完整的例子 按需查看就好
示例一、加载底部
示例二、加载顶部、底部
示例三、多次加载
$(function(){
//利用此写法，可以限制多次加载的个数。
var timer;
$('.header .ipt').on('input',function(){
var _length = $(this).val();
// 如果输入值不是数字或者是空，就跳出
if(isNaN(_length) || _length === ''){
return false;
}
clearTimeout(timer);
timer = setTimeout(function(){//也可不用定时器
// 清空内容
$('.lists').html('');
$('.dropload-down').remove();
var counter = 0;
// 每页展示4个
var num = 4;
var pageStart = 0,pageEnd = 0;
// dropload
$('.content').dropload({
scrollArea : window,
loadDownFn : function(me){
$.ajax({
type: 'GET',
url: 'json/more.json',
dataType: 'json',
success: function(data){
var result = '';
counter++;
pageEnd = num * counter;
pageStart = pageEnd - num;
for(var i = pageStart; i < pageEnd; i++){
result += ''
+'@@##@@'
+''+data.lists[i].title+'
'
+''+data.lists[i].date+''
+'';
if((i + 1) >= _length || (i + 1) >= data.lists.length){
// 锁定
me.lock();
// 无数据
me.noData();
break;
}
}
// 为了测试，延迟1秒加载
setTimeout(function(){
$('.lists').append(result);
// 每次数据加载完，必须重置
me.resetload();
},1000);
},
error: function(xhr, type){
alert('Ajax error!');
// 即使加载出错，也得重置
me.resetload();
}
});
}
});
},500);
});示例四、固定布局，加载顶部、底部
$(function(){
// 按钮操作
$('.header .btn').on('click',function(){
var $this = $(this);
if(!!$this.hasClass('lock')){
$this.attr('class','btn unlock');
$this.text('解锁');
// 锁定
dropload.lock();
$('.dropload-down').hide();
}else{
$this.attr('class','btn lock');
$this.text('锁定');
// 解锁
dropload.unlock();
$('.dropload-down').show();
}
});
// dropload
var dropload = $('.inner').dropload({
domUp : {
domClass : 'dropload-up',
domRefresh : '↓下拉刷新
',
domUpdate : '↑释放更新
',
domLoad : '加载中...
'
},
domDown : {
domClass : 'dropload-down',
domRefresh : '↑上拉加载更多
',
domLoad : '加载中...
',
domNoData : '暂无数据
'
},
loadUpFn : function(me){
$.ajax({
type: 'GET',
url: 'json/update.json',
dataType: 'json',
success: function(data){
var result = '';
for(var i = 0; i < data.lists.length; i++){
result += ''
+'@@##@@'
+''+data.lists[i].title+'
'
+''+data.lists[i].date+''
+'';
}
// 为了测试，延迟1秒加载
setTimeout(function(){
$('.lists').html(result);
// 每次数据加载完，必须重置
dropload.resetload();
},1000);
},
error: function(xhr, type){
alert('Ajax error!');
// 即使加载出错，也得重置
dropload.resetload();
}
});
},
loadDownFn : function(me){
$.ajax({
type: 'GET',
url: 'json/more.json',
dataType: 'json',
success: function(data){
var result = '';
for(var i = 0; i < data.lists.length; i++){
result += ''
+'@@##@@'
+''+data.lists[i].title+'
'
+''+data.lists[i].date+''
+'';
}
// 为了测试，延迟1秒加载
setTimeout(function(){
$('.lists').append(result);
// 每次数据加载完，必须重置
dropload.resetload();
},1000);
},
error: function(xhr, type){
alert('Ajax error!');
// 即使加载出错，也得重置
dropload.resetload();
}
});
}
});
});相关推荐：
