vue修改swiper框架輪播圖小圓點(diǎn)的樣式不起作用怎么解決

今天小編給大家分享一下vue修改swiper框架輪播圖小圓點(diǎn)的樣式不起作用怎么解決的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

swiper框架輪播圖小圓點(diǎn)樣式不起作用

不要加 scoped

下面是錯(cuò)誤寫法

<style  scoped>
 .swiper-pagination-bullet-active {
    background: white;
  }
</style>

正確寫法

<style >
 .swiper-pagination-bullet-active {
    background: white;
  }
  </style>

swiper小圓點(diǎn)默認(rèn)樣式改變

開發(fā)過程中swiper樣式不喜歡，想要修改小圓點(diǎn)樣式，拿到swiper下的小圓點(diǎn)進(jìn)行修改，去設(shè)置想要的顏色，點(diǎn)與點(diǎn)之間的間距等等一系列樣式

/* 圓點(diǎn)的樣式 */
swiper .wx-swiper-dot {
  width: 35rpx;
  height: 7rpx;
  border-radius: 50%;
  display: inline-flex;
  margin-left: 19rpx;
  justify-content: space-between;
}
swiper .wx-swiper-dot::before {
  content: '';
  flex-grow: 1;
  background: #fff;
  border-radius: 50%;
}
swiper .wx-swiper-dot-active::before {
  background: rgba(255, 255, 255, .8);
}

以上就是“vue修改swiper框架輪播圖小圓點(diǎn)的樣式不起作用怎么解決”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請關(guān)注億速云行業(yè)資訊頻道。