Vue项目中使用Swiper自定义分页器样式

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/ 操作符取而代之——这是一个 >>> 的别名，同样可以正常工作。