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>

原文地址:https://www.cnblogs.com/jry199506/p/10082390.html

时间: 12-07

Apicloud——下拉刷新、上拉加载的相关文章

android 安卓 listview 支持下拉刷新 上拉加载更多

[1]重写listView import java.text.SimpleDateFormat; import java.util.Date; import android.content.Context; import android.util.AttributeSet; import android.util.Log; import android.view.MotionEvent; import android.view.View; import android.view.ViewGrou

带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载

转载请注明出处:http://blog.csdn.net/lowprofile_coding/article/details/51321896 一 .前言 最近实在太忙,一个多礼拜没有更新文章了,于是今晚加班加点把demo写出来,现在都12点了才开始写文章. 1.我们的目标 把RecyclerView下拉刷新上拉加载更多加入到我们的开发者头条APP中. 2.效果图 3.实现步骤 找一个带上拉刷新下载加载更多的RecyclerView开源库,我们要站在巨人的肩膀上 下载下来自己先运行下demo,然

Android 下拉刷新上拉加载 多种应用场景 超级大放送(上)

转载请标明原文地址:http://blog.csdn.net/yalinfendou/article/details/47707017 关于Android下拉刷新上拉加载,网上的Demo太多太多了,这里不是介绍怎么去实现下拉刷新上拉加载,而是针对下拉刷新上拉加载常用的一些应用场景就行了一些总结,包含了下拉刷新上拉加载过程中遇到的一些手势冲突问题的解决方法(只能算是抛砖引玉). 去年9月的时候,那时自己正在独立做Android项目.记得刚刚写完那个ListView列表页面(木有下拉刷新,上拉加载)

vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源占用少,无依赖,多平台的javascript滚动插件.iScroll不仅仅是 滚动.它可以处理任何需要与用户进行移动交互的元素.在你的项目中包含仅仅4kb大小的iScroll,你的项目便拥有了滚动,缩放,平移,无限滚动,视差滚动,旋转功能.iScroll的强大毋庸置疑,本人也非常欢迎大家使用iScr

android 下拉刷新上拉加载更多,高仿ios左滑动删除item,解决了众多手势问题

一.前言 老规矩,别的不说,这demo是找了很相关知识集合而成的,可以说对我这种小白来说是绞尽脑汁!程序员讲的是无图无真相!现在大家一睹为快! 二.比较关键的还是scroller这个类的 package com.icq.slideview.view; import android.content.Context; import android.util.AttributeSet; import android.util.Log; import android.util.TypedValue; i

Android下拉刷新库,利用viewdraghelper实现,集成了下拉刷新,底部加载更多,数据初始加载显示loading等功能

项目Github地址:https://github.com/sddyljsx/pulltorefresh Android下拉刷新库,利用viewdraghelper实现. 集成了下拉刷新,底部加载更多,以及刚进入加载数据的loadview.包括了listview与gridview的改写. 效果1: 效果2: 效果3: 效果4: 效果5: 使用说明: imageList=(ListView)findViewById(R.id.image_list); imageAdapter=new ImageA

Maxwin-z/XListView-Android(下拉刷新上拉加载)源码解析(二)

转载请注明出处http://blog.csdn.net/crazy__chen/article/details/45980399 源文件下载地址http://download.csdn.net/detail/kangaroo835127729/8736887 本文主要是贴出xlistview的源代码和一个使用实例,没有过多讲解 使用实例,MainActivity public class MainActivity extends Activity { private LinkedList<Str

Android ListView 下拉刷新 点击加载更多

最近项目中用到了ListView的下拉刷新的功能,总结了一下前辈们的代码,单独抽取出来写了一个demo作为示例. 效果图 下拉刷新: 加载更多: CustomListView.java [java] view plaincopy package com.example.uitest.view; import java.util.Date; import com.example.uitest.R; import android.content.Context; import android.uti

RecyclerVIew 下拉刷新上拉加载

步骤: 寻找RecyclerView 上拉刷新下拉加载开源库 加入到项目中 解决整合进来的bug 待续...

Android开发----PullRefreshLibrary下拉刷新上拉加载相关代码

Mainactivity public class MainActivity extends Activity { private String url = "http://apis.juhe.cn/goodbook/catalog?key=9d6ef8c31647a206e05fcaff70527182&dtype=xml";    private List<Xmlarray> list;    private ListView lv;    // 定义一个变量,