PhoneGap开发-解决跳转时闪屏的问题

标签（空格分隔）： Android PhoneGap

解决PhoneGap页面跳转时闪屏的问题可以借助JQ Mobile中使用的方法，首先在html页面中利用<div>标签编写多个页面，然后通过JS来控制<div>的显示与隐藏来实现页面跳转的功能。以下为一个JQ Mobile页面代码示例：

<!-- Container Page -->
<div data-role="page" data-theme="c" id="containerPage">

<!-- Contact List -->
<div data-role="header" id="hdrList" data-nobackbtn="true">
<h1><img align="top"  src=\'#\'" /contacts.png"> Contacts</h1>
<a id="buttonAddContact" data-icon="plus" class="ui-btn-right" 
href="javascript:addContact();return false;" data-role="button" data-inline="true">Add</a>
</div>

<div data-role="content" id="contentList" data-theme="c">
<ul data-role="listview" data-dividertheme="c" id="contactSelections"></ul>
</div>

<div data-role="footer" id="ftrList"></div>

<!--  Progress -->
<div data-role="header" id="hdrProgress" data-nobackbtn="true"  data-theme="c">
<h1>Processing...</h1>
</div>  

<div data-role="content" id="contentProgress"  data-theme="c">
<div align="CENTER"><h4>Please wait.</h4></div>
<div align="CENTER"><img id="spin" src=\'#\'" /wait.gif"/></div>    
</div>  

<div data-role="footer" id="ftrProgress"  data-theme="c"></div>

<!--  Create Account -->
<div data-role="header" id="hdrAccount" data-nobackbtn="true"  data-theme="c">
<h1>Create Account</h1>
</div>  

<div data-role="content" id="contentAccount"  data-theme="c">
<div align="CENTER"><img src=\'#\'" /contacts-master-bgd.png"></div> 
<div align="CENTER"><h4>Please enter name of the new account for this application</h4></div>
<div align="CENTER">Contacts created with this application will be associated with the new account specified below. Other contacts can be viewed, however, cannot be deleted or modified with this application.</div>
<div align="CENTER" id="accountDiv" data-role="fieldcontain">
<input id="accountName" type="text" />
</div>

<div align="CENTER">
<a href="javascript:createAccount();return false;" data-role="button" data-inline="true">Save</a>
</div>

<div align="CENTER"><P>   <P>  <P> </div>
</div>  

<div data-role="footer" id="ftrAccount"  data-theme="c"></div>
</div> <!-- Container Page Ends Here -->

其中包含一个容器页面（Container Page）和三个普通页面，分别为Contact List, Progress, Create Account, 然后通过JS代码控制三个页面的显示与隐藏，就能实现页面跳转。JS示例代码如下：

<script>
// Commonly used variables
var contactSelectionsVar;
var hdrListVar;
var contentListVar;
var ftrListVar;
var hdrProgressVar;
var contentProgressVar;
var ftrProgressVar;
var hdrAccountVar;
var contentAccountVar;
var ftrAccountVar;

$(document).ready(function () { 
    // Initialize commonly used variables
    hdrListVar = $('#hdrList');
    contentListVar = $('#contentList');
    ftrListVar = $('#ftrList');
    hdrProgressVar = $('#hdrProgress');
    contentProgressVar = $('#contentProgress');
    ftrProgressVar = $('#ftrProgress');
    hdrAccountVar = $('#hdrAccount');
    contentAccountVar = $('#contentAccount');
    ftrAccountVar = $('#ftrAccount');
    contactSelectionsVar = $('#contactSelections');
    
    showProgress();
    
    contactSupport.getAllContacts('setContactsList','showAccount');
});

function hideList(){
    hdrListVar.hide();
    contentListVar.hide();
    ftrListVar.hide();      
}

function showList(){
    hideProgress();
    hideAccount();
    hdrListVar.show();
    contentListVar.show();
    ftrListVar.show(); 
}

function hideProgress(){
    hdrProgressVar.hide();
    contentProgressVar.hide();
    ftrProgressVar.hide();
} 

function showProgress(){
    hideList();
    hideAccount();
    hdrProgressVar.show();
    contentProgressVar.show();
    ftrProgressVar.show();
}

function hideAccount(){
    hdrAccountVar.hide();
    contentAccountVar.hide();
    ftrAccountVar.hide();      
}

function showAccount(){
    hideList();
    hideProgress();
    hdrAccountVar.show();
    contentAccountVar.show();
    ftrAccountVar.show();
}
</script>