欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue如何使用swiper插件修改左右箭頭的默認樣式

 更新時間：2023年01月14日 11:05:33   作者：土生土長的IU  
這篇文章主要介紹了vue如何使用swiper插件修改左右箭頭的默認樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

使用swiper插件修改左右箭頭的默認樣式

效果圖

修改箭頭的背景，以及顏色

.swiper-button-prev, .swiper-button-next{
    color: #fff;
    background: #5e5f5e;
}

修改箭頭的大小

.swiper-button-prev:after, .swiper-button-next:after {
    font-size: 14px;
}

vue中修改swiper樣式問題

當你在vue中使用swiper時，你會發(fā)現(xiàn)，你直接修改swiper里面的樣式，是修改不成功的。

原因

vue文件中的template，和style 都會經(jīng)過vue-loader的編譯。

在style標簽上使用了 scoped 屬性的話，template中手寫的元素和style之間會通過vue-loader生成的一個自定義屬性，形成呼應關系，style只對對應的template起作用。

編譯過程中由swiper 生成的分頁器標簽不會經(jīng)過vue-loader的編譯，所以選不到。

解決方法

方法一：樣式穿透

<style lang="scss" scoped>
    ::v-deep .swiper-pagination-bullet {
      width: 6px;
      height: 6px;
      background-color: #FFFFFF;
      opacity: 1;
 
    }
    ::v-deep .swiper-pagination-bullet-active {
      width: 14px;
      height: 6px;
      border-radius: 3px;
      opacity: 1;
      background-color: #FFFFFF;
    }
</style>

方法二：在<style lang="scss" scoped></style>下面再寫一個<style></style>不加scoped

<style>
.swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  background-color: #FFFFFF;
  opacity: 1;
 
}
.swiper-pagination-bullet-active {
  width: 14px;
  height: 6px;
  border-radius: 3px;
  opacity: 1;
  background-color: #FFFFFF;
}
</style>

修改樣式之前：

修改樣式之后：

我就是把分頁的樣式修改了一下。

總結

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關文章

最新評論