4

我正在开发一个使用 phonegap 的 jquery 移动应用程序。在应用程序中，我在页面中动态加载列表视图，其中项目数大于单个屏幕上可以显示的项目数。在 android 模拟器 (Android 2.2) 中查看时，listview 显示正常，我可以滑动或使用按钮向下滚动，但垂直滚动条不可见。我必须做任何特别的事情才能显示垂直滚动条吗？

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

我正在使用 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>
4

3 回答 3

3

很可能，这与您的 HTML、JS 或任何东西无关。大多数移动浏览器默认隐藏内联滚动条。我自己经历了多个项目。因为在 Safari 等移动浏览器中，您使用滑动动作进行滚动，因此它们不会显示任何可见的滚动条。我猜这是为了创造一种类似应用程序的体验。

相反，您需要为用户提供一些视觉队列，他们可以通过滑动或按钮滑动该区域。移动浏览器故意不在任何地方呈现滚动条，内联或其他。

于 2013-05-30T21:11:00.477 回答
0

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

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

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

于 2013-10-14T17:58:47.833 回答
0

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 代码 - 在弹出的列表视图中添加滚动行为；有趣的是，在事件处理程序中添加事件侦听器就足够了，无需在事件处理程序中添加用于操作滚动值的代码

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

$('#my-select-view').on("touchmove", function (event) {
                        });
于 2015-11-14T06:14:11.017 回答