DreamLife_HomePage/javascape/switch_interface.js

const Panel_left = document.getElementById('leftPanel');
const Panel_right = document.getElementById('rightPanel');

// 触摸滑动相关变量
let startX = 0;
let isSwiping = false;

// 判断是否为移动端
function isMobile() {
    return window.innerWidth<= 800;
}

// 切换面板函数
function switchPanel() {
    if (!Panel_left || !Panel_right) return;
    if (!isMobile()) return;

    const leftDisplay = window.getComputedStyle(Panel_left).display;
    const isLeftVisible = leftDisplay !== 'none';

    if (isLeftVisible) {
        // 从左侧切换到右侧
        Panel_left.style.transform = 'translateX(-100%)';
        Panel_right.style.display = 'flex';
        Panel_right.style.transform = 'translateX(100%)';
        
        setTimeout(() => {
            Panel_right.style.transform = 'translateX(0)';
        }, 50);
        
        setTimeout(() => {
            Panel_left.style.display = 'none';
            Panel_left.style.transform = 'translateX(0)';
        }, 300);
    } else {
        // 从右侧切换到左侧
        Panel_right.style.transform = 'translateX(100%)';
        Panel_left.style.display = 'flex';
        Panel_left.style.transform = 'translateX(-100%)';
        
        setTimeout(() => {
            Panel_left.style.transform = 'translateX(0)';
        }, 50);
        
        setTimeout(() => {
            Panel_right.style.display = 'none';
            Panel_right.style.transform = 'translateX(0)';
        }, 300);
    }
}

// 绑定触摸事件
function bindTouchEvents() {
    if (!Panel_left || !Panel_right) return;

    // 为左右面板都添加触摸事件
    const panels = [Panel_left, Panel_right];
    
    panels.forEach(panel => {
        panel.addEventListener('touchstart', handleTouchStart, { passive: true });
        panel.addEventListener('touchmove', handleTouchMove, { passive: false });
        panel.addEventListener('touchend', handleTouchEnd);
    });
}

// 处理触摸开始
function handleTouchStart(e) {
    if (!isMobile()) return;
    startX = e.touches[0].clientX;
    isSwiping = false;
}

// 处理触摸移动
function handleTouchMove(e) {
    if (!isMobile() || !startX) return;
    
    const currentX = e.touches[0].clientX;
    const diffX = currentX - startX;
    
    // 判断是否为滑动操作
    if (Math.abs(diffX) > 30) {
        isSwiping = true;
        e.preventDefault(); // 阻止页面滚动
    }
}

// 处理触摸结束
function handleTouchEnd(e) {
    if (!isMobile() || !isSwiping || !startX) return;
    
    const endX = e.changedTouches[0].clientX;
    const diffX = endX - startX;
    
    // 判断滑动方向
    if (Math.abs(diffX) > 50) {
        if (diffX > 0) {
            // 向右滑动，显示左侧面板
            const leftDisplay = window.getComputedStyle(Panel_left).display;
            if (leftDisplay === 'none') {
                switchPanel();
            }
        } else {
            // 向左滑动，显示右侧面板
            const leftDisplay = window.getComputedStyle(Panel_left).display;
            if (leftDisplay !== 'none') {
                switchPanel();
            }
        }
    }
    
    startX = 0;
    isSwiping = false;
}

// 页面加载完成后初始化
window.addEventListener('DOMContentLoaded', () => {
    bindTouchEvents();
});