js实现上拉加载更多

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      .loading {
	text-align: center;
    margin-bottom: 0.1rem;
    background: #f2f2f2;
    height: 1rem;
    line-height: 1rem;
    overflow: hidden;
    justify-content: center;
    display: none;
    text-align: center;
}       
.loading img{
    width: 0.6rem;
    height: 0.6rem;
    display: inline-block;
    margin-top: 0.1rem;
}
    </style>
</head>
<body>
<ul class="" id="healthy_artcle">

					<!-- <li class="con_swjqr_ul_li clearfix pt20 pb20 border_b">
						<div class="fl">
							<img src="img/swjqr1.jpg"/>
						</div>
						<div class="fr">
							<p class="con_swjqr_ul_li_tit dy_dd1">这些可以保护自己的医学常识，你真该你真该你真该</p>
							<p class="mt_10 dy_dd2">一说起医学一说起医学，我们的脑子便马上浮现出身穿白大褂的医生形象，事实上医学离我</p>
							<div class="clearfix color999 mt_10">
								<div class="fl">
									<span class="glyphicon glyphicon-eye-open"></span>
									<span>1265</span>
								</div>
							</div>
						</div>
					</li>-->
				</ul>
				<div class="tip"></div>
				<div class="loading">
			        <span>加载中...</span>
			        <img src='__STATIC__/indexwap/img/jiazai.gif'/>
			    </div>

</body>
<script src="themesmobile/mo_paleng_moban/js/jquery.min.js"></script>
<script>
	var page=1; //定义页数
	var onoff=true;//控制loading开关
	$(document).scroll(function() {
		if($(window).height()+$(document).scrollTop()>=$(document.body).height()){
	        $(".loading").show();
	        if (onoff) {
	            onoff=false
	            setTimeout(function(){
	                page++;
	                getArtcle(page); 
	            },500)
	        }
	    }
	})
	getArtcle(page);
	function getArtcle(page) {
		$.ajax({
			url:"{:url('Index/getCategoryArtcle')}",
			type: 'post',
			data: {'page':page},
			timeout: 15000,
			beforeSend: function(XMLHttpRequest) {
				 $(".loading").show();
			},
			success: function(ret) {
					$('.loading').html('<span>加载中...</span><img src="__STATIC__/indexwap/img/jiazai.gif">');
				var html = '';
				if(ret.status == 1) {
                    var html = '';
                    $.each(ret.data, function(k, v) {
						html += '<li class="con_swjqr_ul_li clearfix pt20 pb20 border_b" onclick="getArticleId(' + v.id + ');">';
						html += '<div class="fl"><img src="' + v.showImg + '" /></div>';
						html += '<div class="fr"><p class="con_swjqr_ul_li_tit dy_dd1">' + v.title + '</p>';
						html += '<p class="mt_10 dy_dd2">' + v.introduce + '</p><div class="clearfix color999 mt_10"><div class="fl">';
						html += '<div class="fl"><span class="glyphicon glyphicon-eye-open"></span><span>' + v.browseCount + '</span>';
						html += '</div><span class="fr"></span></div></div></li>';
					});
                    //有数据的时候要做判断
                    //如果当前是第一页，则把容器中的内容即为请求数据
                    //如果当前不是第一页，则容器内容为本次请求数据和之前请求数据的拼接，所以这里用appendTo追加
                    
                    if(page==1){
                        $('#healthy_artcle').html(html);
                    }else{
                        $(html).appendTo($('#healthy_artcle'));           
                    }
                    	onoff=true; //当有数据的时候，上拉加载更多的状态为true
                   
                }else{
                		if(page==1){
                        // 首次加载无数据
                        onoff=false;  //当没有数据的时候，加载状态要关闭
                        $('.loading').hide();
                    }else{
                        // 下拉加载无数据
                        onoff=false;  //当没有数据的时候，加载状态要关闭
                        $('.loading').html("<span>这是我的底线</span>");
                    }
                		
                }
			},
//			complete: function(XMLHttpRequest, textStatus) {$(".loading").hide();},
//			error: function(XMLHttpRequest, textStatus, errorThrown) {}
		});
	}
</script>
</html>
js实现上拉加载更多

猜你喜欢
