Titanium tableview上拉刷新

var lastRow = 4;
//初始显示数据
function formatDate() {//此处是获取更新时间
    var date = new Date();
    var datestr = date.getMonth() + '/' + date.getDate() + '/' + date.getFullYear();
    if(date.getHours() >= 12) {
        datestr += ' ' + (date.getHours() == 12 ? date.getHours() : date.getHours() - 12) + ':' + date.getMinutes() + ' PM';
    } else {
        datestr += ' ' + date.getHours() + ':' + date.getMinutes() + ' AM';
    }
    return datestr;
}

var border = Ti.UI.createView({
    backgroundColor : "#576c89",
    height : 2,
    bottom : 0
});

var tableHeader = Ti.UI.createView({
    backgroundColor : "#e2e7ed",
    width : 320,
    height : 60
});

// fake it til ya make it..  create a 2 pixel
//
 bottom border
tableHeader.add(border);

var arrow = Ti.UI.createView({
    backgroundImage : "image/whiteArrow.png", //图片
    width : 23,
    height : 60,
    bottom : 10,
    left : 20
});

var statusLabel = Ti.UI.createLabel({
    text : '下拉可以刷新...',
    left : 55,
    width : 200,
    bottom : 30,
    height : "auto",
    color : "#576c89",
    textAlign : "center",
    font : {
        fontSize : 13,
        fontWeight : "bold"
    },
    shadowColor : "#999",
    shadowOffset : {
        x : 0,
        y : 1
    }
});

var lastUpdatedLabel = Ti.UI.createLabel({
    text : "最后一次更新: " + formatDate(),
    left : 55,
    width : 200,
    bottom : 15,
    height : "auto",
    color : "#576c89",
    textAlign : "center",
    font : {
        fontSize : 12
    },
    shadowColor : "#999",
    shadowOffset : {
        x : 0,
        y : 1
    }
});

var actInd = Titanium.UI.createActivityIndicator({
    left : 20,
    bottom : 13,
    width : 30,
    height : 30
});

tableHeader.add(arrow);
tableHeader.add(statusLabel);
tableHeader.add(lastUpdatedLabel);
tableHeader.add(actInd);

tableviewName.headerPullView = tableHeader;

var pulling = false;
var reloading = false;

function beginReloading() {
    // just mock out the reload
    setTimeout(endReloading, 2000);
}

function endReloading() {
    lastRow += 4;
    ////////////此处重点,数据处理方法,并且刷新tableview//////////////////function(){}Event
    // when you're done, just reset
    tableviewName.setContentInsets({
        top : 0
    }, {
        animated : true
    });
    reloading = false;
    lastUpdatedLabel.text = "最后一次更新: " + formatDate();
    statusLabel.text = "下拉更新...";
    actInd.hide();
    arrow.show();
}

tableviewName.addEventListener('scroll', function(e) {
    var offset = e.contentOffset.y;
    if(offset <= -65.0 && !pulling) {
        var t = Ti.UI.create2DMatrix();
        t = t.rotate(-180);
        pulling = true;
        arrow.animate({
            transform : t,
            duration : 180
        });
        statusLabel.text = "松开刷新...";
    } else if(pulling && offset > -65.0 && offset < 0) {
        pulling = false;
        var t = Ti.UI.create2DMatrix();
        arrow.animate({
            transform : t,
            duration : 180
        });
        statusLabel.text = "载入中...";
    }
});
tableviewName.addEventListener('scrollEnd', function(e) {
    if(pulling && !reloading && e.contentOffset.y <= -65.0) {
        reloading = true;
        pulling = false;
        arrow.hide();
        actInd.show();
        statusLabel.text = "重试..";
        tableviewName.setContentInsets({
            top : 60
        }, {
            animated : true
        });
        arrow.transform = Ti.UI.create2DMatrix();
        beginReloading();
    }
});

 

使用方法:修改tableviewName的Name,在数据处理方法位置写入获取数据的方法。

 

代码来自:appcelerator-KitchenSink-1.7.2-0

错误请指出,谢谢~

posted @ 2012-02-29 10:54  Maxfong  阅读(1500)  评论(3编辑  收藏  举报