轮播变化背景图也一样替换不同的背景色

<template>
	<!-- 全局轮播子组件 -->
	<view class="banner-box">
		<!-- 背景色 -->
		<view class="banner-bg" :style="{'background-image': `url(${bannerBackgroundImage}), linear-gradient(${bannerBackground || '#345DC2'} 50%,#FFF)`}"></view>
			
			<!-- 轮播图 
			indicator-dots 指示点 
			indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#FFFFF"  指示点 颜色
			autoplay  是否自动切换 
			-->
			<swiper    class="banner-swipper" :indicator-dots="true" @change="swiperChange"  :current="current"  :autoplay="true" indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#FFFFF" :interval="3000" :duration="1000">
				<swiper-item class="swiper-item" v-for="(item,index ) in bannerList" :key="index">
					<image @click="navTo(item.advertUrl)" :src="item.imageUrl" ></image>
				</swiper-item >
			</swiper>
	</view>
</template>

	
<script>
	export default {
		props:{
			bannerList:{
				type:Array,
				default:()=>[{
					id:1,
					imageUrl:'/static/images/banner1.jpg',
					background:'#4532c',
					advertUrl:'',
					bannerBackground:'', //背景图片的 URL
				}]
			}
		},
		
		data(){
			return{
				current:0,//当恰尼所在滑块的index
				bannerBackgroundImage: '' //背景图片的URL
			}
		},
		
		// 第一次加载就执行此监听器  然后进入页面就渲染背景色的渐变
		watch:{  
			bannerList:{
				handler(newVal){
					if(newVal  && newVal.length > 0){
						//获取第一个元素中的背景色然后设置
						this.current =  0 
						//设置第一张背景色
						this.bannerBackground = this.bannerList[0]  && this.bannerList[0].background
						this.bannerBackgroundImage = this.bannerList[0] && this.bannerList[0].imageUrl;
					}
				},
				immediate:true  // 第一次加载就执行此监听器
			}
		},
		
		methods:{
			//监听器@change   
			swiperChange(e){  
				// e.detail.current  动态的获取他的index
				// console.log('e',e.detail.current)
				// 拿到他轮播图的索引值 然后在用颜色来切换
				this.current = e.detail.current
				//切换轮播图背景色
				this.bannerBackground = this.bannerList[this.current].background
				this.bannerBackgroundImage = this.bannerList[this.current].imageUrl;
				// console.log('banner',this.bannerBackground)
			}
		},
	}
</script>

<style lang="scss">
	.banner-box{
		padding-top:120rpx; 
		/* #ifdef APP-PLUS*/
		padding-top:calc(var(--status-bar-height) + 120rpx );
		/* #endif*/
		.banner-bg {
			position: absolute;
			top: 0;
			height: 470rpx;
			width: 100%;
			/* #ifdef APP-PLUS*/
			height: calc(var(--status-bar-height) + 470rpx );
			/* #endif*/
			// calc(var(--status-bar-height) + 470rpx )  只针对app-PLUS
			//背景颜色渐变效果 
			// background-image: linear-gradient(red 50%,#FFF) ;
			// 过度效果
			background-size: cover; /* 背景图片大小为 cover */
    		background-position: center; /* 背景图片位置居中 */
			transform: .5s;
		}
		.banner-swipper{
			width: 100%;
			height: 350rpx;
			.swiper-item{
				width: 100%;
				height: 100%;
				padding: 0 30rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius:15rpx;
				}
			}
		}
	}
</style>

组件使用
api 请求