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小圆点默认样式改变
开发过程中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);
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue实现点击出现操作弹出框的示例，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-11-11
这篇文章主要介绍了vue+element项目中过滤输入框特殊字符小结，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08
详解如何在Vue3+TS的项目中使用NProgress进度条
本文主要介绍了详解如何在Vue3+TS的项目中使用NProgress进度条，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
本文主要介绍了VUE引入使用G2图表的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了vite+ts快速搭建vue3项目以及介绍相关特性，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
这篇文章主要介绍了Vuex中mutations的用法及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
这篇文章主要给大家介绍了关于vue3.0 sfc中setup变化的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2021-10-10
这篇文章主要介绍了Vue项目如何部署到Tomcat服务器上,Vue中自带webpack,可以通过一行命令将项目打包,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-03-03
这篇文章主要介绍了vue 扩展现有组件的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了vue实现点击关注后及时更新列表功能，本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
最新评论