vue如何使用swiper插件修改左右箭頭的默認(rèn)樣式
使用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中手寫(xiě)的元素和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>下面再寫(xiě)一個(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)文章
由于添加門(mén)店時(shí)，需要選擇門(mén)店的省、市、區(qū)、詳細(xì)地址、以及門(mén)店的經(jīng)緯度信息，本文給大家分享Vue集成百度地圖實(shí)現(xiàn)位置選擇功能，感興趣的朋友一起看看吧2022-06-06
vue.js國(guó)際化 vue-i18n插件的使用詳解
本篇文章主要介紹了vue.js國(guó)際化 vue-i18n插件的使用詳解，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
本文主要介紹了vue3整合springboot打完整jar包,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-09-09
Vue 讀取HTMLCollection列表的length為0問(wèn)題
這篇文章主要介紹了Vue 讀取HTMLCollection列表的length為0問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
axios是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，下面這篇文章主要給大家介紹了關(guān)于vue.js簡(jiǎn)單配置axios的相關(guān)資料，需要的朋友們可以參考借鑒，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
Vue中ref、computed與reactive使用頻率現(xiàn)象分析(示例詳解)
這篇文章主要分析了Vue中的ref、computed和reactive三個(gè)響應(yīng)式API的使用頻率和優(yōu)勢(shì),ref適合處理簡(jiǎn)單數(shù)據(jù)類型的響應(yīng)式需求,感興趣的朋友跟隨小編一起看看吧2024-11-11
vue $nextTick實(shí)現(xiàn)原理深入詳解
這篇文章主要介紹了vue $nextTick實(shí)現(xiàn)原理深入詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
vue2導(dǎo)航根據(jù)路由傳值,而改變導(dǎo)航內(nèi)容的實(shí)例
下面小編就為大家?guī)?lái)一篇vue2導(dǎo)航根據(jù)路由傳值,而改變導(dǎo)航內(nèi)容的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
解決element-ui的el-select選擇器的@blur事件失效的坑
這篇文章主要介紹了解決element-ui的el-select選擇器的@blur事件失效的坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue?router權(quán)限管理實(shí)現(xiàn)不同角色顯示不同路由
本文主要介紹了vue?router權(quán)限管理實(shí)現(xiàn)不同角色顯示不同路由，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03