有时持久页脚也会在 jquerymobile 的页面转换期间移动答案

【问题标题】：Sometimes persistent footer also moves during page transition in jquerymobile有时持久页脚也会在 jquerymobile 的页面转换期间移动
【发布时间】：2011-09-29 14:19:57
【问题描述】：

这是我的html代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width; initial-scale=1.0" />
        <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
        <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
        <script>
        $('#home, #page2, #page3').live('pagebeforeshow',function(event){
            $('#' + $(this).attr('id') + '_link').addClass('ui-btn-active');
        });
        </script>
    </head>
    <body>
        <div data-role="page" id="home">
            <div data-role="header" data-theme="b">
                <h1>Test</h1>
            </div>
            <div data-role="content" data-theme="b">
                Home Page
            </div>
            <div data-role="footer" data-position="fixed" data-id="pFooter">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#home" data-icon="custom" class="ui-btn-active" id="home_link">Home</a></li>
                        <li><a href="#page2" data-icon="grid">Second page</a></li>
                        <li><a href="#page3" data-icon="star">Third page</a></li>
                    </ul>
                </div>
            </div>    
        </div>
        <div data-role="page" id="page2">
            <div data-role="header" data-theme="b">
                <h1>Test</h1>
            </div>
            <div data-role="content" data-theme="b">
                Second page
            </div>
            <div data-role="footer" data-position="fixed" data-id="pFooter">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#home" data-icon="custom">Home</a></li>
                        <li><a href="#page2" data-icon="grid"  class="ui-btn-active" id="page2_link">Second page</a></li>
                        <li><a href="#page3" data-icon="star">Third page</a></li>
                    </ul>
                </div>
            </div>    
        </div>
        <div data-role="page" id="page3">
            <div data-role="header" data-theme="b">
                <h1>Test</h1>
            </div>
            <div data-role="content" data-theme="b">
                Third page
            </div>
            <div data-role="footer" data-position="fixed" data-id="pFooter">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#home" data-icon="custom">Home</a></li>
                        <li><a href="#page2" data-icon="grid">Second page</a></li>
                        <li><a href="#page3" data-icon="star" class="ui-btn-active" id="page3_link">Third page</a></li>
                    </ul>
                </div>
            </div>    
        </div>
    </body>
</html>

我面临的问题是，有时当我更改导航栏的选择时，页脚也会随着页面向左或向右滑动。您可以通过不断更改导航栏中按钮的选择来重现此问题。

你可以在这里看到它 - http://jsfiddle.net/tKMgd/5/

【问题讨论】：

我认为垂直滚动条是罪魁祸首。它总是在那里吗？它不会出现在移动设备上，那么您是否在设备本身上尝试过？另外，您是否尝试过其他页面转换？
它随机发生。有时它不会完全发生。我没有在设备上尝试过，也没有尝试过其他过渡。
我也有这个问题。你找到解决方案了吗？
我没有做任何具体的事情来解决这个问题。但随着时间的推移，问题没有发生。在这之间我更新了我一直在使用的 JQM 版本，现在使用的是 JQM 1.0

标签： jquery html css jquery-mobile

【解决方案1】：

如果问题出在页眉/页脚上，而不是在您的 html 中使用 data-position="fixed"，只需在您的 css 中设置 position:fixed 并给元素一个高 z-index - viola，不再“闪烁”

【讨论】：

Up 1. 这对我有用。 (jQuery Mobile 1.4.2) 我在页面上拖动时遇到了同样的问题。在使用 firebug 检查页脚时，我注意到 jQuery 添加和删除了一个名为“ui-fixed-hidden”的类。这似乎会导致奇怪的闪烁，并且确实可以通过应用建议的答案来解决。

【解决方案2】：

有人讨论了这个问题并有一个临时解决方案，也许它也对你有用？

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

答案摘录

当您使用持久页脚在页面之间快速切换时（使用相同的数据ID）源代码不能识别上一页的页脚。由于 setTimeout （第 5812 行 - jquery.mobile-1.0b2)。如果您在页面之间快速切换页脚由于 500 毫秒的延迟，不会在那里。如果你拿出这个 setTimeout 或者设置为零，这个问题就不会再出现了，但是我不确定这样做的后果。

我能够在 Safari 和 iOS 上重现此问题（我还没有尝试了其他设备/浏览器）

【讨论】：

【解决方案3】：

我没有做任何具体的事情来解决这个问题。但是随着时间的推移，这个问题没有发生。在这期间我更新了我一直在使用的 JQM 版本，现在使用的是 JQM 1.1

【讨论】：