Question

我在页脚中有一个固定的导航栏，看起来像这样（除了我还有一个标题）：

http://brooky.cc/wp-content/uploads/2011/04/nav_icon.png

当我从主页更改页面时，用户会在标题中找到后退按钮。问题是当点击后退按钮时，整个页脚导航栏消失。我一直想要那里的导航栏。在iPhone上会出现此问题，但我的桌面浏览器没有问题。

我的页面设置是单独的文件（每个文件一页）所以我有index.php和products.php，除了更改的标题之外，它们当前是相同的。代码是：

<!DOCTYPE html> 
<html> 
<head> 
<title>Page Title</title> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head> 
<body> 

<div data-role="page" id="home">

<div data-role="header">
    <h1>Home</h1>
</div><!-- /header -->

<div data-role="content">   
    <p>Home screen.</p>     

</div><!-- /content -->

<div data-role="footer" data-position="fixed">
    <div data-role="navbar">
        <ul id="footernav">
            <li><a href="index.php" data-icon="home" data-iconpos="top">Home</a></li>
            <li><a href="products.php" data-icon="star" class="ui-btn-active" data-iconpos="top">Products</a></li>
        </ul>
    </div><!-- /navbar -->
</div>

</div><!-- /page -->

</body>
</html>

Answer 1

克里斯，我担心这是一个尚未解决的问题，请参阅

https://github.com/jquery/jquery-mobile/issues/1047

有些人推荐了IScroll，您可能想要查看。

http://cubiq.org/iscroll

我遇到了同样的问题，但是我的案例可以使用另一种解决方法，这对您的案例来说可能是太多的开销。

在我们的项目中，我们决定使用jQuery模板，因此页面的所有内容都是动态创建的。参见

http://api.jquery.com/category/plugins/templates/

我使用pageshow事件注册了一个回调，然后填写了一个模板。这非常简单，如jQuery模板文档中所述。使用这种技术，我能够避免这个错误，但我认为除非你已经使用了jQuery模板，否则检查IScroll可能是值得的。

当使用后退按钮时，jQueryMobile丢失固定的导航栏

1 个答案: