1

Bootstrap と Ratchet を使用してモバイル Web アプリを構築しています。index.html と main.html の 2 つのページがあります。各ページには、touchSwipeを使用したスワイプ サポートが追加された 1 つの Bootstrap カルーセルが含まれています。Chrome Mobile Emulationを使用してテストしています。両方のページのカルーセルは同一です。

index.html ページを初めて読み込むと、カルーセルのスワイプ機能が機能します。ただし、(index.html のリンクを介して) main.html に切り替えると、main.html でカルーセルをスワイプできません。最初に main.html をロードし、2 番目に index.html をロードすると、同じことが起こります。ただし、(いずれかのページで) ページを更新すると、カルーセルが再び機能します...

初めてページを読み込んだとき、またはページを更新したときにのみトリガーされ、他のページに切り替えたときにトリガーされないことに気付き$(document).ready(init);ました。それが問題の原因だと思いますが、方法がわかりませんこれを修正します。

コンソールに次のエラー メッセージが表示されます。 Ignored attempt to cancel a touchend event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

Deferred long-running timer task(s) to improve scrolling smoothness. See crbug.com/574343.

index.html 

<head>...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script
<script src="js/bootstrap.min.js"></script>
<script src="js/ratchet.min.js"></script>
<script src="js/jquery.touchSwipe.min.js"></script>
<script>
  var init = function(){
    $('.dropdown-toggle').dropdown();
    $(".carousel-inner").swipe( {
      swipeLeft:function(event, direction, distance, duration, fingerCount) {
        $(this).parent().carousel('next');
      },
      swipeRight: function() {
        $(this).parent().carousel('prev');
      },
      threshold:0
    });
  }
  $(document).ready(init);
</script>
</head>

また、タグの後にこれらのスクリプト タグを配置しようとしました<body>が、役に立ちませんでした。

index.html と main.html のカルーセル コード 

<!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
  <div class="item active">
    <img src="placeholderimg1.jpg" alt="...">
    <div class="carousel-caption">...</div>
  </div>
    <div class="item">
      <img src="placeholderimg2.jpg" alt="...">
      <div class="carousel-caption">...</div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

別の Bootstrap カルーセル スワイプ ライブラリ( https://github.com/avinoamr/bootstrap-carousel-swipe )も試しましたが、同じ問題が発生しました。

どんな助けでも大歓迎です。前もって感謝します。

4

2 に答える 2

0

ここに私が使ってきたjQueryのビットがあります：

$(".carousel").on("touchstart", function(event){
        var xClick = event.originalEvent.touches[0].pageX;
    $(this).one("touchmove", function(event){
        var xMove = event.originalEvent.touches[0].pageX;
        if( Math.floor(xClick - xMove) > 5 ){
            $(".carousel").carousel('prev');
        }
        else if( Math.floor(xClick - xMove) < -5 ){
            $(".carousel").carousel('next');
        }
    });
    $(".carousel").on("touchend", function(){
            $(this).off("touchmove");
    });
});

touchSwipe やその他のプラグインは必要ありません。スワイプの感度を調整する必要がある場合は、5 と -5 を調整します。お役に立てれば。

于 2016-11-22T13:03:06.327 に答える