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

小灰灰 2022-04-24 08:46 284阅读 0赞

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

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

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

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

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

![复制代码][copycode.gif]

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>

![复制代码][copycode.gif]

下面显示script代码部分

![复制代码][copycode.gif]

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>

![复制代码][copycode.gif]

![1016253-20160901174638230-133658111.png][]

这种是最简单的方法不需要引入任何插件，直接在js页面上添加script代码即可。

这是我第一次使用博客与大家分享我的代码，请各位前辈不吝赐教，多多指点，有什么问题都可以给我指出，不胜感激。

![1016253-20160901174830090-1738401968.png][]

[js]: https://www.cnblogs.com/banshuai/p/5830785.html
[copycode.gif]: /images/20220217/7f6d8cb74fa04cf3a10e39fe76675a5c.png
[1016253-20160901174638230-133658111.png]: /images/20220217/a460743006e8488aafb43047265f0a2d.png
[1016253-20160901174830090-1738401968.png]: /images/20220217/c78e4dc84a5e4d10b807fa9e75612fbe.png