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像素的我们正在重新加载时，我们的标题视图仍然可见。在endReloading将使用以下代码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();
}

Titanium KitchenSink示例 - 表拉动刷新

1 个答案: