微信小程序3D轮播图实现

其实在app里面这种效果还是比较常见的，开源库也比较多，但是作为资深伸手党的我，居然没有搜索到实现3D轮播图的实例，好吧，只能自己开撸了，我的方式是基于原生的Swiper来实现的，配合previous-margin next-margin来实现左右两边的边框缩进效果，好了这只是第一步，第二部就是实现缩放的动画了效果了，我自己总结了两种方法，

第一种：通过css中控制选中和没有选中的swiper做监听，修改对应的css的样式，这时候需要对swpier做onChange监听，来改变选中的index角标，这个变量要写在data层里面，让直行img的时候能动态获取到xIndex的值，执行不同的css样式，这种方式通过设置img的高度来实现，选中设置100%的高度，没有选中的设置高度为90%，代码如下

 <view class='bannerWrap'>
    <image class='imgBannerBack' src='../../static/img/back_banner.png' mode='scaleToFill'></image>
    <swiper class='bannerSwiper' previous-margin="54rpx" next-margin='54rpx' indicator-dots="true" indicator-color='#B5B5B5' indicator-active-color='#fff' interval='3000' duration='500' bindchange='onChange' circular='true'>
      <block wx:for="{{banner}}">
        <swiper-item>
          <image class="{{index==xindex?'imageBanner':'imageBanner_small'}}" src="{{item}}" id='{{item.url}}' bindtap='imageClick'></image>
        </swiper-item>
      </block>
    </swiper>
  </view>
 
 
 
.imageBanner {
  width: 100%;
  height: 100%;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
}
 
 
.imageBanner_small {
  width: 94%;
  height: 90%;
  margin-left: 20rpx;
  margin-right: 20rpx;
  position: absolute;
  bottom: 0;
  border-top-left-radius: 15rpx;
  border-top-right-radius: 15rpx; 
 
}

第二种方法：

原理基本相同，只不过改变图片大小的时候利用的css的trasnform和trasnsition来实现界面动画的放大和缩小的过程的一个切换，具体代码就是css的样式做了一个切换

具体代码如下

.imageBanner {
  width: 100%;
  height: 100%;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
}
 
.imageBanner_small {
  height: 100%;
  transform: scale(0.9);
  transition: all 0.2s ease-in 0s;
  border-top-left-radius: 15rpx;
  border-top-right-radius: 15rpx;
  bottom: -13rpx;
  margin-left: -10rpx;
  position: absolute;
 
}

2018091716354723.png