代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上拉加載</title>
<style>
html{
font-size: 18px;
}
.containter{
background: #ccc;
height: 700px;
overflow: auto;
}
.content{
}
.item{
font-size: 3rem;
text-align: center;
}
.bottom-line{
text-align: center;
background: #666
}
</style>
<!-- $('.bottom-line').css('display','block').text('正在刷新...') -->
</head>
<body>
<div class="containter">
<div class="content">
<div class="item">上拉加載功能1</div>
<div class="item">上拉加載功能2</div>
<div class="item">上拉加載功能3</div>
<div class="item">上拉加載功能4</div>
<div class="item">上拉加載功能5</div>
<div class="item">上拉加載功能6</div>
<div class="item">上拉加載功能7</div>
<div class="item">上拉加載功能8</div>
<div class="item">上拉加載功能9</div>
<div class="item">上拉加載功能10</div>
<div class="item">上拉加載功能1</div>
<div class="item">上拉加載功能2</div>
<div class="item">上拉加載功能3</div>
<div class="item">上拉加載功能4</div>
<div class="item">上拉加載功能5</div>
<div class="item">上拉加載功能6</div>
<div class="item">上拉加載功能7</div>
<div class="item">上拉加載功能8</div>
<div class="item">上拉加載功能9</div>
<div class="item">上拉加載功能10</div>
</div>
<div class="bottom-line">正在刷新</div>
</div>
<script typet="text/javascript" src="zepto.min.js"></script>
<script>
var data = {
num: 0,
startY: '',
moveEndY: '',
isLoading: true,
}
// 上拉加載
$(document).on('touchstart','.content', function(e) {
// e.preventDefault();
data.startY = e.originalEvent.changedTouches[0].pageY;
})
$(document).on('touchmove', '.content',function(e) {
// e.preventDefault();
data.moveEndY = e.originalEvent.changedTouches[0].pageY,
Y = data.startY - data.moveEndY;
if(Y>80){
upLoading()
}
})
function upLoading(){
//判斷最後一個元素是否在底部之上
if( $('.item').eq($('.item').length-1).offset().top + $('.bottom-line').height() < $('.containter').height() ){
if( data.isLoading === false ){
return
}else{
$('.bottom-line').css('display','block').text('正在刷新...')
//請求數據
getRequestData( data.pageNum,data.thisId )
data.pageNum ++
}
}
}
//模擬ajax請求數據
function getRequestData(pageNum,id){
isLoading = false
var msg = ['請求數據1','請求數據2','請求數據3','請求數據4','請求數據5'];
if( data.num < 5 ){
$('.bottom-line').css('display','none')
addData(msg)
isLoading = true
}else if( data.num >=5 ){
$('.bottom-line').css('display','block').text('數據加載完畢')
setTimeout(function(){
$('.bottom-line').css('display','none')
},1000)
isLoading = false
}
data.num ++
}
//添加數據
function addData( list ){
var str = ''
for( var i = 0; i < list.length; i++ ){
str += '<div class="item">' + list[i] + '</div>'
}
$('.content').append(str)
}
</script>
</body>
</html>