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

下一页通过js实现点击「加载更多」功能实例-第1张-菜鸟博客

关于如何实现『加载更多』功能,网上有插件可用,例如比较著名的使用iscroll.js实现的上拉加载更多、下拉刷新功能。

但实际用起来却是很麻烦。由于是第三方插件,要按照对方定义的方法使用,用起来总感觉很不顺心。再加上iscroll.js本身并没有集成加载更多的功能,需要进行自行扩展。想继续使用iscroll.js实现加载更多功能的,可以百度iscroll.js看看。

我们在前端页面开发的时候,考虑到用户体验,相比于下一页用「加载更多」会更友好好,而不是下一页、下一页的翻页。

在这里,相信很多人都会想到请求JSON数据。如果后端没有API的支持,那怎么办呢?其实什么都不需要,下一页的链接地址同样可以发起ajax请求。

以下实例代码

基于按钮实现加载更多

最简单的就是给一个加载更多的按钮,如果还有数据,点击下加载更多,继续拉几条数据;直到没有更多数据了,隐藏加载更多按钮或显示没有了。

加载更多的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;   
});   
  
});

基于滚动事件实现加载更多

上面我们通过按钮点击实现加载更多,当然还可以基于于滚动事件实现加载更多。

$(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条时候,显示高度不够,你会发现无法触发向下滚动加载更多的逻辑。

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

猜你喜欢

发表评论