205 移動端實現滑動到底部加載下一頁

<ul>
	<!-- 底部標誌，用於往底部標誌之前添加 -->
	<li id="end-sign"></li>
</ur>

 

<script type='text/javascript'>
    // 默認當前起始頁
    var page = 1;
    // 當前是否允許加載
    var isLoading = true;

	$(document).ready(function(){
       // 加載第一頁(頁數爲1)
        window.onload = waterallowData();
        
        $(window).scroll(function() {
            //如果滾動條滾動的高度加上窗口可視高度， 大於文檔的總高度+50， 那麼說明滾動條滾動到了底部。
            if(scrollTop() + windowHeight() >= (documentHeight() - 50/*滾動響應區域高度取50px*/)){
                //去加載數據]
                if (window.isLoading) {
                    waterallowData();
                }
            }
        });
    });	

	//獲取頁面頂部被捲起來的高度
    function scrollTop() {
        //->document.body.scrollTop(chrome)
        //->document.documentElement.scrollTop(firefox/IE)
        return Math.max(document.body.scrollTop, document.documentElement.scrollTop);
    }
 
    //獲取頁面文檔的總高度
    function documentHeight() {
        //->現代瀏覽器（IE9+和其他瀏覽器）和IE8的document.body.scrollHeight和
        //->document.documentElement.scrollHeight都可以
        return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
    }
 
    //獲取頁面瀏覽器視口的高度
    function windowHeight(){
        //->document.compatMode有兩個取值。
        //->BackCompat:標準兼容模式關閉。 CSS1Compat:標準兼容模式開啓。
        return (document.compatMode == "CSS1Compat") ? document.documentElement.clientHeight : document.body.clientHeight;
    }
    
	//加載數據
    function waterallowData() {

        $.ajax({
            async:false,  //如果是移動端的話，這裏必須要定義爲false
            type:'get',
            url:"{:url('course/getCourse')}",
            data:{page:page},
            dataType:'json',
            success:function(response){
                if(response.code==1){
                    // 重新定義當前所在頁(後端已加1至下一頁)
                    window.page = response.page;
                    
                    var html = '';

                    $.each(response.data,function (index,item) {            
                            html += '<li class="course_item"  onclick="courseDetail('+item.id+')">';
                            html +=     '<div class="course_img">';
                            html +=         '<img src="'+item.thumbnail+'">';
                            html +=     '</div>';
                            html += '<div class="course_title">';
                            html +=     '<span>'+item.id+'--'+item.title+'</span>';
                            html += '</div>';
                            html += '<div class="open_group_btn">去學習</div>';
                            html += '</li>';
                    });

                    // 將遍歷出的數據賦值
                    $("#end-sign").before(html);
                }else{
                   // 加載不出數據，已至最後一頁
                    window.isLoading = false;
                    window.page = response.page;
                }
            }
        });
    }
</script>