zblogphp使用infinite-scroll实现页面下拉加载功能

鸟儿博客有一篇文章也是讲zblog如何实现”给页面加入下拉加载效果“，使用的js不同，原理大致是一样的。大家可以对比参考。

正式开始，步骤如下：

1：首先要下载infinite-scroll.js，這个js文件可以去infinite-scroll官网下载，下载地址：http://www.infinite-scroll.com/。

下载后在你正在使用的zblog模板头部引入js文件，注意必须要有jquery库（一般主题都会引入jquery库，如果有奇葩主题没有引入请自行引入。）

第一步引入js的正确代码如下：

Markup

   <script src=&quot;{$host}zb_system/script/common.js" type="text/javascript"></script>

   <script src="{$host}zb_users/theme/{$theme}/script/jquery.infinitescroll.js" type="text/javascript"></script>

2：修改pagebar.php（没有新建一个）:

PHP

<div class="navigation">

{if $pagebar}

{foreach $pagebar.buttons as $k=>$v}

 {if $pagebar.PageNow==$k}

 <span class="page now-page">{$k}</span>

 {elseif $pagebar.PageNow+1==$k}

   <span class="next-page"><a href="{$v}">下一页</a></span>

 {else}

   <a href="{$v}"><span class="page">{$k}</span></a>

 {/if}

{/foreach}

{/if}

</div>

3：设置参数，在上面两个js文件下加入以下js代码设置参数：

JavaScript

<script>  

   $(document).ready(function (){  

     $("#divMain").infinitescroll({  //divMain为大容器的id

 navSelector  : ".navigation", //导航的选择器，会被隐藏

 nextSelector : ".next-page a",//包含下一页链接的选择器

 itemSelector : ".post",//你将要取回的选项(内容块)

 debug        : true, //启用调试信息

 loadingImg   : "/img/loading.gif", //加载的时候显示的图片

                //默认采用："http://www.infinite-scroll.com/loading.gif"

 loadingText  : "我正在给力载入中...",//加载的时候显示的文字

                // 默认显示： "<em>Loading the next set of posts...</em>"

 animate      : true, //当有新数据加载进来的时候，页面是否有动画效果，默认没有

 extraScrollPx: 50, //滚动条距离底部多少像素的时候开始加载，默认150

 donetext     : "客官已经结束了..." ,//数据加载完的时候显示的信息

                // 默认显示： "<em>Congratulations, you've reached the end of the internet.</em>"

 bufferPx     : 40,//载入信息的显示时间，时间越大，载入信息显示时间越短

 errorCallback: function(){},//当出错的时候，比如404页面的时候执行的函数

 localMode    : true //是否允许载入具有相同函数的页面，默认为false

       });  

   });  

 </script>

PS：上面的js设置参数一般只用设置前三项即可，后面的都是个性化设置，可按照自身需求修改