js滾動分頁加載數據

實現理念：

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&amp;c=entry&amp;m=ewei_shopv2&amp;do=mobile&amp;r=taobaoke.detail&amp;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);
}

})