Next.js+TypeScript中实现Swiper滑块对应导航栏高亮

我正在使用Next.js、TypeScript和Swiper，希望导航栏中当前显示的滑块/区块能够高亮显示。我已通过原生JavaScript实现该效果，但不清楚如何在TSX中实现。以下是我目前的代码：

import type { NextPage } from 'next'
import { Swiper, SwiperSlide } from "swiper/react";
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import "swiper/css";

import { Mousewheel } from "swiper";


const Home: NextPage = () => {
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <div className={styles.card}>
          <div className={styles.header}>
            <div className={styles.navbar}>
              <h2>Logo</h2>
              <ul className={styles.items}>
                <li>Home</li>
                <li>Foo</li>
                <li>Bar</li>
              </ul>
            </div>
          </div>
          <Swiper
            direction={"horizontal"}
            slidesPerView={1}
            mousewheel={true}
            modules={[Mousewheel]}
            className={styles.swiper}
          >
            <SwiperSlide id="home">Home</SwiperSlide>
            <SwiperSlide id="foo">Foo</SwiperSlide>
            <SwiperSlide id="bar">Bar</SwiperSlide>
          </Swiper>
        </div>
      </main>
    </>
  )
}

export default Home

实现步骤与修改后的代码 #

核心思路是通过状态跟踪当前活跃滑块，再动态给对应导航项添加高亮样式：

1. 引入useState管理当前活跃滑块ID
2. 给Swiper绑定切换事件，更新活跃ID
3. 给导航项添加动态类名，匹配活跃ID时应用高亮样式

修改后的完整代码：

import type { NextPage } from 'next'
import { Swiper, SwiperSlide } from "swiper/react";
import Head from 'next/head'
import { useState } from 'react'
import styles from '../styles/Home.module.css'
import "swiper/css";

import { Mousewheel } from "swiper";


const Home: NextPage = () => {
  // 跟踪当前活跃的滑块ID，初始值对应第一个滑块的id
  const [activeSlideId, setActiveSlideId] = useState<string>('home')

  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <div className={styles.card}>
          <div className={styles.header}>
            <div className={styles.navbar}>
              <h2>Logo</h2>
              <ul className={styles.items}>
                {/* 动态判断是否添加高亮类名 */}
                <li className={activeSlideId === 'home' ? styles.active : ''}>Home</li>
                <li className={activeSlideId === 'foo' ? styles.active : ''}>Foo</li>
                <li className={activeSlideId === 'bar' ? styles.active : ''}>Bar</li>
              </ul>
            </div>
          </div>
          <Swiper
            direction={"horizontal"}
            slidesPerView={1}
            mousewheel={true}
            modules={[Mousewheel]}
            className={styles.swiper}
            // 滑块切换时更新活跃ID
            onSlideChange={(swiper) => {
              const activeSlide = swiper.slides[swiper.activeIndex]
              if (activeSlide.id) {
                setActiveSlideId(activeSlide.id)
              }
            }}
            // 初始加载时触发，确保导航高亮正确
            onInit={(swiper) => {
              const initialSlide = swiper.slides[swiper.activeIndex]
              if (initialSlide.id) {
                setActiveSlideId(initialSlide.id)
              }
            }}
          >
            <SwiperSlide id="home">Home</SwiperSlide>
            <SwiperSlide id="foo">Foo</SwiperSlide>
            <SwiperSlide id="bar">Bar</SwiperSlide>
          </Swiper>
        </div>
      </main>
    </>
  )
}

export default Home

补充高亮样式（在Home.module.css中添加）：

.items li.active {
  color: #0070f3; /* 替换为你需要的高亮颜色 */
  font-weight: bold;
  border-bottom: 2px solid #0070f3;
}

关键逻辑说明 #

• useState存储当前显示的滑块ID，初始值与第一个滑块的id对应
• onSlideChange事件在滑块切换时触发，通过Swiper实例获取当前活跃滑块的id并更新状态
• onInit事件确保页面初始加载时，导航能正确匹配第一个滑块的高亮状态
• 导航项通过三元表达式动态添加active类名，实现高亮效果

内容的提问来源于stack exchange，提问作者b5NHAFXubret