场景:轮播切换时,背景色切换为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;

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

GitHub 加速计划 / vu / vue
101
18
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
9e887079 [skip ci] 11 个月前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐