Apicloud——下拉重新整理、上拉載入
阿新 • • 發佈：2018-12-07
2018-12-07 13:18:21
非Apicloud中的外掛
1 <!doctype html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /> 7 <title>APICloud APP</title> 8<link rel="stylesheet" type="text/css" href="../css/api.css" /> 9 <link rel="stylesheet" type="text/css" href="../css/style.css" /> 10 <style> 11 html, 12 body { 13 height: 100%; 14 width: 100%; 15 background-color: #fff;16 } 17 </style> 18 </head> 19 20 <body> 21 22 23 24 <div id="frame1_carlist"> </div> 25 26 27 </body> 28 29 30 <script type="text/javascript" src="../script/api.js"></script> 31 <script type="text/javascript"> 32var skip = 1; //頁碼 33 var limit = 10; //每頁條數 34 var datas = new Array(); //頁面資料儲存的陣列 35 //初始化 36 apiready = function() { 37 fnInitData(); 38 fnInitEvent(); 39 }; 40 41 function fnInitData() { 42 //請求引數 43 var ajaxValues = { 44 where: {}, 45 skip: skip, 46 limit: limit, 47 order: "createdAt DESC" 48 }; 49 // 載入loading 50 api.showProgress({ 51 title: "獲取資料中...", 52 text: '請稍等...' 53 }); 54 //api.ajax 55 api.ajax({ 56 url: 'http://xxxx.xxxx.cn/index/carlease/carslist', 57 headers: { 58 "X-APICloud-AppId": "A6078991134970", 59 "X-APICloud-AppKey": "bb3d0326284e1306de46d29c928e9fa8632d156c.1523672167637" 60 }, 61 data: { 62 values: { 63 page: JSON.stringify(skip) 64 } 65 }, 66 dataType: "json", 67 method: "post", 68 }, function(ret, err) { 69 console.log(JSON.stringify(skip)); 70 //取消loading 71 api.hideProgress(); 72 if (ret) { 73 var newa = ret.data.carlist; 74 console.log(JSON.stringify(newa)); 75 //把請求到的資料遍歷新增進頁面資料的陣列 76 if (newa.length > 0) { 77 for (var i = 0, len = newa.length; i < len; i++) { 78 datas.push(newa[i]); 79 }; 80 //呼叫頁面渲染的方法 81 fnInitView(datas); 82 } else { 83 api.toast({ 84 msg: '沒資料了，別拽了' 85 }); 86 skip -= 1; 87 }; 88 console.log("第" + (skip + 1).toString() + "頁"); 89 } else { 90 alert("互動失敗"); 91 }; 92 }); 93 }; 94 95 /** 96 * 渲染頁面佈局 97 * 98 * @param {Array} data 99 */ 100 function fnInitView(data) { 101 // 取消下拉重新整理效果 102 api.refreshHeaderLoadDone(); 103 //宣告容器 並置空 104 105 106 var frame1_carlist_html = ''; 107 //遍歷頁面資料的陣列進行建立標籤,插入容器 108 for (var i = 0; i < data.length; i++) { 109 frame1_carlist_html += '<div class="frame1_guess_list b" onclick="openwin_ware(' + data[i].id + ')"><div class="wid_95" ><img src="' + data[i].base_img + '" alt="凌渡" class="frame1_ldpic">' + 110 ' <ul class="choose_title"><li class="frame1_title_name">' + data[i].car_name + '</li> <li class="fon_12">' + data[i].displacement + '</li><li class="fon_12 cor_888">廠商指導價' + data[i].price + 111 '萬</li><li class="frame1_firstpay">首付<span class="frame1_title_firstpay">' + data[i].down_payments + 112 '</span>萬 <span class="fon_12 frame1_month_pay cor_888">月供：<span class="fon_12 cor_888">' + data[i].month_pay + '</span>元</span></li></ul></div></div>'; 113 114 115 }; 116 $api.byId('frame1_carlist').innerHTML = frame1_carlist_html; 117 }; 118 119 /** 120 * 初始化頁面監聽事件 121 */ 122 function fnInitEvent() { 123 /**上拉載入 */ 124 api.addEventListener({ 125 name: 'scrolltobottom', 126 extra: { 127 threshold: 10 128 } 129 }, function(ret, err) { 130 //頁碼+1，繼續請求資料 131 skip += 1; 132 fnInitData(); 133 }); 134 /** 下拉重新整理 */ 135 api.setRefreshHeaderInfo({ 136 bgColor: '#ccc', 137 textColor: '#fff', 138 textDown: '下拉重新整理...', 139 textUp: '鬆開重新整理...' 140 }, function(ret, err) { 141 //重置頁碼、頁面資料，請求資料 142 skip = 1; 143 datas = new Array(); 144 fnInitData(); 145 }); 146 }; 147 148 function openwin_ware(a) { 149 api.openWin({ 150 name: 'ware', 151 url: './ware.html', 152 pageParam: { 153 wareId: a 154 } 155 }); 156 } 157 </script> 158 159 160 </html>