zblogphp使用infinite-scroll实现页面下拉加载功能
天兴工作室 2015-08-14 zblogphp教程 5633 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。
相关推荐
取消回复欢迎 你 发表评论:
- 最新文章
- 热文排行
- 最多评论
- 1wordpress在国内无法更新升级的解决办法03-02
- 2天兴工作室2021年春节放假通知02-08
- 3zblogphp1.7版本正式上线,附zblogphp1.7升级指南和注意事项02-08
- 4主题的暗黑模式是什么?怎么设置和使用暗黑模式?01-19
- 5zblog判断插件是否安装或者启用的代码介绍01-16
- 6translate3d和z-index冲突导致z-inde值无效的解决办法01-10
- 7zblogphp提示“ Call to undefined function openssl_pkey_get_public()”的原因和解决办法12-25
- 8zblogphp1.6版本报错“非法访问”的原因和解决办法12-23
- 9wordpress导航栏自定义添加class和rel="nofollow"的步骤12-13
- 标签聚合
- ×1扁担山×1emlog免费主题×1光棍节×2视频主题×5zblogphp主题×2数据库×1沃派×1送手机×1短信回执×1凤凰传奇×1度娘×1木马×1存钱罐×2zbp模板×2两城一家×1tab×1短信×1完美家庭×1电信天猫×1限时促销
最新评论
-
Q站网
更新的草率了,直接后台进不去了,最后去反馈群下载最新压缩包替换才好了。 -
鹏仔
服务器可以配置允许跨域,虚拟主机搭建的 调用api会出现跨域,天哥知道有啥解决办法没 -
访客
来个限时优惠 -
天兴工作室
不还价的 -
小马过河
能不能便宜点啊
有 2 位网友评论:
天兴工作室网友 5年前 (2016-01-07) 回复
本地测试不成功,咋办?
天兴工作室网友 6年前 (2015-08-21) 回复
很好,天兴分享的zblog小技巧文章是最多的了,很好!感谢!!!