0

元の「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();
    }
});
4

1 に答える 1

1

この記事では、実際にそれがどのように構築されたかについて詳しく説明します。

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

「また、setContentInsets を使用している楽しいメソッドにも注意してください。このメソッドは、テーブルビューのコンテンツ位置インセットを変更します。このコードでは、単純に上から 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();
}
于 2012-08-10T19:35:10.247 に答える