1

jQuery モバイルを使用して iPhone 用の簡単なプログラムを作成しています。画像の数で div を作成しましたが、スクローラーが垂直になりたくないのです。垂直方向のスペースを固定し、水平方向に画像をオーバーフローさせたい。iScroll のような再スクロール プラグインがあることは知っていますが、私の場合、これらのスクロール プラグインは<li>固定数の要素を使用してそのページに表示されるため、それらを使用できませんが、ユーザーがデバイスを水平方向に回転させてからより多くの画像を回転させた場合、これを動的に維持したいと考えています。画面に収まるので、ユーザーがデバイスを垂直に保ち、水平に保つとスペースが少なくなるため、画像は水平にスクロールする必要がありますが、デバイスを水平に回転させると、水平にスペースが増え、より多くの画像が収まり、残りの画像が表示されるように調整する必要がありますもう一度水平にスクロールします。

div の高さを修正し、画像が水平方向に流れるようにオーバーフロー プロパティを試しましたが、jQuery がその動作を妨げていると思います。

私を正しい道に導いてください。

4

1 に答える 1

0

水平スクロールには iScroll を引き続き使用できると思いますがrefresh、コンテンツのサイズが変更されるたびにメソッドを呼び出す必要があります。あなたの場合、orientationchangeイベントをリッスンして、その場合refreshに iScroll オブジェクトを実行できます。

iScroll のドキュメントのセクション「refresh() メソッドのマスター」を確認してください。

それが役に立てば幸い！

編集。次のような簡単な例でテストを開始できます。

<div data-role="page" id="loadPage">

<div data-role="content">
    <a href="#" data-role="button" onclick="addText();">Add text</a>
     <div id="scroller" style="border: 1px solid green; white-space: nowrap; width: 300px;">
         <div id="text" style="border: 1px solid red; height: 20px; width: 0px;"></div>
     </div>
</div>

<script type="text/javascript">
    var iscrollPage = null;
    $('#loadPage').bind('pagebeforeshow', function () { 
        iscrollPage = new iScroll($('#scroller').get(0), { vScroll: false, hScroll: true });
    });

    function addText() {
        $('#text').append((new Date()).getTime()).css('width', '+=140');
        iscrollPage.refresh();
    }
</script>

</div>
于 2012-12-04T07:56:47.280 に答える