微信小程序实现3d轮播

效果图：

代码：

wxml

<swiper 
    autoplay 
    interval="2000" 
    circular 
    indicatorDots="true" 
    indicator-active-color="#fff" 
    indicator-color="#000" 
    previous-margin='50px' 
    next-margin='50px' 
    bindchange="swiperChange" 
    style='height:{{swiperH}};'>
    <swiper-item wx:for='{{list.goods_urls}}' wx:key=''>
        <image 
            class='le-img {{currentIdx == index ? "le-active" : ""}}' 
            bindload='getHeight' src='{{item}}' style='height:{{swiperH}};'>
        </image>
    </swiper-item>
</swiper>

js

data: {
    swiperH:'',//swiper高度
    currentIdx:0,//当前swiper索引
    list: {
      goods_urls: [
        "https://qa-pintuan.tope365.com//uploads/20200421/fd715b4e3e5267008d4f0cb3747efdd8.jpg",
        "https://qa-pintuan.tope365.com//uploads/20200421/d67e651fe4e947c1abc29a835e0d8923.jpg",
        "https://qa-pintuan.tope365.com/uploads/uploads1/uploads/20200522/69f1e102017b7e442b209197175df92d.png"
      ]
    }, //参数
},
//获取swiper高度
getHeight:function(e){
    var winWid = wx.getSystemInfoSync().windowWidth - 2*50;//获取当前屏幕的宽度
    var imgh = e.detail.height;//图片高度
    var imgw = e.detail.width;
    var sH = winWid * imgh / imgw + "px"
    this.setData({
      swiperH: sH//设置高度
    })
},
  //swiper滑动事件
swiperChange:function(e){
    this.setData({
      currentIdx: e.detail.current
    })
},

wxss

swiper {
  padding-top: 30px;
}
.le-img {
  width: 100%;
  display: block;
  transform: scale(0.8);
  transition: all 0.3s ease;
  border-radius: 6px;
}
.le-img.le-active {
  transform: scale(1);
}