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

一、实现下拉刷新：

默认样式》代码清晰简洁明了，符合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简洁明了，效率高，规范、语义明确。极大提高了开发人员的工作效率，以及代码的可读性、维护性、扩展性

转载于:https://my.oschina.net/u/141948/blog/360570