-
touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
-
touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。
-
touchend事件：当手指从屏幕上离开的时候触发。
首先设置rem自适应布局
// 1rem = 10px
document.documentElement.style.fontSize =
document.documentElement.clientWidth / 37.5 + "px";
html代码
<div id="app">
<divclass="wrap">
<div class="wrap-slider">
<div class="slider-item">page-1</div>
<div class="slider-item">page-2</div>
<div class="slider-item">page-3</div>
<div class="slider-item">page-4</div>
<div class="slider-item">page-5</div>
</div>
</div>
</div>
css代码
body {
margin: 0;
}
html,
body,
#app {
height: 100%;
}
.wrap {
position: relative;
height: 100%;
overflow: hidden;
}
.wrap-slider {
display: flex;
position: absolute;
flex-direction: row;
width: 187.5rem;
height: 100%;
}
.slider-item {
display: flex;
justify-content: center;
align-items: center;
font-size: 5rem;
flex: 1;
}
.slider-item:nth-child(1) {
background-color: aqua;
}
.slider-item:nth-child(2) {
background-color: red;
}
.slider-item:nth-child(3) {
background-color: yellow;
}
.slider-item:nth-child(4) {
background-color: blue;
}
.slider-item:nth-child(5) {
background-color: rgb(132, 126, 126);
}
js代码
const wrap = document.querySelector(".wrap");
const wrapSlider = document.querySelector(".wrap-slider");
const sliderItem = document.querySelectorAll(".slider-item");
const pageWidth = wrap.offsetWidth;
console.log(pageWidth, "pageWidth");
let startX = 0;
let moveX = 0;
let distanceX = 0;
let slidePageIndex = 0;
let isMove = false;
const init = () => {
bindEvent();
};
function bindEvent() {
wrapSlider.addEventListener("touchstart", handleTouchStart);
wrapSlider.addEventListener("touchmove", handleTouchMove);
wrapSlider.addEventListener("touchend", handleTouchEnd);
}
function handleTouchStart(e) {
startX = e.touches[0].clientX;
console.log(startX);
}
function handleTouchMove(e) {
moveX = e.touches[0].clientX;
distanceX = moveX - startX;
if (
(slidePageIndex === 0 && distanceX > 0) ||
(slidePageIndex === sliderItem.length - 1 && distanceX < 0)
)
return;
console.log(distanceX);
isMove = true;
setTranslateX(-slidePageIndex * pageWidth + distanceX);
}
function handleTouchEnd(e) {
if (isMove) {
if (Math.abs(distanceX) >= pageWidth / 3) {
if (distanceX > 0) {
slidePageIndex--;
}
if (distanceX < 0) {
slidePageIndex++;
}
}
setTranslateX(-slidePageIndex * pageWidth);
}
startX = 0;
moveX = 0;
distanceX = 0;
isMove = false;
}
function setTranslateX(transX) {
wrapSlider.style.transition = "all 0.1s";
wrapSlider.style.transform = `translateX(${transX}px)`;
}
init();
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/137348.html
