最近在做手机版使用到了下拉刷新和滚动加载，记录一下实现过程：
一、引入文件
|
1
2
3
4
|
<link rel="stylesheet" href="Content/jqueryweui/weui.min.css"><link rel="stylesheet" href="Content/jqueryweui/jquery-weui.min.css"><script type="text/javascript" src="Content/jqueryweui/jquery.min.js" ></script><script type="text/javascript" src="Content/jqueryweui/jquery-weui.min.js"></script> |
二、页面布局
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<div class="content" style=" 100%;height:88%; margin-top:40px;margin-top: 45px;position: absolute; margin-bottom:45px;padding:0px; overflow: hidden;"> <div class="list-main-mian weui-form-preview infinite weui-pull-to-refresh" id="listwrap" style="height:100%; margin-top: 1px;overflow:auto; z-index: 1"> <!--下拉刷新--> <div class="weui-pull-to-refresh__layer" style="padding: 5px;"> <div class="weui-pull-to-refresh__arrow"></div> <div class="weui-pull-to-refresh__preloader"></div> <div class="down">下拉刷新</div> <div class="up">释放刷新</div> <div class="refresh">正在刷新</div> </div> <div class="weui-form-preview" id="Tolist"> <!--内容展示区域--> </div> <div class="weui-loadmore" style="padding-bottom:30px;height:20px"> <i class="weui-loading"></i> <span class="weui-loadmore__tips">正在加载</span> </div> </div></div> |
三、js部分
|
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
|
var pages = 1; var sizes = 4; var loading = false; //状态标记 $(function () { loadlist(); }) //=========================下拉刷新 $("#listwrap").pullToRefresh().on("pull-to-refresh", function () { setTimeout(function () { pages = 1; $("#Tolist").html(""); loadlist(); if (loading) loading = false; $("#listwrap").pullToRefreshDone(); // 重置下拉刷新 }, 1500); //模拟延迟 }); //============================滚动加载 $("#listwrap").infinite().on("infinite", function () { if (loading) return; loading = true; pages++; //页数 $('.weui-loadmore').show(); setTimeout(function () { loadlist(); loading = false; }, 2500); //模拟延迟 });// =======加载数据loadlist(); function loadlist() { var html = ""; $.ajax({ type: "POST", url: "/Index/Index", data: { 'page': pages, 'size': sizes }, dataType: "json", error: function (request) { $(".weui-loadmore").hide(); html += "<div class="weui-cells__title" >已无更多数据</div>"; $("#Tolist").append(html); }, success: function (data) { if (data.List.length > 0) { for (var i = 0; i < data.List.length; i++) { html += ' <div class="weui-form-preview__bd"> '; html += ' <div class="weui-form-preview__item"> '; html += ' <label class="weui-form-preview__label">' + data.List[i].Name + '</label> '; html += ' </div> '; html += ' </div> '; } $("#Tolist").append(html); } else { html += "<div class="weui-cells__title" >已无更多数据</div>"; $("#Tolist").append(html); loading = true; } $(".weui-loadmore").hide(); } }); } |
城别.笔