wxml
<swiper class="swiper-block" bindchange="swiperChange" previous-margin="90rpx" next-margin="90rpx" current="0">
<block wx:for="{{imgUrls}}" wx:index="{{index}}">
<swiper-item class="swiper-item">
<image mode="aspectFill" src="{{item}}" class="slide-image {{currentIndex == index ? 'active' : ''}}" />
</swiper-item>
</block>
</swiper>
wxss
.swiper-block {
height: 480rpx;
width: 100%;
}
.swiper-item{
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
overflow: unset;
}
.slide-image{
height: 320rpx;
width: 520rpx;
border-radius: 9rpx;
box-shadow: 0px 0px 30rpx rgba(0, 0, 0, 0.2);
margin: 0rpx 30rpx;
z-index: 1;
}
.active{
transform: scale(1.14);
transition: all .2s ease-in 0s;
z-index: 20;
}
js
Page({
data: {
currentIndex: 0,
imgUrls: [
'/image/b2.jpg',
'/image/b1.jpg',
'/image/b3.jpg'
]
},
swiperChange: function (e) {
this.setData({
currentIndex: e.detail.current
})
}
})