js上拉分页 | 易学教程

js实现上拉加载，页面分页的代码。

$(function () {
        var all = 10;  //后台返回总页面
        var pageNum = 1;//定义初始页面
        var pageSize = 10;  // 每页显示的个数
        var close = true;  // 因为ajax是异步请求，所以设置一个boolean类型，将ajax控制为同步请求
        $(window).scroll(function() {
            var scrollTop = $(this).scrollTop();      //计算已经卷进去滚动条的的高度
            var scrollHeight = $(document).height();  //当前页面的总高度
            var windowHeight = $(this).height();      //当前window也就是浏览器的高度
            if(parseInt(scrollTop) + parseInt(windowHeight) == parseInt(scrollHeight)) {
            	// 如果class为true 并且当前页数小于或等于总页数
                if (close && pageNum <= all) {
                    pageNum += 1;
                    //将close改为false，无法在请求后台
                    close = false;
                    $.ajax({
                        url:'',   // 请求地址
                        data:{
                            pageNum:pageNum,
                            pageSize:pageSize
                        },
                        type:"post",
                        dataType:'html',
                        success:function (res) {
                        	// 根据id或class 将返回的页面拼接到页面
                            $('.list').append(res);
                            // 请求成功后将close改回true
                            close = true;
                        }
                    });
                } else {
                    return false;
                }
            }
        });
    });

慕课网还有视频讲解 https://www.imooc.com/video/11316

代码来自： https://blog.csdn.net/qq_39064836/article/details/83960932?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-6&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-6

感谢！

来源：oschina

链接：https://my.oschina.net/zjllovecode/blog/3223123

标签

var

js代码

scrolltop