解决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="img/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="img/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="img/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>

上面的代码中通过show()hide()方法显示和隐藏<div>来实现屏幕跳转。经过测试不会出现闪屏的现象。