swiper轮播图小圆点动态改变样式

原创已于 2022-11-16 14:26:26 修改 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #vue.js #前端

于 2022-11-16 14:22:29 首次发布

本文介绍了如何在Vue项目中使用Swiper组件，并实现分页小圆点的颜色根据外部传入参数动态变化。通过在data中初始化颜色变量，结合methods中的方法改变颜色，并在样式中使用变量绑定来设置小圆点的背景颜色，从而达到自定义效果。

1 创建轮播

data() {
  return {
  //初始化设置小圆点的颜色
    myBulletActive: '#1C9FE8'
   };
},
methods:{
	//外界传过来的颜色变化
	this.myBulletActive = xxx(颜色变化的变量)
	var mySwiper = new Swiper('.swiper',{
	//分页
	pagination: {
	    el: '.swiper-pagination',
	    //设置小圆点点击的样式
	    bulletActiveClass: 'my-bullet-active'
	  },
	})
}
<style lang="less" scoped>
	//作为变量去接收的数据
	::v-deep .my-bullet-active {
	    background-color: v-bind(myBulletActive);
	    opacity: 1;
	}
</style>