6

更新:スクローラーを希望どおりに機能させることができましたが、実際の問題をハッキングしたような気がします。誰かがより確かな答えを持っていれば、それを気に入っていただけると思います。新しいjQueryの下のスニペットに更新してメモしましたm を使用しています。

iPad/Android Web アプリにiScroll-4 ( http://cubiq.org/iscroll-4 ) を使用しています。すべてがスワイプとスクロールで完全に機能していますが、アプリの冒頭に目次があります。ユーザーがスクローラーの特定の領域にジャンプできるようにする --

scrollToElement(element, duration)別の領域にジャンプするためにiScroll 関数を使用しています。またscrollToPage(page, duration)、ユーザーが一度に 1 ページずつ手動で前後に移動できるようにするためにも使用します。

コンソールを見ている間currPageX、関数を使用してナビゲートしたscrollToPageときやスワイプしたときに変数の更新がログに記録されますがscrollToElementcurrPageX変数を使用すると更新されません。

したがって、要素にジャンプしてから前方に移動すると、scrollToPage('next', 0)後方に移動し、目次の後の次のページに移動します。

scroll.refresh()関数を after scrollToElement、 before 、関数を timeout 内に入れるなどして使用しようとしましたが、currPageXが更新されない理由がわかりません。

2 つの異なる関数を使用している jQuery コードのスニペットを次に示します。

  // TO NAVIGATE FORWARD AND BACKWARDS
  $('span.control').on('click', function() {
    var slideDir = $(this).attr('data-dir');
    if (slideDir == 'prev') {
      var tehPg = tehScroll.currPageX-1;
    } else if (slideDir == 'next') {
      var tehPg = tehScroll.currPageX+1;
    }
    tehScroll.scrollToPage(tehPg, 0);
    return false;
  });

  // TO JUMP FROM CONTENTS
  $('li[data-page="toc"] span').on('click', function() {
    var toPage = $(this).attr('data-page');
    tehScroll.scrollToElement('li[data-page="'+toPage+'"]', 800);
    // ADDED THE FOLLOWING LINE TO MANUALLY SET currPageX after scrolling!
    tehScroll.currPageX = $('#slides li[data-page="'+toPage+'"]').index();
    return false;
  });
4

1 に答える 1

0

jquery-mobile-iscrollviewウィジェット プラグインの使用を検討しましたか? - 関数 scrollToPage(pageX, pageY, time) があり、うまく機能します...

一番

M

于 2014-06-05T17:02:20.187 に答える