JQuery WEUI的分页加载

wechat

　　主要记录，分页加载

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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!doctype html>
<html>
    <head>
        <!-- 省略 -->
        <!-- head 中 -->
        <link rel="stylesheet" href="//cdn.bootcss.com/weui/0.4.3/style/weui.min.css">
        <link rel="stylesheet" href="//cdn.bootcss.com/jquery-weui/0.8.0/css/jquery-weui.min.css">
    </head>
    <body ontouchstart>
        <div class="weui_cells" id="list">
        </div>
        <div class="weui-infinite-scroll" id="scroll">
           <div class="infinite-preloader"></div>
            正在加载...
        </div>
        <!-- body 最后 -->
        <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
        <script src="http://cdn.bootcss.com/jquery-weui/0.8.0/js/jquery-weui.min.js"></script>
    </body>
    <script type="text/javascript" >
        var records = [];
        var havaData = false;
        var start = 0;
		    var end = 5;
        var count = -1;
        var jsonData = {
          "openid":openid,
          "start":start,
          "end":end
        };
        function getData(jsonData){
            $.get("http://xx",jsonData,function(data){
                console.log(data);
                    if (data.result == 'success') {
                        records = data.list;
                        count = data.count; // 数据总条数
                        if(records.length == 0 && !havaData){
                            $("#scroll").hide();
                            $.alert("没有记录！");
                        }else{
                            havaData = true;
                        }
                        // 显示数据
                        showData(records);
                    } else {
                        $.alert("加载数据失败!");
                        $(document.body).destroyInfinite();
                        $("#scroll").hide();
                    }
            },"json");
        }
        // 页面一进来就获取数据
        getData(jsonData);
        function showData(records){
            var length = records.length;
            for(var i = 0; i < length; i++){
                var div = document.getElementById("list");
                var str= "显示数据<br>";    
                div.innerHTML =div.innerHTML+str;                   
            }
            if(length == 0){
                $("#scroll").hide();
            }
        }
        // 滚动条滑动到离底部100，多显示一条数据。 显示后不会消失。
        $(document.body).infinite(100);
        var loading = false;  //状态标记 否则一直循环刷新
        $(document.body).infinite().on("infinite", function() {
          if(loading) return;
          loading = true;
          setTimeout(function() {
            var length = records.length;
            if(length > 0 && havaData){
                // 还有数据，继续加载
                start = start + 5;
                var jsonData = {
                  "openid":openid,
                  "start":start,
                  "end":end,
                  "count":count
                };
                getData(jsonData);
            }else{  
                havaData = false;
                $.alert("全部数据已经加载完成！");
                $(document.body).destroyInfinite();
                $("#scroll").hide();
                return;
            }
            loading = false;
          },50);   //模拟延迟
        });
    </script>
</html>

本文标题:JQuery WEUI的分页加载

文章作者:hfy

发布时间:2017-05-11, 22:56:11

最后更新:2018-03-05, 11:18:19

原始链接:https://haofangyuan.github.io/2017/05/11/jquery-weui-page/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
|