效果图
index.wxml
<swiper previous-margin="80rpx" next-margin="80rpx" bindchange="bindchange" current="{{swiperIndex}}">
<swiper-item>
<view class="{{swiperIndex==0?'active':'quiet'}}">
<image src="/image/atext.png" mode='widthFix' style="width:100%;"></image>
</view>
</swiper-item>
<swiper-item>
<view class="{{swiperIndex==1?'active':'quiet'}}">
<image src="/image/atext.png" mode='widthFix' style="width:100%;"></image>
</view>
</swiper-item>
<swiper-item>
<view class="{{swiperIndex==2?'active':'quiet'}}">
<image src="/image/atext.png" mode='widthFix' style="width:100%;"></image>
</view>
</swiper-item>
</swiper>
index.wcss
.active {transform: none;transition: all 0.2s ease-in 0s;}
.quiet {transform: scale(0.85);transition: all 0.2s ease-in 0s;}
index.js
Page({
data: {
swiperIndex: 1
},
bindchange(e) {
this.setData({ swiperIndex: e.detail.current})
}
});