沉舟侧畔千帆进，病树前头万木春。这篇文章主要讲述WEUI下拉刷新（可用在Appcan下拉刷新）相关的知识，希望能为你提供帮助。
最近在做手机版使用到了下拉刷新和滚动加载，记录一下实现过程：
一、引入文件
|
1
2
3
4
|
<
link rel="stylesheet"
href=https://www.songbingjia.com/android/"Content/jqueryweui/weui.min.css">
<
link rel="stylesheet"
href=https://www.songbingjia.com/android/"Content/jqueryweui/jquery-weui.min.css">
<
script type="text/javascript"
src=https://www.songbingjia.com/android/"Content/jqueryweui/jquery.min.js"
>
<
/script>
<
script type="text/javascript"
src=https://www.songbingjia.com/android/"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=" 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>
|
【WEUI下拉刷新（可用在Appcan下拉刷新）】三、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();
}
});
} |
推荐阅读
