Fork me on GitHub

移动端下拉刷新、上拉异步加载的插件以及轮播图插件

dropload+swiper

最近项目中用到了这两个插件,十分好用。这里简单介绍一下。

一.dropload

1.引入css和js

1
2
<link rel="stylesheet" href="../dropload.css">
<script src="../dropload.min.js"></script>

2.使用的核心代码

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
<body>
<div class="container">
<ul class="list">
<li>
<p>张三</p>
<p>10086</p>
<p>本科</p>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
var result="";
$('.container').dropload({
scrollArea : window,
loadDownFn : function(me){
$.ajax({
type: 'GET',
url: 'stu/queryallstu',
dataType: 'json',
success: function(data){
for(var i=0;i<data.length;i++)
result+='<li>'+
'<p>'+data[i].name+'</p>'+
'<p>'+data[i].phone+'</p>'+
'<p>'+data[i].study+'</p>'+
'</li>';
$('.list').append(result);
// 每次数据加载完,必须重置
me.resetload();
},
error: function(xhr, type){
alert('Ajax error!');
// 即使加载出错,也得重置
me.resetload();
}
});
}
});
</script>

##重要:
1.使用下拉刷新的时候请注意滚动区域。否则不会生效。
2.autoLoad默认为true会自动触发ajax。如果在移动端需要用户手动上拉触发ajax,则需要将这个值设置为false;

dropload插件在线演示

Swiper使用说明

Thanks!