手机触摸js左右滑动

基础概念

手机触摸JS左右滑动是一种常见的交互方式，用于在移动设备上实现页面或元素的平滑滚动效果。这种交互通常通过监听触摸事件（如touchstart、touchmove和touchend）来实现。

类型

水平滑动：元素沿水平方向滑动。
垂直滑动：元素沿垂直方向滑动。
自由滑动：元素可以沿任意方向滑动。

应用场景

图片轮播：在图片展示应用中，用户可以通过左右滑动切换图片。
列表滚动：在长列表中，用户可以通过滑动快速浏览内容。
页面导航：在单页应用（SPA）中，用户可以通过滑动切换页面。

示例代码

以下是一个简单的JavaScript示例，展示如何实现水平滑动效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Touch Slider</title>
    <style>
        .slider {
            width: 100%;
            overflow: hidden;
            position: relative;
        }
        .slider-container {
            display: flex;
            transition: transform 0.3s ease-in-out;
        }
        .slider-item {
            min-width: 100%;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="slider" id="slider">
        <div class="slider-container" id="sliderContainer">
            <div class="slider-item">Slide 1</div>
            <div class="slider-item">Slide 2</div>
            <div class="slider-item">Slide 3</div>
        </div>
    </div>

    <script>
        const sliderContainer = document.getElementById('sliderContainer');
        let startX = 0;
        let currentTranslate = 0;
        let prevTranslate = 0;
        let animationID = 0;
        let currentIndex = 0;

        sliderContainer.addEventListener('touchstart', touchStart);
        sliderContainer.addEventListener('touchmove', touchMove);
        sliderContainer.addEventListener('touchend', touchEnd);

        function touchStart(event) {
            startX = event.touches[0].clientX;
            cancelAnimationFrame(animationID);
        }

        function touchMove(event) {
            const currentX = event.touches[0].clientX;
            currentTranslate = prevTranslate + currentX - startX;
        }

        function touchEnd() {
            const movedBy = currentTranslate - prevTranslate;

            if (movedBy < -100 && currentIndex < 2) currentIndex += 1;
            if (movedBy > 100 && currentIndex > 0) currentIndex -= 1;

            setSliderPosition();
        }

        function setSliderPosition() {
            currentTranslate = currentIndex * -window.innerWidth;
            prevTranslate = currentTranslate;
            sliderContainer.style.transform = `translateX(${currentTranslate}px)`;
            animationID = requestAnimationFrame(setSliderPosition);
        }
    </script>
</body>
</html>

可能遇到的问题及解决方法

滑动不流畅：
- 原因：可能是由于频繁的重绘和回流导致的性能问题。
- 解决方法：使用transform属性进行位移，因为它不会触发重绘和回流，性能更好。

滑动距离计算不准确：
- 原因：可能是由于触摸事件的坐标获取不准确。
- 解决方法：确保在touchstart和touchmove事件中正确获取触摸点的坐标，并进行适当的计算。
滑动方向判断错误：
- 原因：可能是由于滑动距离的计算或判断逻辑有误。
- 解决方法：仔细检查滑动距离的计算公式和方向判断逻辑，确保其正确性。

通过以上方法，可以有效实现并优化手机触摸JS左右滑动效果。

页面内容是否对你有帮助？

有帮助

没帮助