效果图如下:
下面贴上代码:
<swiper indicator-dots = "true" autoplay="true" interval="3000"
indicator-color='#8a8a8a' indicator-active-color='#fff' circular="true" class="swiper-block" bindchange="swiperChange" previous-margin="50rpx" next-margin="50rpx" 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>
.swiper-block {
background: #fff;
height: 250rpx;
width: 100%;
}
.swiper-item{
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
overflow: unset;
}
.swiper-block .wx-swiper-dot::before{
content:' ';
flex-grow: 1;
background: rgb(255, 255, 255,0.2);
}
.swiper-block .wx-swiper-dot::after{
content:' ';
flex-grow: 1;
background: rgb(255, 255, 255,0.8);
}
.slide-image{
height: 200rpx;
width: 92%;
border-radius: 10rpx;
margin: 0rpx 28rpx ;
z-index: 1;
}
.active{
transform: scale(1.14);
transition: all .2s ease-in 0s;
z-index: 20;
}
|
请发表评论