演示数据格式：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：
<divclass="content">
<divclass="weui_panel weui_panel_access">
<divclass="weui_panel_hd">文章列表</div>
<divclass="weui_panel_bd js-blog-list">
</div>
</div>
<!--加载更多按钮-->
<divclass="js-load-more">加载更多</div>
</div><scriptsrc="js/zepto.min.js"></script>
加载更多按钮样式：loadmore.css:
@charset"utf-8";
.js-load-more{
padding:015px;
width:120px;
height:30px;
background-color:#D31733;
color:#fff;
line-height:30px;
text-align:center;
border-radius:5px;
margin:20pxauto;
border:0none;
font-size:16px;
display:none;/*默认不显示，ajax调用成功后才决定显示与否*/
}
加载更多的js代码：
$(function(){
/*初始化*/
varcounter =0;/*计数器*/
varpageStart =0;/*offset*/
varpageSize =4;/*size*/
/*首次加载*/
getData(pageStart, pageSize);
/*监听加载更多*/
$(document).on('click','.js-load-more',function(){
counter ++;
pageStart = counter * pageSize;
getData(pageStart, pageSize);
});
});
这里的代码并不多。其中getData(pageStart, pageSize)是业务逻辑代码，负责从服务端拉去数据。这里给个示例：
functiongetData(offset,size){
$.ajax({
type:'GET',
url:'json/blog.json',
dataType:'json',
success:function(reponse){
vardata = reponse.list;
varsum = reponse.list.length;
varresult ='';
/****业务逻辑块：实现拼接html内容并append到页面*********/
//console.log(offset , size, sum);
/*如果剩下的记录数不够分页，就让分页数取剩下的记录数
* 例如分页数是5，只剩2条，则只取2条
*
* 实际MySQL查询时不写这个不会有问题
*/
if(sum - offset < size ){
size = sum - offset;
}
/*使用for循环模拟SQL里的limit(offset,size)*/
for(vari=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!');
}
});
}
还是比较简单的。
基于滚动事件实现加载更多
上面我们通过按钮点击实现加载更多，整体过程还是比较简单的。这里，我提供另一种方法实现加载更多：基于于滚动(scroll)事件。
DEMO : 基于滚动事件实现加载更多
直接贴代码了：
$(function(){
/*初始化*/
varcounter =0;/*计数器*/
varpageStart =0;/*offset*/
varpageSize =7;/*size*/
varisEnd =false;/*结束标志*/
/*首次加载*/
getData(pageStart, pageSize);
/*监听加载更多*/
$(window).scroll(function(){
if(isEnd ==true){
return;
}
// 当滚动到最底部以上100像素时， 加载新内容
// 核心代码
if($(document).height() - $(this).scrollTop() - $(this).height()<100){
counter ++;
pageStart = counter * pageSize;
getData(pageStart, pageSize);
}
});
});
可以看出，代码变化不大，主要看核心代码里的判断条件：当滚动到最底部以上100像素时， 加载新内容。
业务逻辑getData(pageStart, pageSize)只需要把if ( (offset + size) >= sum)里面的逻辑改成：
if( (offset + size) >= sum){
isEnd =true;//没有更多了
}
就行了。
当然，这里面还有要优化的地方，例如：
如何防止滚动过快，服务端没来得及响应造成多次请求？
综合实例
通过上面的例子，显然第二种更好，不用去点击。但是第二个方法有个问题：
如果设置页面大小每次显示2条或3条(size=2)，总记录是20，你会发现无法触发向下滚动加载更多的逻辑。这时候有个加载更多的点击按钮就好了。
因此，我们可以把以上两种方法合在一起：
默认使用滚动事件实现加载更多，当显示数目太小不足以触发向下滚动加载更多的逻辑时，使用加载更多点击事件。
DEMO : 综合实例
这里，我对加载更多这个行为进行简单的抽象，写了个简单的插件：
loadmore.js
;(function(w,$){
varloadmore = {
get :function(callback, config){
varconfig = config ? config : {};/*防止未传参数报错*/
varcounter =0;/*计数器*/
varpageStart =0;
varpageSize = config.size ? config.size :10;
/*默认通过点击加载更多*/
$(document).on('click','.js-load-more',function(){
counter ++;
pageStart = counter * pageSize;
callback && callback(config, pageStart, pageSize);
});
/*通过自动监听滚动事件加载更多,可选支持*/
config.isEnd =false;/*结束标志*/
config.isAjax =false;/*防止滚动过快，服务端没来得及响应造成多次请求*/
$(window).scroll(function(){
/*是否开启滚动加载*/
if(!config.scroll){
return;
}
/*滚动加载时如果已经没有更多的数据了、正在发生请求时，不能继续进行*/
if(config.isEnd ==true|| config.isAjax ==true){
return;
}
/*当滚动到最底部以上100像素时， 加载新内容*/
if($(document).height() - $(this).scrollTop() - $(this).height()<100){
counter ++;
pageStart = counter * pageSize;
callback && callback(config, pageStart, pageSize);
}
});
/*第一次自动加载*/
callback && callback(config, pageStart, pageSize);
},
}
$.loadmore = loadmore;
})(window,window.jQuery ||window.Zepto);
如何使用呢？很简单：
$.loadmore.get(getData, {
scroll:true,//默认是false,是否支持滚动加载size:7,//默认是10flag:1,//自定义参数，可选，示例里没有用到
});
第一个参数是回调函数，即我们的业务逻辑。我把最终修改过的业务逻辑方法贴出来：
function getData(config, offset,size){
config.isAjax = true;
$.ajax({
type: 'GET',
url: 'json/blog.json',
dataType: 'json',
success: function(reponse){
config.isAjax = false;
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();
config.isEnd = true; /*停止滚动加载请求*/
//提示没有了
}else{
$(".js-load-more").show();
}
},
error: function(xhr, type){
alert('Ajax error!');
}
});
}
网友评论