dropload.js插件下拉刷新和上拉加载使用详解

前端之家收集整理的这篇文章主要介绍了dropload.js插件下拉刷新和上拉加载使用详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例为大家分享了dropload.js下拉刷新和上拉加载的具体代码,供大家参考,具体内容如下

第一步

,下载dropload插件,dropload插件下载地址 官方文档:

第二步

,将下载好的dropload插件中的dropload.css,dropload.min.js文件引入到页面中,注意还要引入 Jquery1.7 以上 或者 Zepto 二选一,不要同时都引用,因为dropload是基于jquery实现的

第三步

,将以下代码放到页面的最底部,注意是最底部,否则dropload插件获取不了高度

',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 page = 0; // 每页展示5个 var size = 5;

// 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;

// dropload
$('.content').dropload({
scrollArea : window,domUp : {
domClass : 'dropload-up',domRefresh : '<div class="dropload-refresh">↓下拉刷新-自定义内容

',domUpdate : '<div class="dropload-update">↑释放更新-自定义内容
',domLoad : '<div class="dropload-load"><span class="loading">加载中-自定义内容...
'
},domDown : {
domClass : 'dropload-down',domRefresh : '<div class="dropload-refresh">↑上拉加载更多-自定义内容
',domLoad : '<div class="dropload-load"><span class="loading">加载中-自定义内容...
',domNoData : '<div class="dropload-noData">暂无数据-自定义内容
'
},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 += '<a class="item opacity" href="'+data.lists[i].link+'">'
+'<img src="'+data.lists[i].pic+'" alt="">'
+'

'+data.lists[i].title+'

'
+'<span class="date">'+data.lists[i].date+''
+'';
}
// 为了测试,延迟1秒加载
setTimeout(function(){
$('.lists').html(result);
// 每次数据加载完,必须重置
me.resetload();
// 重置页数,重新获取loadDownFn的数据
page = 0;
// 解锁loadDownFn里锁定的情况
me.unlock();
me.noData(false);
},type){
alert('Ajax error!');
// 即使加载出错,也得重置
me.resetload();
}
});
},threshold : 50
});
});

示例三、

多次加载

$('.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',success: function(data){
var result = '';
counter++;
pageEnd = num * counter;
pageStart = pageEnd - num;

for(var i = pageStart; i < pageEnd; i++){
result += '<a class="item opacity" href="'+data.lists[i].link+'"&gt;'
  +'<img src="'+data.lists[i].pic+'" alt=""&gt;'
  +'<h3>'+data.lists[i].title+'</h3>'
  +'<span class="date"&gt;'+data.lists[i].date+'</span>'
  +'</a>';
if((i + 1) >= _length || (i + 1) >= data.lists.length){
 // 锁定
 me.lock();
 // 无数据
 me.noData();
 break;
}
}
// 为了测试,延迟1秒加载
setTimeout(function(){
$('.lists').append(result);
// 每<a href="https://www.jb51.cc/tag/cishu/" target="_blank" class="keywords">次数</a>据加载完,必须重置
me.resetload();
},1000);

},type){
alert('Ajax error!');
// 即使加载出错,也得重置
me.resetload();
}
});
}
});
},500);
});

示例四、

固定布局,加载顶部、底部

// dropload
var dropload = $('.inner').dropload({
domUp : {
domClass : 'dropload-up',domLoad : '<div class="dropload-load"><span class="loading">加载中...
'
},domNoData : '<div class="dropload-noData">暂无数据
'
},success: function(data){
var result = '';
for(var i = 0; i < data.lists.length; i++){
result += ''
+'<img src="'+data.lists[i].pic+'" alt="">'
+'

'+data.lists[i].title+'

'
+'<span class="date">'+data.lists[i].date+''
+'
';
}
// 为了测试,延迟1秒加载
setTimeout(function(){
$('.lists').html(result);
// 每次数据加载完,必须重置
dropload.resetload();
},type){
alert('Ajax error!');
// 即使加载出错,也得重置
dropload.resetload();
}
});
},loadDownFn : function(me){
$.ajax({
type: 'GET',success: function(data){
var result = '';
for(var i = 0; i < data.lists.length; i++){
result += '<a class="item opacity" href="'+data.lists[i].link+'">'
+'<img src="'+data.lists[i].pic+'" alt="">'
+'

'+data.lists[i].title+'

'
+'<span class="date">'+data.lists[i].date+''
+'';
}
// 为了测试,延迟1秒加载
setTimeout(function(){
$('.lists').append(result);
// 每次数据加载完,必须重置
dropload.resetload();
},type){
alert('Ajax error!');
// 即使加载出错,也得重置
dropload.resetload();
}
});
}
});
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/35681.html
dropload.js上拉加载下拉刷新

猜你在找的JavaScript相关文章