dropload.js插件下拉刷新和上拉加載使用詳解
本文實例為大家分享了dropload.js下拉刷新和上拉加載的具體代碼,供大家參考,具體內(nèi)容如下
第一步,下載dropload插件,dropload插件下載地址 官方文檔:https://github.com/ximan/dropload
第二步,將下載好的dropload插件中的dropload.css,dropload.min.js文件引入到頁面中,注意還要引入 Jquery1.7 以上 或者 Zepto 二選一,不要同時都引用,因為dropload是基于jquery實現(xiàn)的
第三步,將以下代碼放到頁面的最底部,注意是最底部,否則dropload插件獲取不了高度
**基本代碼結(jié)構(gòu)**
//#content為某個div的id
var dropload = $('#content').dropload({
//scrollArea很關鍵,要不然加載更多不起作用
scrollArea : window,
domUp : {
domClass : 'dropload-up',
domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
domUpdate : '<div class="dropload-update">↑釋放更新</div>',
domLoad : '<div class="dropload-load"><span class="loading"></span>加載中...</div>'
},
domDown : {
domClass : 'dropload-down',
domRefresh : '<div class="dropload-refresh">↑上拉加載更多</div>',
domLoad : '<div class="dropload-load"><span class="loading"></span>加載中...</div>',
domNoData : '<div class="dropload-noData">暫無數(shù)據(jù)</div>'
},
loadUpFn : function(me){
//下拉刷新需要調(diào)用的函數(shù)
alert("下拉刷新需要調(diào)用的函數(shù)");
//重置下拉刷新
me.resetload();
},
loadDownFn : function(me){
//上拉加載更多需要調(diào)用的函數(shù)
alert("上拉加載更多需要調(diào)用的函數(shù)");
//定時器函數(shù),為了看出上拉加載更多效果
setTimeout(function(){
// 每次數(shù)據(jù)加載完,必須重置
me.resetload();
},1000);
}
});
一些完整的例子 按需查看就好
示例一、加載底部
<script>
$(function(){
// 頁數(shù)
var page = 0;
// 每頁展示5個
var size = 5;
// dropload調(diào)用
$('.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="">'
+'<h3>'+data[i].title+'</h3>'
+'<span class="date">'+data[i].date+'</span>'
+'</a>';
}
// 如果沒有數(shù)據(jù)
}else{
// 鎖定
me.lock();
// 無數(shù)據(jù)
me.noData();
}
// 為了測試,延遲1秒加載
setTimeout(function(){
// 插入數(shù)據(jù)到頁面,放到最后面
$('.lists').append(result);
// 每次數(shù)據(jù)插入,必須重置
me.resetload();
},1000);
},
error: function(xhr, type){
alert('Ajax error!');
// 即使加載出錯,也得重置
me.resetload();
}
});
}
});
});
</script>
示例二、加載頂部、底部
<script>
$(function(){
// 頁數(shù)
var page = 0;
// 每頁展示10個
var size = 10;
// dropload
$('.content').dropload({
scrollArea : window,
domUp : {
domClass : 'dropload-up',
domRefresh : '<div class="dropload-refresh">↓下拉刷新-自定義內(nèi)容</div>',
domUpdate : '<div class="dropload-update">↑釋放更新-自定義內(nèi)容</div>',
domLoad : '<div class="dropload-load"><span class="loading"></span>加載中-自定義內(nèi)容...</div>'
},
domDown : {
domClass : 'dropload-down',
domRefresh : '<div class="dropload-refresh">↑上拉加載更多-自定義內(nèi)容</div>',
domLoad : '<div class="dropload-load"><span class="loading"></span>加載中-自定義內(nèi)容...</div>',
domNoData : '<div class="dropload-noData">暫無數(shù)據(jù)-自定義內(nèi)容</div>'
},
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="">'
+'<h3>'+data.lists[i].title+'</h3>'
+'<span class="date">'+data.lists[i].date+'</span>'
+'</a>';
}
// 為了測試,延遲1秒加載
setTimeout(function(){
$('.lists').html(result);
// 每次數(shù)據(jù)加載完,必須重置
me.resetload();
// 重置頁數(shù),重新獲取loadDownFn的數(shù)據(jù)
page = 0;
// 解鎖loadDownFn里鎖定的情況
me.unlock();
me.noData(false);
},1000);
},
error: function(xhr, type){
alert('Ajax error!');
// 即使加載出錯,也得重置
me.resetload();
}
});
},
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="">'
+'<h3>'+data[i].title+'</h3>'
+'<span class="date">'+data[i].date+'</span>'
+'</a>';
}
// 如果沒有數(shù)據(jù)
}else{
// 鎖定
me.lock();
// 無數(shù)據(jù)
me.noData();
}
// 為了測試,延遲1秒加載
setTimeout(function(){
// 插入數(shù)據(jù)到頁面,放到最后面
$('.lists').append(result);
// 每次數(shù)據(jù)插入,必須重置
me.resetload();
},1000);
},
error: function(xhr, type){
alert('Ajax error!');
// 即使加載出錯,也得重置
me.resetload();
}
});
},
threshold : 50
});
});
</script>
示例三、多次加載
$(function(){
//利用此寫法,可以限制多次加載的個數(shù)。
var timer;
$('.header .ipt').on('input',function(){
var _length = $(this).val();
// 如果輸入值不是數(shù)字或者是空,就跳出
if(isNaN(_length) || _length === ''){
return false;
}
clearTimeout(timer);
timer = setTimeout(function(){//也可不用定時器
// 清空內(nèi)容
$('.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 += '<a class="item opacity" href="'+data.lists[i].link+'">'
+'<img src="'+data.lists[i].pic+'" alt="">'
+'<h3>'+data.lists[i].title+'</h3>'
+'<span class="date">'+data.lists[i].date+'</span>'
+'</a>';
if((i + 1) >= _length || (i + 1) >= data.lists.length){
// 鎖定
me.lock();
// 無數(shù)據(jù)
me.noData();
break;
}
}
// 為了測試,延遲1秒加載
setTimeout(function(){
$('.lists').append(result);
// 每次數(shù)據(jù)加載完,必須重置
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 : '<div class="dropload-refresh">↓下拉刷新</div>',
domUpdate : '<div class="dropload-update">↑釋放更新</div>',
domLoad : '<div class="dropload-load"><span class="loading"></span>加載中...</div>'
},
domDown : {
domClass : 'dropload-down',
domRefresh : '<div class="dropload-refresh">↑上拉加載更多</div>',
domLoad : '<div class="dropload-load"><span class="loading"></span>加載中...</div>',
domNoData : '<div class="dropload-noData">暫無數(shù)據(jù)</div>'
},
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+'" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'
+'<img src="'+data.lists[i].pic+'" alt="">'
+'<h3>'+data.lists[i].title+'</h3>'
+'<span class="date">'+data.lists[i].date+'</span>'
+'</a>';
}
// 為了測試,延遲1秒加載
setTimeout(function(){
$('.lists').html(result);
// 每次數(shù)據(jù)加載完,必須重置
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 += '<a class="item opacity" href="'+data.lists[i].link+'">'
+'<img src="'+data.lists[i].pic+'" alt="">'
+'<h3>'+data.lists[i].title+'</h3>'
+'<span class="date">'+data.lists[i].date+'</span>'
+'</a>';
}
// 為了測試,延遲1秒加載
setTimeout(function(){
$('.lists').append(result);
// 每次數(shù)據(jù)加載完,必須重置
dropload.resetload();
},1000);
},
error: function(xhr, type){
alert('Ajax error!');
// 即使加載出錯,也得重置
dropload.resetload();
}
});
}
});
});
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
小程序webView實現(xiàn)小程序內(nèi)嵌H5頁面的全過程
在微信小程序中內(nèi)嵌H5頁面是一種常見的需求,因為H5頁面具有靈活性和跨平臺性,可以彌補小程序原生代碼的不足,這篇文章主要給大家介紹了關于小程序webView實現(xiàn)小程序內(nèi)嵌H5頁面的相關資料,需要的朋友可以參考下2024-07-07
基于ajax與msmq技術的消息推送功能實現(xiàn)代碼
這篇文章主要介紹了基于ajax與msmq技術的消息推送功能實現(xiàn)代碼,具有一定的參考價值,有興趣的可以了解一下。2016-12-12

