本文介绍如何在 Swiper 中动态为分页按钮添加 completed 类，使其根据当前滑动位置自动标识已浏览的步骤，提升用户对流程进度的感知。

本文介绍如何在 swiper 中动态为分页按钮添加 completed 类，使其根据当前滑动位置自动标识已浏览的步骤，提升用户对流程进度的感知。

Swiper 原生的 pagination 组件仅提供当前激活项（.swiper-pagination-bullet-active）的高亮，但实际业务中（例如维修计算器多步表单、产品配置向导等场景），常需视觉化呈现「已走过的步骤」——即让当前页及之前所有页的分页点显示为「已完成」状态。这无法通过默认配置实现，需借助 Swiper 的生命周期事件进行手动控制。

核心思路是监听 slideChange 事件，在每次切换后遍历所有分页元素（span），根据当前 activeIndex 动态增删自定义类名（如 completed）。以下是完整可运行的实现：

var swiper = new Swiper(".repair-calc_slider", {
  navigation: {
    nextEl: ".repair-calc-next",
    prevEl: ".repair-calc-prev",
  },
  pagination: {
    el: ".repair-calc-pagination",
    clickable: true,
    renderBullet: function (index, className) {
      return '<span class="' + className + '">' + (index + 1) + "</span>";
    },
  },
  on: {
    slideChange: function () {
      const activeIndex = this.activeIndex;
      const bullets = document.querySelectorAll('.repair-calc-pagination span');

      bullets.forEach((bullet, index) => {
        if (index <p>? <strong>关键说明与注意事项：</strong>  </p>

• ✅ slideChange 是最合适的钩子：它在滑动结束、activeIndex 更新后触发，确保状态同步准确；避免使用 slideChangeTransitionStart（此时索引尚未更新）或 transitionEnd（可能因动画延迟导致闪烁）。
• ✅ querySelectorAll 需确保 .repair-calc-pagination span 精确匹配你渲染出的分页项（注意 renderBullet 返回的是 ，而非默认的 ）。
• ⚠️ 若分页容器存在异步渲染或 DOM 动态重绘（如 Vue/React 中），建议将 bullets 查询逻辑移入事件回调内部，避免缓存失效。
• ? 样式示例（供参考）：

  .repair-calc-pagination .completed {
    opacity: 0.8;
    background-color: #4CAF50;
  }
  .repair-calc-pagination .swiper-pagination-bullet-active {
    background-color: #2196F3;
  }

该方案轻量、兼容性强，无需修改 Swiper 源码或引入额外依赖，即可实现专业级的进度可视化体验。