icon-rss-large

中文泛技术类IT博客 | 留言

软路由 | 硬路由 | 网站地图 |

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

发表于 2016年03月09日 教程版

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

正式开始,步骤如下:

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

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

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

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

Markup
    <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(没有新建一个):

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


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


本文标题:zblogphp使用infinite-scroll实现页面无限下拉加载功能
本文链接:http://www.hfycny.com/index.php/post/955.html
作者授权:除特别说明外,本文由 citywo 原创编译并授权 大城小我 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。
1
留言区
  1. 博客导航
    博客导航, 2016-05-02 10:57:56

    看来很多都是通用的,WordPress站点也是通过这个来实现自动加载

    Windows XPWindows XP Google Chrome 31.0.1650.63Google Chrome 31.0.1650.63

留言区

名游彩票 www.096113.com-众彩网彩票预测专家| www.9209.net-七星彩开结果奖| www.89953.com-彩票站图片-| www.t65.cc-时时彩后三杀号方法| www.579.me-分分彩怎么买大小| www.7886.vip-澳门好彩运公司简介| www.38257.cc-博创彩票可靠吗| www.96234.cc-福利彩票发展历史| www.081054.com-大乐透专家彩票擂台| www.211010.com-网上彩票代理犯法吗| www.345455.com-好客彩票官网网址| www.494020.com-腾讯二分彩开奖结果| www.590583.com-3d彩票公式-| www.689102.com-山东福彩app下载| www.807765.com-陈赫包贝尔中彩票| www.903671.com-下载大发快三时时彩| www.984682.com-彩运8怎么赚钱| www.534.date-6位数彩票开奖查询| www.4952.vip-盛源时时彩平台| www.508079.com-3d云刚说彩推荐| www.639202.com-苏州开彩票店流程| 500彩票www.259291.com| www.lf72.com-中彩彩票垃-| www.064888.com-海南私彩举报电话| www.221384.com-手机123彩票网| www.308057.com-分分彩后二怎么杀号| www.391651.com-体彩中几位数有奖| www.551605.com-粤彩网彩票靠谱吗| www.648869.com-彩墨层析怎么做| www.736613.com-上海市体彩中心| www.824745.com-聚丰彩票玩官方网站| www.906456.com-吉林快三怎么买稳赢| www.977154.com-河南濮阳天价彩礼| www.ga97.com-浙江快乐彩-| www.zw33.com-八面通七彩国际影城| www.37gr.com-惠彩乐购app| www.1250.vip-3d樂彩網-| www.8714.cc-财神快三-| www.977346.com-河南彩礼20万| www.is2.cc-快三网站平台官网娱| www.xw18.com-快三开奖记录查询表| www.29wl.com-彩铅人物皮肤上色| www.266033.com-宁夏福利彩票快三| www.440369.com-胜负彩18077预| www.541632.com-竞彩足球app彩票| www.648884.com-贵州快三遗漏统计表| www.742678.com-四川体育彩票开奖| www.825077.com-艺术边彩-| www.900633.com-淘彩票apk-| www.971048.com-幸运彩票平台| www.br42.com-彩经网旧版-| www.uv09.com-福彩3d大本营论坛| www.13rl.com-万彩吧资料l| www.85yo.com-包头福利彩票站| www.2560.vip-中彩票前很倒霉| www.8668.org-星期六开七星彩奖吗| www.71553.com-卓易彩票17年版本| www.661645.com-体彩废了-| www.817834.com-彩票表格模板| www.905625.com-快三单双对赌套利| www.974240.com-江西多乐彩组选走超| www.cc17.com-内蒙古时时彩走势图| www.vo84.com-甘肃快三规律破解| www.15ot.com-有关彩票的对联| www.533.cm-新星彩买马网站| www.4533.biz-六壬金口诀测彩票| www.00110.com-重庆体彩中奖| www.71792.com-怎么鉴别黄金和彩金| www.440780.com-快三百宝彩-| www.547258.com-北京快三赔率| www.651234.com-创意色彩优秀作品| www.743444.com-中彩网擂台赛丶| www.819793.com-乡镇福彩赚钱吗| www.893182.com-彩票超级助手官网| www.964735.com-江苏e球彩直播| 彩票5www.598074.com| www.jg45.com-吉林快三大小破解| www.34wc.com-中国体彩七星彩历史| www.fk66.com-五分快三内部计划| www.4pp.com-赤峰福彩官网| www.82hs.com-竞彩足球7-| www.2117.cc-多彩贵州航空怎么样| www.8147.loan-7125彩票-| www.29859.com-易彩集团违法吗| www.76911.cc-登录优彩网主页| www.028504.com-哪些彩票平台不出款| www.110641.com-甘肃体彩手机在线| www.181705.com-安徽快三基本走势| www.256517.com-978彩票下载| www.329812.com-最新彩票指南电子版| www.402758.com-洛阳结婚彩礼多少钱| www.509245.com-玩时彩违法吗| www.581069.com-开彩吧彩特网| www.657435.com-时时彩代理被抓判刑| www.871171.com-星彩空间-| www.21493.com-七天彩票下载| www.71297.com-体育彩票推荐微信群| www.090331.com-170凤彩网-| www.155523.com-福彩双色球首奖诗| www.254291.com-吉林新快三开奖时间| www.327672.com-天天彩票软件骗局| www.397009.com-七星彩中六个数有奖| www.539481.com-昆明彩票店承包| www.621422.com-甘肃快三电脑版| www.691152.com-可靠的彩票投注网站| www.769982.com-当黑彩庄家-| www.874949.com-信博网彩票平台| www.948206.com-福彩图谜汇总牛材网| www.990105.com-彩经彩票新版走势图| www.zh4.com-江苏快三二同号推荐| www.tv86.com-高频彩是如何开奖的| www.01bs.cc-海南七星彩梦图册| www.65tw.com-湖北体彩网手机版| www.0454.cn-彩票平台怎么做代理| www.8777.tv-i爱彩彩票-| www.vb17.com-体彩开机试机号| www.24kk.com-手机贴汽车彩膜| www.529.live-时时彩量刑-| www.3886.com-竞彩14场开奖奖金| www.916927.com-88彩票平台怎么样| www.988719.com-时时彩平台改号制作| www.ae1.cc-中国体彩快三走势图| www.te13.com-彩票店转让官司| www.04nk.com-彩富天下官网| 500彩票www.324877.com| www.sy59.com-生肖彩票哪里买| www.60mv.com-澳门赌彩送彩金88| www.0856.net-中国福彩查询| www.57023.com-大发时时彩快3技巧| www.045077.com-快三河南几点开奖| www.136187.com-送彩金游戏-| www.217125.com-五省快三最大遗漏| www.290071.com-快三甘肃开奖走试图| www.441100.cc-炫彩图片带字| www.764449.com-中国彩软件-| www.875996.com-e球彩任二最划算| www.947821.com-竞猜彩票怎么买| www.996637.com-宝彩网3d走势图| www.cp8559.com-上海福彩官网| www.pe02.com-足彩澳门即时盘| www.01fo.com-彩虹像桥还像什么| www.68az.com-竟彩网258-| www.0543.site-郑州481彩票| www.8049.cc-云南时时采彩走势图| www.25319.com-彩铅拓印画-| www.63660.com-竞彩海外预测推荐| www.033651.com-彩店宝安卓-| www.115993.com-推荐足球彩票app| www.180545.com-玩快三稳赚技巧| www.245721.com-江苏福彩双色球单式| www.313827.com-足彩十四场比分| www.378077.com-美女索20万彩礼| www.540016.com-洛阳休闲快三教学版| www.620422.com-加州彩票app| www.681361.com-买彩票赔钱-| www.751341.com-凤凰彩票最高邀请码| www.813042.com-高频彩开奖结果| www.878093.com-重庆时彩对刷| www.971496.com-彩运彩票app下载| www.gm19.com-江苏快三是传销吗| www.wc21.com-七星彩预测推荐| www.03um.com-福彩6码遗漏| www.62yl.com-重庆时时采彩开预测| www.0037.pw-彩票跟号能中奖吗|