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条数据的时候，就能充满整个页面，上拉加载更多也能正常使用了