如何将Swiper进度条拆分为类似Instagram故事的分段模块？

核心逻辑是独立维护已访问页码的状态集合，不依赖轮播组件默认的激活态逻辑，具体实现如下：

实现步骤 #

• 声明两个状态：当前激活页码 currentIndex（默认值为0）、已访问页码集合 visitedIndexes（推荐用 Set 结构存储，天然支持去重）
• 监听轮播滑动/切换事件，每次切换完成后，将当前页码写入 visitedIndexes 集合
• 自定义分页器 dot 渲染逻辑，对每个dot的样式做三层判断：
  1. 对应页码等于currentIndex：使用当前激活态样式
  2. 对应页码存在于visitedIndexes：使用已访问填充样式
  3. 其余情况：使用未访问空心样式
• 若支持点击dot跳转，跳转完成后同样要将目标页码写入visitedIndexes集合

代码示例（基于 Swiper 轮播库，自定义逻辑可通用到所有实现） #

import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/pagination';
import { useState } from 'react';

const StorySlider = () => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [visitedIndexes, setVisitedIndexes] = useState(new Set([0])); // 初始第一页默认已访问

  // 滑动切换完成回调
  const handleSlideChange = (swiper) => {
    const newIndex = swiper.activeIndex;
    setCurrentIndex(newIndex);
    // 更新已访问集合，必须返回新Set实例触发React重渲染
    setVisitedIndexes(prev => new Set(prev).add(newIndex));
  };

  return (
    <Swiper
      modules={[Pagination]}
      onSlideChange={handleSlideChange}
      pagination={{
        clickable: true,
        // 自定义分页器dot渲染
        renderBullet: (index, className) => {
          let dotClass = className;
          if (index === currentIndex) {
            dotClass += ' active-dot'; // 当前激活样式，可自定义宽度/高亮色
          } else if (visitedIndexes.has(index)) {
            dotClass += ' visited-dot'; // 已访问样式，填充为灰色/主题色
          } else {
            dotClass += ' unvisited-dot'; // 未访问样式，空心/浅灰色
          }
          return `<span class="${dotClass}"></span>`;
        }
      }}
    >
      <SwiperSlide>故事1</SwiperSlide>
      <SwiperSlide>故事2</SwiperSlide>
      <SwiperSlide>故事3</SwiperSlide>
      <SwiperSlide>故事4</SwiperSlide>
    </Swiper>
  );
};

export default StorySlider;

配套样式参考（可根据需求调整）：

.active-dot { background: #fff; width: 12px; }
.visited-dot { background: rgba(255,255,255,0.6); }
.unvisited-dot { background: rgba(255,255,255,0.3); }
.swiper-pagination-bullet { margin: 0 2px; height: 4px; border-radius: 2px; transition: all 0.2s; }

可选优化 #

• 需刷新页面保留已访问状态的场景，可将 visitedIndexes 序列化后存入 localStorage，组件初始化时读取恢复
• 故事全部播放完需要重置的场景，直接调用 setVisitedIndexes(new Set([0])) 即可清空历史记录
• 若不使用第三方轮播库纯手写，逻辑完全一致，只需要在自己的页码切换回调中更新 visitedIndexes 即可

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