3

私はこれについてかなりの研究をしてきましたが、解決策を見つけることができませんでした。jquerymobile1.3を使用しています

ユーザーがリストビューを参照しているときに、データベースから入力された動的なネストされたリストビューがあります。ユーザーは下にスクロールし、クリックして戻ると、ユーザーは最後の位置に戻らず、画面の上部に移動します。

ユーザーがネストされたリストビューを参照しているときにスクロール位置を取得して保存し、ユーザーがクリックして戻ったときに$.mobile.silentScrollを呼び出すことができる方法はありますか。

お知らせ下さい、

ありがとう、

クリス

4

5 に答える 5

9

解決

実例は次のとおりです：http：//jsfiddle.net/Gajotres/5zZzz/

// Detect click on a li element and store its coordinate, change page to another
$(document).on('pagebeforeshow', '#index', function(){  
    $('#test-list li').on('click', function(){   
        storePosition.topCoordinate =  $(this).offset().top;
        $.mobile.changePage('#second');
    });    
});

// If there's a stored position use silentscroll function and scroll to correct location
$(document).on('pageshow', '#index', function(){      
    if(storePosition.topCoordinate !== null) {
        $.mobile.silentScroll(storePosition.topCoordinate);
    }
});

// Store position location
var storePosition = {
    topCoordinate : null
}

イントロ

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

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

2つの実際に実行可能なソリューションがあります。

1.iScrollとそのjQueryMobile派生iScrollview

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

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

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

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

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

2.サイレントスクロール

私の一番上の例のように：

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

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

この場合、リストビューを選択するときは、ページを変更する前に、その位置を覚えておく必要があります（ここでは、ページ遷移中に保存されるデータ/パラメーターのソリューションを見つけることができます。「ページ遷移間のデータ/パラメーター操作」の章を検索してください）。その場合、前のページに戻るときに、pagebefpreshowイベントを使用して、ページが表示される前にサイレントに一番下までスクロールできます。

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

そして、これがサイレントスクロールの実用的な例です：http：//jsfiddle.net/Gajotres/2xfrM/

より詳しい情報

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

于 2013-03-12T10:17:56.900 に答える
1

Gajotresには良い答えがあります。私はこの方法を使用します（必要に応じて、ページをsaveScrollTopクラスでマークしました）：

$(document).on('pageshow',function(){
    if ($.mobile.activePage.hasClass('saveScrollTop')
        && $.mobile.activePage.data('scroll')){
        $.mobile.silentScroll($.mobile.activePage.data('scroll'));
    } else {
        $.mobile.silentScroll(0);
    }
});

$(document).on('pagebeforechange',function(){
    if ($.mobile.activePage && $.mobile.activePage.hasClass('saveScrollTop')){
        $.mobile.activePage.data('scroll',$(window).scrollTop());
    }
});

残念ながら、jQueryはウィンドウをスクロールし、ページのdiv内のコンテンツではなく、それが問題の根本です。最後にスクロールした位置を保存し、次のページに設定します。新しいページをスクロールして戻ってこなくても問題なく動作します。しかし、両方のページが画面よりも大きい場合は、完全に混乱します。

于 2013-03-21T11:08:32.337 に答える
0

jQuery mobileの.offset（）を使用して位置を追跡できます。値をに保存し、sessionStorageユーザーがページに戻ったときに値を取得しsessionStorageて、silentScrollを実行できます。

以下のように保存

sessionStorage.pixelFromTop = $("#ordSrcCnt").offset();

ユーザーが戻ったら、以下のようにスクロールします

$.mobile.silentScroll(parseInt(sessionStorage.scrollToOrderRow));

これで十分に始められることを願っています。

于 2013-03-12T10:17:34.977 に答える
0

すでに上で述べたように、私のために働いたのは：

$(document).on("pageshow","#page",function (event) {
if (Listnumber>0)$.mobile.silentScroll($("#"+listnumber).offset().top-50);
});

（xmlファイルから）動的に生成されたリストビューがあり、すべてのli-itemがIDを取得します。IDをvarlistnumberに入れて、リストビューをクリックして詳細ページを表示した後、リストビューページに戻ったときにIDを取得できるようにしました。listviewpageに最初にアクセスしたとき、listnumer varは0であるため、スクロールは行われません。オフセットの後に-50を実行するので、クリックしたリストアイテムまでスクロールします。そうしないと、リストアイテムが表示されません。hthcosそれを理解するのに数時間かかりました...

于 2013-08-16T19:26:08.120 に答える
0

これを修正する最良の方法があります。

これをページヘッダーに入れます：

<script>
  $(function() { 
    $.mobile.defaultHomeScroll = 0;
  });
</script>

このようにして、上にスクロールして戻ることはありません。

于 2014-11-10T17:34:42.907 に答える