Shi*_*ner 3 iphone jquery jquery-mobile cordova ios6
在使用JqueryMobile 1.2和PhoneGap/Cordova 2.2.0进行项目时,我遇到了页面转换问题,当我在元素上使用data-transition = slide时,它工作得非常慢'如果我使用data-transition = none我得到屏幕之间的黑色闪烁,我正在使用IOS 6.1在iphone 4上工作'我已经尝试了所有的答案,我发现听到但没有任何效果,当我使用data-transition ="none"导航时,我仍然会发出黑色闪烁
我希望有人可以帮助我'听到的是代码:
<!doctype html>
<html>
<head>
<title> jQuery Mobile Boilerplate - Collapsibles Content</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- jQuery Mobile CSS bits -->
<link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
<!-- if you have a custom theme, add it here -->
<link rel="stylesheet" href="themes/jQuery-Mobile-Boilerplate.css" />
<!-- Custom css -->
<link rel="stylesheet" href="css/custom.css" />
<!-- Javascript includes -->
<script src="js/jquery-1.8.2-min.js"></script>
<script src="js/mobileinit.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js"></script>
<script src="js/application.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<a href="../index.html" data-icon="home">Home</a>
<h1>Collapsible Content</h1>
</div>
<div data-role="content">
<h2>Collapsible Content Blocks</h2>
<div data-role="collapsible">
<h3>Content header</h3>
<p>I'm the content that shows/hides when you click the header just above me.</p>
</div>
<h2>Default to open</h2>
<div data-role="collapsible" data-collapsed="false">
<h3>Content header</h3>
<p>I'm the content that shows/hides when you click the header just above me.</p>
</div>
<h2>Themed</h2>
<div data-role="collapsible" data-content-theme="c">
<h3>Content header</h3>
<p>I'm the content that shows/hides when you click the header just above me.</p>
</div>
<h2>Themed - content only</h2>
<div data-role="collapsible" data-theme="b" data-content-theme="e" >
<h3>Content header</h3>
<p>I'm the content that shows/hides when you click the header just above me.</p>
</div>
<h2>Nested Collapsibles</h2>
<div data-role="collapsible" data-collapsed="false" data-theme="e" data-content-theme="c">
<h3>Outer header</h3>
<p>I'm the content inside the main collapsible.</p>
<div data-role="collapsible" data-theme="c" data-content-theme="c">
<h3>I'm a nested collapsible with a child collapsible</h3>
<p>I'm a child collapsible.</p>
<div data-role="collapsible" data-theme="d" data-content-theme="d">
<h3>Nested inside again.</h3>
<p>Three levels deep now.</p>
</div>
</div>
<div data-role="collapsible" data-content-theme="c">
<h3>Collapsed list</h3>
<ul data-role="listview" data-inset="true" data-theme="d">
<li><a href="index.html">red</a></li>
<li><a href="index.html">blue</a></li>
<li><a href="index.html">yellow</a></li>
</ul>
</div><!-- /section 3 -->
</div>
</div>
<div data-role="footer" data-theme="c">
<p>© 2012 - jQuery Mobile Boilerplate</p>
</div>
</div>
</body>
</html>
试着把它放在你的JS中:
$(document).bind("mobileinit", function(){
$.mobile.defaultPageTransition = 'none';
$.mobile.pushStateEnabled = false;
});
这是我的第一篇文章,所以我没有足够的声誉来评论,但我会尽力提供某种答案.
我正在努力解决同样的问题.在我看来,这是一个iOS 6问题,例如在iOS 5和我的Android 2.2+中没有闪烁.我用$.mobile.defaultPageTransition = 'none';.
尝试回答:
检查您的页面样式中是否有溢出-x:隐藏.当我在我的样式中删除"overflow-x:hidden"时,闪烁消失了.
额外信息:
不幸的是,在我的情况下,因为我需要页面是原生可滚动的,所以固定位置页眉和页脚必须保持固定而不使用页面来获取iOS Webkit浏览器橡皮筋效果"overflow-x:hidden" .
如果更改页面的背景颜色(例如红色),您可能会看到红色闪烁而不是黑色.这至少对我来说是这样的.这应该意味着它是页面背景z-index问题.JQuery Mobile在早期版本中遇到了z-index和闪烁的问题.
我尝试做的另一件事是$("#myPage").css('overflow-x', "");在调用之前删除当前页面中的overflow-x:hidden with $.mobile.changePage([...]);以及我导航到的页面.然后在pageshow事件上我把overflow-x放回去了$("page).css('overflow-x', "hidden");.但这并没有解决问题.我没有橡皮筋效果,但背景仍然突然出现.
我希望这个答案和额外的信息可以帮助任何人使用例如Phonegap/Cordova在iOS 6上使用JQuery Mobile 1.2.0来解决这个新问题.
| 归档时间： |
|
| 查看次数： |
4145 次 |
| 最近记录： |