最近在做手机版使用到了下拉刷新和滚动加载，记录一下实现过程：
一、引入文件
|
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=
"background-color: #FFFFFF; width: 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();
}
});
}
|