vue修改swiper框架輪播圖小圓點的樣式不起作用的解決
更新時間:2022年04月29日 09:32:11 作者:愛解決-坑
這篇文章主要介紹了vue修改swiper框架輪播圖小圓點的樣式不起作用的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
swiper框架輪播圖小圓點樣式不起作用
不要加 scoped
下面是錯誤寫法
<style ?scoped> ?.swiper-pagination-bullet-active { ? ? background: white; ? } </style>
正確寫法
<style > ?.swiper-pagination-bullet-active { ? ? background: white; ? } ? </style>
swiper小圓點默認樣式改變
開發(fā)過程中swiper樣式不喜歡,想要修改小圓點樣式,拿到swiper下的小圓點進行修改,去設置想要的顏色,點與點之間的間距等等一系列樣式
/* 圓點的樣式 */ 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); }
以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
vue3.x源碼剖析之數(shù)據(jù)響應式的深入講解
這篇文章主要給大家介紹了關于vue3.x源碼剖析之數(shù)據(jù)響應式的相關資料,在講解過程中,我們會對比Vue2.x的API特性,使用有哪些區(qū)別,需要的朋友可以參考下2022-01-01vue如何實現(xiàn)跨頁面?zhèn)鬟f與接收數(shù)組并賦值
這篇文章主要介紹了vue如何實現(xiàn)跨頁面?zhèn)鬟f與接收數(shù)組并賦值,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04vue中使用js-xlsx導出excel的實現(xiàn)方法
本文主要介紹了vue中使用js-xlsx導出excel的實現(xiàn)方法,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-02-02vue-cli結合Element-ui基于cropper.js封裝vue實現(xiàn)圖片裁剪組件功能
這篇文章主要介紹了vue-cli結合Element-ui基于cropper.js封裝vue實現(xiàn)圖片裁剪組件功能,本文圖文并茂給大家介紹的非常詳細,需要的朋友可以參考下2018-03-03