dede列表页无限加载功能实现

在织用织梦开发网站的过程,有时候会用到无限下拉这个功能。通过在列表模板中加载JS文件,修改系统模板可以轻松实现。具体来说,可以按照以下3步操作:
 
第一:在head中加载jquery.js、jquery-ias.min.js文件
 
<script src="{dede:global.cfg_templets_skin/}/style5/abc/jquery.js"></script>
<script src="{dede:global.cfg_templets_skin/}/style5/abc/jquery-ias.min.js"></script>
 
第二:接着上面的JS文件,加载该下述JS代码
 
<script type="text/javascript">
var ias = $.ias({
    container: ".listbox", //包含所有文章的元素
    item: ".item", //文章元素
    pagination: ".pagelist", //分页元素
    next: ".pagelist a.nextpage", //下一页元素
});
ias.extension(new IASSpinnerExtension({
    src: "/templets/bailong/images5/loading.gif", //此选项为加载时缓冲图片
    html: '<p style="text-align: center;"><img src="{src}"/></p>'
}));
ias.extension(new IASTriggerExtension({
    text: '点击加载更多', //此选项为需要点击时的文字
    html: '<p style="text-align: center; cursor: pointer;"><a>{text}</a></p>',
    offset: !1, //设置此项,如 offset:2 页之后需要手动点击才能加载,offset:!1 则一直为无限加载
}));
ias.extension(new IASNoneLeftExtension({
    text: '已经加载完成!', // 加载完成时的提示
    html: '<p style="text-align: center; cursor: pointer;"><a>{text}</a></p>',
}));
</script>
 
第三:在DEDE模板中添加listbox(包含循环体、分页代码)、item(循环体最外层标签)、pagelist(分页代码最外层标签)、nextpage(分页代码内)类,
 
<div class="content listbox">
 
  <div class="title">
    <h5 style="line-height: 1.3">{dede:field name='position'/}</h5>
  </div>
 
  {dede:list    orderby ='pubdate'}
  <article class="excerpt excerpt-1 item"><a class="focus" href="[field:arcurl/]" title="[field:title/]" target="_blank" ><img class="thumb" data-original="[field:picname/]" src="[field:picname/]" alt="[field:title/]"  style="display: inline;"></a>
    <header><a class="cat" href="#" title="MZ-NetBlog主题" >[field:typename/]<i></i></a>
      <h2><a href="[field:arcurl/]" title="[field:title/]" target="_blank" >[field:title/]</a></h2>
    </header>
    <p class="meta">
      <time class="time"><i class="glyphicon glyphicon-time"></i> [field:pubdate function="MyDate('Y-m-d',@me)"/]</time>
      <span class="views"><i class="glyphicon glyphicon-eye-open"></i> [field:click/]</span> 
     <!-- <a class="comment" href="##comment" title="评论" target="_blank" ><i class="glyphicon glyphicon-comment"></i> 4</a>-->
      </p>
    <p class="note">[field:description function="cn_substr(@me,600)"/]...</p>
  </article>
 {/dede:list} 
 
  <nav class="pagination pagelist" style="display: none;">
    <ul>
     {dede:pagelist listitem="next" listsize="1" runphp=yes}@me = preg_replace('/<ashref=(['"]?).+?/', '$0 class="nextpage"', @me);{/dede:pagelist}
    </ul>
  </nav>
 
</div>