一個簡易的基於jquery的上拉加載更多demo，上拉加載的原理就是容器的高度+容器的scrollTop>=容器內容的高度，整個demo還加上了回彈的動效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>loadmore</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
html,body{
height:100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
html,body,div,ul,li,img,p{
padding: 0;
margin: 0;
}
.container{
position: relative;
width: 100%;
height: 100%;
background-color: #eee;
overflow: auto;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
--webkit-box-sizing: border-box;
}
ul,li{
list-style-type: none;
}
ul{
height: auto;
}
ul li{
height: 50px;
padding: 10px;
border-bottom: 1px solid #eee;
line-height: 50px;
}
.loadmore{
text-align: center;
height: 0px;
line-height: 30px;
background-color: #999;
display: none;
transition: height 1s;
-moz-transition: height 1s; /* Firefox 4 */
-webkit-transition: height 1s; /* Safari 和 Chrome */
-o-transition: height 1s; /* Opera */
}
.loadmore.show{
display: block;
height: 30px;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>1</li>
<li>4</li>
<li>3</li>
<li>4</li>
<li>4</li>
<li>2</li>
<li>gff</li>
<li>tggf</li>
<li>1</li>
<li>4</li>
<li>3</li>
<li>4</li>
<li>4</li>
<li>2</li>
<li>gff</li>
<li>tggf</li>
<li>1</li>
<li>4</li>
<li>3</li>
<li>4</li>
<li>4</li>
<li>2</li>
<li>gff</li>
<li>tggf</li>
</ul>
<div class="loadmore">加載更多</div>
</div>
<script src="http://code.jquery.com/jquery-2.2.4.js"></script>
<script type="text/javascript">
$(function(){
var loadFlag = false;
var _stary,_endy;
$(".container").on("touchend",function(){
$(".container").stop().animate({top:0},80);
if($(this).height()+$(this).scrollTop()>=$(".container ul").height() && !loadFlag){
loadFlag = true;
$(".loadmore").addClass("show");
$(this).scrollTop(100000000000);
var str = "<li>sfsaasdfsafasf</li>";
for(var i = 0;i<3;i++){
str +=str;
}
setTimeout(function(){
$(".loadmore").removeClass("show");
$(".container ul").append(str);
loadFlag = false;
},1000);
}
});
$(".container").on("touchstart",function(e){
var _touch = e.originalEvent.targetTouches[0];
_stary= _touch.pageY;
});
$(".container").on("touchmove",function(e){
var _touch = e.originalEvent.targetTouches[0];
_endy= _touch.pageY;
if($(this).height()+$(this).scrollTop()>=$(".container ul").height()){
var current_y = _endy - _stary;
$(".container").animate({top:current_y/3},5);
}
});
});
</script>
</body>
</html>