phpcms列表页js实现加载更多效果

Posted 2020-10-05

先看一下效果：

默认显示6条数据，点击一次加载更多追加显示6条，直到数据全部显示完全，隐藏加载更多按钮。

列表页引入一下文件：

<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../jquery.showMore.js"></script>
<script type="text/javascript">
    //调用显示更多插件。参数是标准的 jquery 选择符 
    $.showMore(".showMoreNChildren,.clearfix");
</script>

其中核心js文件jquery.showMore.js

// JavaScript Document

(function () {
  var showMoreNChildren = function ($children, n) {
    //显示某jquery元素下的前n个隐藏的子元素
    var $hiddenChildren = $children.filter(":hidden");
    var cnt = $hiddenChildren.length;
    for (var i = 0; i < n && i < cnt ; i++) {
      $hiddenChildren.eq(i).show();
    }
    return cnt - n;//返回还剩余的隐藏子元素的数量
  }
  
  jQuery.showMore = function (selector) {
    if (selector == undefined) { selector = ".showMoreNChildren" }
    //对页中现有的class=showMorehandle的元素，在之后添加显示更多条，并绑定点击行为
    $(selector).each(function () {
      var pagesize = $(this).attr("pagesize") || 10;
      var $children = $(this).children();
      if ($children.length > pagesize) {
        for (var i = pagesize; i < $children.length; i++) {
          $children.eq(i).hide();
        }
  
        $("<div class=‘showMorehandle‘ >加载更多</div>").insertAfter($(this)).click(function () {
          if (showMoreNChildren($children, pagesize) <= 0) {
            //如果目标元素已经没有隐藏的子元素了，就隐藏“点击更多的按钮条”
            $(this).hide();
          };
        });
      }
    });
  }
})();

原理：

页面上是全部的数据，只是按照页面显示要求，自己规定显示部分范围，其余隐藏。如果还有数据，点击加载更多，继续追加几条数据；直到没有更多数据了，就会隐藏加载更多按钮。

本文出自 “Jack_phpcms” 博客，请务必保留此出处http://maifang158.blog.51cto.com/5433990/1962671