0

私のJquery Mobile Webサイトでは、次のような戻るボタンにhrefを使用しています。

 <a id='{0}' class='{1}' href='/' data-role=""button"" data-icon=""arrow-l"" data-transition=""slide"" data-direction=""reverse"">

しかし、最初のページをスクロールすると、戻るボタンが再びトップに戻ります。最初のページが同じ位置にとどまりません。

これに対する解決策はありますか？

4

4 に答える 4

3

解決

この問題があり、iSrollを使用して修正しました

PageA から PageB に移動するときに、PageA のスクロール位置を変数に保存します。

これを行うには、iscroll.js を変更し、このように scrollTo の下に getScrollY メソッドを追加します

        scrollTo : function(x, y, time, relative) {
            var that = this, step = x, i, l;

            that.stop();

            if (!step.length)
                step = [{
                    x : x,
                    y : y,
                    time : time,
                    relative : relative
                }];

            for ( i = 0, l = step.length; i < l; i++) {
                if (step[i].relative) {
                    step[i].x = that.x - step[i].x;
                    step[i].y = that.y - step[i].y;
                }
                that.steps.push({
                    x : step[i].x,
                    y : step[i].y,
                    time : step[i].time || 0
                });
            }

            that._startAni();
        },
        getScrollY : function() {

            var that = this;

            return that.y;

        },

このようにページを変更する前に現在の位置を保存します

curScrollPos = myScroll.getScrollY();

そのPageAに戻りながらスクロール位置を設定し、PageBのpagehideイベントでこれを行っています

myScroll.scrollTo(0, curScrollPos, 1);
myScroll.refresh();

このようにして問題を解決しました。これが役立つことを願っています。

より詳しい情報

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

于 2013-04-04T05:09:19.763 に答える
2

アンカータグに data-rel="back" を直接追加して、代わりに href="#" を設定しないのはなぜですか?

<a id='{0}' class='{1}' href='#' data-rel="back" data-role="button" data-icon="arrow-l" data-transition="slide" data-direction="reverse"/>
于 2013-04-04T07:08:28.067 に答える
2

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

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/

そして、これは大きなリストビューといくつかのページを使用した実際のjsFiddleの例です: 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
}

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

最終的な注意事項

iScroll + iScrollView について詳しく知りたい場合、それらが実際の例でどのように機能するかについては、この記事をご覧ください。

于 2013-04-04T07:28:31.380 に答える