2019
11-24

zblog下拉自动加载下一页,zblog使用infinite-scroll官网下载实现页面下拉加载功能,infinite-scroll官网下载

免费支持本站

zblog下拉自动加载下一页zblog使用infinite-scroll官网下载实现页面下拉加载功能

正式开始,步骤如下:

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

给你的页面加入下拉加载效果

官方QQ群号码:922069959
点击链接加入群聊【路由器交流】:https://jq.qq.com/?_wv=1027&k=5AKdmZP

您可能感兴趣的文章

路由器交流群

支付宝打赏支付宝打赏微信打赏微信打赏

本站》评论功能已永久关闭

官方QQ群号码:922069959
点击链接加入群聊【路由器交流】:
https://jq.qq.com/?_wv=1027&k=5AKdmZP
官方QQ群号码:922069959