swiper組件??next-margin屬性設(shè)置問(wèn)題，還有就是你的素材圖片要一樣大小哦

寬度減去左右內(nèi)邊距就好了

<template>
<view?class="banner-box">
<view?class="banner-bg"?:style="{'background-image':?`linear-gradient(${bannerBackground?||?'#345DC2'}?50%,?#FFF)`}"?></view>
<swiper?
class="banner-swipper"
indicator-dots?indicator-color="rgba(255,255,255,0.5)"?indicator-active-color="#FFFFFF"
autoplay?:interval="4000"?:current="current"?@change="swiperChange"
>
<swiper-item?class="swiper-item"?v-for="(item,index)?in?bannerList"?:key="index">
<image?:src="item.imageUrl"></image>
<div>{{item.background}}</div>
</swiper-item>
</swiper>
</view>
</template>

<script>
?
?
export?default?{
name:"jingBanner",
props:{
bannerList:{
type:?Array,
default:()=>[
{
id:1,
imageUrl:"../../static/images/it01.png",
background:'#009B8C',
advertUrl:"/pages/course/course-details"
},
{
id:2,
imageUrl:"../../static/images/it02.png",
background:'#6E3DE6',
advertUrl:"/pages/course/course-details"
},
{
id:3,
imageUrl:"../../static/images/it03.png",
background:'#0D81ED',
advertUrl:"/pages/course/course-details"
},
{
id:3,
imageUrl:"../../static/images/it04.png",
background:'#dda0dd',
advertUrl:"/pages/course/course-details"
},
]
},
},
?
data()?{
return?{
current:?0,//?當(dāng)前所在滑塊的index
bannerBackground:''?//背景色
};
},
methods:{
swiperChange(e){
this.current?=?e.detail.current;
this.bannerBackground?=?this.bannerList[this.current].background
console.log(e);
}
}
}
</script>

<style>
?
.banner-box{
?padding:?0?30rpx;
?padding-top:?120rpx;
.banner-bg{
position:?absolute;
top:?0;
left:?-30rpx;
width:?130%;
height:?470rpx;
transform:?.5s;
background-image:?linear-gradient(red?50%,?#FFF);
}
.banner-swipper{
height:?350rpx;
.swiper-item{
height:?100%;
image{
width:?100%;
height:?100%;
border-radius:?15rpx;
}
}
}
}
</style>