jQuery Mobile永久导航栏-Flickers [英] Jquery Mobile Persistent Navbar - Flickers

问题描述

我对Jquery移动持久性导航栏有问题.我正在开发使用phonegap部署在iOS和Android上的移动应用程序.我有一个导航栏，可从一页导航到另一页. (固定页脚/导航栏).

I have an issue with Jquery mobile persistent navbar. I am developing a mobile app using phonegap to deploy on iOS and Android. I have a navbar to navigate from one page to another. (footer/navbar fixed).

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

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

The navigation works, the bar persists when rendered in a browser such as chrome or safari. But when I upload the app to the Android emulator or iOS emulator, clicking a link from the navbar makes the whole screen go white for a sec and then re-appears. (Kind of a flicker)

有人可以帮忙吗?

这是我的页脚代码:(a.html，b.html ...是我的页面的名称)

Here's my code for the footer: (a.html,b.html... are the name of my pages)

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

谢谢！

推荐答案

我知道了.这是你所说的和我所拥有的结合在一起.

I figured it out. It's a combination of what you said and what I had.

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

So to stop the Jquery mobile footer from flickering when you upload to Android or iOS, you need to set the following properties in your div:

page1.html:

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

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

The data-id="f1" has to match in both pages so that jquery mobile knows that this is the same footer that was on the previous page therefore it won't render it again.

如果您需要帮助，请告诉我. 问候， 托尼

Let me know if you need help with this. Regards, Tony

这篇关于jQuery Mobile永久导航栏-Flickers的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！