Der erste Schritt besteht darin, das Dropload-Plugin herunterzuladen. Das offizielle Dokument der Dropload-Plugin-Download-Adresse lautet: https://github.com/ximan/dropload
Der zweite Schritt besteht darin, das Dropload-Plugin herunterzuladen .css im heruntergeladenen Dropload-Plug-in, dropload. Die Datei min.js wird in die Seite eingeführt. . Wählen Sie einen aus. Zitieren Sie nicht beides gleichzeitig, da Dropload auf der jquery-Implementierung basiert. Der dritte Schritt besteht darin, den folgenden Code ganz unten auf der Seite einzufügen ganz unten, sonst kann das Dropload-Plug-in die Höhe nicht ermitteln Einige vollständige Beispiele. Schauen Sie es sich einfach bei Bedarf anBeispiel 1, laden Sie den Boden
**基本代码结构**//#content为某个p的id var dropload = $('#content').dropload({
//scrollArea很关键，要不然加载更多不起作用 scrollArea : window,
domUp : {
domClass : 'dropload-up',
domRefresh : '<p class="dropload-refresh">↓下拉刷新</p>',
domUpdate : '<p class="dropload-update">↑释放更新</p>',
domLoad : '<p class="dropload-load"><span class="loading"></span>加载中...</p>' },
domDown : {
domClass : 'dropload-down',
domRefresh : '<p class="dropload-refresh">↑上拉加载更多</p>',
domLoad : '<p class="dropload-load"><span class="loading"></span>加载中...</p>',
domNoData : '<p class="dropload-noData">暂无数据</p>'
},
loadUpFn : function(me){
//下拉刷新需要调用的函数
alert("下拉刷新需要调用的函数");
//重置下拉刷新
me.resetload();
},
loadDownFn : function(me){
//上拉加载更多需要调用的函数
alert("上拉加载更多需要调用的函数");
//定时器函数,为了看出上拉加载更多效果
setTimeout(function(){
// 每次数据加载完，必须重置
me.resetload();
},1000);
}
});<script>$(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="">'
+'<h3>'+data[i].title+'</h3>'
+'<span class="date">'+data[i].date+'</span>'
+'</a>';
} // 如果没有数据
}else{ // 锁定
me.lock(); // 无数据
me.noData();
} // 为了测试，延迟1秒加载
setTimeout(function(){
// 插入数据到页面，放到最后面
$('.lists').append(result); // 每次数据插入，必须重置
me.resetload();
},1000);
},
error: function(xhr, type){
alert('Ajax error!'); // 即使加载出错，也得重置
me.resetload();
}
});
}
});
});</script><script>
$(function(){
// 页数
var page = 0; // 每页展示10个
var size = 10; // dropload
$('.content').dropload({
scrollArea : window,
domUp : {
domClass : 'dropload-up',
domRefresh : '<p class="dropload-refresh">↓下拉刷新-自定义内容</p>',
domUpdate : '<p class="dropload-update">↑释放更新-自定义内容</p>',
domLoad : '<p class="dropload-load"><span class="loading"></span>加载中-自定义内容...</p>'
},
domDown : {
domClass : 'dropload-down',
domRefresh : '<p class="dropload-refresh">↑上拉加载更多-自定义内容</p>',
domLoad : '<p class="dropload-load"><span class="loading"></span>加载中-自定义内容...</p>',
domNoData : '<p class="dropload-noData">暂无数据-自定义内容</p>'
},
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); // 每次数据加载完，必须重置
me.resetload(); // 重置页数，重新获取loadDownFn的数据
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>';
} // 如果没有数据
}else{ // 锁定
me.lock(); // 无数据
me.noData();
} // 为了测试，延迟1秒加载
setTimeout(function(){
// 插入数据到页面，放到最后面
$('.lists').append(result); // 每次数据插入，必须重置
me.resetload();
},1000);
},
error: function(xhr, type){
alert('Ajax error!'); // 即使加载出错，也得重置
me.resetload();
}
});
},
threshold : 50
});
});
</script>Das obige ist der detaillierte Inhalt vonInformationen zur Verwendung von dropload.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
