码迷,mamicode.com
首页 > 其他好文 > 详细

滚动加载更多

时间:2017-05-24 16:11:46      阅读:214      评论:0      收藏:0      [点我收藏+]

标签:each   页面   else   view   online   sem   body   article   start   

//第一种方法    

var winH = $(window).height(); //页面可视区域高度 var i = 1; //设置当前页数 $(window).scroll(function () { var pageH = $(document.body).height(); var scrollT = $(window).scrollTop(); //滚动条top var aa = (pageH-winH-scrollT)/winH; if(aa<0.02){ $.getJSON("/Index/getauto",{page:i},function(json){ if(json){ var str = ""; $.each(json,function(index,array){ var str = "<ul class=\"arrow_box\"><div class=\"sy\"><p>"+array[‘content‘]+"</p></div><span class=\"dateview\">"+array[‘time‘]+"</span></ul>"; $(".bloglist").append(str); }); i++; }else{ $("#nodata").show().html("已经到底了。。。"); return false; } }); } }); }); //第二种方法 $(window).scroll(function () { var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).height(); var windowHeight = $(this).height(); var lastid=$("#listli li:last-child").attr(‘id‘); console.log(scrollHeight - scrollTop - windowHeight) if (scrollHeight - scrollTop - windowHeight < 1) { $.ajax({ url: "index.php", type: ‘get‘, datatype:‘json‘, data: {act:‘article‘,op:‘getShopOnlineArtlist‘,start: lastid }, success: function (json) { if(json){ var str = ""; $.each(json,function(index,array){ var str=‘<li id="‘+(lastid+index+1) +‘">‘+ ‘<span class="newslist ">‘ +‘<img src="http://img.sxnxl.com/data/upload/shop/editor/20170213171455_63246.jpg" width="430" height="180">‘ +‘<span>‘ +‘<h3> 政策。。。。。</h3>‘ +‘<p class="gray">时间:2017-02-13 17:15:14</p>‘ +‘<p>content content</p>‘ +‘<p class="red"><a href="index.php?act=article&amp;op=show&amp;article_id=500">查看详情&gt;&gt;</a></p>‘ +‘</span><div class="clearh" style="height:0"></div></span><div class="clearh" style="height:0"></div></li>‘ $("#listli").append(str); }); }else{ $("#nodata").show().html("已经到底了。。。"); return false; } } }) } }) //第三种方法 $(function(){ var lastid=$("#listli li:last-child").attr(‘id‘); var winH = $(window).height(); //页面可视区域高度 $(window).scroll(function () { var pageH = $(document.body).height(); var scrollT = $(window).scrollTop(); //滚动条top var aa = (pageH-winH-scrollT)/winH; if(aa<0.02){ $.getJSON("index.php?act=article&op=getShopOnlineArtlist",{start:parseInt(lastid)+1}, function(json){ if(!$.isEmptyObject(json)){ var str = ""; $.each(json,function(index,array){ var ids=parseInt(lastid)+index+1; var str=‘<li id="‘+ ids +‘">‘+ ‘<span class="newslist ‘+ array.class +‘ ">‘ +‘<img src="‘+array.article_img+‘" width="430" height="180">‘ +‘<span>‘ +‘<h3> ‘+ array.article_title+‘</h3>‘ +‘<p class="gray">时间:‘+ array.article_time+‘</p>‘ +‘<p>‘+array.article_content+‘</p>‘ +‘<p class="red"><a href="http://www.sxnxl.com/shop/index.php?act=article&amp;op=show&amp;article_id=‘+ array.article_id+‘">查看详情&gt;&gt;</a></p>‘ +‘</span><div class="clearh" style="height:0"></div></span><div class="clearh" style="height:0"></div></li>‘; $("#listli").append(str); }); lastid=parseInt(lastid)+4; }else{ $("#nodata").html(‘没有更多了~~‘); return false; } }); } }); });

 

滚动加载更多

标签:each   页面   else   view   online   sem   body   article   start   

原文地址:http://www.cnblogs.com/cs88/p/6898849.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!