Jquery Mobile 持久导航栏 - 闪烁答案

【问题标题】：Jquery Mobile Persistent Navbar - FlickersJquery Mobile 持久导航栏 - 闪烁
【发布时间】：2012-12-17 00:14:50
【问题描述】：

我对 Jquery 移动持久导航栏有疑问。我正在开发一个使用 phonegap 部署在 iOS 和 Android 上的移动应用程序。我有一个导航栏可以从一个页面导航到另一个页面。（页脚/导航栏固定）。

示例：http://jquerymobile.com/demos/1.2.0/docs/toolbars/footer-persist-a.html

导航有效，当在 chrome 或 safari 等浏览器中呈现时，该栏仍然存在。但是当我将应用程序上传到 Android 模拟器或 iOS 模拟器时，单击导航栏中的链接会使整个屏幕变白一秒钟，然后重新出现。（有点闪烁）

有人可以帮忙吗？

这是我的页脚代码：（a.html,b.html...是我的页面名称）

<div data-role="footer" data-id="foo1" data-position="fixed" data-tap-toggle="false">
    <div data-role="navbar">
        <ul>
            <li><a href="a.html" data-prefetch data-transition="slideup" class="ui-btn-active ui-state-persist" rel="external">Info</a></li>
            <li><a href="b.html" data-prefetch rel="external" >Friends</a></li>
            <li><a href="footer-persist-c.html" data-prefetch="true">Albums</a></li>
            <li><a href="footer-persist-d.html" data-prefetch="true">Emails</a></li>
        </ul>
    </div><!-- /navbar -->
</div><!-- /footer -->

谢谢！

【问题讨论】：

标签： jquery-mobile

【解决方案1】：

我想通了。这是你所说的和我所拥有的结合。

因此，当您上传到 Android 或 iOS 时，要阻止 Jquery 移动页脚闪烁，您需要在 div 中设置以下属性：

page1.html:

<div data-position="fixed" data-tap-toggle="false" data-role="footer" data-id="f1">
    <a href="page1.html">Page 1 NAV</a>
    <a href="page2.html">Page 2 NAV</a>
</div>

page2.html

<div data-position="fixed" data-tap-toggle="false" data-role="footer" data-id="f1">
    <a href="page1.html">Page 1 NAV</a>
    <a href="page2.html">Page 2 NAV</a>
</div>

两个页面中的 data-id="f1" 必须匹配，以便 jquery mobile 知道这是与前一页上的页脚相同的页脚，因此不会再次呈现它。

如果您需要这方面的帮助，请告诉我。问候，托尼

【讨论】：

【解决方案2】：

这里有同样的问题（我试图修复它超过 3 个小时，但没有运气尝试了很多我在网上找到的东西，但没有运气）。

如果您删除整个页脚并在内容区域中添加一个按钮，则过渡效果会突然变得像魅力一样。因此，一种解决方法是通过放置在页面底部的内容区域中的按钮来伪造导航栏......虽然不是很漂亮。

<div data-role="content">
<h1>
    Page Nav and Dialog Example
</h1>
<a data-role="button" href="index2.html">Page Navigation</a></div>

我将它与 custom-scripting.js 一起使用：

$(document).bind("mobileinit", function(){
  $.mobile.defaultPageTransition = 'none';
  $.mobile.defaultDialogTransition = 'none';
  $.mobile.useFastClick = true;});

通过以下方式引用它：

<script type="text/javascript" src="jquery-1.8.3.js"></script>
    <script src="custom-scripting.js"></script>
    <script type="text/javascript" src="jquery.mobile-1.2.0.js"></script>

也许其他人找到了使用导航栏而不闪烁的解决方案？

【讨论】：

【解决方案3】：

如果不使用页脚中的导航栏，它会停止闪烁（在 iPhone4 iOS5 上测试）。所以你可以使用页脚，但不要在其中使用导航栏:-)

但是注意：如果你使用 data-position="fixed" 它会再次开始闪烁...

<div data-role="footer">
    <a data-role="button" href="#">Main</a>
    <a data-role="button" href="favorites.html">Favorites</a>
    <a data-role="button" href="more.html">More</a>
</div>

希望对你有帮助:-)

【讨论】：