亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue如何使用swiper插件修改左右箭頭的默認(rèn)樣式

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

使用swiper插件修改左右箭頭的默認(rèn)樣式

效果圖

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

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

修改箭頭的大小

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

vue中修改swiper樣式問(wèn)題

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

原因

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

在style標(biāo)簽上使用了 scoped 屬性的話，template中手寫的元素和style之間會(huì)通過(guò)vue-loader生成的一個(gè)自定義屬性，形成呼應(yīng)關(guān)系，style只對(duì)對(duì)應(yīng)的template起作用。

編譯過(guò)程中由swiper 生成的分頁(yè)器標(biāo)簽不會(huì)經(jīng)過(guò)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>下面再寫一個(gè)<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>

修改樣式之前：

修改樣式之后：

我就是把分頁(yè)的樣式修改了一下。

總結(jié)

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

相關(guān)文章

最新評(píng)論