查看“Widget:SwitchPage”的源代码

<noinclude> 
</noinclude><includeonly>
<div class="dot-navigation">
    <div class="dot active" data-page="1"></div>
    <div class="dot" data-page="2"></div>
    <div class="dot" data-page="3"></div>
    <div class="dot" data-page="4"></div>
    <div class="dot" data-page="5"></div>
</div>
<script>
// 当前页面索引
let currentPage = 1;
// 总页面数
const totalPages = 5;
// 是否正在滚动中
let isScrolling = false;
// BWiki 环境下的头部偏移量（如果需要可以调整）
const HEADER_OFFSET = 0;

// 检查是否为PC端
function isPCDevice() {
    return window.innerWidth > 768; // 通常768px是移动端和PC端的分界点
}

// 更新圆点导航的激活状态
function updateDotNavigation(pageNumber) {
    document.querySelectorAll('.dot').forEach(dot => {
        dot.classList.remove('active');
    });
    document.querySelector(`.dot[data-page="${pageNumber}"]`).classList.add('active');
}

// 滚动到指定页面
function scrollToPage(pageNumber) {
    if (!isPCDevice()) return; // 在移动端不执行滚动效果
    if (isScrolling) return;

    if (pageNumber < 1 || pageNumber > totalPages || pageNumber === currentPage) return;

    isScrolling = true;
    currentPage = pageNumber;

    // 更新圆点导航
    updateDotNavigation(currentPage);

    // 执行滚动
    if (currentPage === 1) {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    } else {
        const targetElement = document.getElementById(`page-${currentPage}`);
        if (targetElement) {
            const elementPosition = targetElement.getBoundingClientRect().top;
            const offsetPosition = elementPosition + window.pageYOffset - HEADER_OFFSET;

            window.scrollTo({
                top: offsetPosition,
                behavior: 'smooth'
            });
            console.log(`offsetPosition:${offsetPosition}`);
        }
    }

    setTimeout(() => {
        isScrolling = false;
    }, 100);
}

// 处理鼠标滚轮事件
document.addEventListener('wheel', (event) => {
    if (!isPCDevice()) return; // 在移动端不阻止默认滚动

    // 阻止默认的滚动行为
    event.preventDefault();

    // 获取滚动方向
    const direction = event.deltaY > 0 ? 1 : -1;

    // 计算目标页面
    let targetPage = currentPage + direction;

    // 确保页面索引在有效范围内
    if (targetPage < 1) targetPage = 1;
    if (targetPage > totalPages) targetPage = totalPages;

    scrollToPage(targetPage);
}, { passive: false });

// 处理圆点点击事件
document.querySelectorAll('.dot').forEach(dot => {
    dot.addEventListener('click', () => {
        if (!isPCDevice()) return; // 在移动端不执行点击效果
        const targetPage = parseInt(dot.getAttribute('data-page'));
        scrollToPage(targetPage);
    });
});

// 页面加载完成后，确保从顶部开始
window.addEventListener('load', () => {
    window.scrollTo(0, 0);
    currentPage = 1;
    updateDotNavigation(currentPage);
    // 处理返回顶部按钮点击事件
    document.querySelector('.to-top-button')?.addEventListener('click', () => {
        currentPage = 1;
        updateDotNavigation(currentPage);
        console.log(`currentPage:${currentPage}`);
    });
});



</script>
<style>
html {
    scroll-behavior: smooth;
}

/* 只在PC端禁用滚动 */
@media screen and (min-width: 769px) {
    body {
        overflow: hidden;
    }
}

.container {
    position: relative;
}
#page-1{
    min-height: calc(100vh - 80px);
}
.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 圆点导航样式 */
.dot-navigation {
    position: fixed;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px;
}

/* 在移动端隐藏圆点导航 */
@media screen and (max-width: 768px) {
    .dot-navigation {
        display: none;
    }
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(200, 200, 200, 0.3);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
    position: relative;
}

.dot:hover {
    background-color: rgba(255, 255, 255, 0.8);
    border-color: rgba(200, 200, 200, 0.5);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
    transform: scale(1.2);
}

.dot.active {
    background-color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 
        0 0 10px rgba(255, 255, 255, 0.4),
        0 0 20px rgba(255, 255, 255, 0.2);
    transform: scale(1.3);
}

.dot.active::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    animation: pulse 2s infinite;
    left: 0;
    top: 0;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }
    50% {
        transform: scale(2.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 0.5;
    }
}
</style>
</includeonly>