关于如何实现『加载更多』功能,网上有插件可用,例如比较著名的使用iscroll.js实现的上拉加载更多、下拉刷新功能。
但实际用起来却是很麻烦。由于是第三方插件,要按照对方定义的方法使用,用起来总感觉很不顺心。再加上iscroll.js本身并没有集成加载更多的功能,需要进行自行扩展。想继续使用iscroll.js实现加载更多功能的,可以百度iscroll.js看看。
我们在前端页面开发的时候,考虑到用户体验,相比于下一页用「加载更多」会更友好好,而不是下一页、下一页的翻页。
在这里,相信很多人都会想到请求JSON数据。如果后端没有API的支持,那怎么办呢?其实什么都不需要,下一页的链接地址同样可以发起ajax请求。
以下实例代码
1基于按钮实现加载更多
最简单的就是给一个加载更多的按钮,如果还有数据,点击下加载更多,继续拉几条数据;直到没有更多数据了,隐藏加载更多按钮或显示没有了。
加载更多的js代码://分页加载
jQuery(document).ready(function($) {
var loading=false
$('div#post-read-more a').click( function() {
if(loading)return
$this = $(this);
var href = $this.attr("href"); //获取下一页的链接地址
if (href != undefined) { //如果地址存在
loading=true
$this.addClass('loading').text("Loading"); //给a标签加载一个loading的class属性,可以用来添加一些加载效果
$.ajax( { //发起ajax请求
url: href, //请求的地址就是下一页的链接
type: "get", //请求类型是get
error: function(request) {
loading=false
},
success: function(data) { //请求成功
loading=false
$this.removeClass('loading').text("看更多"); //移除loading属性
var $res = $(data).find(".list"); //从数据中挑出文章数据,请根据实际情况更改
$('.box').append($res); //将数据加载加进posts-loop的标签中。
var newhref = $(data).find("#post-read-more a").attr("href"); //找出新的下一页链接
if( newhref != undefined ){
$("#post-read-more a").attr("href",newhref);
}else{
loading=false
$("#post-read-more a").html("没有了").removeAttr("href").removeClass('loading');
}
}
});
}
return false;
});
});
2基于滚动事件实现加载更多
上面我们通过按钮点击实现加载更多,当然还可以基于于滚动事件实现加载更多。$(function(){
var loading=false;
/*监听加载更多*/
$(window).scroll(function(){
if(loading== true){
return;
}
// 当滚动到最底部以上100像素时, 加载新内容
if ($(document).height() - $(this).scrollTop() - $(this).height()<100){
if(loading)return
$this = $('div#post-read-more a');
var href = $this.attr("href"); //获取下一页的链接地址
if (href != undefined) { //如果地址存在
loading=true
$this.addClass('loading').text("Loading"); //给a标签加载一个loading的class属性,可以用来添加一些加载效果
$.ajax( { //发起ajax请求
url: href, //请求的地址就是下一页的链接
type: "get", //请求类型是get
error: function(request) {
loading=false
},
success: function(data) { //请求成功
loading=false
$this.removeClass('loading').text("看更多"); //移除loading属性
var $res = $(data).find(".list"); //从数据中挑出文章数据,请根据实际情况更改
$('.box').append($res); //将数据加载加进posts-loop的标签中。
var newhref = $(data).find("#post-read-more a").attr("href"); //找出新的下一页链接
if( newhref != undefined ){
$("#post-read-more a").attr("href",newhref);
}else{
loading=false
$("#post-read-more a").html("没有了").removeAttr("href").removeClass('loading');
}
}
});
}
return false;
}
});
});
可以看出,代码变化不大,主要看核心代码里的判断条件:当滚动到最底部以上100像素时, 加载新内容。
当然,这里面还有要优化的地方,例如:
如何防止滚动过快,服务端没来得及响应造成多次请求?
通过上面的例子,显然第二种更好,不用去点击。但是第二个方法有个问题:
如果设置页面大小每次显示2条或3条时候,显示高度不够,你会发现无法触发向下滚动加载更多的逻辑。
本站采用的是第一种点击按钮的方式。具体效果移步本站首页。