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();
}
});
//初始显示数据
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
错误请指出,谢谢~