Question

我遇到了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 -->

谢谢！

Answer 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知道这是与前一页面相同的页脚，因此它不会再次呈现它。

如果您需要帮助，请告诉我。问候，贝

Answer 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>

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

Answer 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>

希望它有所帮助： - ）

Jquery Mobile Persistent Navbar - Flickers

3 个答案: