微信小程序层叠轮播图、3D轮播图

接到个新需求，在微信小程序做层叠轮播，看了小程序的官方API没有swiper那么好用的方法，然后就想到之前拿原生js代码写的层叠轮播，其实一个道理。在swiper中显示多于1个的swiper-item，然后每个swiper-item中间有一些间距，然后把swiper-item中的内容设成居中，最后将active的swiper-item放大，就做成了层叠轮播。

效果图

wxml代码

<view class='list'>
  <swiper indicator-dots="{{true}}" autoplay="{{false}}" previous-margin="{{'140rpx'}}" next-margin="{{'140rpx'}}" bindchange="swiperChange">
    <block wx:for="{{imgUrls}}" wx:key="{{index}}">
      <swiper-item>
        <image src="{{item}}" class="slide-image {{swiperIndex == index ? 'active' : ''}}"/>
      </swiper-item>
    </block>
  </swiper>
</view>

wxss代码

swiper{
  width: 750rpx;
  height: 900rpx;
}
swiper-item{
  padding-top: 100rpx;
}
image{
  width: 375rpx;
  height: 667rpx;
  position: absolute;
  left: 50%;
  margin-left: -188rpx;
}
image.active{
  transform: scale(1.14);
  transition:all .2s ease-in 0s;
}

js代码

Page({
  data: {
    imgUrls: [
      'file/mall/activity/aa-1.jpg',
      'file/mall/activity/aa-2.jpg',
      'file/mall/activity/aa-3.jpg'
    ],
    swiperIndex: 0
  },
  swiperChange(e) {
    this.setData({
      swiperIndex: e.detail.current
    })
  }
})