微信小程序用swiper做旋转木马缩放轮播图

主要还是用到css3的特性，利用transition动画和transform:scal()属性。

---

wxml

<view class="vip-center-container">
  <swiper  class="swiper-block"  previous-margin="60rpx" next-margin="60rpx" current="0" bindchange="swiperChange">
      <block wx:for="{{bgImages}}" wx:index="{{index}}">
          <swiper-item class="swiper-item">
              <view style="background:url('{{item}}');background-repeat: no-repeat;background-size:cover;" class="slide-image {{swiperIndex == index ? 'active' : 'dis-active'}}">
              
              </view>
          </swiper-item>
      </block>
  </swiper>
</view>

---

wxss

.vip-center-container{
  padding-top: 48rpx;
  background-color: rgba(42, 44, 53, 1);
}
.swiper-block{
  height: 400rpx;
  width: 100%;
}
.swiper-item{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow:unset;
}
.slide-image{
  height:315rpx;
  width: 630rpx;
  border-radius: 12rpx;
  box-shadow: 0px 0px 30rpx rgba(0, 0,0,.2); 
  z-index: 1;  
}

.active{
  transform: none;
  transition:all .2s ease-in 0s;
  z-index: 20; 
}
.dis-active{
  transform: scale(0.9);
  transition:all .2s ease-in 0s;
}

---

js

 swiperChange(e) {
    this.setData({
      swiperIndex: e.detail.current,
    })
  },