结构
<swiper>
<swiper-slide>
...
</swiper-slide>
<div slot="pagination" class="swiper-pagination"></div>
</swiper>
样式
.大盒子类名 >>> .swiper-pagination-bullet,
.swiper-pagination-bullet-active {
width: pxToRem(10);
height: pxToRem(3);
background: #ccc;
border-radius: pxToRem(15);
}
.swiper-pagination >>> .swiper-pagination-bullet-active {
background: #fff !important;
}
script
data(){
return{
swiperOptions: {
...
pagination: {
el: '.swiper-pagination',
clickable: true,
},
},
}
}
注意:
我的是因为用的scss,可以用>>>,可能会存在兼容性问题。