Question

在我的jQuery mobile，Phonegap应用程序中我有一个页面，其中有一个列表视图，这个列表内容是动态添加的，问题是当我导航到这个页面时它首先显示为空并且在秒之后添加了List视图到页面显示，我已经使用pagebeforeshow事件在显示页面之前添加列表视图内容，但它对我不起作用“列表视图显示页面后显示”，用户将注意到并看到内容它添加到页面中。如何解决此问题，以便在显示页面之前添加列表内容？请帮帮我..

提前致谢。

HTML

<body>

<div data-role="page" id="EmployeesListPage">

<div  data-role="header"  data-position="fixed"  data-tap-toggle="false" data- fullscreen="false"   data-theme="b">
<h3> Employees</h3>
</div>

<div data-role="content">

<ul data-role="listview"   id="EmpList"   data-inset="true"  data-filter="true" data-  filter-placeholder="Search " data-split-icon="delete"  style="margin-top: 30px;" > 

</ul>
</div>
</div>
</body>

Java脚本

document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady()
{
    loading('show');

    $('#EmployeesListPage').on( 'pagecreate',function(event){ 

         db.transaction(getAllEmployees, transactionError);
     });
 }

function getAllEmployees(tx)
{
    tx.executeSql('SELECT EmpName,Salary,Gender,Country  FROM  Employee',         [],getEmpSuccess,transactionError);

}

function  getEmpSuccess(tx,result)
{    

  if (result.rows.length)
  {


   for(var i=0;i< result.rows.length; i++)
   {     
       var row = result.rows.item(i);
       $('#EmpList').append('<li><a href="#">' +'<font class="line1">' + '  '+row['EmpName'] + '</font><BR><BR>' +'<font     size="6px" class="line2" > '+ row['Gender']  +'</font>'+'<font size="6px" class="line3"> ' +row['Country']+' </font>'+'<font  size="6px"   class="line4"> '+ row['Salary']+'</font><BR> '+'</a><a href="#" >Delete</a></li>' );


                                                                                                                                                                                                    }


      $('#EmpList').listview('refresh');
       loading('hide');
      }
   }


  function transactionError(tx, error)
 {  
      alert("Database Error: " + error);
 }


 function loading(SH) 
 {
     setTimeout(function(){

   if( SH == "show")
   {
        $.mobile.loading( "show", {
           text:"Loading...",
           textVisible: true,
           theme: "b",
           textonly: false
        });
    }
    else if( SH == "hide")
    {
        $.mobile.loading("hide"); 

    }

      }, 1000); 
   }

Answer 1

发生这种情况的原因是因为事务以异步方式运行。所以，无论你把它放在PAGE生命周期的哪个阶段，你都有可能遇到这种“空洞然后不空”的现象。

想到的一些选项：

显示ajax微调器（请参阅JQM文档），直到您的交易回调完成为止
在应用程序启动时加载必要的数据，并在pagebeforeshow生命周期事件期间将其存放在全局变量中以供填充
接受现有行为

修改根据您更新的代码...

我注意到你的HIDE调用是通过记录在循环内完成的。这意味着在追加第一条记录后，会告诉微调器隐藏。您还在每次迭代时对控件的内容进行刷新。我会将以下代码移到第一个右支撑下方/之后：

$('#EmpList').listview('refresh'); loading('hide');

这会改变它：

$('#EmpList').listview('refresh'); loading('hide'); } }

要：

} $('#EmpList').listview('refresh'); loading('hide'); }

在jQuery mobile中显示之前向页面添加动态内容

1 个答案: