vue-awesome-swiper修改轮播图pagination的颜色

Jacky-Summer

于 2019-12-25 09:48:26 发布

阅读量2.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：插件系列

本文链接：https://blog.youkuaiyun.com/lxjstudyIT/article/details/103693661

插件系列专栏收录该内容

2 篇文章

订阅专栏

在Vue项目中使用vue-awsome-swiper组件时，遇到默认pagination颜色不可改的问题。由于scoped属性，swiper生成的pagination DOM未包含自定义样式。解决方法是全局引入或使用Vue的深度选择器修改pagination的样式，从而实现分页颜色的定制。最终成功展示了自定义颜色的分页效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用vue-awsome-swiper轮播图的时候，pagination处于当前选中状态默认是蓝色，但通过修改这个类并无法改变其背景颜色

<div class="wrapper">
    <swiper :options="swiperOption">
        <swiper-slide v-for="(item, index) of swiperList" :key="index">
            <img class="swiper-img" :src="item.imgUrl">
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
</div>

原因是为style设置了scoped以后，swiper分页样式就失效了。分页是在mounted里创建的，此时创建的DOM，vue不会帮swiper的pagination加上scoped自定义属性。

解决办法：

.wrapper >>> .swiper-pagination-bullet-active
    background: #ff0

.wrapper >>> .swiper-pagination-bullet-active
表示的是在wrapper下所有出现.swiper-pagination-bullet-active

效果如下：