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

Posted 2023-05-09

技术标签:

【中文标题】Jquery mobile 1.2 和 PhoneGap 2.2.0 页面过渡闪烁【英文标题】：Jquery mobile 1.2 and PhoneGap 2.2.0 pages transition flickering 【发布时间】：2012-10-29 14:54:08 【问题描述】：

在使用 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>

【问题讨论】：

这里，我带来了解决方案........查看***.com/a/14986718/1356174 【参考方案1】：

试着把它放在你的 JS 中：

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

【讨论】：

谢谢，我确实写了，但没有帮助这确实有效，需要在包含 jquery 之后添加它，这就是我添加此代码并且它有效的地方，但还做了一些其他的事情，比如在 android 清单中使硬件加速为假。无需更改视口选项【参考方案2】：

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

我正在努力解决同样的问题。在我看来，这是一个 iOS 6 问题，例如 iOS 5 没有闪烁，在我的情况下是 Android 2.2+ 。我用$.mobile.defaultPageTransition = 'none';。

尝试回答： 检查您的页面样式中是否有 overflow-x:hidden。当我在我想要导航的页面的样式中删除“overflow-x:hidden”时，闪烁消失了。

额外信息： 不幸的是，在我的情况下，由于我需要页面是原生可滚动的，因此“overflow-x:hidden”对于固定位置的页眉和页脚保持固定而没有页面以获得 iOS Webkit 浏览器橡皮筋效果是必要的。

如果您将页面的背景颜色更改为例如红色，您可能会看到红色而不是黑色闪烁。至少对我来说是这样。这应该意味着这是一个页面背景 z-index 问题。 JQuery Mobile 在早期版本中存在 z-index 和闪烁问题。

我尝试做的另一件事是在调用$.mobile.changePage([...]); 之前从当前页面中删除带有$("#myPage").css('overflow-x', ""); 的overflow-x:hidden 以及我正在导航到的页面。然后在 pageshow 事件中，我用$("page).css('overflow-x', "hidden"); 放回了溢出-x。但这并没有解决问题。我没有橡皮筋效果，但背景仍然弹出。

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

【讨论】：

感谢您的详细回答，我没有测试您向我建议的所有可能性，但它可能是我的 css 文件中的一些东西，我会继续寻找它并会更新听到我在一个新项目上做了它，它运行良好，所以我的 css 正在处理它【参考方案3】：

目前没有解决这个问题的办法。

我什至读到有些IOS也有这个问题。

我知道在 android 上它更糟。但是我不是“MAC”用户，所以我不能 100% 测试这个。尽管我知道 Iphone 用户应该不会有这个问题。

Android + Jquery Mobile 就是有这个问题。

页面转换在 android 上按预期工作，有页面闪烁、双闪烁等。即使您关闭转换，您仍然会看到网站从旧时代开始的旧“闪烁”。

有些人“报告说他们已经修复了 50%”，但这些解决方案非常个性化，而且对所有人都不起作用。

我觉得我不想给你一半的答案，我宁愿告诉你 Jquery Mobile 正在开发中，如果我在你那里，我会等它:)

我希望我的回答能给你带来你需要的想法:)

【讨论】：