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——下拉刷新、上拉加载

猜你喜欢
