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>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容