vue项目中,实现轮播切换,背景色切换
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/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;
这样,一个完美的轮播切换,背景色动态切换的功能就实现了。
希望大佬如果有更好的实现方式,在下面评论。




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 年前
更多推荐
所有评论(0)