文档章节

使用APICloud编写优雅的HTML5代码《一》:下拉刷新、上拉加载更多

水中倒立
 水中倒立
发布于 2014/12/25 21:20
字数 488
阅读 669
收藏 5

一、实现下拉刷新:

默认样式》代码清晰简洁明了,符合ECMA262规范的callback,最少只需5行代码:

apiready = function(){
    api.setRefreshHeaderInfo(function(ret, err){
        //refresh event callback
        toDoRequest();
    });
}
                  
//do ajax
function toDoRequest(){
        // GET、POST、PUT、DELETE、…
        api.ajax({
            url:'http://xxx.xxx.xxx'
        }, function(ret, err){
            api.refreshHeaderLoadDone(); //复位下拉刷新
            //do your business
        });
}

自定义样式》参数灵活可自由定义,非必选,实现自定义下拉刷新头的信息:

apiready = function(){
    var param = {};
    param.loadingImgae = 'widget://image/refresh.png'; //定义刷新小箭头的图片
    param.bgColor = '#ccc';                            //定义下拉刷新区域的背景
    param.textColor = '#fff';                          //定义下拉刷新提示文字的颜色
    param.textDown = '下拉试试...';                     //定义下拉刷新文字
    param.textUp = '松开试试...';                       //定义松开刷新文字
    param.showTime = true;                             //定义是否显示最后一次刷新时间
    api.setRefreshHeaderInfo(param, function(ret, err){
        toDoRequest();
    });
}
 
function toDoRequest(){
    api.ajax({
        url:'http://xxx.xxx.xxx'
    }, function(ret, err){
        api.refreshHeaderLoadDone();        //复位下拉刷新
        //do your business
    });
}



二、实现加载更多:

通过监听页面滚动到底部事件来实现:

apiready = function(){
    api. addEventListener({name:'scrolltobottom'}, function(ret, err){
        //refresh event callback
        toDoRequest();
    });
}
                  
//do ajax
function toDoRequest(){
    // GET、POST、PUT、DELETE、…
    api.ajax({
        url:'http://xxx.xxx.xxx'
    }, function(ret, err){
        //do your business
    });
}

 

从接口规范上看,APICloud开放的端API简洁明了,效率高,规范、语义明确。极大提高了开发人员的工作效率,以及代码的可读性、维护性、扩展性


© 著作权归作者所有

水中倒立
粉丝 1
博文 2
码字总数 1043
作品 0
海淀
私信 提问
加载中

评论(2)

肖滔
肖滔
简单粗暴,直接有效
maoxiong25
maoxiong25
不错,很实用
APP7天快速开发教程4:APP开发图片缓存原理

第四天:掌握使用JS模版来实现列表数据,推荐使用doT模版;了解下拉刷新和上拉加载的实现原理及相关API的使用,实现下拉刷新、上拉加载更多功能;了解APICloud图片缓存原理及相关API的使用,...

达斯雷马
2017/02/23
225
0
七大技术升级, 让APP开发更简单

移动应用云服务提供商APICloud继推出帮助原生App快速迭代的SuperWebView之后,在开发工具、APP引擎以及云服务功能上也迎来全面技术升级,帮助用户开发出更具个性化、功能更加强大、用户体验更...

API_Cloud
2016/04/19
760
4
七大技术升级, 让APP开发更简单

移动应用云服务提供商APICloud继推出帮助原生App快速迭代的SuperWebView之后,在开发工具、APP引擎以及云服务功能上也迎来全面技术升级,帮助用户开发出更具个性化、功能更加强大、用户体验更...

wojiu9712
2016/03/30
208
0
APICloud七大技术升级, 让APP开发更简单

移动应用云服务提供商APICloud继推出帮助原生App快速迭代的SuperWebView之后,在开发工具、APP引擎以及云服务功能上也迎来全面技术升级,帮助用户开发出更具个性化、功能更加强大、用户体验更...

wojiu9712
2016/03/29
0
0
你应该知道的2016年有关App开发的技术创新

上一篇简述了2016年有关App产品的年中总结,这篇开始历数有关App开发的技术创新!无论你是创业者,还是程序员,无论你是否懂编程、写代码,利用APICloud平台数据撰写的年中总结,集合了移动应...

duduo丶
2016/07/14
184
0

没有更多内容

加载失败,请刷新页面

加载更多

GMTC2019|闲鱼-基于Flutter的架构演进与创新

作者:闲鱼技术-宗心 2012年应届毕业加入阿里巴巴,主导了闲鱼基于Flutter的新混合架构,同时推进了Flutter在闲鱼各业务线的落地。未来将持续关注终端技术的演变及趋势 Flutter的优势与挑战 ...

阿里云云栖社区
11分钟前
2
0
迪蒙人工智能共享停车吸引国际关注

  近来,华为创始人任正非多次提及人工智能。即便在华为生死攸关的关键时刻,任正非依旧不忘强调教育的重要性,“如果不重视教育,实际上我们会重返贫穷的,因为这个社会,最终是要走向人工智能的...

琴殇的
12分钟前
0
0
iOS开发之EventKitUI框架的应用

iOS开发之EventKitUI框架的应用 前面博客,有介绍EventKit这个框架的使用,使用EventKit可以与系统的日历和提醒应用进行交互,读写用户的日程事件。EventKitUI,顾名思义,其实基于EventKit框...

珲少
20分钟前
0
0
从MySQL源码看其网络IO模型

从MySQL源码看其网络IO模型 前言 MySQL是当今最流行的开源数据库,阅读其源码是一件大有裨益的事情(虽然其代码感觉比较凌乱)。而笔者阅读一个Server源码的习惯就是先从其网络IO模型看起。于是...

无毁的湖光-Al
21分钟前
0
0
WebService学习笔记

什么是Web Services? Web Services 是应用程序组件 Web Services 使用开放协议进行通信 Web Services 是独立的(self-contained)并可自我描述 Web Services 可通过使用UDDI来发现 Web Serv...

榴莲黑芝麻糊
37分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部