下滑加载更多js_下一页通过js实现点击「加载更多」功能实例

关于如何实现『加载更多』功能，网上有插件可用，例如比较著名的使用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条时候，显示高度不够，你会发现无法触发向下滚动加载更多的逻辑。

本站采用的是第一种点击按钮的方式。具体效果移步本站首页。