이 글은 dropload.js 플러그인 풀다운 새로고침과 풀업 로딩의 사용법을 주로 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.
첫 번째 단계, dropload 플러그인 다운로드, dropload 플러그인 다운로드 공식 문서: https://github.com/ximan/dropload
두 번째 단계, dropload.css 다운로드 다운로드한 dropload 플러그인에서 dropload .min.js 파일을 페이지에 도입하세요. dropload이기 때문에 Jquery1.7 이상이나 Zepto를 동시에 선택하지 마세요. 3단계: 페이지 하단에 다음 코드를 넣으세요. 그렇지 않으면 드롭로드 플러그인이 높이를 얻을 수 없습니다
**基本代码结构**
//#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);
}
});예시 1,
하단 로드<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>$(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 += '<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();
// 无数据
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 : '<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+'" 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);
// 每次数据加载完，必须重置
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);
// 每次数据加载完，必须重置
dropload.resetload();
},1000);
},
error: function(xhr, type){
alert('Ajax error!');
// 即使加载出错，也得重置
dropload.resetload();
}
});
}
});
});
dropload.js 사용 방법에 대해
mui 풀업 로딩에 대한 자세한 설명 예시 다중 풀다운 새로 고침 데이터의 캡슐화 과정
풀다운 새로 고침 구현 방법 분석 및 WeChat 애플릿 목록 풀업 로딩
위 내용은 dropload.js 플러그인 풀다운 새로 고침 및 풀업 로딩 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
