结合:PC+手机文章列表点击更多加载插件(使用)
   
lan988 级别:管理员    + 关注TA 支持(0) | 反对(0)原内容


<script type="text/javascript">
          $(document).ready(function(){
            $(window).scroll(function(){
              if($(document).scrollTop()>=$(document).height()-$(window).height()){
                var div1tem = $('.img-list').height()
               $('.btn-more').click();
              }
            })
          })
    var page = 2;
    //参数:栏目小ID,列表样式,列表样式名
    //列表样式名: 1、若是ID样式名前面加#(井号) 2、若是Class样式名前面加.(英文句号)
    function loadmore(ClassID,action,dest){
        $.ajax({
            type:'get',
            dataType :'json',
            url:'/3g/info.asp?id='+ ClassID +'&action='+ action +'&page=' + page,
            success:function(data){

$('.btn-more').show();
                $('.loading').hide();
                page = data.page;
                $(dest).append(data.html);
                if (!data.hasmore){
                    $('.btn-more').removeAttr("onClick").html("没有更多内容了");
                }else{

$('.btn-more').hide();

}
            }
        });
        $('.loading').addClass("loadimg").html("正在加载...").show();
    }
    </script>

下面说些调注意的地方:
<script src="/KS_Inc/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var page = 2;
//参数:栏目小ID,列表样式,列表样式名
//列表样式:0为默认演示列表 1为普通列表 2为带图片的列表
//列表样式名: 1、若是ID样式名前面加#(井号) 2、若是Class样式名前面加.(英文句号)

function loadmore(ClassID,action,dest){
$.ajax({
  type:'get',
  dataType :'json',
  url:'/3g/info.asp?id='+ ClassID +'&action='+ action +'&page=' + page,
  success:function(data){
   $('.loading').hide();
   page = data.page;
   $(dest).append(data.html);
   if (!data.hasmore){
    $('.btn-more').hide();
   }
  }
});
$('.loading').show();
}
</script>

<ul class="img-list">
</ul>
<div class="loading" style="display:none"> </div>
<div class="btn-more" onclick="loadmore('3',1,'.img-list')">查看更多</div>


备注:红色为调用时应当修改的地方,不要直接使用上面的代码,部分代码科汛屏蔽了可以用文章里附件里的

使用方法:

<script type="text/javascript">
var page = 1;
var divHeight=0;
var timer=window.setInterval(function(){
if($('.loading').offset().top<=document.documentElement.clientHeight+$(window).scrollTop()){
  if(divHeight!=$('.loading').offset().top){
   divHeight=$('.loading').offset().top;
   loadmore('3',1,'.img-list');
  }
}
},500)
//参数:栏目小ID,列表样式,列表样式名
//列表样式:0为默认演示列表 1为普通列表 2为带图片的列表
//列表样式名: 1、若是ID样式名前面加#(井号) 2、若是Class样式名前面加.(英文句号)
function loadmore(ClassID,action,dest){
$.ajax({
  type:'get',
  dataType :'json',
  url:'/3g/info.asp?id='+ ClassID +'&action='+ action +'&page=' + page,
  success:function(data){
   page = data.page;
   $(dest).append(data.html);
   if (!data.hasmore){
    $('.loading').hide();
    if(timer){clearTimeout(timer)} //清除定时任务
   }
  }
});
}
</script>

<ul class="img-list">
</ul>
<div class="loading">加载中...</div>


回到顶部顶端 回到底部底部
lan988 级别:管理员    + 关注TA 支持(0) | 反对(0)2楼


 下载信息  [文件大小:1.66 KB 下载次数: 次]
点击下载文件:点击更多加载插件utf-8
回到顶部顶端 回到底部底部