이 글은 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>예시 2, 상단 및 하단 로드
<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>예 3, 다중 로딩
$(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); });예 4, 고정 레이아웃, 상단 및 하단 로딩
$(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 중국어 웹사이트의 기타 관련 기사를 참조하세요!