注册 登录 天兴工作室:提供zblog模板 emlog模板 dedecms模板的下载和仿站定制

zblogphp教程

zblogphp教程汇总

当前位置:网站首页 教程 zblogphp教程 正文

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

天兴工作室管理 2015-08-14 zblogphp教程 2084 ℃ 2 评论

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

正式开始,步骤如下:


1:首先要下载infinite-scroll.js,這个js文件可以去infinite-scroll官网下载,下载地址: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>


2:修改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>


3:设置参数,在上面两个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设置参数一般只用设置前三项即可,后面的都是个性化设置,可按照自身需求修改。


一共就这三步,保存好,后台首页更新下缓存就能看到效果了。案例可以查看:http://xixixixi.wang

赞 (7)

已有 2 位小伙伴发表了看法

天兴工作室网友

回应ta天兴工作室网友 (游客)

评论于 2016-01-07 09:23:49

本地测试不成功,咋办?
天兴工作室网友

回应ta天兴工作室网友 (游客)

评论于 2015-08-21 01:07:22

很好,天兴分享的zblog小技巧文章是最多的了,很好!感谢!!!

欢迎 发表评论

服务项目

快速入口

常见问题

天兴工作室 | www.txcstx.cn

天兴工作室介绍天兴工作室承接:网站建设、zblog模板和dedecms模板定制、仿站(像素级仿站)、html单页面定制和修改、网站模板修改等服务;我们的办事准则:要么不答应、答应则一定做到

  • 交流群:ZBLOG交流群
  • 客户群:天兴工作室客户群
在线QQ 评论文章