jQuery上拉加载更多

注：请在移动端查看上拉， 下拉加载更多效果

前言：

    由于，不管是在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://www.jq22.com/img/cs/500x500a.png"/><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);
    }
});

大家可以自己尝试一下！