vue中修改swiper的分页器样式（当前引用的组件有效） 在原来的基础上修改分页器样式

 

// 分页器
pagination: {
  el: ".swiper-pagination2",
  // clickable设置为true时，点击分页器的指示点分页器会控制Swiper切换
  clickable :true,
  //修改分页器样式 ,
  bulletClass : 'my-swiper-pagination-bullet',
  //激活样式
  bulletActiveClass: 'my-bullet-active',
},

 

<style type="text/css">
  .my-bullet-active{
    background: #ffffff;
    background: rgba(255,255,255,.5)!important;
    /*opacity: 0.6;*/
  }
  .my-swiper-pagination-bullet{
    width: 20px;
    height: 20px;
    display: inline-block;
    border-radius: 100%;
    background:  rgba(255,255,255,.1);
    margin-bottom: 30px!important;
    margin-right: 10px!important;
    margin-left: 10px !important;
  }

</style>

说明：这段代码必须放在单独一个css文件里面，或者无scoped的sytle标签中

因为使用my-swiper-pagination-bullet替代swiper-pagination-bullet，所以有些样式是必须的

display: inline-block; border-radius: 100%;

因为swiper源码中使用opacity的来显示颜色

我就使用background: rgba(255,255,255,.5)!important;替代，而且不加!importan会无效