js页面中实现加载更多功能

article/2025/9/18 2:33:01

　　分页-如何实现加载更多功能，目前的在很多网站上使用的加载更多功能中，使用最多的是iscroll.js实现的上拉加载更多、下拉刷新功能。但是iscroll.js本身并没有集成加载更多的功能，需要进行自行扩展。

　　最简单的就是给一个加载更多的按钮，实现假分页加载更多，也就是页面上是全部的数据，只是按照页面显示要求，自己规定显示部分范围，其余隐藏。如果还有数据，点击下加载更多，继续拉几条数据；直到没有更多数据了，就会显示加载完毕。

加载时显示“正在加载……”
数据太多想初次加载部分数据，在底部加上“加载更多”按钮
直到没有更多数据了，就会显示加载完毕。

　　其中 class="loading" 中的loading为自己随便命名，在这里以在js页面上通过c标签的foreach 方法循环遍历企业名字来做演示

 1 <div class="loading">
 2                     <div class="hidden">
 3                         <div class="horisontalpadding">
 4                             <ul class="products product-thumb-info-list">
 5 
                             <--想要实现加载的内容显示在下面即可,同时注意使用li标签-->
 6                                 <c:forEach var="company" items="${companys}">
 7                                     <li class="product searchproduct" style="width: 30%;"><a
 8                                             <div
 9                                                 style="width: 350px; height: 30px; border: 3px solid #CCC; text-align: center; border-radius: 40                                                   px;">
10                                                 <h4 class="company.name" style="color: #030303">${company.name}</h4>
11                                             </div>
12                                     </a></li>
13                                 </c:forEach>


14                             </ul>
15                         </div>
16                     </div>
17                     <ul class="list">数据加载中，请稍后...
18                     </ul>
19                     <div class="space30"></div>
20                     <div style="display: none;" data-bind="visible: isProductsLoading">
21                         <div id="pager_loading"></div>
22                     </div>
23                     <div class="container">
24                         <div class="alert alert-info text-center">
25                             <a href="javascript:;" onClick="loading.loadMore();"><div
26                                     class="more">加载更多企业</div></a>
27                         </div>
28                     </div>
29                 </div>

下面显示script代码部分

 1 <script>
 2         var _content = []; //临时存储li循环内容
 3         var loading = {
 4             _default : 6, //默认显示图片个数
 5             _loading : 6, //每次点击按钮后加载的个数
 6             init : function() {
 7                 var lis = $(".loading .hidden li");
 8                 $(".loading ul.list").html("");
 9                 for (var n = 0; n < loading._default; n++) {
10                     lis.eq(n).appendTo(".loading ul.list");
11                 }
12                 $(".loading ul.list img").each(function() {
13                     $(this).attr('src', $(this).attr('realSrc'));
14                 })
15                 for (var i = loading._default; i < lis.length; i++) {
16                     _content.push(lis.eq(i));
17                 }
18                 $(".loading .hidden").html("");
19             },
20             loadMore : function() {
21                 var mLis = $(".loading ul.list li").length;
22                 for (var i = 0; i < loading._loading; i++) {
23                     var target = _content.shift();
24                     if (!target) {
25                         $('.loading .more').html("<p>全部加载完毕...</p>");
26                         break;
27                     }
28                     $(".loading ul.list").append(target);
29                     $(".loading ul.list img").eq(mLis + i).each(function() {
30                         $(this).attr('src', $(this).attr('realSrc'));
31                     });
32                 }
33             }
34         }
35         loading.init();
36     </script>