这里提前准备好数据。
演示数据格式:blog.json
{
"list": [
{
"title": "这是title",
"url": "http://www.cnblogs.com/52fhy/p/5271447.html",
"desc": "摘要"
},
{
"title": "这是title2",
"url": "http://www.cnblogs.com/52fhy/p/4823390.html",
"desc": "摘要"
}]
}
页面html:
<div class="content">
<div class="weui_panel weui_panel_access">
<div class="weui_panel_hd">文章列表</div>
<div class="weui_panel_bd js-blog-list">
</div>
</div>
<!--加载更多按钮-->
<div class="js-load-more">加载更多</div>
</div>
<script src="js/zepto.min.js"></script>
加载更多的js代码:
$(function(){
/*初始化*/
var counter = 0; /*计数器*/
var pageStart = 0; /*offset*/
var pageSize = 4; /*size*/
/*首次加载*/
getData(pageStart, pageSize);
/*监听加载更多*/
$(document).on('click', '.js-load-more', function(){
counter ++;
pageStart = counter * pageSize;
getData(pageStart, pageSize);
});
});
这里的代码并不多。其中getData(pageStart, pageSize)是业务逻辑代码,负责从服务端拉去数据。这里给个示例:
function getData(offset,size){
$.ajax({
type: 'GET',
url: 'json/blog.json',
dataType: 'json',
success: function(reponse){
var data = reponse.list;
var sum = reponse.list.length;
var result = '';
/****业务逻辑块:实现拼接html内容并append到页面*********/
//console.log(offset , size, sum);
/*如果剩下的记录数不够分页,就让分页数取剩下的记录数
* 例如分页数是5,只剩2条,则只取2条
*
* 实际MySQL查询时不写这个不会有问题
*/
if(sum - offset < size ){
size = sum - offset;
}
/*使用for循环模拟SQL里的limit(offset,size)*/
for(var i=offset; i< (offset+size); i++){
result +='<div class="weui_media_box weui_media_text">'+
'<a href="'+ data[i].url +'" target="_blank"><h4 class="weui_media_title">'+ data[i].title +'</h4></a>'+
'<p class="weui_media_desc">'+ data[i].desc +'</p>'+
'</div>';
}
$('.js-blog-list').append(result);
/*******************************************/
/*隐藏more按钮*/
if ( (offset + size) >= sum){
$(".js-load-more").hide();
}else{
$(".js-load-more").show();
}
},
error: function(xhr, type){
alert('Ajax error!');
}
});
}