点击查看大图 [](https://www.kancloud.cn/book/php168/x1_of_qibo/preview/images/56.png) 代码如下: ~~~ <div class="listpages"> {qb:listpage name="bbs_list_page_pc" rows="20" order="list"} <a href="{:urls('content/show',['id'=>$rs['id']])}">{$rs.title}</a> {/qb:listpage} </div> <!--{$pages} 这是传统分页--> <button type="button" onclick="ShowMoreList()">查看更多</button> <script type="text/javascript"> var Mpage = 1; //显示更多 function ShowMoreList(){ Mpage++; $.get('{qb:list_url name="bbs_list_page_pc" /}'+Mpage,function(res){ if(res.code==0){ if(res.data==''){ layer.msg("已经显示完了！",{time:500}); }else{ $('.listpages').append(res.data); scroll_get = true; //这一行仅仅是匹配滚动显示更多.如果没使用滚动特效,可以删除 } }else{ layer.msg(res.msg,{time:2500}); } }); } //滚动显示更多 var scroll_get = true; //做个标志,不要反反复复的加载 $(document).ready(function () { $(window).scroll(function () { if (scroll_get==true && (400 + $(window).scrollTop())>($(document).height() - $(window).height())) { scroll_get = false; layer.msg('内容加截中,请稍候',{time:1000}); ShowMoreList(); } }); }); </script> ~~~ 下面这一段,就是齐博标签中的列表页标签代码 ~~~ <div class="listpages"> {qb:listpage name="bbs_list_page_pc" rows="20" order="list"} <a href="{:urls('content/show',['id'=>$rs['id']])}">{$rs.title}</a> {/qb:listpage} </div> ~~~ 他的标志就是 `{qb:listpage name="xxxx"}模板{/qb:listpage}` 而通用标签是`{qb:tag name="xxxx"}模板{/qb:tag}` 其它参数的用法都基本一样,这里就是唯一不同的地方即:冒号后面的几个字母 > {$pages} 这个是传统分页的代码,现在慢慢不太受喜欢了.体验比较差 这个是点击事件,如果你使用了滚动事件的话,这个就没有存在的意义. ~~~ var Mpage = 1; //显示更多 function ShowMoreList(){ Mpage++; $.get('{qb:list_url name="bbs_list_page_pc" /}'+Mpage,function(res){ if(res.code==0){ if(res.data==''){ layer.msg("已经显示完了！",{time:500}); }else{ $('.listpages').append(res.data); scroll_get = true; //这一行仅仅是匹配滚动显示更多.如果没使用滚动特效,可以删除 } }else{ layer.msg(res.msg,{time:2500}); } }); } ~~~ 上面这一段是JS代码,大部分页面都可以套用的.`var Mpage = 1;`这个是页码默认表示当前已显示了第一页 > {qb:list_url name="bbs_list_page_pc" /} ### 这个代表分页网址,这也是齐博标签最特别的地方, 按以往,甚至现在很多同行, 为了实现分页显示数据,必须要单独做一个PHP文件写数据调用.而我们这里,只需要把显示标签的变量名复制到这里让他们一一对应,就可以解决了 这个分页网址标签在页面运行后,会转义成类似下面的网址 [http://你的域名/index.php/bbs/content/ajax_get/name/bbs_list_page_pc/fid/16/mid/1/rows/20/order/list/by/desc/pagename/ec1e7a01/cache_time/0.html?page=](http://xn--6qqv7i2xdt95b/index.php/bbs/content/ajax_get/name/bbs_list_page_pc/fid/16/mid/1/rows/20/order/list/by/desc/pagename/ec1e7a01/cache_time/0.html?page=) 这个不需要你去记住,只是让大家知道,最后他会生成一个很特别的网址,带上各项参数并且以=号结尾,=号后面就必须要跟上页码数字 下面这一段,就是实现滚动显示更多的,如果你不想滚动显示更多,而想点击显示更多的话,就可以把下面这一段删除掉. ~~~ //滚动显示更多 var scroll_get = true; //做个标志,不要反反复复的加载 $(document).ready(function () { $(window).scroll(function () { if (scroll_get==true && (400 + $(window).scrollTop())>($(document).height() - $(window).height())) { scroll_get = false; layer.msg('内容加截中,请稍候',{time:1000}); ShowMoreList(); } }); }); ~~~