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

Adding panels in jquery mobile page makes page scrolling on device stuck

本文关键字：滚动 移动 jquery 添加      更新时间：2023-09-26

我是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>

请帮忙...

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

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

<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"，解决了这个问题。

相关文章：