移動網站中常常有的功能：列表的下拉刷新、上拉加載更多
本例介紹一種簡單使用的移動端下拉刷新、上拉加載更多插件，下載及參考地址：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>