ionic1开发之造一个简单的Swiper

关于Swiper，这里就不再多说。
ionic的ion-slides组件也是基于Swiper的再封装。

Swiper官网地址：http://idangero.us/swiper/#.Vmc1J-ODFBc
ion-slides文档地址：https://ionicframework.com/docs/v1/api/directive/ionSlides/

Note

我们需要用到ngTouch.js来监听touch事件。
大家最好在项目中引用ngTouch.js，而不是ngTouch.min.js，因为我们可能会在ngTouch.js里面屏蔽几句代码。

如果你的项目中还没有这个插件，也请自行下载之。
下载地址：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;

    /**
     * 本文的重中之重，就是如何判断你的操作是上下滑动还是左右滑动！！！
     * 最开始，是想用滑动的距离来判断，
     * 当x的变化超过某个数值的时候就表示是左右滑动；
     * 当y的变化超过某个数值的时候就表示是上下滑动。
     * 当然想法是美好的，但是现实却是残酷的。
     * 这样子做了之后，发现上下滑动的时候同时也能左右滑动。允悲！
     *
     * 最后，在阅读了ion-slides组件的源码之后，
     * 发现它是用滑动的角度来判定滑动方向的
     * touchAngle = Math.atan2(Math.abs(currentY - startY), Math.abs(currentX - startX)) * 180 / Math.PI
     * 直接copy过来，确实好用！
     *
     * 最后的最后，如果你已经这样做了，
     * 但是当你手指放在这个组件上不能上下滑动整个屏幕，
     * 那么你可能需要屏蔽掉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');
    }
  };
}

后记

说是造一个简单的Swiper，其实就是照着ionSlides组件仿了一个粗糙的Swiper。
更像是阅读了源码之后交的一份简单的作业。
当然，还有很多地方还可以做到更好更加酷炫，大家一起努力吧！

1. slide循环
2. 垂直方向滑动
3. 手指短时间的滑动切换到下一个slide（使用时间戳计时）
4. 加载无限多的slide
5. 更加酷炫的转场动画