微信小程序3D轮播实现代码

<!-- 轮播图 -->
<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>
<!-- 轮播图end -->

swiper {
  padding-: 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);
}

// pages/swiper/swiper.js
Page({
/
 页面的初始数据
/
data: {
　　swiperH: '',//swiper高度
　　nowIdx: 0,//当前swiper索引
　　imgList: [//图片列表
　　　　'../../imgs/swiper1.jpg',
　　　　'../../imgs/swiper2.jpg',
　　　　'../../imgs/swiper3.jpg',
　　]
},
//获取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
　　})
},
/
 生命周期函数--监听页面加载
/
onLoad: function (options) {
},
/
 生命周期函数--监听页面初次渲染完成
/
onReady: function () {
},
/
 生命周期函数--监听页面显示
/
onShow: function () {
},
/
 生命周期函数--监听页面隐藏
/
onHide: function () {
},
/
 生命周期函数--监听页面卸载
/
onUnload: function () {
},
/
 页面相关事件处理函数--监听用户下拉动作
/
onPullDownRefresh: function () {
},
/
 页面上拉触底事件的处理函数
/
onReachBottom: function () {
},
/
 用户点击右上角分享
/
onShareAppMessage: function () {
}
})