Jquery mobile Listview刷新工作，但为时已晚

Question

我正在通过 phonegap（一个带有 4 个数据角色页面的 html 页面）创建一个移动应用程序。在页面上显示一个列表视图。

在 pagebeforeshow 上，我将列表项动态添加到我的 ul。 在 pageshow 上，我刷新了列表视图。

这行得通。但是，前一两秒我仍然看到没有jquery mobile 样式的列表。只有在此之后，它才会刷新为正确的样式。

可能是什么问题？ （备注：当我将脚本标签放在头部时，它可以工作，但是其他事件不再工作了。不确定这是否与它有关。）

谢谢你， 克里斯托夫

$("#tips").on('pagebeforeshow', function(){
    db.transaction(getDbTips, onDbError, onDbSuccess);      
});

$("#tips").on('pageshow', function(){
    $("#tipsLijst").listview('refresh');
});

function getDbTips(tx) {
    tx.executeSql("CREATE TABLE IF NOT EXISTS TIPS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, beschrijving)");
    tx.executeSql("SELECT * from TIPS", [], onSelectTipsSuccess, onDbError);
}

function onSelectTipsSuccess(tx, results) {
    $('.tip_item').remove();
    var len = results.rows.length;
    for(var i=0; i<len; i++) {
    $("#tipsLijst").append("<li class='tip_item'><a href='#detailsTip' onclick='sessionStorage.TipId=" + results.rows.item(i).id + "'>" + results.rows.item(i).beschrijving + "</a></li>");     
}       

};

HTML：

<div data-role="page" id="tips">
<div data-role="header">
   <h1>Kado-tips</h1>
   <a href="#home" data-role="button" data-icon="home" data-iconpos="notext">Home</a>
</div>
<div data-role="content">
    <ul data-role="listview" id="tipsLijst">
    </ul>
</div> <!-- einde content -->

Answer 1

全部放在“pageshow”中。

$("#tips").on('pageshow', function(){
    db.transaction(getDbTips, onDbError, onDbSuccess);
    $("#tipsLijst").listview('refresh');
});

根据 UI 设计标准，您不想让用户等待查看 UI，您希望让他们等待查看数据，如果您需要让他们等待的话。此外，pagebeforeshow 和 pageshow 之间的延迟可能是导致您的问题的原因。

编辑：

尝试在同一函数中的追加命令之后添加刷新命令。

function onSelectTipsSuccess(tx, results) {
    $('.tip_item').remove();
    var len = results.rows.length;
    for(var i=0; i<len; i++) {
        $("#tipsLijst").append("<li class='tip_item'><a href='#detailsTip' onclick='sessionStorage.TipId=" + results.rows.item(i).id + "'>" + results.rows.item(i).beschrijving + "</a></li>");
    }
    $("#tipsLijst").listview('refresh');
}

此外，onSelectTipsSuccess 函数内的 for 循环缺少其结束 }。希望这只是一个错字。