4

私はphonegapを使用するjqueryモバイルアプリに取り組んでいます。アプリでは、1つの画面に表示できる数よりも多くのアイテムを含むページにリストビューを動的に読み込んでいます。Androidエミュレーター（Android 2.2）で表示すると、リストビューが正常に表示され、スワイプまたはボタンを使用して下にスクロールできますが、垂直スクロールバーが表示されません。垂直スクロールバーを表示するには、何か特別なことをする必要がありますか？

ブラウザ（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など）で完全なスクロールを作成します。

URL- http://cubiq.org/iscroll-4

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

于 2013-10-14T17:58:47.833 に答える
0

クリスバーによる解決策は私にとって完璧に機能します：これを見てください：

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 に答える