angularjs – 如何在Angular-UI bootstrap Carousel中使用Swipe

发布时间：2020-12-17 17:17:19 所属栏目：安全来源：网络整理

导读：在ui-bootstrap v2.1.4中滑动无法在Carousel中工作,而它在v1.3.3中工作正常新版本中的语法更改是否会导致错误？或者它是UI-Bootstrap中的错误？ Carousel docs提到支持滑动. The carousel also offers support for touchscreen devices in the form of swi

在ui-bootstrap v2.1.4中滑动无法在Carousel中工作,而它在v1.3.3中工作正常

新版本中的语法更改是否会导致错误？
或者它是UI-Bootstrap中的错误？

Carousel docs提到支持滑动.

The carousel also offers support for touchscreen devices in the form of swiping. To enable swiping,load the ngTouch module as a dependency.

Plunker：https://plnkr.co/edit/odlDYR?p=preview
(为了便于滑动,可以使用QR码在移动设备上打开plunker.)

var app = angular.module('ui.bootstrap.demo',['ngAnimate','ngTouch','ngSanitize','ui.bootstrap']);

app.controller('CarouselDemoCtrl',function ($scope) {
  $scope.myInterval = 0;
  $scope.noWrapSlides = false;
  $scope.active = 0;
  var slides = $scope.slides = [];
  var currIndex = 0;

  $scope.addSlide = function() {
    var newWidth = 600 + slides.length + 1;
    slides.push({
      image: '//unsplash.it/' + newWidth + '/300',text: ['Nice image','Awesome photograph','That is so cool','I love that'][slides.length % 4],id: currIndex++
    });
  };

  for (var i = 0; i < 4; i++) {
    $scope.addSlide();
  }
});

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible"
      content="IE=edge" />
    <meta name="viewport"
      content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-touch.js"></script>
    <!-- v1.3.3 swipe works; v2.1.4 swipe does not work -->
    <!--<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>-->
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.4.js"></script>
    <script src="carousel.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="CarouselDemoCtrl">
  <div style="height: 305px">
    <div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
      <div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
        <img ng-src="{{slide.image}}" style="margin:auto;">
        <div class="carousel-caption">
          <h4>Slide {{slide.id}}</h4>
          <p>{{slide.text}}</p>
        </div>
      </div>
    </div>
  </div>
</div>
  </body>
</html>

解决方法

与文档相反,Carousel从v2.0.0到v2.1.4(至少)不支持滑动
提到的是在 changelog

carousel: Due to the removal of replace: true,this causes a slight HTML structure change to the carousel and the slide elements – see documentation demos to see how it changes. This also caused removal of the ngTouch built in support – if one is using ng-touch,one needs to add the ng-swipe-left and ng-swipe-right directives to the carousel element with relevant logic.

要启用滑动,请使用template-url指定自定义模板,并在那里使用ng-swipe- *指令.例如.

<div class="carousel-inner"
  ng-swipe-left="$parent.vm.next()"
  ng-swipe-right="$parent.vm.prev()"
  ng-transclude>
</div>

参考：https://github.com/angular-ui/bootstrap/issues/6277

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!