Question

我对jQM的页脚有问题。 这是演示jsfiddle： http://jsfiddle.net/lesliez/SenTt/1/

仔细查看页脚丢失并在页面转换之前和之后再次显示。它在桌面浏览器上并不明显，但在移动设备上非常明显（延迟时间更长）。

有人请帮忙告诉我我做错了什么。谢谢。

我的HTML：

    <!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
    <title>Your New Application</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
    <style type="text/css">
        /* Prevent copy paste for all elements except text fields */
        *  { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
        input, textarea  { -webkit-user-select:text; }
        body { background-color:white; color:black }
    </style>
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.2.min.css">
    <link rel="stylesheet" type="text/css" href="css/custom.css">
    <script src='intelxdk.js'></script>
    <script type="text/javascript">
        /* Intel native bridge is available */
        var onDeviceReady=function(){
        //hide splash screen
        intel.xdk.device.hideSplashScreen();
        };
        document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
    </script>
</head>
<body>
    <!-- content goes here-->
    <!-- Start of first page -->
    <div data-role="page" id="foo">

        <div data-role="header" data-position="fixed">
            <h1>Foo</h1>
        </div><!-- /header -->

        <div role="main" class="ui-content">
            <p>I'm first in the source order so I'm shown as the page.</p>
            <p>View internal page called <a href="#bar" data-transition="slide">bar</a></p>
        </div><!-- /content -->

        <div data-role="footer" data-position="fixed">
            <h4>Page Footer</h4>
        </div><!-- /footer -->

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

    <!-- Start of second page -->
    <div data-role="page" id="bar">

        <div data-role="header" data-position="fixed">
            <h1>Bar</h1>
        </div><!-- /header -->

        <div role="main" class="ui-content">
            <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
            <p><a href="#foo" data-transition="slide" data-direction="reverse">Back to foo</a></p>
        </div><!-- /content -->

        <div data-role="footer" data-position="fixed">
            <h4>Page Footer</h4>
        </div><!-- /footer -->
</div><!-- /page -->

<script src='js/jquery-1.11.1.min.js'></script>    
<script src='js/jquery.mobile-1.4.2.min.js'></script>  
</body>
</html>

我的CSS：

.ui-content {
    padding: 0;
    position: absolute !important;
    top : 40px !important; 
    right : 0;
    bottom : 40px !important; 
    left : 0 !important;  
    background:url(http://htc-wallpaper.com/wp-content/uploads/2013/11/bulldog-puppy1.jpg);
    background-size:cover;
    background-repeat:no-repeat;    
}

Answer 1

我和1.4.2有类似的问题，但是我找到了一个很好的解决方案。在工作的同时我注意到JQM为页面容器添加了一些最小高度和高度的内联样式，因此这似乎是问题所在。好的，首先我将JQM html包装成div元素并将其设置为JQM页面容器：

JS CODE：

<script type="text/javascript">
    $(document).one("mobileinit", function () {
        // Setting #container div as a jqm pageContainer
        $.mobile.pageContainer = $('#main');

        // Setting default page transition to slide
        $.mobile.defaultPageTransition = 'slide';
    });
</script>

HTML看起来像这样：

            <div data-role="page" class="pageFix" id="pageOne">
                <div data-role="header">
                    <h1>Insert Page Title Here</h1>
                </div>

                <div data-role="main" class="ui-content">
                    <p>Insert Content Here</p>
                    <a href="#pageTwo" class="ui-btn">Link 1</a>
                </div>

                <div data-role="footer" data-position="fixed">
                    <h1>Insert Footer Text Here</h1>
                </div>
            </div>  


            <div data-role="page" class="pageFix" id="pageTwo">
                <div data-role="header">
                    <h1>Insert Page 222</h1>
                </div>

                <div data-role="main" class="ui-content">
                    <p>Insert 222</p>
                    <a href="#pageOne" class="ui-btn">Link 2</a>
                </div>

                <div data-role="footer" data-position="fixed">
                    <h1>Insert Footer Text Here</h1>
                </div>
            </div>  

        </div>

最后，最重要的是，在JQM css文件下我添加了以下样式：

CSS UPDATED !!!

body{margin:0;padding:0;outline:none;border:0;word-wrap:break-word;}
#main{position:absolute;width:100%;height:100%;max-height:100%;padding:0!important;-webkit-overflow-scrolling: touch;}
.ui-page {-webkit-backface-visibility:hidden;}
.ui-mobile-viewport-transitioning .pagesi,
.ui-mobile-viewport-transitioning .ui-page .pagesi{
height:100%!important;padding-bottom:0!important
 }

看起来在转换时发生了一些事情，所以我所做的是在转换期间设置100％的页面高度并执行作业。仍在测试，如果我发现一些更好的解决方案将分享它！希望有所帮助！

干杯！

jQM页脚消失并出现在转换之前和之后

1 个答案: