其实在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
