当你在vue中使用swiper时,你会发现,你直接修改swiper里面的样式,是修改不成功的。
原因:
vue文件中的template,和style 都会经过vue-loader的编译。在style标签上使用了 scoped 属性的话,template中手写的元素和style之间会通过vue-loader生成的一个自定义属性,形成呼应关系,style只对对应的template起作用。编译过程中由swiper 生成的分页器标签不会经过vue-loader的编译,所以选不到。
解决方法:
方法一:样式穿透
<style lang="scss" scoped>
::v-deep .swiper-pagination-bullet {
width: 6px;
height: 6px;
background-color: #FFFFFF;
opacity: 1;
}
::v-deep .swiper-pagination-bullet-active {
width: 14px;
height: 6px;
border-radius: 3px;
opacity: 1;
background-color: #FFFFFF;
}
</style>
方法二:在<style lang="scss" scoped></style>下面再写一个<style></style>不加scoped
<style>
.swiper-pagination-bullet {
width: 6px;
height: 6px;
background-color: #FFFFFF;
opacity: 1;
}
.swiper-pagination-bullet-active {
width: 14px;
height: 6px;
border-radius: 3px;
opacity: 1;
background-color: #FFFFFF;
}
</style>
修改样式之前:
修改样式之后:
我就是把分页的样式修改了一下。