Question

这是我的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/

Answer 1

如果问题在于页眉/页脚，而不是在你的html中使用data-position =“fixed”设置位置：在你的css中修复并给元素一个高z-index - 中提琴，不再“闪烁”

Answer 2

有人讨论了这个问题并有一个临时解决方案，也许它也可能适合你？

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

答案摘录

使用持久页脚快速切换页面时（使用   相同的data-id）源代码不识别前一页的   页脚。问题发生是因为setTimeout（第5812行 -   jquery.mobile-1.0b2）。如果你在页脚之间快速切换页脚   因为500毫秒的延迟不会在那里。如果你拿出来   setTimeout或将其设置为零，此问题不会再次发生，但是   我不确定这会带来什么后果。

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

Answer 3

我没有做任何具体的事情来解决这个问题。但是在整个过程中问题没有发生。在我之间更新了我一直在使用的JQM版本，现在使用的是JQM 1.1

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

3 个答案: