本文介绍如何在 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 < activeIndex) {
bullet.classList.add('completed');
} else {
bullet.classList.remove('completed');
}
});
}
}
});? 关键说明与注意事项：
- ✅
slideChange是最合适的钩子：它在滑动结束、activeIndex更新后触发，确保状态同步准确；避免使用slideChangeTransitionStart（此时索引尚未更新）或transitionEnd（可能因动画延迟导致闪烁）。 - ✅
querySelectorAll需确保.repair-calc-pagination span精确匹配你渲染出的分页项（注意renderBullet返回的是<span></span>，而非默认的<span class="swiper-pagination-bullet"></span>）。 - ⚠️ 若分页容器存在异步渲染或 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 源码或引入额外依赖，即可实现专业级的进度可视化体验。
