在使用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
效果如下:
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。