Vanilla JS/HTML/CSS를 사용하여 스와이프 가능한 항목 만들기

18860 단어 htmljavascriptcsswebdev

These processes are valid for only mobile. So, touchscreen..



우선 최종본을 보자.



이 항목에서는 JS 쪽만 검사할 것입니다.
이것이 최종style.css 파일입니다. 먼저 이 파일을 만들 수 있습니다.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    background-color: #ddd;
    color: #0d0d0d;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.swipable {
    width: 50%;
    padding: 20px 15px;
    border-radius: 10px;
    background-color: coral;
    color: white;
    box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.8);
    user-select: none;
    margin-top: 20px;
    overflow: hidden;
}

.container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: height .5s;
    overflow: hidden;
    padding-bottom: 20px;
}

그리고 그것은 우리의 index.html 파일입니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Swipable Demo</title>
</head>

<body>

    <div class="container">
        <div class="swipable">This is a swipable item.</div>
        <div class="swipable">This is a swipable item.</div>
        <div class="swipable">This is a swipable item.</div>
        <div class="swipable">This is a swipable item.</div>
        <div class="swipable">This is a swipable item.</div>
        <div class="swipable">This is a swipable item.</div>
        <div class="swipable">This is a swipable item.</div>
    </div>

    <script src="app.js"></script>
</body>

</html>

이들은 Vanilla JS 프로세스입니다.



이전에는 js에서 .swipable 클래스를 선택할 수 있습니다.

let treshold = window.innerWidth / 4
document.querySelectorAll(".swipable").forEach((swipableItem, index) => {
    //TODO :)
});

코드 상단에 스와이프 임계값을 설정하기 위한 임계값 변수를 정의했습니다.

이 예에서 스와이프 가능한 항목은 X축에서만 스와이프할 수 있습니다.

이에 대한 3가지 기본 변수가 있습니다.

document.querySelectorAll(".swipable").forEach((swipableItem, index) => {
    let touchstartX = 0
    let touchendX = 0
    let diff = 0;
});
diff 변수는 드래그 거리의 결과가 됩니다.

다른 변수는 기본적으로 터치의 시작점과 끝점입니다.

swipableItem.addEventListener('touchstart', e => {
        touchstartX = e.changedTouches[0].screenX
        swipableItem.style.transition = "all 0s"
    })

터치 이벤트를 처리하기 위해 리스닝touchstart 이벤트를 받습니다. 이 이벤트에서 touchstartX 변수를 설정하는 첫 번째 터치를 잡을 수 있습니다. 그런 다음 터치를 추적하기 위해 전환 기간을 0초로 설정합니다.

이것은 우리의 touchend 이벤트입니다.

swipableItem.addEventListener('touchmove', e => {
        diff = e.touches[0].screenX - touchstartX;
        swipableItem.style.transform = `translateX(${diff}px)`;
})

위에서 우리는 touchmove 이벤트를 수신했습니다. 이 이벤트에서 우리는 터치스타트와 현재 터치 이동 사이의 거리를 측정했습니다. 그리고 이 결과를 diff 변수에 할당했습니다. 따라서 x축만 드래그하여 화면에서 항목의 위치를 ​​조정할 수 있습니다.

이것은 벨로우즈의 터치 이벤트의 마지막입니다.

swipableItem.addEventListener('touchend', e => {
    touchendX = e.changedTouches[0].screenX
    swipableItem.style.transition = "all .5s"

    handleGesture(index)
})

위에서 손가락의 마지막 위치를 touchendX 변수에 설정했습니다.

충분히 스 와이프하지 않으면 이전 위치로 천천히 이동하도록 애니메이션 지속 시간을 설정하십시오.
handleGesture 함수는 최종 함수입니다. 이 기능은 스 와이프 작업을 결정합니다.

그리고 ...

function handleGesture(index) {
    let swipePath = "";
    if (touchendX < touchstartX) swipePath = "left";
    if (touchendX > touchstartX) swipePath = "right";

    if ((diff > treshold) || (diff < -treshold)) {
        console.log(`Item ${index}: Swiped ${swipePath}`)
        swipableItem.style.transition = "all .3s"
        if (swipePath == "left") {
            swipableItem.style.transform = `translateX(-${window.innerWidth}px)`
        } else {
            swipableItem.style.transform = `translateX(${window.innerWidth}px)`
        }
        setInterval(() => {
            swipableItem.style.height = "0px";
            swipableItem.style.padding = "0px";
            swipableItem.style.margin = "0px";
            setInterval(() => {
                swipableItem.remove();
            }, 500);
        }, 500)
    } else {
        swipableItem.style.transform = `translateX(0px)`
    }
}

이것은 최종 버전입니다.



그리고 GitHub 레포


zkscan1 / dom-swipeable-item


이것은 내 Dev.to 주제입니다.

heroku에 배포하는 것도 assets : precompile error가 나왔다.
수퍼리스트 모듈

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage