列表页制作及无滚动加载内容

代码如下:

<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= 这个不需要你去记住,只是让大家知道,最后他会生成一个很特别的网址,带上各项参数并且以=号结尾,=号后面就必须要跟上页码数字

下面这一段,就是实现滚动显示更多的,如果你不想滚动显示更多,而想点击显示更多的话,就可以把下面这一段删除掉.

//滚动显示更多
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();
    }
  });
});