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