vue修改swiper框架輪播圖小圓點(diǎn)的樣式不起作用的解決
更新時(shí)間：2022年04月29日 09:32:11 作者：愛解決-坑
這篇文章主要介紹了vue修改swiper框架輪播圖小圓點(diǎn)的樣式不起作用的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
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);
}以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue-cli 是 vue.js 的腳手架工具，可以幫助我們編寫基礎(chǔ)代碼、快速搭建開發(fā)環(huán)境。下面這篇文章主要給大家介紹了關(guān)于vue-cli初始化項(xiàng)目中使用less的相關(guān)資料，需要的朋友可以參考借鑒，下面隨著小編來一起看看吧2018-08-08
這篇文章主要給大家分享了 vue中install方法介紹，vue提供install可供我們開發(fā)新的插件及全局注冊(cè)組件等，感興趣的小伙伴請(qǐng)和小編一起進(jìn)入文章了解具體內(nèi)容吧2021-11-11
vue3.x源碼剖析之?dāng)?shù)據(jù)響應(yīng)式的深入講解
這篇文章主要給大家介紹了關(guān)于vue3.x源碼剖析之?dāng)?shù)據(jù)響應(yīng)式的相關(guān)資料,在講解過程中,我們會(huì)對(duì)比Vue2.x的API特性,使用有哪些區(qū)別,需要的朋友可以參考下2022-01-01
vue實(shí)現(xiàn)可以快進(jìn)后退的跑馬燈組件
這篇文章主要為大家詳細(xì)介紹了vue編寫一個(gè)可以快進(jìn)后退的跑馬燈組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue如何實(shí)現(xiàn)跨頁面?zhèn)鬟f與接收數(shù)組并賦值
這篇文章主要介紹了vue如何實(shí)現(xiàn)跨頁面?zhèn)鬟f與接收數(shù)組并賦值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue中原生template標(biāo)簽失效如何解決，找了整一天也沒找著這事件為什么觸發(fā)不了，第二天意識(shí)到原生代碼里的template可能有問題，在原生環(huán)境中template標(biāo)簽內(nèi)部的東西是不會(huì)渲染出來的，雖然解析器在加載頁面的時(shí)候確實(shí)會(huì)處理這部分代碼片段2023-02-02
vue中使用js-xlsx導(dǎo)出excel的實(shí)現(xiàn)方法
本文主要介紹了vue中使用js-xlsx導(dǎo)出excel的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
vue-cli結(jié)合Element-ui基于cropper.js封裝vue實(shí)現(xiàn)圖片裁剪組件功能
這篇文章主要介紹了vue-cli結(jié)合Element-ui基于cropper.js封裝vue實(shí)現(xiàn)圖片裁剪組件功能,本文圖文并茂給大家介紹的非常詳細(xì)，需要的朋友可以參考下2018-03-03
vue項(xiàng)目中仿element-ui彈框效果的實(shí)例代碼
這篇文章主要介紹了vue項(xiàng)目中仿element-ui彈框效果的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了vue-router 路由傳參用法,結(jié)合實(shí)例形式分析了vue-router 路由傳參基本使用方法及操作注意事項(xiàng),需要的朋友可以參考下2020-03-03