swiper4的效果
还不知道swiper4重大改变的请按这里swiper官网
swiper4变化最大的应该就是实现了像安卓的ViewPage相似的效果，发现好多网站都在用例如：饿了么、美丽说等，给用户的体验真的很好。最坑的是天猫居然没有用上，还只是单纯的判断手势方向让图片进行切换（可以天猫为了兼容性着想吧，这些就要问天猫的大佬门了）(⊙ˍ⊙)。
我唯一好奇的是它是怎么实现的，然后去下了它的源码看了一下，用到了css3的transform属性，不断改变x轴的位置，其实我在想用定位不断改变left的值应该也是可以实现的，不过会少了一些流畅，有兴趣的可以试试用left去模拟一下。
transition-duration: 0ms; transform: translate3d(-640px, 0px, 0px);
效果如下：
Untitled1.png
html的代码
<div class="swiper-container">
<div id="swiper-wrapper" class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
</div>
然后js的实现如下：
let $swiper = $("#swiper-wrapper");
let pageX = 0;
let relX = 0;
let relX1 = 0;
let startX = 0;
let startY = 0;
let endX = 0;
let endY = 0;
let distanceX = 0;
let distanceY = 0;
let len = $swiper.children().length;
for (let i = 0; i < len; i++) {
// console.log($swiper.children()[i].offsetLeft)
$swiper.children()[i].setAttribute("swiper-left", $swiper.children()[i].offsetLeft);
$swiper.children()[i].addEventListener("touchstart", function (event) {
pageX = event.targetTouches[0].pageX;
startX = event.targetTouches[0].pageX;
startY = event.targetTouches[0].pageY;
})
$swiper.children()[i].addEventListener("touchmove", function (event) {
endX = event.targetTouches[0].pageX;
endY = event.targetTouches[0].pageY;
//获取滑动距离
distanceX = endX - startX;
distanceY = endY - startY;
//判断滑动方向
if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX > 0) {
relX1 = -Math.abs(event.targetTouches[0].pageX - pageX);
} else if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX < 0) {
relX1 = Math.abs(event.targetTouches[0].pageX - pageX);
console.log('往左滑动');
} else if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY < 0) {
console.log('往上滑动');
} else if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY > 0) {
console.log('往下滑动');
} else {
console.log('点击未滑动');
}
$swiper.css({ "transition-duration": "0ms", "transform": "translate3d(" + (-(relX + relX1)) + "px, 0px, 0px)" });
})
$swiper.children()[i].addEventListener("touchend", function (event) {
relX = relX1 + relX;
if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX > 0) {
for (var i = 0; i < len; i++) {
if (relX - $swiper.children()[i].offsetWidth < $swiper.children()[i].getAttribute("swiper-left")) {
$swiper.css({ "transform": "translate3d(" + (-($swiper.children()[i].getAttribute("swiper-left"))) + "px, 0px, 0px)" });
relX = parseFloat($swiper.children()[i].getAttribute("swiper-left"));
break;
}
}
} else if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX < 0) {
for (var i = 0; i < len; i++) {
if (relX < $swiper.children()[i].getAttribute("swiper-left")) {
$swiper.css({ "transform": "translate3d(" + (-($swiper.children()[i].getAttribute("swiper-left"))) + "px, 0px, 0px)" });
relX = parseFloat($swiper.children()[i].getAttribute("swiper-left"));
break;
}
}
if (relX > $swiper.children()[len - 1].getAttribute("swiper-left")) {
$swiper.css({ "transform": "translate3d(" + (-($swiper.children()[len - 1].getAttribute("swiper-left"))) + "px, 0px, 0px)" });
relX = parseFloat($swiper.children()[len - 1].getAttribute("swiper-left"));
}
} else if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY < 0) {
if (relX > $swiper.children()[len - 1].getAttribute("swiper-left")) {
$swiper.css({ "transform": "translate3d(" + (-($swiper.children()[len - 1].getAttribute("swiper-left"))) + "px, 0px, 0px)" });
relX = parseFloat($swiper.children()[len - 1].getAttribute("swiper-left"));
}
console.log('往上滑动');
} else if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY > 0) {
if (relX > $swiper.children()[len - 1].getAttribute("swiper-left")) {
$swiper.css({ "transform": "translate3d(" + (-($swiper.children()[len - 1].getAttribute("swiper-left"))) + "px, 0px, 0px)" });
relX = parseFloat($swiper.children()[len - 1].getAttribute("swiper-left"));
}
console.log('往下滑动');
} else {
console.log('点击未滑动');
}
})
}
可能写得不够好，主要就是监听touchstart、touchmove、touchend这三个事件，然后把事件的位置判断好就行了。有空真的要好好像那些大佬们好好学习，他们怎么想出这么多好玩的东西❤❤❤
网友评论