微信小程序实现的3d轮播图效果示例【基于swiper组件】

<swiper previous-margin=\'50px\' next-margin=\'50px\' bindchange=\"swiperChange\" style=\'height:{{swiperH}};\'>
  <swiper-item wx:for=\'{{imgList}}\' wx:key=\'\'>
    <image class=\'le-img {{nowIdx==index?\"le-active\":\"\"}}\' bindload=\'getHeight\' src=\'{{item}}\' style=\'height:{{swiperH}};\'></image>
  </swiper-item>
</swiper>

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);
}

data: {
  swiperH:\'\',//swiper高度
  nowIdx:0,//当前swiper索引
  imgList:[//图片列表
    \"/public/img/idx-ad.png\",
    \"/public/img/idx-ad.png\",
    \"/public/img/idx-ad.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({
    nowIdx: e.detail.current
  })
},