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

好久没有写博客了，前段时间换了家公司，做了两个多星期，完成了一款app的开发，
公司没有app的需求了，我们几个移动端Android和IOS都转岗开发微信小程序，由于刚接触小程序不到两周，技术还是基于复制粘贴，h5以前也就看看，所以针对css样式和div之类的没有什么感觉，基本一切从0开始，好了，扯淡完毕-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

刚看了2天的小程序，咱们几个就开始上手开撸，不得不说微信的小程序封装的还是挺全面的，其实也就是间接的说很多东西都封装的比较死板，UI希望首页的banner实现各种形式的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; }
下面看下具体实现的效果图吧

今天比较忙，等稍微闲点的时候将对应的demo会上传供各位大佬参考，刚刚做小程序，实现的效果可能比较low，但是能解决目前遇到的问题，如果哪位大佬有更加好的实现方式，希望不吝赐教！

热门工具换一换