滑动加载更多(移动端)

写了个滑动加载更多的效果,然后就感觉前端真的很神奇,可惜好像并不适合我。😅😅😅

小白上路,大神勿喷


<script>
    var flag=true;
    var page=1;
    var allPage = {总页数};

    // 滚动事件
    $(window).bind("scroll", function () {
        if(getScrollHeight() == getDocumentTop() + getWindowHeight()){
            //当滚动条到底时,这里是触发内容
            //异步请求数据,局部刷新dom
            if (flag) {
                showAjax(page);
            }
        }
    });

    function showAjax(currentIndex) {
        $.ajax({
            url: "(url 提交地址)",
            type: "GET",
            data: {
              'page': currentIndex,
            },
            dataType: 'json',
            success: function (data) {
                //要执行的内容
                if (currentIndex >= allPage) { //当前页码大于等于总页码
                    flag = false;

                } else {
                    showContent(data);
                    page = page + 1;    //页数加1
                }

            }
        })
    }

    // 拼接字符串
    function showContent(dataContent) {
        var str = '';
        for (var i = 0; i < dataContent.result.length; i++) {
            str += "You can add some html string";
        }
        $('容器').append(str);
    }

    // 文档高度
    function getDocumentTop() {
        var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
        if (document.body) {
            bodyScrollTop = document.body.scrollTop;
        }
        if (document.documentElement) {
            documentScrollTop = document.documentElement.scrollTop;
        }
        scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;    
        return scrollTop;
    }

    // 可视窗口高度
    function getWindowHeight() {
        var windowHeight = 0;
        if (document.compatMode == "CSS1Compat") {
            windowHeight = document.documentElement.clientHeight;
        } else {
            windowHeight = document.body.clientHeight;
        }
        return windowHeight;
    }

    // 滚动条滚动高度
    function getScrollHeight() {
        var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
        if (document.body) {
            bodyScrollHeight = document.body.scrollHeight;
        }
        if (document.documentElement) {
            documentScrollHeight = document.documentElement.scrollHeight;
        }
        scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;     
        return scrollHeight;
    }
</script>