uni-app+uView如何轮播图滑动时改变背景颜色和导航栏颜色
首先,页面的组成分为三部分:
自定义
页面背景
轮播图
大致如下(看重点,不要照抄)
对应的,我们需要初始化一下
data() {return {navBackground: {backgroundColor: '#fff'},bgColor: '#fff',swiperList: [{image: 'xxx',bgColor: '#000'}// 这只是个结构的示意,实际上这里留空也行]}
}
css部分
/* 这里我自己需要,所以用了伪类,只看var部分即可 */
.header-warp::after {background-color: var(--bg-color);
}
这样基本上就完成了,
我们来看一下逻辑,
上边实际就是一个自定义的导航u-,一个包裹着轮播图的背景和轮播图自己;
当轮播图的时候,触发
通过获取到的轮播的index,取出来后端传来的背景色,再分别赋值给导航栏和轮播图的背景
changeSwiper(index) {let bgColor = this.swiperList[index]['bgColor'];this.bgColor = bgColor;this.navBackground = { backgroundColor: bgColor };
}
来看看最终的效果:
实际上如果你没用uView,甚至也不是uni-app,只要你是vue开发的
这逻辑都适用,主要就是一个css的传值,解决这个就都好办。