3

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

3 回答 3

5

试着把它放在你的 JS 中：

  $(document).bind("mobileinit", function(){
    $.mobile.defaultPageTransition = 'none'; 
    $.mobile.pushStateEnabled = false;  
  });
于 2012-11-09T09:45:57.773 回答
5

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

我正在努力解决同样的问题。在我看来，这是一个 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 和闪烁问题。

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

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

于 2012-11-09T15:55:09.803 回答
1

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

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

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

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

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

有一些“他们报告说他们已经修复了 50%”，但是这些解决方案是非常个性化的，并且根本不适用。

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

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

于 2012-12-25T17:58:52.733 回答