EMLOG列表页实现分页Ajax无限加载功能的方法

相信大家都见到过一些博客网站上都配备有列表页Ajax无限加载功能，这个功能看起来非常的酷炫，不用用户再去点击分页进行跳转，那么现在就来为大家分享一下EMLOG列表页实现分页Ajax无限加载功能的方法。

一、操作步骤

1、打开模板文件header.php，添加如下代码

<script src="<?php echo TEMPLATE_URL;?>js/jquery.js" type="text/javascript"></script>
<script src="<?php echo TEMPLATE_URL;?>js/jquery.ias.min.js" type="text/javascript"></script>

2、打开模板文件log_list.php，找到如下代码

<?php 
if (!empty($logs)):
foreach($logs as $value): 
?>

3、在上面的代码后添加如下代码

<div class="sheli">

4、继续在模板文件log_list.php，找到如下代码

<?php 
endforeach;
else:
?>

5、在上面的代码前添加如下代码

</div>

6、继续在模板文件log_list.php，找到如下代码

<div id="pagenavi"><?php echo $page_url;?></div>

7、在上面的代码后添加如下代码

<script>
var ias = $.ias({
    container: ".content", //包含所有文章的元素
    item: ".sheli", //文章元素
    pagination: "#pagenavi", //分页元素
    next: "#pagenavi a", //下一页元素
});
ias.extension(new IASTriggerExtension({
    text: '<div class="gengduo">点击查看更多内容</div>', //此选项为需要点击时的文字
    offset: 1, //设置此项后，到 offset+1 页之后需要手动点击才能加载，取消此项则一直为无限加载
}));
ias.extension(new IASSpinnerExtension());
ias.extension(new IASNoneLeftExtension({
    text: '<div class="gengduo">已经是全部内容了</div>', // 加载完成时的提示
}));
</script>

8、下载附件里的文件，解压上传到模板文件夹下的JS文件夹里

二、原理解析

通过对EMLOG列表页进行改造，利用Ajax分页技术为EMLOG列表页增加无线加载功能

三、注意事项

1、本教程中实现的效果比较简单，请根据需要自行编写CSS样式

2、本教程需要查找和替换的代码根据模板的不同可能出现偏差，请根据实际情况自行修正

3、本教程代码经测试可能会重复加载内容，可以通过在下一页的a标签加入id=“slnext”，然后把next: "#pagenavi a"改为next: "#pagenavi a#slnext"即可解决问题

四、附件下载