滑动加载更多（移动端）

发表于 | 分类于

第一次写 Js 效果 ，今天Boss让我写了个滑动加载更多的效果，然后就感觉前端真的很神奇，可惜好像并不适合我

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<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>