html代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
加載更多
</title>
<style>
ul,li{
margin: 0;
padding: 0
}
#ct li{
text-align: center;
list-style:none;
border: 1px solid #ccc;
padding: 10px;
margin-top: 10px;
cursor:pointer;
}
#load-more{
display: block;
margin: 10px auto;
text-align: center;
cursor: pointer;
}
#load-more img{
width: 40px;
height: 40px;
}
.btn{
display: inline-block;
height: 40px;
line-height: 40px;
width: 80px;
border: 1px solid #E27272;
border-radius: 3px;
text-align: center;
text-decoration: none;
color: #E27272;
}
#ct li.hover{
background:#fed136;
color:#fff;
}
.text{
text-align: center;
}
</style>
</head>
<body>
<ul id="ct">
</ul>
<a id="load-more" class="btn" href="#">
加載更多
</a>
<p class="text"></p>
</body>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
var $loadMoreBtn = $('#load-more'),
$ct = $('#ct');
$ct.on('mouseover','li',function(){
$(this).addClass('hover')
});;
$ct.on('mouseout','li',function(){
$(this).removeClass('hover');
});
var pageIndex = 0;
$loadMoreBtn.on('click', function(){
if($(this).data('isLoading')){ //獲取一個狀態鎖
return;
}
$(this).data('isLoading', true) //設置一個狀態鎖，防止在加載的數據回來之前用戶多次點擊
.html(''); //鏈式調用，換行也沒關系，對齊好看些
$.get('/getNews',{page:pageIndex}).done(function(ret){
pageIndex++;
appendHtml(ret);
$loadMoreBtn.data('isLoading', false)
.text('加載更多'); //鏈式調用，換行也沒關系，對齊好看些
console.log(pageIndex)
}).fail(function(){
$loadMoreBtn.data('isLoading', false)
.text('加載更多'); //鏈式調用，換行也沒關系，對齊好看些
alert('系統異常');
})
});
function appendHtml(news){
console.log(news)
if(news.length === 0){
$('#load-more').remove();
$('.text').text('沒有數據了');
return;
}else{
var html = '';
$.each(news, function(){
html = '<li>' + this.title + '</li>'
$('ul').append(html);
})
}
}
</script>
</html>
server-mock模擬后端代碼
app.get('/getNews', function(req, res){
var news = [
{
title: '內容1'
},
{
title: '內容2'
},
{
title: '內容3'
},
{
title: '內容4'
},
{
title: '內容5'
},
{
title: '內容6'
},
{
title: '內容7'
},
{
title: '內容8'
}
];
var page = req.query.page;
var length = 2;
var retnews = news.slice(page*length, page*length+length);
setTimeout(function(){
res.send(retnews);
}, 1000)
})
lodaing
動態加載
【個人總結，如有錯漏，歡迎指出】
：>
