zblogphp使用infinite-scroll实现页面下拉加载功能
天兴工作室 2015-08-14 22:44 zblogphp教程 6810 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。
相关推荐
- zblog怎么截取指定字数的摘要?zblog摘要自定义截取方法介绍02-29
- zblog获取当前页面的标题/链接/ID等属性02-02
- zblog模板文章发布时间格式详细说明11-23
- zblog页面打开慢|TTFB加载时间长的排查方法05-19
- zblog应用中心下载应用提示:App下载失败04-07
- zblog发布文章提示成功但是没有保存的问题原因和解决办法01-12
- zblogphp调用分类下子分类和子孙分类的代码08-06
- zblog一个数据库建立多个网站或者多个网站公用一个数据库的方法07-31
- zblog如何调用用户?zblog调用网站用户的方法07-27
- zblog新版GetList函数的参数说明和使用方法07-06
- zblog1.7版本“固定网站域名”按钮不见了怎么办?zblog固定网站域名功能设置步骤04-19
- zblog升级1.7报错“Invalid argument supplied for foreach”或者“unserialize(): Error at offset”的解决办法04-11
- zblogphp1.7版本正式上线,附zblogphp1.7升级指南和注意事项02-08
- zblog判断插件是否安装或者启用的代码介绍01-16
- zblogphp提示“ Call to undefined function openssl_pkey_get_public()”的原因和解决办法12-25
- zblogphp1.6版本报错“非法访问”的原因和解决办法12-23
欢迎 你 发表评论: 取消回复
- 最新文章
- 热文排行
- 最多评论
- 1天兴工作室官网购物活动:全场8折优惠券 不限次数不限金额04-17
- 2天兴工作室zblog纯博客主题 vue3+小程序双版本03-19
- 3vue3项目引入vant报错的错误原因和解决办法03-12
- 4天兴工作室zblog百科主题 可搭配会员插件实现知识付费盈利03-06
- 5zblog怎么截取指定字数的摘要?zblog摘要自定义截取方法介绍02-29
- 6天兴工作室2023双11活动:五折优惠券大放送11-05
- 7腾讯云2023双11活动:2H2G3M轻量服务器88一年限新用户11-05
- 8新老同享 阿里云2023双11活动:2核2G3M带宽云服务器99元/年!10-31
- 9天兴工作室zblog免登录付费阅读插件 支持支付宝微信支付虎皮椒支付10-09
- 标签聚合
- ×1wang×1ytcms下载×1免费模板×5唐世军×1zblogphp1.5bug×3zblog标题×1下拉记载×1zblogphp自适应模板×1zblogphp下载×1评论设置×23阿里云×1禁止右键×2代码×1zblog数据能力×5zblog下载×4https×1附件大小×3视频教程×1主题报错×1保健品
最新评论
-
天兴工作室
03-21对的,下个版本会修复 -
访客
03-20此模版多张并排图片,不管点哪张图,都显示第一张,且没有轮播按钮,只能手动关闭。 系统:win7+火狐浏览器 -
天兴工作室
01-19没听懂 你是要批量创建分类?这是插件的事情主题不会考虑的 -
访客
01-18分类一个一个设置太麻烦了。能不能在主题设置里添加对分类的设置。 -
天兴工作室
01-16没太理解你的需求,麻烦联系我们的在线qq2076496616提供订单号详细说明下需求
有 2 位网友评论:
天兴工作室网友 8年前 (2016-01-07) 回复
本地测试不成功,咋办?
天兴工作室网友 9年前 (2015-08-21) 回复
很好,天兴分享的zblog小技巧文章是最多的了,很好!感谢!!!