vue项目中，实现轮播切换，背景色切换

场景：轮播切换时，背景色切换为banner图的主体色

思路：在banner图切换时触发的事件里动态绑定背景色
实现方法：在swiper里的配置项里添加onslideChange事件，在onslidechange下动态绑定背景色
话不多说，上代码：

bgColor:{
			 background: ""
		},
swiperOption1:{
			slidesPerView: 1,
			spaceBetween: 30,
			loop: true,
			observer: true,
			observeParents: true,
			lazy: {
			  loadPrevNext: true,
			},
			autoplay: {
				delay: 3000,
				disableOnInteraction: false,
			},
			on:{
				slideChange:function (e) {
					const i = this.realIndex;
					vm.bgColor.background = vm.swiperData[i].bgcolor;
				}
			},
			pagination: {
				el: '.swiper-pagination',
				clickable: true,
			},
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			}
		}

这样就实现了轮播切换的时候背景色跟着切换，然后给背景一个过渡

	transition: all 1s;

这样，一个完美的轮播切换，背景色动态切换的功能就实现了。
希望大佬如果有更好的实现方式，在下面评论。