Apicloud——下拉刷新、上拉加载

news/2024/7/24 12:13:25 标签: web app

非Apicloud中的插件

代码如下(示例):

<!doctype html>
  <html>
  <head>
     <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>APICloud APP</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
     <style>
         html,
         body {
            height: 100%;
            width: 100%;
            background-color: #fff;
          }
      </style>
  </head>
 
  <body> 
     <div id="frame1_carlist"> </div>
 </body>
 <script type="text/javascript" src="../script/api.js"></script>
 <script type="text/javascript">
     var skip = 1; //页码
     var limit = 10; //每页条数
     var datas = new Array(); //页面数据存储的数组
     //初始化
     apiready = function() {
         fnInitData();
         fnInitEvent();
     };
      function fnInitData() {
         //请求参数
         var ajaxValues = {
             where: {},
             skip: skip,
             limit: limit,
             order: "createdAt DESC"
         };
        // 加载loading
         api.showProgress({
              title: "获取数据中...",
              text: ‘请稍等...});
         //api.ajax
          api.ajax({
             url: ‘http://xxxx.xxxx.cn/index/carlease/carslist‘,
             headers: {
                 "X-APICloud-AppId": "A6078991134970",
                 "X-APICloud-AppKey": "bb3d0326284e1306de46d29c928e9fa8632d156c.1523672167637"
             },
                          data: {
                 values: {
                     page: JSON.stringify(skip)
                 }
             },
             dataType: "json",
             method: "post",
         }, function(ret, err) {
             console.log(JSON.stringify(skip));
             //取消loading
             api.hideProgress();
             if (ret) {
                 var newa = ret.data.carlist;
                 console.log(JSON.stringify(newa));
                 //把请求到的数据遍历添加进页面数据的数组
                 if (newa.length > 0) {
                     for (var i = 0, len = newa.length; i < len; i++) {
                          datas.push(newa[i]);
                     };
                     //调用页面渲染的方法
                     fnInitView(datas);
                 } else {
                     api.toast({
                         msg: ‘没数据了,别拽了‘
                     });
                     skip -= 1;
                 };
                 console.log("第" + (skip + 1).toString() + "页");
             } else {
                 alert("交互失败");
             };
         });
     };
 
     /**
      * 渲染页面布局
      *
      * @param {Array} data
      */
    function fnInitView(data) {
         // 取消下拉刷新效果
        api.refreshHeaderLoadDone();
         //声明容器 并置空
        var frame1_carlist_html = ‘‘;
         //遍历页面数据的数组进行创建标签,插入容器
         for (var i = 0; i < data.length; i++) {
             frame1_carlist_html += ‘插入代码'                          
         };
         $api.byId(‘frame1_carlist‘).innerHTML = frame1_carlist_html;
     };
 
     /**
      * 初始化页面监听事件
      */
     function fnInitEvent() {
         /**上拉加载 */
         api.addEventListener({
             name: ‘scrolltobottom‘,
             extra: {
                 threshold: 10
             }
         }, function(ret, err) {
             //页码+1,继续请求数据
             skip += 1;
             fnInitData();
         });
         /** 下拉刷新 */
         api.setRefreshHeaderInfo({
             bgColor: ‘#ccc‘,
             textColor: ‘#fff‘,
             textDown: ‘下拉刷新...,
             textUp: ‘松开刷新...}, function(ret, err) {
             //重置页码、页面数据,请求数据
             skip = 1;
             datas = new Array();
             fnInitData();
         });
     };
 
     function openwin_ware(a) {
         api.openWin({
             name: ‘ware‘,
             url:./ware.html‘,
             pageParam: {
                wareId: a
           }
        });
    }
 </script>
</html>

感谢您的阅读, 如有什么不妥之处,还请赐教,我会继续努力,分享更好的前端代码。 点赞和在看就是最大的支持❤️


http://www.niftyadmin.cn/n/1263730.html

相关文章

MySQL基础用法之约束

一、约束分类 1、按功能划分 非空约束NOT NULL主键约束PRIMARY KEY唯一约束UNIQUE KEY默认约束DEFAULT外键约束FOREIGN KEY 2、按数据列数据划分 列级约束&#xff1a;对一个数据列建立的约束&#xff0c;称为列级约束。既可以在定义列时声明&#xff0c;也可以在定义列后声明…

iOS10以上Safari浏览器无法禁止缩放的解决方案

window.onload function() {// 阻止双击放大var lastTouchEnd 0;document.addEventListener(touchstart, function(event) {if (event.touches.length > 1) {event.preventDefault();}});document.addEventListener(touchend, function(event) {var now (new Date()).get…

html2canvas 处理跨域图片的解决方案

html2canvas 处理跨域图片的解决方案 最近接了个开发需求&#xff0c;要在前端实现将页面上的部分 DOM 内容生成为一张图片的功能。调研后发现了 html2canvas 库&#xff0c;使用它可以非常简便的实现上述功能&#xff0c;它的基本原理是将要生成为图片的 DOM 进行解析&#x…

MySQL基础用法之子查询

一、什么是子查询 子查询&#xff08;subquery&#xff09;是指&#xff0c;嵌套在查询内部&#xff0c;出现在其他SQL语句内的select子句。例如&#xff1a; SELECT * FROM table1 WHERE col1 (SELECT col2 FROM table2); 其中&#xff0c;SELECT col2 FROM table2就是子查询…

如何用Javascript将图片的绝对路径转换为base64编码

我们可以使用canvas.toDataURL的方法将图片的绝对路径转换为base64编码&#xff1b;在这我们引用的是淘宝首页一张图片如下&#xff1a; 代码如下: var img “https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg”; function getBase64Image(img) {var ca…

MySQL基础用法之函数

一、字符函数 CONCAT() 字符连接 SELECT CONCAT(MR,.,NIE); 可以连接多个字段&#xff0c;以上得到结果MR.NIE CONCAT_WS() 使用指定分隔符进行字符连接 SELECT CONCAT_WS(,,MR,NIE); 至少需要三个参数&#xff0c;第一个参数表示连接字段的分隔符&#xff0c;以上同样得到结…

前端json搜索

前端json搜索&#xff0c;无需连接后端&#xff1a; // index 输入的字段// save_search_result 搜索的全部json数组function indexSelect(index, save_search_result) {let arr save_search_result;// 前端json搜索// 输入内容为空 显示所有的内容if (index || index nu…

H5唤起应用商店或者应用市场

常用APP URL Scheme 常用app App Store&#xff1a; scheme: itms-apps:// 支付宝&#xff1a; packageName: com.eg.android.AlipayGphone, scheme: alipay://淘宝&#xff1a; packageName: com.taobao.taobao, scheme: taobao:// QQ&#xff1a; packageName: com.t…