修改JS代码参数实现Zblog页面下拉加载更多功能

由 willer 发布

在页面实现下拉加载更多的功能,是一项非常方便且常见的功能,其实质就是相当于加载更多的按钮,实现假分页,只显示自己规定的内容,其余部分隐藏。如果还有数据,点击下加载更多,直到没有更多数据了,就会显示加载完毕。这个功能对于手机页面尤其友好,但是Zblog本身并未自带此项功能,从其他网站的实现办法来看,大都可以通过修改JS代码参数的的办法来实现。废话不多说,我们直接上代码开始操作。


首先,下载infinite-scroll.js文件


我们需要去infinite-scroll的官网下载一个infinite-scroll.js文件,网址是http://www.infinite-scroll.com/。文件完成下载以后,在zblog模板头部引入该js文件,同时需要提醒注意的是必须要有jquery库(一般主题都会引入jquery库,如果真有主题没有引入请自行引入。)


第二步:引入正确的js代码


    <script src="{$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>


第三步:修改pagebar.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>


第四步:在上面两个js文件下加入以下js代码设置参数:

<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设置参数一般只用设置前三项即可,后面的都是个性化设置,可按照自身需求修改。完成以上四步,保存好相关文件,后台首页更新下缓存我们就能看到效果了。