Question

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

在pagebeforeshow上我动态地将listitems添加到我的ul。在页面显示中，我刷新了listview。

有效。但是，前一两秒我仍然看到没有jquery移动样式的列表。只有在那之后它才会刷新到正确的风格。

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

谢谢你，克里斯托夫

$("#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之间的延迟可能是导致您出现问题的原因。

编辑：

尝试在相同的函数中添加append命令后的refresh命令。

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循环缺少其结束}。希望这只是一个错字。

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

1 个答案: