滑动门+下滑加载更多

滑动门特效 手指下滑,也可以异步加载更多

大家可以参考这个文件 \template\member_style\default\member\user\index.htm

示范代码如下

默认是两个按钮, 不同的频道 ,你可以添加多个按钮

<style type="text/css">
.bbs_title h3{
  width:50%;
  float:left;
  color:#999;
  border-bottom:#ddd 1px solid;
}
.bbs_title h3 i{
  color:#999;
}
.bbs_title h3.ck i{
  color:#F90;
}
.bbs_title h3.ck{
  color:#f90;
  border-bottom:#f90 1px solid;
}
</style>
<div class="SideInfos">
  <div class="bbs_title">
    <!--这里可以是多个TAB按钮-->
    <h3 class="ck"><i class="fa fa-fw fa-file-text-o"></i>我发表的主题</h3>
    <h3><i class="fa fa-fw fa-file-text-o"></i>我回复的贴子</h3>
  </div>
  <!--上面若有多个TAB按钮,那下面也要对应多个,必须要命名为了 class="show_content" 其中的 bbs_content_reply 为的是异步加载用的, 可以不使用 -->
  <div class="show_content">
  {qb:tag name="wap_member_homepage_002" union="uid" type="bbs" rows="5" mid="1" order="id" by="desc"}
    <ul> <ol style="width:80%;"><span>{$i}</span>、<a href="{$rs.url}">{$rs.title|get_word=24}</a></ol><li>{:date("m-d",$rs.create_time)}</li></ul>
  {/qb:tag}
  </div>
  <div class="show_content bbs_content_reply" style="display:none;">
  <!--下面的标签添加js="bbs_content_reply"参数为的就是不影响页面打开速度。js名必须要与外层class名一样,但可以不与标签名一样-->
  {qb:tag name="wap_member_homepage_reply_002" js="bbs_content_reply" union="uid" type="cms" rows="5" mid="1" order="id" by="asc"}
    <ul> <ol style="width:80%;"><span>{$i}</span>、<a href="{$rs.url}">{$rs.title|get_word=24}</a></ol><li>{:date("m-d",$rs.create_time)}</li></ul>
  {/qb:tag}
  </div>
</div>

<script type="text/javascript">
var type_num = 0; //默认是第一项
$(document).ready(function () {
  $(".bbs_title h3").click(function(){
    $(".bbs_title h3").removeClass('ck');
    $(this).addClass('ck');
    type_num = $(this).index();
    $(".SideInfos .show_content").hide();
    $(".SideInfos .show_content").eq(type_num).show();
    scroll_get = true;  //避免其它加载完了,这里却无法加载
  });
});

var Mpage = new Array();  //页码数组
var urldb = new Array('{qb:url name="wap_member_homepage_002" /}','{qb:url name="wap_member_homepage_reply_002" /}'); //不同的URL
function ShowMoreBBs(){
  if( typeof Mpage[type_num]=='undefined' ){
    Mpage[type_num] = 1;
  }
  Mpage[type_num]++;
  var url = urldb[type_num] + Mpage[type_num];

  $.get(url,function(res){
    if(res.code==0){
      if(res.data==''){
        layer.msg("已经显示完了！",{time:500});
      }else{
        $(".SideInfos .show_content").eq(type_num).append(res.data);
        set_i_num();
        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});
      ShowMoreBBs();
    }
  });
});

//设置标题序号
function set_i_num(){
  var j = 0;
  $(".SideInfos .show_content").eq(type_num).find('ul span').each(function(){
    j++;
    $(this).html(j);
  });
}

</script>

下面图文部分由 suifeng 于2019年6月25日进行修编。 关键点就是上面的复制完成后 js部分这里也要加上对应的url即可

var urldb = new Array('{qb:url name="wap_member_homepage_002" /}','{qb:url name="wap_member_homepage_reply_002" /}'