注：請在移動端檢視上拉， 下拉載入更多效果

前言：

    由於，不管是在PC端，還是在移動端，上拉載入更多這個功能可以說是少不了的，尤其是在移動端。

    在寫這個上拉載入更多這個功能之前，我也用過一些比如 iscroll.js之類的等等外掛。 但是，在使用過程中發現一系列問題。比如：首先至少得引入相應的CSS檔案和JS檔案吧，其次在你使用時必須按照它規定的格式去寫，不然就不行。還有在1個頁面中有多個上拉載入更多功能， 想改樣式也很不方便等等。

    所以，就想在不用外掛的情況下，自己寫一個上拉載入更多的功能，和大家一起分享。如有更好解決辦法的朋友，歡迎指導！

原理：

    根據佈局，給window， 或者某個DIV元素加個scroll事件。當用戶上滑時，判斷滾動條的位置是否到達底部，如果到達底部，則執行載入下一頁方法。

問題：

    在寫的過程中發現一個問題，就是判斷滾動條的位置是否到達底部時 不能用等於 == （因為滾動條在滾動時不一定會剛對等於底部的位置）， 所以用 >= 大於或等於，可是 >=會使上拉載入方法執行很多次，從而導致一下子載入很多頁的問題，如果你所載入的資料時有編號順序的，那麼會使編號順序混亂，比如先載入第3頁，再載入第2頁（第1頁沒問題）等等。

解決辦法：

    在JS程式碼中 分別以滾動載入方法1 和 滾動載入方法2 列出了對應的解決辦法。

    思路1：當滾動條的位置到達底部時，再用一個判斷來決定是否載入資料，其是就是一個開關，這個開關預設是false, 只有當資料載入完成時，才設為true。

    思路2：當滾動條的位置到達底部時，延時執行載入資料方法（並在延時執行之前，先清空之前的定時器）。

 使用說明：

1、在JS程式碼中已經有非常詳細的註釋和說明。

2、該功能（上拉載入更多）除jQuery以外，沒有使用基他任何外掛。

html

<header id="header">首 頁</header>

<section id="main">
    <ul id="list_box"></ul>
</section>

<footer id="footer">
    <div class="active">首頁</div>
    <div>商城</div>
    <div>其他</div>
    <div>我的</div>
</footer>

css

* {
	margin:0px;
	padding:0px;
}
#header {
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:50px;
	background:#FAA732;
	text-align:center;
	line-height:50px;
	color:white;
	font-weight:bold;
}
#main {
	position:absolute;
	top:50px;
	left:0px;
	right:0px;
	bottom:51px;
	padding:10px;
	overflow:auto;
}
#main li {
	display:flex;
	margin-bottom:10px;
	padding:10px;
	border-bottom:1px solid gray;
	border-radius:4px;
	background:#EEE;
}
#main li img {
	flex:50px 0 0;
	width:50px;
	height:50px;
	padding:4px;
	border:1px solid green;
}
#main li span {
	padding-left:4px;
	line-height:24px;
}
#footer {
	display:flex;
	position:fixed;
	left:0px;
	bottom:0px;
	width:100%;
	height:50px;
	border-top:1px solid gray;
	background:#FAA732;
}
#footer div {
	flex:1;
	text-align:center;
	line-height:50px;
	color:white;
	font-weight:bold;
	border-right:1px solid white;
}
#footer div:nth-child(4) {
	border:none;
}
#footer .active {
	background:#0086FF;
}

js

var page = 1, //分頁碼
    off_on = false, //分頁開關(滾動載入方法 1 中用的)
    timers = null; //定時器(滾動載入方法 2 中用的)

//載入資料
var LoadingDataFn = function() {
    var dom = '';
    for (var i = 0; i < 20; i++) {
        dom += '<li><img src="http://b-ssl.duitang.com/uploads/item/201409/12/20140912132553_5Wcx3.jpeg"/><span>上滑列載入表內容上滑列載入表內容上滑列載入表內容上滑列載入表內容</span></li>';
    }
    $('#list_box').append(dom);
    off_on = true; //[重要]這是使用了 {滾動載入方法1}  時 用到的 ！！！[如果用  滾動載入方法1 時：off_on 在這裡不設 true的話， 下次就沒法載入了哦！]
};

//初始化， 第一次載入
$(document).ready(function() {
    LoadingDataFn();
});

//底部切換
$(document.body).on('click', '#footer div', function() {
    $(this).addClass('active').siblings().removeClass('active');
});

//滾動載入方法1
$('#main').scroll(function() {
    //當時滾動條離底部60px時開始載入下一頁的內容
    if (($(this)[0].scrollTop + $(this).height() + 60) >= $(this)[0].scrollHeight) {
        //這裡用 [ off_on ] 來控制是否載入 （這樣就解決了 當上頁的條件滿足時，一下子載入多次的問題啦）
        if (off_on) {
            //off_on = false;
            //page++;
            //console.log("第"+page+"頁");
            //LoadingDataFn();  //呼叫執行上面的載入方法
        }
    }
});

//滾動載入方法2
$('#main').scroll(function() {
    //當時滾動條離底部60px時開始載入下一頁的內容
    if (($(this)[0].scrollTop + $(this).height() + 60) >= $(this)[0].scrollHeight) {
        clearTimeout(timers);
        //這裡還可以用 [ 延時執行 ] 來控制是否載入 （這樣就解決了 當上頁的條件滿足時，一下子載入多次的問題啦）
        timers = setTimeout(function() {
            page++;
            console.log("第" + page + "頁");
            LoadingDataFn(); //呼叫執行上面的載入方法
        }, 300);
    }
});

//還可以基window視窗（body）來新增滾動事件, (因為佈局不同,所以在這裡沒效果，因為[上面是基於body中的某個元素來新增滾動事的])
$(window).scroll(function() {
    //當時滾動條離底部60px時開始載入下一頁的內容
    if (($(window).height() + $(window).scrollTop() + 60) >= $(document).height()) {
        clearTimeout(timers);
        timers = setTimeout(function() {
            page++;
            console.log("第" + page + "頁");
            LoadingDataFn();
        }, 300);
    }
});

大家可以自己嘗試一下！