用js实现下拉菜单（采用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="https://www.yuucn.com/{$host}zb_system/script/common.js" type="text/javascript"></script> <script src="https://www.yuucn.com/{$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="https://www.yuucn.com/{$v}">下一页</a></span> {else} <a href="https://www.yuucn.com/{$v}"><span class="page">{$k}</span></a> {/if} {/foreach} {/if} </div>

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

<script> $(document).ready(function (){ $("#divMain").infinitescroll({ //divMain为大容器的id navSelector : ".navigation", //导航的选择器     


     


     

，会被隐藏 nextSelector : ".next-page a",//包含下一页链接的选择器 itemSelector : ".post",//你将要取回的选项(内容块) debug : true, //启用调试信息 loadingImg : "/img/loading.gif", //加载的时候显示的图片 //默认采用："" loadingText : "我正在给力载入中...",//加载的时候显示的文字 // 默认显示： "<em>Loading the next set of posts...</em>" animate : true, //当有新数据加载进来的时候




 




 




，页面是否有动画效果
   

   

  ，默认没有 extraScrollPx: 50, //滚动条距离底部多少像素的时候开始加载     

     

     
，默认150 donetext : "客官已经结束了..." ,//数据加载完的时候显示的信息 // 默认显示： "<em>Congratulations, youve reached the end of the internet.</em>" bufferPx : 40,//载入信息的显示时间 




  




  




，时间越大

  


  


 ，载入信息显示时间越短 errorCallback: function(){},//当出错的时候     
     
     ，比如404页面的时候执行的函数 localMode : true //是否允许载入具有相同函数的页面  




   




   




，默认为false }); }); </script>

PS：上面的js设置参数一般只用设置前三项即可


 



 



，后面的都是个性化设置               ，可按照自身需求修改

  


  


 。完成以上四步   




    




    



，保存好相关文件













，后台首页更新下缓存我们就能看到效果了     
     
     。