解决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>来实现屏幕跳转。经过测试不会出现闪屏的现象。
转载于:https://blog.51cto.com/prostorys/843701