前言

在开发「Sweet」主题时，我在想我不能摆脱“点击”分页，做到“滚动”分页。于是我开始在百度寻找一个方法，最终在泽泽大佬那里找到了这个文章，但在开发「Cuckoo」时，全站使用了 PJAX ，文章内没有写怎么兼容 PJAX ，所以就有了这篇文章，首先咱先介绍一下 Infinite Ajax Scroll 是什么。

介绍

Infinite Ajax Scroll是一个JavaScript无限滚动插件，通过读取现有服务器端分页的下一个（和上一个）链接并在访问者滚动到页面末尾时通过AJAX加载这些页面来工作。目前v3开头的版本已经脱离了JQuery，本文使用的版本则是v2的版本。

使用效果可以看下咱的博客！也欢迎大家下载「 Cuckoo 」主题（硬核推广233

安装

第一步

前往 Github 下载该文件压缩包并解压获得（jquery.ias.js）

第二步

将 jquery.ias.js 放入自己主题中的js文件夹（或静态文件夹）中

第三步

在 header.php 或 footer.php 中添加一下代码：

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="<?php $this->options->themeUrl('assets/js/jquery-ias.js'); ?>"></script>

注意⚠️：jquery-ias.js 必须引用在 jquery.min.js 后面，否则会出错；如果已引用 jquery.min.js 则无需再次引用。

第四步

前往“index.php”或其他文件查找主题的分页代码，如果你所用的主题使用的分页代码是 <?php $this->pageNav(); ?> 请将其改成 <?php $this->pageLink('下一页', 'next'); ?> ，并且用一个容器包裹它，这里我们用一个class为“changePage”，因此修改后代码如下：

<div class="changePage">
  <?php $this->pageLink('下一页', 'next'); ?>
</div>

第五步

在 footer.php 文件中输入以下代码：

<script>
jqueryIAS = function () {
  var ias = jQuery.ias({
    container: ".left",  //包裹全部文章页面的容器
    item: ".page",  //包裹文章的容器
    pagination: ".changePage", //包括分页的容器
    next: ".next"  //下一页的容器
  });
  ias.extension(new IASTriggerExtension({
    text: "加载更多",  //这里为点击加载前的文字
    offset: 2,  //这里为加载“第二页”后显示其按钮，当然可以自己修改多少页后
  }));
  ias.extension(new IASSpinnerExtension({
    html: '<div class="mdui-spinner mdui-spinner-colorful"></div>'  //在加载期间的loading，这里设置的是MDUI框架的圆形进度指示器
  }));
  ias.extension(new IASNoneLeftExtension({
    text: "到底了啦"  //到底后显示文字啦！
  }));
};
jqueryIAS();
</script>

添加到这里，就已经大功告成啦！！！但是如果主题开了PJAX怎么办捏？那就在PJAX的回调里加上以下代码就好啦！！冲冲冲！

$(document).on('pjax:beforeReplace', function(){
    $.ias().destroy();
});
$(document).on('pjax:end', function(){
    $.ias().reinitialize();
});

结尾

咱写的可能不太好，有什么错误的地方还请大佬们指出来哦！希望这篇文章可以帮到你！（溜