Titanium KitchenSink示例 - Table Pull Refresh

Question

可以從原始'table_view_pull_to_refresh.js'示例的下面的代碼中請求，哪個部分導致標題停止並向上滾動回原始位置？我一直試圖深入下面的代碼，但無法找到哪一行導致頭一旦加載新行就停止。

感謝

var win = Ti.UI.currentWindow; 

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 data = [ 
    {title:"Row 1"}, 
    {title:"Row 2"}, 
    {title:"Row 3"} 
]; 

var lastRow = 4; 

var tableView = Ti.UI.createTableView({ 
    data: data 
}); 

win.add(tableView); 

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:"../images/whiteArrow.png", 
    width:23, 
    height:60, 
    bottom:10, 
    left:20 
}); 

var statusLabel = Ti.UI.createLabel({ 
    text:"Pull to reload", 
    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:"Last Updated: "+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); 

tableView.headerPullView = tableHeader; 


var pulling = false; 
var reloading = false; 

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

function endReloading() 
{ 
    // simulate loading 
    for (var c=lastRow;c<lastRow+10;c++) 
    { 
     tableView.appendRow({title:"Row "+c}); 
    } 
    lastRow += 10; 

    // when you're done, just reset 
    tableView.setContentInsets({top:0},{animated:true}); 
    reloading = false; 
    lastUpdatedLabel.text = "Last Updated: "+formatDate(); 
    statusLabel.text = "Pull down to refresh..."; 
    actInd.hide(); 
    arrow.show(); 
} 

tableView.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 = "Release to refresh..."; 
    } 
    else if (pulling && offset > -65.0 && offset < 0) 
    { 
     pulling = false; 
     var t = Ti.UI.create2DMatrix(); 
     arrow.animate({transform:t,duration:180}); 
     statusLabel.text = "Pull down to refresh..."; 
    } 
}); 

tableView.addEventListener('scrollEnd',function(e) 
{ 
    if (pulling && !reloading && e.contentOffset.y <= -65.0) 
    { 
     reloading = true; 
     pulling = false; 
     arrow.hide(); 
     actInd.show(); 
     statusLabel.text = "Reloading..."; 
     tableView.setContentInsets({top:60},{animated:true}); 
     arrow.transform=Ti.UI.create2DMatrix(); 
     beginReloading(); 
    } 
}); 

Answer 1

這篇文章實際上它詳細介紹如何構建。

http://developer.appcelerator.com/blog/2010/05/how-to-create-a-tweetie-like-pull-to-refresh-table.html

「還要注意，我們使用setContentInsets一個有趣的方法，該方法將改變的tableview內容位置插圖。在這段代碼中，我們只是通過從頂部60個像素降低它。這可以確保我們的頭部視圖的60個像素在重新加載時保持可見。最後，重新加載會使用以下代碼將其引發：tableView.setContentInsets（{top：0}，{animated：true}）;.「

這些代碼的相關行

tableView.addEventListener('scrollEnd',function(e) 
{ 
    if (pulling && !reloading && e.contentOffset.y <= -65.0) 
    { 
     reloading = true; 
     pulling = false; 
     arrow.hide(); 
     actInd.show(); 
     statusLabel.text = "Reloading..."; 
     tableView.setContentInsets({top:60},{animated:true}); // *******THIS IS IT 
     arrow.transform=Ti.UI.create2DMatrix(); 
     beginReloading(); 
    } 
}); 
var pulling = false; 
var reloading = false; 

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

function endReloading() 
{ 
    // simulate loading 
    for (var c=lastRow;c<lastRow+10;c++) 
    { 
     tableView.appendRow({title:"Row "+c}); 
    } 
    lastRow += 10; 

    // when you're done, just reset 
    tableView.setContentInsets({top:0},{animated:true}); // *********THIS TOO 
    reloading = false; 
    lastUpdatedLabel.text = "Last Updated: "+formatDate(); 
    statusLabel.text = "Pull down to refresh..."; 
    actInd.hide(); 
    arrow.show(); 
}