移动网站中常常有的功能：列表的下拉刷新、上拉加载更多
本例介绍一种简单使用的移动端下拉刷新、上拉加载更多插件，下载及参考地址：https://github.com/ximan/dropload
插件依赖
Zepto 或者 jQuery 1.7以上版本，推荐jQuery 2.x版本（二者不要同时引用）
Zepto or jQuery 1.7+，recommend to use jQuery 2.x（not use them at the same time）
使用方法
引入插件
1 <link rel="stylesheet" href="css/dropload.css"> 2 <script src="js/dropload.min.js"></script>
初始化插件
1 $('.element').dropload({ 2 scrollArea : window, 3 loadDownFn : function(me){ 4 $.ajax({ 5 type: 'GET', 6 url: 'json/more.json', 7 dataType: 'json', 8 success: function(data){ 9 alert(data); 10 // 每次数据加载完，必须重置 11 me.resetload(); 12 }, 13 error: function(xhr, type){ 14 alert('Ajax error!'); 15 // 即使加载出错，也得重置 16 me.resetload(); 17 } 18 }); 19 } 20 });
参数列表
| 参数 | 说明 | 默认值 | 可填值 |
|---|---|---|---|
| scrollArea | 滑动区域 | 绑定元素自身 | window |
| domUp | 上方DOM | { domClass : 'dropload-up', domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>', domUpdate : '<div class="dropload-update">↑释放更新</div>', domLoad : '<div class="dropload-load">○加载中...</div>' } |
数组 |
| domDown | 下方DOM | { domClass : 'dropload-down', domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>', domLoad : '<div class="dropload-load">○加载中...</div>', domNoData : '<div class="dropload-noData">暂无数据</div>' } |
数组 |
| autoLoad | 自动加载 | true | true和false |
| distance | 拉动距离 | 50 | 数字 |
| threshold | 提前加载距离 | 加载区高度2/3 | 正整数 |
| loadUpFn | 上方function | 空 | function(me){ //你的代码 me.resetload(); } |
| loadDownFn | 下方function | 空 | function(me){ //你的代码 me.resetload(); } |
API
暴露一些功能，可以让dropload更灵活的使用
lock() 锁定dropload
| 参数 | 说明 |
|---|---|
lock() |
智能锁定，锁定上一次加载的方向 |
lock('up') |
锁定上方 |
lock('down') |
锁定下方 |
unlock() 解锁dropload
noData() 无数据
| 参数 | 说明 |
|---|---|
noData() |
无数据 |
noData(true) |
无数据 |
noData(false) |
有数据 |
resetload() 重置。每次数据加载完，必须重置
完整实例
1 <!doctype html> 2 <html lang="zh-cn"> 3 <head> 4 <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8"> 5 <title>移动端下拉刷新、上拉加载更多插件 </title> 6 <!-- UC强制全屏 --> 7 <meta name="full-screen" content="yes"> 8 <!-- QQ强制全屏 --> 9 <meta name="x5-fullscreen" content="true"> 10 <style> 11 *{ 12 margin: 0; 13 padding:0; 14 -webkit-tap-highlight-color:rgba(0,0,0,0); 15 -webkit-text-size-adjust:none; 16 } 17 html{ 18 font-size:10px; 19 } 20 body{ 21 background-color: #f5f5f5; 22 font-size: 1.2em; 23 } 24 .header{ 25 height: 44px; 26 line-height: 44px; 27 border-bottom: 1px solid #ccc; 28 background-color: #eee; 29 } 30 .header h1{ 31 text-align: center; 32 font-size: 2rem; 33 font-weight: normal; 34 } 35 .content{ 36 max-width: 640px; 37 margin: 0 auto; 38 background-color: #fff; 39 } 40 .content .item{ 41 display: -webkit-box; 42 display: -webkit-flex; 43 display: -ms-flexbox; 44 display: flex; 45 -ms-flex-align:center; 46 -webkit-box-align:center; 47 box-align:center; 48 -webkit-align-items:center; 49 align-items:center; 50 padding:3.125%; 51 border-bottom: 1px solid #ddd; 52 color: #333; 53 text-decoration: none; 54 } 55 .content .item img{ 56 display: block; 57 width: 40px; 58 height: 40px; 59 border:1px solid #ddd; 60 } 61 .content .item h3{ 62 display: block; 63 -webkit-box-flex: 1; 64 -webkit-flex: 1; 65 -ms-flex: 1; 66 flex: 1; 67 width: 100%; 68 max-height: 40px; 69 overflow: hidden; 70 line-height: 20px; 71 margin: 0 10px; 72 font-size: 1.2rem; 73 } 74 .content .item .date{ 75 display: block; 76 height: 20px; 77 line-height: 20px; 78 color: #999; 79 } 80 .opacity{ 81 -webkit-animation: opacity 0.3s linear; 82 animation: opacity 0.3s linear; 83 } 84 @-webkit-keyframes opacity { 85 0% { 86 opacity:0; 87 } 88 100% { 89 opacity:1; 90 } 91 } 92 @keyframes opacity { 93 0% { 94 opacity:0; 95 } 96 100% { 97 opacity:1; 98 } 99 } 100 </style> 101 <link rel="stylesheet" href="../dist/dropload.css"> 102 </head> 103 <body> 104 <div class="header"> 105 <h1>就当我是新闻页吧</h1> 106 </div> 107 <div class="content"> 108 <div class="lists"> 109 </div> 110 </div> 111 <!-- jQuery1.7以上 或者 Zepto 二选一，不要同时都引用 --> 112 <script src="js/zepto.min.js"></script> 113 <script src="../dist/dropload.min.js"></script> 114 <script> 115 $(function(){ 116 // 页数 117 var page = 0; 118 // 每页展示5个 119 var size = 5; 120 121 // dropload 122 $('.content').dropload({ 123 scrollArea : window, 124 threshold : 100,//提前加载距离 125 loadUpFn : function(me){ 126 $.ajax({ 127 type: 'GET', 128 url: 'http://ximan.github.io/dropload/examples/json/update.json', 129 dataType: 'json', 130 success: function(data){ 131 var result = ''; 132 for(var i = 0; i < data.lists.length; i++){ 133 result += '<a class="item opacity" href="'+data.lists[i].link+'">' 134 +'<img src="'+data.lists[i].pic+'" alt="">' 135 +'<h3>'+data.lists[i].title+'</h3>' 136 +'<span class="date">'+data.lists[i].date+'</span>' 137 +'</a>'; 138 } 139 // 为了测试，延迟1秒加载 140 setTimeout(function(){ 141 $('.lists').html(result); 142 // 每次数据加载完，必须重置 143 me.resetload(); 144 // 重置页数，重新获取loadDownFn的数据 145 page = 0; 146 // 解锁loadDownFn里锁定的情况 147 me.unlock(); 148 me.noData(false); 149 },1000); 150 }, 151 error: function(xhr, type){ 152 alert('Ajax error!'); 153 // 即使加载出错，也得重置 154 me.resetload(); 155 } 156 }); 157 }, 158 loadDownFn : function(me){ 159 page++; 160 // 拼接HTML 161 var result = ''; 162 $.ajax({ 163 type: 'GET', 164 url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size, 165 dataType: 'json', 166 success: function(data){ 167 var arrLen = data.length; 168 if(arrLen > 0){ 169 for(var i=0; i<arrLen; i++){ 170 result += '<a class="item opacity" href="'+data[i].link+'">' 171 +'<img src="'+data[i].pic+'" alt="">' 172 +'<h3>'+data[i].title+'</h3>' 173 +'<span class="date">'+data[i].date+'</span>' 174 +'</a>'; 175 } 176 // 如果没有数据 177 }else{ 178 // 锁定 179 me.lock(); 180 // 无数据 181 me.noData(); 182 } 183 // 为了测试，延迟1秒加载 184 setTimeout(function(){ 185 // 插入数据到页面，放到最后面 186 $('.lists').append(result); 187 // 每次数据插入，必须重置 188 me.resetload(); 189 },1000); 190 }, 191 error: function(xhr, type){ 192 alert('Ajax error!'); 193 // 即使加载出错，也得重置 194 me.resetload(); 195 } 196 }); 197 } 198 }); 199 }); 200 </script> 201 </body> 202 </html>