Question

在使用JqueryMobile 1.2和PhoneGap / Cordova 2.2.0进行项目时我遇到了页面转换问题，当我使用时 data-transition =在一个元素上滑动它工作得非常慢'如果我使用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>&copy; 2012 - jQuery Mobile Boilerplate</p>
        </div>  

    </div>
</body>
</html>

Answer 1

尝试将其放入JS：

  $(document).bind("mobileinit", function(){
    $.mobile.defaultPageTransition = 'none'; 
    $.mobile.pushStateEnabled = false;  
  });

Answer 2

这是我的第一篇文章，所以我没有足够的声誉来评论，但我会尽力提供某种答案。

我正在努力解决同样的问题。在我看来，这是一个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', "");之前删除当前页面中的{-1}}隐藏的overflow-x：隐藏到我导航到的页面。然后在pageshow事件中，我使用$.mobile.changePage([...]);放回overflow-x。但这并没有解决问题。我没有橡皮筋效果，但背景仍然突然出现。

我希望这个答案和额外的信息可以帮助任何人使用例如Phonegap / Cordova在iOS 6上使用JQuery Mobile 1.2.0来解决这个新问题。

Answer 3

目前暂时无法解决此问题。

我甚至读过一些IOS也有这个问题。

我知道android更糟糕。但是我不是“MAC”用户，所以我不能测试100％。虽然我知道虽然Iphone用户对这个问题有很多疑问。

Android + Jquery Mobile就是这个问题的主题。

Page Transitions按照预期在android上运行，有页面闪烁，双闪烁等等。即使您关闭过渡，您仍然可以获得网站从旧时代开始的旧“闪烁”。

有些人“报告说他们已将其修复了50％”，但这些解决方案非常个性化，并且根本不适用于所有人。

我不觉得我想给你一半答案，我宁愿告诉你Jquery Mobile正在开发中，如果我在哪里，我会等待它：）

我希望我的回答能为您提供所需的想法：）

Jquery mobile 1.2和PhoneGap 2.2.0页面过渡闪烁

3 个答案: