Apicloud——下拉刷新上拉加载
Posted 吉吉国王丶
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Apicloud——下拉刷新上拉加载相关的知识，希望对你有一定的参考价值。
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"> 32 var 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>
以上是关于Apicloud——下拉刷新上拉加载的主要内容，如果未能解决你的问题，请参考以下文章