JS小案例_瀑布流无限加载数据分页

最新推荐文章于 2023-06-28 17:26:58 发布

sunnyday.qiu

最新推荐文章于 2023-06-28 17:26:58 发布

阅读量589

点赞数

分类专栏： JS 文章标签： js javascript ajax jquery

本文链接：https://blog.csdn.net/changyeyu_/article/details/106994395

版权

JS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

案例的分析

如何确定当前显示的数据已经浏览完毕？
	公式：(滚动条距底部的距离 + 滚动条上下滚动的距离 + 当前窗口的高度) >= 当前文档的高度

所需知识点

前端：
	scroll() 鼠标滚动事件
	
	$(window).height() 当前窗口的高度
	$(window).scrollTop() 滚动条上下滚动的距离
	$(document).height() 当前文档的高度

后台：
	mybatis分页插件
    查询结果封装为JSON格式

实现代码（前端）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网站首页</title>
</head>
<body>
    <div class="center">
        <ul class="news_list">

        </ul>

        <div class="loading" style="text-align: center; height: 80px">
            <img src="img/loading2.gif" height="100%">
        </div>
        
        <div id="no" style="text-align: center;color: red;font-size: 20px"></div>
    </div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1.定义发送请求标记
    let send = true;

    //2.定义当前页码和每页显示的条数
    let start = 1;
    let pageSize = 10;

    //3.定义滚动条距底部的距离
    let bottom = 1;

    //4.设置页面加载事件
    $(function () {
        //5.为当前窗口绑定滚动条滚动事件
        $(window).scroll(function () {
            //6.获取必要信息，用于计算当前展示数据是否浏览完毕
            //当前窗口的高度
            let windowHeight = $(window).height();

            //滚动条从上到下滚动距离
            let scrollTop = $(window).scrollTop();

            //当前文档的高度
            let docHeight = $(document).height();

            //7.计算当前展示数据是否浏览完毕
            //当 滚动条距底部的距离 + 当前滚动条滚动的距离 + 当前窗口的高度 >= 当前文档的高度
            if ((bottom + scrollTop + windowHeight) >= (docHeight * 0.9)) {
                //8.判断请求标记是否为true
                if (send == true) {
                    //9.将请求标记置为false，当前异步操作完成前，不能重新发起请求。
                    send = false;
                    //10.根据当前页和每页显示的条数来 请求查询分页数据
                    queryByPage(start, pageSize);
                    //11.当前页码+1
                    start++;
                }
            }
        });
    });

    $(function () {
        send = false;
        queryByPage(start, pageSize);
        start++;
    });

    //定义查询分页数据的函数
    function queryByPage(start, pageSize) {
        //加载动图显示
        $(".loading").show();
        //发起AJAX请求
        $.post(
            //请求的资源路径
            "newsServlet",
            //请求的参数
            {"start": start, "pageSize": pageSize},
            //请求成功后的回调函数
            function (data) {
                if (data.length == 0) {
                    $(".loading").hide();
                    $("#no").html("我也是有底线的...");
                    return;
                }
                //加载动图隐藏
                $(".loading").hide();
                //将数据显示
                let titles = "";
                for (let i = 0; i < data.length; i++) {
                    titles += `<li><div class="title-box">
                                <a href="#" class="link">
                                ${data[i].title}
                                <hr></a></div></li>`;
                }

                //显示到页面
                $(".news_list").append(titles);
                //将请求标记设置为true
                send = true;
            },
            //响应数据形式
            "json"
        );
    }
</script>
</html>

实现代码（后端）

简单的接收当前页以及每页多少条数据，访问数据库，通过mybatis分页插件实现分页查询封装数据，返回给前端。

sunnyday.qiu

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS小案例_瀑布流无限加载数据分页

案例的分析如何确定当前显示的数据已经浏览完毕？公式：(滚动条距底部的距离 + 滚动条上下滚动的距离 + 当前窗口的高度) >= 当前文档的高度所需知识点前端： scroll() 鼠标滚动事件 $(window).height() 当前窗口的高度 $(window).scrollTop() 滚动条上下滚动的距离 $(document).height() 当前文档的高度后台： mybatis分页插件查询结果封装为JSON格式实现代码（前端）<!DOCTY
复制链接

扫一扫