Question

我有像这样的HTML结构

<div data-role="page" data-theme="b">

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

    <div data-role="content" data-theme="b">
        <a href="#p2" data-role="button" data-icon="arrow-r" data-theme="b" data-iconpos="right">next pagey</a>  
    </div><!-- /content -->

    <div data-role="footer" data-theme="b" data-position="fixed">
        <h1>Footer</h1>
    </div><!-- /footer -->

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

<div id="p2" data-role="page" data-theme="b">

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

    <div data-role="content" data-theme="b">
        <h1>Content</h1> 
    </div><!-- /content -->

    <div data-role="footer" data-theme="b" data-position="fixed">
        <h1>Content</h1>
    </div><!-- /footer -->

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

但是当我点击下一页并且下一页进入时在标题中自动添加了回btn，当我点击后退按钮时会出现上一页，但页脚会消失..

在FF工作正常，但不在ipad模拟器

Answer 1

让固定的页脚工作对JQM团队来说是一件痛苦的事。我认为这只是由不可预见的情况引起的另一个小错误。好吧，没关系......

有点洞察力：那些 darn 移动浏览器不支持固定的CSS定位，所以这是通过javascript和绝对位置（以及大量的黑客 - 我打赌）来完成的。

这应该已经给你一个线索......

如果行为不是仅仅针对模拟器（非常可能！），并且在您使用内容填充页面后问题仍然存在（我的意思是 - 完成编写应用程序），那么您只需要要做的是启动重新定位页脚的代码。我会这样做的：

$('div').live('pageshow',function(){ $(window).trigger('orientationchange') });

orientationchange事件应该有效。如果orientationchange导致任何新问题，您也可以尝试resize。

页脚在下一页移动时隐藏

1 个答案: