实现理念:
1.判断滚动条到底部触发加载函数
2.请求数据
3.追加数据
html:
<div class="list_flex" id="listrow">
<a href="./index.php?i=3&c=entry&m=ewei_shopv2&do=mobile&r=taobaoke.detail&id=1"> <div class="list_flex_son"> <img data-original="http://img3.tbcdn.cn/tfscom/i3/710919382/TB25HzOv3RkpuFjy1zeXXc.6FXa_!!710919382.jpg" class="list_flex_son_img"> <div class="list_flex_son_title">5条 无痕内裤女冰丝一片式中腰性感纯棉裆女士三角内裤大码薄款夏</div> <div class="list_flex_son_row"> <span class="sfsr_price">¥21.90</span> <span class="sfsr_tbprice">淘宝价:24.90元</span> </div> </div> </a>
</div><!--数据加载提示,默认隐藏-->
<div id="add-more" style="text-align: center;">努力加载中...</div>
js:
//分页加载 $(function(){ var hasMore; var page = 1; //初始页码 var maxnum = 2;//设置加载次数 var downrange= 100; //下边界-参考正在加载提示层/px var $main = $("#showbox"); //主体 var $loaddiv = $("#add-more") ; //加载提示层 var totalheight = 0; var $listrow=$("#listrow"); //ajax-fun function ajaxLoad(){ var html=""; page=page+1;//每次拉到底部page加1 //console.log(page) hasMore=false; $.ajax({ url:"http://wechat.ixunluo.com/weishopcs/app/index.php?i=3&c=entry&m=ewei_shopv2&do=mobile&r=taobaoke", type:"post", data:{page:page},//请求页数 success:function(res){ var list = eval(res); //console.log(list.length); //var list=JSON.parse(res); if(list.length>0) { hasMore=true; //console.log(JSON.parse(res)); //追加数据 for(var i=0;i<list.length;i++) { html+="<a href='./index.php?i=3&c=entry&m=ewei_shopv2&do=mobile&r=taobaoke.detail&id="+list[i].id+"'>"; html+="<div class='list_flex_son'>"; html+="<img data-original='"+res[i]+"' class='list_flex_son_img' src='"+list[i].thumb+"' style='height: 175.313px;'>"; html+="<div class='list_flex_son_title'>"+list[i].title+"</div>"; html+="<div class='list_flex_son_row'>"; html+="<span class='sfsr_price'>¥"+list[i].marketprice+"</span>"; html+="<span class='sfsr_tbprice'>淘宝价:"+list[i].productprice+"元</span>"; html+="</div>"; html+="</div>"; html+="</a>"; } $listrow.append(html);//数据追加到list var imgWidth=$('.list_flex_son_img').width(); $('.list_flex_son_img').height(imgWidth); } } }) } //加载中隐藏显示 $loaddiv.ajaxStart(function(){ $(this).show(); }).ajaxStop(function(){ $(this).hide(); }) ifLoad(); //scroll滚动触发加载事件 function ifLoad(){ hasMore=true; var w = $(window); var lastTime = new Date(); window.addEventListener("scroll", function scrollHandler() { var scrollh = $(document).height(); var bua = navigator.userAgent.toLowerCase(); if (bua.indexOf('iphone') != -1 || bua.indexOf('ios') != -1) { scrollh = scrollh -140; } else { scrollh = scrollh - 80; } if(($(document).scrollTop() + w.height()) >= scrollh){ if (new Date()-lastTime <100) { return; } lastTime = new Date(); if (hasMore) { ajaxLoad(); } } }, 1000); } })