博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
html5页面平滑切换实现以及问题(20160120更新)
阅读量:6837 次
发布时间:2019-06-26

本文共 1303 字,大约阅读时间需要 4 分钟。

 

注:本文是基于手机端 Hybrid APP 讨论,而不是普通的PC端网页 >>

 

之前的页面跳转方式:

比如有这两个页面:A.html  B.html,  A B 是纯HTML实现,没有采用其他UI框架

A-->B 的跳转方式为 location.href="B.html";  

效果:闪屏刷新,用户体验太差

 

目前的实现方式:

定义一个母页面里面包含两个iframe用来加载A、B等html页面: _ghost.html:

html:

js:

母页面初始化的时候获取手机屏幕宽高度给iframe,并且给第一个iframe设置内容

页面切换方法:

页面切换即显示或隐藏两个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!

转载于:https://www.cnblogs.com/jager/p/4930414.html

你可能感兴趣的文章
ipa 打包遇到的坑
查看>>
正则表达式
查看>>
js之操作JSON数据
查看>>
Design Hit Counter
查看>>
BZOJ 3576 江南乐
查看>>
NAT网络地址转换
查看>>
DateTime格式化问题
查看>>
mysql连接错误
查看>>
vagrant学习记录
查看>>
杭电2097--Sky数
查看>>
杭电1754--I Hate It(线段树)
查看>>
AS莫名报错 Error:Could not download junit.jar (junit:junit:4.12): No cached version available
查看>>
Kendo UI 简单使用
查看>>
FCKeditor的使用说明
查看>>
[转载]树莓派新版系统上使用mjpg-streamer获取USB摄像头和树莓派专用摄像头RaspiCamera图像...
查看>>
处理js两个数相乘的坑
查看>>
1.spring:helloword/注入/CDATA使用/其他Bean/null&级联/p命名空间
查看>>
django-pure-pagination 组件使用
查看>>
drf视图认证组件
查看>>
HDU 5059 Help him(BestCoder Round #12)
查看>>