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

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

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

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

  其中 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>

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

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

 

posted @ 2016-09-01 17:50  彬涵  阅读(14422)  评论(0编辑  收藏