emlog实现分页无限加载功能

2021-07-22 20:08:33 / 1 评论 / 5624 阅读 / 正在检测是否收录...

移植这个JOE主题的时候并没有把特效给移过来,主要是因为的JS的技术不行,对于JS代码不完全能够看懂,JOE主题的首页是可以无限加载文章的,emlog也可以实现就是方法不一样,在这里我先记录一下

  • 下载 jquery.ias.min.js、jquery.js(文章最后有下载地址)
  • 把 jquery.ias.min.js、jquery.js 拷贝到你的主题文件JS目录
  • 在编辑器中打开主题文件的header.php,在之间加入下面代码
<script src="<?php echo TEMPLATE_URL;?>jquery.js" type="text/javascript"></script>
<script src="<?php echo TEMPLATE_URL;?>jquery.ias.min.js" type="text/javascript"></script>

在log_list.php 需要改2个地方

找到代码
<?php 
if (!empty($logs)):
foreach($logs as $value): 
?>
后面加入
<div class="sheli">
然后在代码
<?php 
endforeach;
else:
?>
前面加入代码
</div>

在后面加入代码

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

按照以上步骤就可以弄好了,当然css就自己去写了,舍力就不普及了。可能会与一些模板产生js冲突,自己研究一下就可以,测试请用默认模板。

此处内容作者设置了 评论 可见

评论(1)

取消
    1. 头像
      罗志祥Lv.1
      沙发
      看看怎么样
       回复