如何使用Swiper实现圆角进度条 现有代码无法正常生效求解

现有代码问题排查 #

• 分页类型配置错误：你当前配置了type: "custom"自定义分页类型，不会生成进度条对应的DOM结构，需要改为进度条专属类型progressbar
• CSS选择器匹配错误：你写的.swiper-pagination.swiper-pagination-progressbar-fill是匹配同时携带两个类的元素，实际.swiper-pagination是进度条容器，.swiper-pagination-progressbar-fill是它的子元素，二者是父子层级
• 缺少容器样式配置：仅给填充条设置圆角无效，需要给进度条容器同时设置圆角和overflow: hidden，避免填充条的圆角被容器裁切

修正后代码 #

JS代码 #

const swiper_news = new Swiper('.slider-news', {
        spaceBetween: 30,
        pagination: {
            el: '.swiper-pagination',
            type: "progressbar"
        }
    });

CSS代码 #

/* 进度条容器样式 */
.swiper-pagination.swiper-pagination-progressbar {
    border-radius:20px;
    overflow: hidden;
    /* 可自定义进度条背景色，例：background: #e5e5e5; */
}
/* 进度填充条样式 */
.swiper-pagination .swiper-pagination-progressbar-fill {
    border-radius:20px;
}

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