dropload.min.js 下拉刷新后，无法上拉加载更多

使用方法

1.引入文件

<script src="/app/media/js/dropload.min.js"></script>　　

11111111111111111

2.选择刷新内容的位置

<div class="page-main">
    <div class="list-box">
    </div>
</div>

　　

3.上拉加载，下拉刷新的主方法

 1 <script>  2 // dropload  3 var page = 0;  4 $('.page-main').dropload({ //需要修改的地方->.page-madin 这个类，表示拉的是哪一个div  5  scrollArea : window,  6  domUp : {  7 domClass : 'dropload-up',  8 domRefresh : '<div class="dropload-refresh">↓pull down to refresh</div>',  9 domUpdate : '<div class="dropload-update">↑Release updates</div>', 10 domLoad : '<div class="dropload-load"><span class="loading"></span>load...</div>' 11  }, 12  domDown : { 13 domClass : 'dropload-down', 14 domRefresh : '<div class="dropload-refresh">↑Pull up load more</div>', 15 domLoad : '<div class="dropload-load"><span class="loading"></span>load...</div>', 16 domNoData : '<div class="dropload-noData">nothing</div>' 17  }, 18 loadUpFn : function(me){ //开始下拉刷新方法 19  $.ajax({ 20 type: 'GET', 21 url: '这里添加接口地址', 22 dataType: 'json', 23 success: function(res){ 24 if (res.error==1) { 25  alert(res.msg) 26 }else{ 27 var da = res.data; 28 if(da){ 29 $('.list-box').html(da); //可以选择获取数据后在这里拼接，也可以在后台直接返回html，然后在这里直接放入容器中 30 }else{ 31  me.lock(); 32  me.noData(); 33  } 34  me.resetload(); 35  } 36  }, 37 error: function(xhr, type){ 38 // 即使加载出错，也得重置 39  me.resetload(); 40  } 41  }); 42  }, 43 loadDownFn : function(me){ 44 page++; 45 var result = ''; 46  $.ajax({ 47 type: 'GET', 48 url: '接口地址'+'&page='+page, 49 // 动态数据地址 50 dataType: 'json', 51 success: function(res){ 52 if (res.error==1) { 53  alert(res.msg) 54 }else{ 55 var da = res.data; 56 if(da){ 57 result = da; 58 }else{ 59  me.lock(); 60  me.noData(); 61 if($(".list-box").find(".zx-zwsj") != undefined){//如果粗在暂无数据的图片，那么把已经到底了给删除掉 62 $(".list-box").find(".dropload-down").remove(); 63  } 64  } 65 $('.list-box').append(result); //放入内容的容器 66  me.resetload(); 67  } 68  }, 69 error: function(xhr, type){ 70 // alert('Ajax error!'); 71  me.resetload(); 72  } 73  }); 74  } 75  }); 76 </script>

 

今天是第四次使用这个js插件，理应是很熟练，但是这次遇到一个问题，也有可能是距离上一次做时间太久了

问题描述: 在下拉刷新后，无法上拉加载更多，页面显示

↑Pull up load more

问题原因：我后台写的接口分页一次为5条，但是5条数据在前台页面显示不足以填充满整个页面

 就像上图这样，所以但是其实数据有9条，页面就无法加载出第2页另外的4条，无法上拉加载更多

解决方法：修改后台分页，每页显示6条，这样一次返回6条数据的时候，就能充满整个页面，上拉加载更多也能正常使用了