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>