首页 > JS专栏 > JS+Ajax手机列表拉到底时自动加载下一页
2016
07-21

JS+Ajax手机列表拉到底时自动加载下一页

HTML部分:

<div id="course_box">
	<ul id="courselist">
	</ul>
</div>
<div style="font-size:.14rem; text-align: center;">
	<a href="javascript:void(0);" id="btn_Page">点击加载更多</a>
</div>

JS部分:

<script type="text/javascript">
var i = 1; //设置当前页数,全局变量
var ajaxurl   = ""; //ajax请求地址
$(function () {
    //根据页数读取数据  
    function getData(page) {  
        i++; //页码自动增加,保证下次调用时为新的一页。  
        $.get(ajaxurl, {page: page }, function (data) {  
            if (data.length > 0) {
                var jsonObj = JSON.parse(data);
                insertDiv(jsonObj);  
            }
        });  
       
    } 
    //初始化加载第一页数据  
    getData(1);

    //生成数据html,append到div中  
    function insertDiv(result) {  
        var mainDiv =$("#courselist");
        var chtml = '';  
        for (var j = 0; j < result.length; j++) {  
            chtml += '<li class="item">';  
    	    chtml += '</li>'; 
        }
	mainDiv.append(chtml);
	if(result.length==0){
		document.getElementById("btn_Page").innerHTML="已全部加载完成";
	}
    }  
  
    //==============核心代码=============  
    var winH = $(window).height(); //页面可视区域高度   
  
    var scrollHandler = function () {  
        var pageH = $(document.body).height();  
        var scrollT = $(window).scrollTop(); //滚动条top   
        var aa = (pageH - winH - scrollT) / winH;  
        if (aa < 0.02) { 
            if (i % 1 === 0) {
                getData(i);  
                $(window).unbind('scroll');  
                $("#btn_Page").show();
            } else {  
                getData(i);  
                $("#btn_Page").hide();
            }  
        }  
    }  
    //定义鼠标滚动事件
    $(window).scroll(scrollHandler);
    //继续加载按钮事件
    $("#btn_Page").click(function () {
        getData(i);
        $(window).scroll(scrollHandler);
    });
  
});  
</script>