關(guān)于Swiper，這里就不再多說。
ionic的ion-slides組件也是基于Swiper的再封裝。

Swiper官網(wǎng)地址：http://idangero.us/swiper/#.Vmc1J-ODFBc
ion-slides文檔地址：https://ionicframework.com/docs/v1/api/directive/ionSlides/

Note

我們需要用到ngTouch.js來監(jiān)聽touch事件。
大家最好在項(xiàng)目中引用ngTouch.js，而不是ngTouch.min.js，因?yàn)槲覀兛赡軙趎gTouch.js里面屏蔽幾句代碼。

如果你的項(xiàng)目中還沒有這個(gè)插件，也請自行下載之。
下載地址：https://github.com/nglar/ngTouch

閑話不多說，直接上代碼！

HTML代碼：

<div class='imc-swiper-container'>
  <div class='imc-swiper-wrapper' ng-touchend="onTouchEnd($event)" ng-touchmove="onTouchMove($event)" ng-touchstart="onTouchStart($event)">
    <div ng-repeat='slide in imcSlides' class='imc-swiper-slide'>[YOUR DOM ELEMENTS]</div>
  </div>
</div>

CSS代碼：

.imc-swiper-container {
    min-height: 120px;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.imc-swiper-wrapper {
    display: flex;
    align-items: flex-start;
    height: 100%；
    transition-property: transform;
}

.imc-swiper-slider {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 120px;
    flex-shrink: 0;
}

JS代碼：

  var startX = 0;
  var startY = 0;
  var currentIndex = 0;

  var minMoveDistance = 100;
  var itemWidth = document.body.offsetWidth;

  var isUpDown;

  $scope.onTouchStart = function (event) {
    startX = event.originalEvent.changedTouches[0].pageX;
    startY = event.originalEvent.changedTouches[0].pageY;
  };

  $scope.onTouchMove = function (event) {

    var currentX = event.originalEvent.changedTouches[0].pageX;
    var currentY = event.originalEvent.changedTouches[0].pageY;

    /**
     * 本文的重中之重，就是如何判斷你的操作是上下滑動還是左右滑動?。。?     * 最開始，是想用滑動的距離來判斷，
     * 當(dāng)x的變化超過某個(gè)數(shù)值的時(shí)候就表示是左右滑動；
     * 當(dāng)y的變化超過某個(gè)數(shù)值的時(shí)候就表示是上下滑動。
     * 當(dāng)然想法是美好的，但是現(xiàn)實(shí)卻是殘酷的。
     * 這樣子做了之后，發(fā)現(xiàn)上下滑動的時(shí)候同時(shí)也能左右滑動。允悲！
     *
     * 最后，在閱讀了ion-slides組件的源碼之后，
     * 發(fā)現(xiàn)它是用滑動的角度來判定滑動方向的
     * touchAngle = Math.atan2(Math.abs(currentY - startY), Math.abs(currentX - startX)) * 180 / Math.PI
     * 直接copy過來，確實(shí)好用！
     *
     * 最后的最后，如果你已經(jīng)這樣做了，
     * 但是當(dāng)你手指放在這個(gè)組件上不能上下滑動整個(gè)屏幕，
     * 那么你可能需要屏蔽掉ngTouch.js里面的// event.preventDefault();
     *
     * */
    if (typeof isUpDown === 'undefined') {
      var touchAngle = Math.atan2(Math.abs(currentY - startY), Math.abs(currentX - startX)) * 180 / Math.PI;
      isUpDown = touchAngle > 45;
    }

    if (isUpDown) {
      return;
    }

    event.preventDefault();
    event.stopPropagation();

    var offsetX = currentX - startX;
    if (Math.abs(offsetX) > itemWidth) {
      offsetX = offsetX > 0 ? itemWidth : -itemWidth;
    }
    var translateX = (-itemWidth * currentIndex) + offsetX;

     angular.element(event.currentTarget).css('transform', 'translate3d(translateX, 0px, 0px)');
     angular.element(event.currentTarget).css('transition-duration', '0ms');
  };

  $scope.onTouchEnd = function (event) {
    if (isUpDown) {
      isUpDown = undefined;
      return;
    }
    isUpDown = undefined;

    var endX = event.originalEvent.changedTouches[0].pageX;
    var offset = endX - startX;

    if (offset > minMoveDistance) {
      // touch move right
        var translateX;

        if (currentIndex === 0) {
          translateX = 0;
        } else {
          translateX = -itemWidth * (currentIndex - 1);
        }

      angular.element(event.currentTarget).css('transform', 'translate3d(translateX, 0px, 0px)');
      angular.element(childEle).css('transition-duration', '500ms');

      if (currentIndex !== 0) {
        currentIndex--;
      }
    } else if (offset < -minMoveDistance) {
      // touch move left
        var translateX;

        if (currentIndex === event.currentTarget.children.length - 1) {
          translateX = -itemWidth * currentIndex;
        } else {
          translateX = -itemWidth * (currentIndex + 1);
        }

      angular.element(event.currentTarget).css('transform', 'translate3d(translateX, 0px, 0px)');
      angular.element(event.currentTarget).css('transition-duration', '500ms');

      if (currentIndex !== event.currentTarget.children.length - 1) {
        currentIndex++;
      }

    } else {
        var translateX = -itemWidth * currentIndex;
        angular.element(event.currentTarget).css('transform', 'translate3d(translateX, 0px, 0px)');
        angular.element(event.currentTarget).css('transition-duration', '500ms');
    }
  };
}

后記

說是造一個(gè)簡單的Swiper，其實(shí)就是照著ionSlides組件仿了一個(gè)粗糙的Swiper。
更像是閱讀了源碼之后交的一份簡單的作業(yè)。
當(dāng)然，還有很多地方還可以做到更好更加酷炫，大家一起努力吧！

1. slide循環(huán)
2. 垂直方向滑動
3. 手指短時(shí)間的滑動切換到下一個(gè)slide（使用時(shí)間戳計(jì)時(shí)）
4. 加載無限多的slide
5. 更加酷炫的轉(zhuǎn)場動畫