Vue项目中使用Swiper自定义分页器样式
可以直接设置css样式来实现
/*重置覆盖分页器的样式*/
/deep/ .swiper-pagination-bullet {
border-radius: 0;
width: 97px;
height: 6px;
background-color: #fff;
opacity: 1;
margin: 0 5px;
outline: none;
}
/*重置覆盖分页器激活时的样式表现*/
/deep/ .swiper-pagination-bullet-active {
background-color: #01763a;
}
.swiper-pagination-bullet
.swiper-pagination-bullet-active
这两个样式是swiper插件默认生成的pagination样式
说明
深度作用选择器 :如果你希望 scoped 样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用 >>> 操作符
有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 操作符取而代之——这是一个 >>> 的别名,同样可以正常工作。