Question

我正在使用Bootstrap和Ratchet构建移动Web应用程序。我有两个页面，index.html和main.html。每个页面都包含一个Bootstrap轮播，并使用touchSwipe添加了滑动支持。我正在使用Chrome Mobile Emulation进行测试。两页的旋转木马都是相同的。

当我第一次加载index.html页面时，轮播上的滑动功能起作用。但是，当我切换到main.html（通过index.html中的链接）时，我无法在main.html中滑动轮播。当我首先加载main.html和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>

我也试过another Bootstrap carousel swipe library（https://github.com/avinoamr/bootstrap-carousel-swipe），但遇到了同样的问题。

任何帮助将不胜感激。提前谢谢。

Answer 1

这里有一些我一直在使用的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。希望这会有所帮助。

在两页上滑动（使用touchSwipe）的Bootstrap轮播不会滑动

1 个答案: