jq分页滚动加载数据 

//html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="./css/days.css">
    <script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="./js/days.js"></script>
</head>
<body>
    <div class="wrap">
        <div class="main"></div>
    </div>
    <script>
    </script>
</body>
</html>


//js
$(function() {
    var url = "https://";
    var pageNum = 0; // 当前页码
    var pageSize = 7; // 当前每页条数 
    var openid = ""
    $(function() {
        $(window).scroll(function() {
            var scrollTop = $(this).scrollTop();
            var scrollHeight = $(document).height();
            var windowHeight = $(this).height();
            if (scrollTop + windowHeight == scrollHeight) {　 //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
                pageNum++
                days()
            }
        });
        days()
    })
    var days = function(data) {
        var html = '';
        $.ajax({
            type: "post",
            contentType: "application/json",
            url: url + "/query",
            data: JSON.stringify({
                "openId": openid,
                "pageSize": pageSize,
                "pageNum": pageNum
            }),
            success: function(res) {
                var res = JSON.parse(res)
                console.log(res.datas)
                if (res.datas.length > 0) {
                    res.datas.map(function(item, index, arr) {
                            html += `
                            <li class="List">
                                <div class="main">
                                    <div>${item.name}</div>
                                    <div>￥${item.sex}</div>
                                </div>
                            </li>
                        `;
                    });
                    $(".main").append(html);
                }
            }
        })
    }
})

 

posted @ 2020-10-23 14:54  茗涵  阅读(592)  评论(0)    收藏  举报