Question

我正在使用一个使用phonegap的jquery移动应用程序。在应用程序中，我在页面中动态加载列表视图，其中项目数大于单个屏幕上显示的项目数。在Android模拟器（Android 2.2）中查看时，列表视图显示正常，我可以滑动或使用按钮向下滚动，但垂直滚动条不可见。我是否必须做一些特殊的垂直滚动条才能显示？

当我在浏览器（Firefox）中打开页面的静态版本时，滚动条会显示，但在Android模拟器上的应用程序中加载的相同静态页面不显示滚动条（即，似乎行为是一致的，与加载listview的动态性质无关。）

我使用的是jquery 1.7.1，JQM 1.1.1，phonegap 2.0（所有最新版本）。

以下是页面代码：

<!DOCTYPE HTML>
<html>
<head>
    <title>Conference List</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <link rel="stylesheet" href="common/jquery.mobile-1.1.1.min.css" />
    <script type="text/javascript" charset="utf-8" src="common/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="common/jquery.mobile-1.1.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="common/cordova-2.0.0.js"></script>
</head>
<body>
<div id="conf-list" data-role="page">

    <div data-role="header">
        <a href="#" class="ui-btn-left" data-icon="delete" onclick="exit()">Exit</a>
        <a href="#" class="ui-btn-right" data-icon="refresh" onclick="downloadConfList(confFilePath)">Refresh</a>
        <span class="ui-title" />        
    </div><!-- /header -->

    <div data-role="content">
        <ul data-role='listview' data-inset='true'>
                <li data-role='list-divider'>Available Conferences:</li>
                <li data-icon='false'>
                        <a href='javascript:openConference(2010041801)'>
                                <h4>Conference A1 2010</h4>
                                From 2010-04-18 to 2010-04-20<br />
                                Orlando, FL, USA
                        </a>
                </li>

                <li data-icon='false'>
                        <a href='javascript:openConference(2010110701)'>
                                <h4>Conference A2 2010</h4>
                                From 2010-11-07 to 2010-11-10<br />
                                Austin, TX, USA
                        </a>
                </li>

                <li data-icon='false'>
                        <a href='javascript:openConference(2011111301)'>
                                <h4>Conference A3 2011</h4>
                                From 2011-11-13 to 2011-11-16<br />
                                Charlotte, NC, USA
                        </a>
                </li>

                <li data-icon='false'>
                        <a href='javascript:openConference(2012041501)'>
                                <h4>Conference A4 2012</h4>
                                From 2012-04-15 to 2012-04-17<br />
                                Huntington Beach, CA, USA
                        </a>
                </li>

                <li data-icon='false'>
                        <a href='javascript:openConference(2012101401)'>
                                <h4>Conference A5 2012</h4>
                                From 2012-10-14 to 2012-10-17<br />
                                Phoenix, AZ, USA
                        </a>
                </li>

        </ul>
    </div><!-- /content -->

</div><!-- /page -->
</body>
</html>

Answer 1

最有可能的是，这与您的HTML，JS或其他任何东西无关。默认情况下，大多数移动浏览器会隐藏内联滚动条。我自己经历了多个项目。因为在像Safari这样的移动浏览器中使用滑动动作进行滚动，所以它们不会显示任何可见的滚动条。我猜这是努力创造类似应用程序的体验。

相反，您需要为用户添加一些可视化队列，以便他们可以使用滑动或按钮来滑动该区域。移动浏览器有意不在任何地方，内联或其他方式呈现滚动条。

Answer 2

使用iScroll在所有设备（Android，iOS，Windows，Blackberry等）上进行完美滚动。

网址 - http://cubiq.org/iscroll-4

示例 - http://lab.cubiq.org/iscroll/examples/simple/

Answer 3

Chris Barr的解决方案非常适合我：请看一下：

http://chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/

在我的应用程序中使用

// HTML

<ul data-role="listview" id="my-select-view" data-filter="true" style="max-height: 250px; overflow: scroll">
</ul>

// Javascript代码 - 在弹出窗口中向列表视图添加滚动行为;有趣的是，添加事件监听器而不使用eventhandler中的代码来操作滚动值

就足够了

$('#my-select-view').on("touchstart", function(event) {                            scrollStartPos=this.scrollTop+event.touches[0].pageY;
                        });

$('#my-select-view').on("touchmove", function (event) {
                        });

滚动条在jquery移动应用程序中不可见

3 个答案: