html5頁面平滑切換實現以及問題(20160120更新)


 

注:本文是基於手機端 Hybrid APP 討論,而不是普通的PC端網頁 >>

 

之前的頁面跳轉方式:

比如有這兩個頁面:A.html  B.html,  A B 是純HTML實現,沒有采用其他UI框架

A-->B 的跳轉方式為 location.href="B.html";  

效果:閃屏刷新,用戶體驗太差

 

目前的實現方式:

定義一個母頁面里面包含兩個iframe用來加載A、B等html頁面: _ghost.html:

html:

Catch(11-02-15-43-40)

js:

CatchDCDF(11-02-15-43-40) 母頁面初始化的時候獲取手機屏幕寬高度給iframe,並且給第一個iframe設置內容

頁面切換方法:

CatchC07B(11-02-15-43-40) 頁面切換即顯示或隱藏兩個iframe,這里引用jqm里面的changPage方法來實現頁面平滑切換,當然是用其他方式也可以實現,比如用jquery的animation動畫效果,下述問題與這里是否采用jqm無關,已驗證

至此,頁面的平滑切換效果實現好了!

 

細節問題(未解決):

A.html頁面有綁定一個系統返回鍵的事件,在A.js里面定義

document.addEventListener("backbutton", eventBackButton, false); // backbutton事件是cordova.js框架提供的

function eventBackButton() {
MyApp.showFloatMsg('再按一次退出程序.');

    。。。

}

所以在A.html第一次加載到iframe里面之后點擊返回鍵會提示“再按一次退出程序”,到這一步是正常的

-----------------------------分割,下面問題出現-------------------------------

從A.html --> B.html (通過上述changePage方法),到了B.html點擊返回鍵,沒有效果,返回事件失效

當然如果在A-->B 的時候  把backbutton事件移除,則到了B.html點擊返回鍵,可以正常返回到A.html,但是A.js未執行,而且在A.html上繼續點返回鍵又回到B.html,接着如果繼續按返回鍵,則:-->A-->退出

-----------------------------分割,說明----------------------------------------

以上的修改都是盡最大可能不修改A.html  A.js  B.html B.js的內容為前提,因為類似AB 大概有1百多個頁面

 

--------------------------------------20160120更新------------------------------------------

今天第一次用mui在開發demo的時候,突然發現mui采用的是類似的方案,真實欣喜若狂,看這:

http://dev.dcloud.net.cn/mui/window/#openwindow

后續有時間,用這個方案實現下,good!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM