H5下拉加载

html代码

<div class="player">
        <div class="player_box">
            <volist name='list' id='vo'>
                <div class="player_l">
                    <div class="uesr_img_box">
                        <a href="{:U('detail',array('uid'=>$vo['uid'],'vote_item_id'=>$vo['vote_item_id']))}">
                            <div class="img_userBox">
                                <img class="uesr_img" src="{$vo['pic_arr'][0]}">
                            </div>
                            <div class="number">{$vo.user_num}</div>
                        </a>
                    </div>
                    <div class="title">
                        <span class="name">{$vo.name}</span>
                        <span class="num">{$vo.vote_num|num_format_w=###}人气</span>
                    </div>
                    <button class="btn" alt="{$vo.uid}" title="{$vo.name}">支持Ta</button>
                </div>
            </volist>
        </div>
    </div>

    <!--上拉提示-->
    <div id="jiazaizhong" class="none">加载中...</div>

js代码

//下拉加载更多
    $(function () {
        var pageIndex = 1;
        //获取滚动条当前的位置
        function getScrollTop() {
            var scrollTop = 0;
            if (document.documentElement && document.documentElement.scrollTop) {
                scrollTop = document.documentElement.scrollTop;
            } else if (document.body) {
                scrollTop = document.body.scrollTop;
            }
            return scrollTop;
        }

        //获取当前可视范围的高度
        function getClientHeight() {
            var clientHeight = 0;
            if (document.body.clientHeight && document.documentElement.clientHeight) {
                clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
            } else {
                clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
            }
            return clientHeight;
        }

        //获取文档完整的高度
        function getScrollHeight() {
            return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
        }

        window.onscroll = function () {
            if (getScrollTop() + getClientHeight() == getScrollHeight()) {
                $("#jiazaizhong").removeClass("none");
                pageIndex++;
                $.ajax({
                    url: url + "index.php/index/index",
                    type: "post",
                    dataType: "json",
                    async: false,
                    data: {
                        vote_item_id: "1",
                        page: pageIndex,
                        api: "1"
                    },
                    success: function (res) {
                    <!--总数除以每页的条数，得到初步页数-->
                        var cont = (res.data.total_record) / (res.data.page_size);
                        let obj2 = res.data;
                        <!--得到准确的页数（30/10 = 3 页， 32/10 = 4 页）-->
                        if (parseInt(cont) == cont) {
                            var cont2 = cont
                        } else {
                            var cont2 = parseInt(cont) + 1
                        }
                        if (pageIndex <= cont2) {
                            for (var i = 0; i < res.data.page_size; i++) {
                                $(".player_box").append(
                                    '<div class="player_l">\n' +
                                    '<div class="uesr_img_box">\n' +
                                    '<a href="/index.php/Index/detail/uid/' + obj2[i].uid + "/vote_item_id/" + obj2[i].vote_item_id + ".html" + '">\n' +
                                    '<div class="img_userBox">\n' +
                                    '<img class="uesr_img" src="' + obj2[i].pic_arr[0] + '">\n' +
                                    '</div>\n' +
                                    '<div class="number">' + obj2[i].user_num + '</div>\n' +
                                    '</a>\n' +
                                    '</div>\n' +
                                    '<div class="title">\n' +
                                    '<span class="name">' + obj2[i].name + '</span>\n' +
                                    '<span class="num">' + obj2[i].vote_num + '人气</span>\n' +
                                    '</div>\n' +
                                    '<button class="btn" alt="' + obj2[i].uid + '" title="' + obj2[i].name + '">支持Ta</button>\n' +
                                    '</div>\n'
                                );
                            }
                        } else {
                            $("#jiazaizhong").text("到底了...")
                        }
                    },
                    error: function () {
                        console.log("请求失败")
                    }
                })
            }
        };
    });