采用JS实现ZBLOG PHP程序分页下拉加载效果

在页面实现下拉加载更多的功能，是一项非常方便且常见的功能，其实质就是相当于加载更多的按钮，实现假分页，只显示自己规定的内容，其余部分隐藏。如果还有数据，点击下加载更多，直到没有更多数据了，就会显示加载完毕。这个功能对于手机页面尤其友好，但是Zblog本身并未自带此项功能，从其他网站的实现办法来看，大都可以通过修改JS代码参数的的办法来实现。废话不多说，我们直接上代码开始操作。

首先，下载infinite-scroll.js文件

我们需要去infinite-scroll的官网下载一个infinite-scroll.js文件，网址是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>
    

第三步：修改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>
    

第四步：在上面两个js文件下加入以下js代码设置参数：

script>
$(document).ready(function (){
$("#divMain").infinitescroll({
     //divMain为大容器的idnavSelector : ".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, //滚动条距离底部多少像素的时候开始加载，默认150donetext : "客官已经结束了..." ,//数据加载完的时候显示的信息// 默认显示： "em>
    Congratulations, you've reached the end of the internet./em>
"bufferPx : 40,//载入信息的显示时间，时间越大，载入信息显示时间越短errorCallback: function(){
}
,//当出错的时候，比如404页面的时候执行的函数localMode : true //是否允许载入具有相同函数的页面，默认为false}
    );
}
    );
    /script>
    

PS：上面的js设置参数一般只用设置前三项即可，后面的都是个性化设置，可按照自身需求修改。完成以上四步，保存好相关文件，后台首页更新下缓存我们就能看到效果了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！