js实现滑动换页

实现滑动换页的基本思路

滑动换页通常通过监听触摸事件（touchstart、touchmove、touchend）或鼠标事件（mousedown、mousemove、mouseup）来实现。核心逻辑包括计算滑动距离、判断滑动方向以及触发页面切换。

监听触摸事件

let startX, moveX;
const container = document.getElementById('slider-container');

container.addEventListener('touchstart', (e) => {
    startX = e.touches[0].clientX;
});

container.addEventListener('touchmove', (e) => {
    moveX = e.touches[0].clientX;
    e.preventDefault(); // 阻止默认滚动行为
});

container.addEventListener('touchend', () => {
    const diffX = moveX - startX;
    if (Math.abs(diffX) > 50) { // 滑动阈值
        if (diffX > 0) {
            // 向右滑动，切换到上一页
            goToPrevPage();
        } else {
            // 向左滑动，切换到下一页
            goToNextPage();
        }
    }
});

监听鼠标事件

let isDragging = false;
let startX, moveX;

container.addEventListener('mousedown', (e) => {
    isDragging = true;
    startX = e.clientX;
});

container.addEventListener('mousemove', (e) => {
    if (!isDragging) return;
    moveX = e.clientX;
});

container.addEventListener('mouseup', () => {
    if (!isDragging) return;
    isDragging = false;
    const diffX = moveX - startX;
    if (Math.abs(diffX) > 50) {
        if (diffX > 0) {
            goToPrevPage();
        } else {
            goToNextPage();
        }
    }
});

页面切换逻辑

let currentPage = 0;
const pages = document.querySelectorAll('.page');
const totalPages = pages.length;

function goToPrevPage() {
    if (currentPage > 0) {
        currentPage--;
        updatePagePosition();
    }
}

function goToNextPage() {
    if (currentPage < totalPages - 1) {
        currentPage++;
        updatePagePosition();
    }
}

function updatePagePosition() {
    pages.forEach((page, index) => {
        page.style.transform = `translateX(${(index - currentPage) * 100}%)`;
    });
}

CSS 样式

#slider-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.page {
    width: 100%;
    height: 100%;
    position: absolute;
    transition: transform 0.3s ease;
}

平滑动画效果

通过 CSS 的 transition 属性实现平滑的滑动动画。调整 transition 的时间和缓动函数可以优化用户体验。

.page {
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

响应式设计

确保滑动换页在不同设备上都能正常工作，可以通过媒体查询调整滑动阈值或页面布局。

@media (max-width: 768px) {
    .page {
        transition: transform 0.2s ease;
    }
}

性能优化

避免频繁的重绘和回流，使用 transform 而不是 left 或 margin 来移动页面。同时，可以在滑动结束时才触发页面切换，减少不必要的计算。

container.addEventListener('touchend', () => {
    if (Math.abs(diffX) > 50) {
        requestAnimationFrame(() => {
            if (diffX > 0) goToPrevPage();
            else goToNextPage();
        });
    }
});