移动端左右滑动切换页面效果完整代码(纯JavaScript)

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    <script>
        document.documentElement.style.fontSize =
            document.documentElement.clientWidth / 37.5 + 'px'
    </script>
    <style>
        body {
            margin: 0;
        }

        html,
        body,
        #app {
            height: 100%;
        }

        div {
            display: flex;
            width: 100%;
            flex-direction: column;
        }

        .slider-page {
            position: relative;
            height: 100%;
            overflow: hidden;
        }

        .scroll-wrapper {
            position: absolute;
            width: 400vw;
            height: 100%;
            flex-direction: row;
        }

        .slider-item {
            width: 100vw;
            height: 100%;
            flex: 1;
        }

        .slider-item:nth-child(1) {
            background-color: rgb(247, 150, 150);
        }

        .slider-item:nth-child(2) {
            background-color: rgb(123, 255, 0);
        }

        .slider-item:nth-child(3) {
            background-color: rgb(0, 255, 238);
        }

        .slider-item:nth-child(4) {
            background-color: rgb(255, 0, 195);
        }

        .slider-item .inner {
            height: 100%;
            justify-content: center;
            align-items: center;
            font-size: 50px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="slider-page">
            <div class="scroll-wrapper">
                <div class="slider-item">
                    <div class="inner">Page1</div>
                </div>
                <div class="slider-item">
                    <div class="inner">Page2</div>
                </div>
                <div class="slider-item">
                    <div class="inner">Page3</div>
                </div>
                <div class="slider-item">
                    <div class="inner">Page4</div>
                </div>
            </div>
        </div>
    </div>

    <script>
        //oSlidePage 最大的页面盒子
        //oScrollWrapper内部的盒子总宽
        // oSliderItems 每个小盒子
        // pageWith 页面宽度
        const oSlidePage = document.querySelector('.slider-page'),
            oScrollWrapper = oSlidePage.querySelector('.scroll-wrapper'),
            oSliderItems = oScrollWrapper.querySelectorAll('.slider-item'),
            pageWith = oSlidePage.offsetWidth;
        console.log('当前视口的宽度', pageWith);

        // 移动端事件  touchstart  touchmove touchend
        let startX = 0,
            pageIndex = 0,
            distanceX = 0
        isMove = false;

        //初始化
        const init = () => {
            bindEvent()
        }

        function bindEvent() {
            oScrollWrapper.addEventListener('touchstart', handleTouchStart, false)
            oScrollWrapper.addEventListener('touchmove', handleTouchMove, false)
            oScrollWrapper.addEventListener('touchend', handleTouchEnd, false)
        }
        //按下
        function handleTouchStart(e) {
            startX = e.touches[0].clientX;
            console.log(startX);

        }
        //按下移动
        function handleTouchMove(e) {
            const moveX = e.touches[0].clientX;
            // console.log(moveX);
            const movedDistance = Math.abs(moveX - startX); // 计算移动的距离
            console.log(movedDistance);
            
            // 如果移动的距离小于80，不进行更新位置的操作
            if (movedDistance < 80) {
                return;
            }

            //如果 moveX 大于 startX 就是往右滑动 并且页数为0 就不行 ,或者 moveX 小于 startX 并且页数是最后一页页不行
            if ((moveX > startX && pageIndex === 0) ||
                (moveX < startX && pageIndex === oSliderItems.length - 1)) {
                return
            }
            distanceX = moveX - startX;
            setTranslateX(-pageWith * pageIndex + distanceX)
            isMove = true;
        }
        //松开
        function handleTouchEnd() {
            if (isMove) {
                if (Math.abs(distanceX) >= pageWith / 3) {
                    if (distanceX > 0) {
                        pageIndex--;
                    }
                    if (distanceX < 0) {
                        pageIndex++;
                    }
                }
                setTranslateX(- pageIndex * pageWith)
            }

            startX = 0;
            distanceX = 0;
            isMove = false
        }

        function setTranslateX(tranX) {
            oScrollWrapper.style.transition = 'all .1s'
            oScrollWrapper.style.transform = `translate(${tranX}px)`
        }

        init()
    </script>
</body>

</html>