移动端实现下拉加载

  • 使用dropload.min.js实现上下拉刷新加载页面

html

代码全部只有主要代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<input type="hidden" id="pageSize" value="10" />
<input type="hidden" id="pageNum" value="1" />
<input type="hidden" id="totalPages" value="100" />
<section class="clear wrapper-box" id="wrapper">
<div class="scroll-box">
<ul class="photograph-list">
<li>
<div class="display-box">
<div class="box-nine pho-info">
<p style="padding-bottom:0.15rem"><strong>测试数据</strong><span class="status">待确认</span></p>
<p style="padding-bottom:0.1rem"><span>测试时间:</span><span>9月18日 13:00-13:30</span></p>
<p><span>测试人:</span><span>周杰伦(歌手)</span></p>
</div>
<div class="box-one pho-call">
<img src="images/call@2x.png" class="call">
<p class="callPhone">打电话</p>
</div>
</div>
</li>
<!--可以复制n个li标签试试-->
</ul>
</div>
</section>

css代码就不贴出来。就是平常的css样式。提一点dropload的css

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
.dropload-up,
.dropload-down {
position: relative;
height: 0;
overflow: hidden;
font-size: 0.24rem;
/* 开启硬件加速 */
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.dropload-down {
height: 0.88rem;
}
.dropload-refresh,
.dropload-update,
.dropload-load,
.dropload-noData {
height: 0.88rem;
line-height: 0.88rem;
text-align: center;
}
.dropload-load .loading {
display: inline-block;
height: 0.3rem;
width: 0.3rem;
border-radius: 100%;
margin: 0.12rem;
border: 0.04rem solid #666;
border-bottom-color: transparent;
vertical-align: middle;
-webkit-animation: rotate 0.75s linear infinite;
animation: rotate 0.75s linear infinite;
}

重点是js代码。记得引入jquery和dropload.min.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
61
droploadData();
// 下拉刷新
function droploadData() {
var pageNum = parseInt($("#pageNum").val()),
totalPages = parseInt($("#totalPages").val());
var dropload = $('#wrapper').dropload({
scrollArea: window, //绑定元素自身
distance: 100,
threshold: 200,
domDown: { //往下拉
domClass: 'dropload-down',
domRefresh: '<div class="dropload-refresh">↑上拉加载更多</div>',
domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
domNoData: '<div class="dropload-noData">已经全部加载完毕</div>'
},
domUp: { //往上拉
domClass: 'dropload-up',
domRefresh: '<div class = "dropload-refresh"> ↓下拉刷新 </div>',
domUpdate: '<div class = "dropload-update"> ↑释放更新 </div>',
domLoad: '<div class = "dropload-load"> <span class="loading"></span>加载中… </div>'
},
loadDownFn: function(me) { //往下拉的方法
pageNum++;
if (pageNum <= totalPages) {
loadData(pageNum, function(data) {
$("#wrapper").find("ul").append(data);
me.resetload(); // 每次数据加载完,必须重置
})
} else {
me.lock(); //锁定dropload
me.noData();
me.resetload(); // 每次数据加载完,必须重置
}
},
loadUpFn: function(me) { //往下拉的方法
pageNum++;
if (pageNum <= totalPages) {
loadData(pageNum, function(data) {
$("#wrapper").find("ul").prepend(data);
me.resetload(); // 每次数据加载完,必须重置
})
} else {
me.lock();
me.noData();
me.resetload(); // 每次数据加载完,必须重置
}
}
});
}
function loadData(pageNum, callback) { //模拟数据
setTimeout(function() {
var data = [];
for (var i = pageNum; i < 10; i++) {
data.push('<li><div class="display-box"><div class="box-nine pho-info"><p style="padding-bottom:0.15rem"><strong>kkOne</strong><span class="status">待确认</span></p><p style="padding-bottom:0.1rem"><span>相约时间:</span><span>9月18日 13:00-13:30</span></p><p><span>逛街人:</span><span>mary(俱乐部)</span></p></div><div class="box-one pho-call"><img src="images/call@2x.png" class="call"><p class="callPhone">打电话</p></div></div></li>');
}
callback(data);
}, 1000);
}

注意一点的是,下拉和上拉有时候并不是同时存在的。根据自己的方式选中上拉还是下拉。

每一次加入数据都需要调用resetload();

me.noData(); 和 me.noData(true); 表示当前无数据,也就是会在下方出现 (暂无数据)的表示 me.noData(false);则表示有数据,这时不会显示(暂无数据)。如果使用了me.unlock() ,则需要调用me.noData(false)才能继续功能

最近试用了淘宝的sui moblie框架,里面也有下拉刷新,无限滚动功能。感觉也不错。只是现在框架不维护可惜了。

谢谢你给我的支持,坚持原创技术分享,共同成长