在jquery移动页面中添加面板会使页面滚动在卡住的设备上

Question

我是Jquery Mobile和Phonegap的新手。 正如Jquery Mobile网站提到的，我已经在一个HTML页面中创建了一个包含多个页面的应用程序，用于在移动设备中开发应用程序。

我还为每个页面添加了面板。 我的问题是，添加面板后，整个页面的上/下滚动变得卡住了。 与之相同，您必须拖动两次才能滚动页面。 当您在iPhone / iPad上运行应用程序而在浏览器上没有问题时，会发生这种情况。 从页面上删除面板时不存在此问题。

我已将该面板作为页眉，内容和页脚的同级对象，并且该面板工作正常。

可能是什么原因？ 这是面板html

<div data-role="panel" id="menuPanel3" data-position="right" data-display="push" data-theme="a">
<div data-role="controlgroup" data-corners="false">
<a href='javascript:void(0)' data-corners="false" data-role=button onclick="nav('#wallet')" data-theme="a">Wallet</a>
<a href='javascript:void(0)' data-corners="false" data-role=button data-theme="a">Settings</a>
<a href='javascript:void(0)' data-corners="false" data-role=button data-theme="a">About Us</a>
<a href='javascript:void(0)' data-corners="false" data-role=button onclick=logout() data-theme="a">Logout</a>
</div> 
</div><!-- /panel -->

当我从页面块中删除上述块时，滚动变得很好。

以下是所应用的样式。

<style>
    /*this block should go in the styles.css file*/
    .ui-panel-inner {
        padding:0px; /*make the buttons flush edge to edge*/
    }
    .ui-controlgroup {
        margin:0; /*make the buttons flush to the top*/
    }
    #header {
        height:54px;
    }
    #bars-button {
        margin:7px;
    }
</style>

请帮忙...

Answer 1

面板必须是jQuery Mobile页面内的header，content和footer元素的同级对象。 您可以在这些元素之前或之后添加面板标记，但不能在两者之间添加。 面板不能放置在页面外部，但是此约束将在以后的版本中删除。

这是源顺序中的页眉，内容和页脚之前的面板示例：

<div data-role="page">          

    <div data-role="panel" id="mypanel">
        <!-- panel content goes here -->
    </div><!-- /panel -->

    <!-- header -->
    <!-- content -->
    <!-- footer -->

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

完全按照这些说明进行操作，就可以了： http : //jquerymobile.com/demos/1.3.0-beta.1/docs/panels/#

我使用的面板最近没有任何问题： http : //radio.idev.ge

通过向面板添加'data-position-fixed =“ true”'解决了该问题。