0

$.mobile.changePage()メソッドを使用して、jQuery Mobile サイトの Page1 から Page2 に移動しています。

特定のスクロール位置に Page2 を表示したいと思います。

現在、これを機能させる唯一の方法は、そのページのイベント$(window).scrollTop(this.scrollPosition) 内から呼び出すことです。pageshow

問題は、Page2 が表示されると、最初にページの上部が約 1 秒間表示された後、正しい位置にスクロールされることです。

ページが表示される前にスクロール位置を設定できるようにしたいので、遷移アニメーションが行われている間、ページは正しいスクロール位置になります。イベントにスクロール位置コードを入れてみましたが、うまくいきpagebeforeshowません。

これを簡単に達成できる方法はありますか？

事前に助けてくれてありがとう。

4

1 に答える 1

1

はじめに

理解する必要がある利用可能なソリューションについて説明する前に、これはエラーではなく、完璧なソリューションもありません。問題は、別のページへの移行をアニメーション化するには、現在のページと移行中のページが垂直に並ぶように、ビューポートをページの上部に配置する必要があることです。

1 つのページ (たとえば 1000 ピクセル) の長いリストの途中にあり、転送先のページの高さが数百ピクセルしかない場合、現在のページは画面から適切にアニメーション化されますが、新しいページは次のように表示されません。ビューポートの上になります。

実行可能な解決策は 2 つあります。

iScroll とその jQuery Mobile 派生 iScrollview

iScroll ホームページ: http://cubiq.org/iscroll-4

iScrollview ホームページ: https://github.com/watusi/jquery-mobile-iscrollview

iScroll は、iPhone や Android などのモバイル デバイスのネイティブ スクロールと非常によく似た動作で、Web ブラウザー内のウィンドウ内のコンテンツをスクロールできる JavaScript です。これは、ネイティブのようなスクロールバーと物理演算を使用して、ブラウザー内でウィンドウをスクロールできることを意味します。

これは、現在の問題の解決策でもあります。iScroll の実装により、リストビューがどれだけスクロールされても、ページはページの高さの 100% を占めます。これは、返されたリストビューが同じ位置に留まる理由でもあります。

もちろん、このソリューションを実装したい場合は、iScrollview 実装を選択する必要があります。iScroll を実装することはできますが、もっと時間がかかります。

サイレントスクロール

公式ドキュメント: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html

この jQuery Mobile 機能は、そもそもこの問題が発生する理由と同じです。ページ遷移がトリガーされる前に、元のページが静かに一番上にスクロールされます。

私たちの場合、リストビューが選択されている場合、ページが変更される前に、その位置を覚えておく必要があります (ここでは、ページ遷移中に格納されているデータ/パラメーターの解決策を見つけることができます。章を検索するだけです: ページ遷移間のデータ/パラメーター操作)。その場合、前のページに戻ったときに pagebefpreshow イベントを使用して、ページが表示される前に静かに一番下までスクロールできます。

//scroll to Y 100px
$.mobile.silentScroll(100);

そして、ここにサイレントスクロールの実例があります: http://jsfiddle.net/Gajotres/2xfrM/

残念ながら、あなたの例のように、このソリューションは pageshow でのみ機能します。jQM アーキテクチャのため、これは pageshow イベント中にのみ行うことができます。

より詳しい情報

このトピックについて詳しく知りたい場合は、この記事をご覧ください。実際の例も見つかります。

于 2013-03-22T10:30:06.467 に答える