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

 2023-09-10 阅读 15 评论 0

摘要:使用方法 1.引入文件 <script src="/app/media/js/dropload.min.js"></script>   11111111111111111 js重新加载当前页面,2.选择刷新内容的位置 <div class="page-main"><div class="list-box"></div>

使用方法

1.引入文件

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

11111111111111111

js重新加载当前页面,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>

 

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

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

↑Pull up load more

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

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

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

转载于:https://www.cnblogs.com/fpcing/p/10857297.html

版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。

原文链接:https://hbdhgg.com/3/36117.html

发表评论:

本站为非赢利网站,部分文章来源或改编自互联网及其他公众平台,主要目的在于分享信息,版权归原作者所有,内容仅供读者参考,如有侵权请联系我们删除!

Copyright © 2022 匯編語言學習筆記 Inc. 保留所有权利。

底部版权信息