关于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。
更像是阅读了源码之后交的一份简单的作业。
当然，还有很多地方还可以做到更好更加酷炫，大家一起努力吧！
- slide循环
- 垂直方向滑动
- 手指短时间的滑动切换到下一个slide（使用时间戳计时）
- 加载无限多的slide
- 更加酷炫的转场动画
