微信小程序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-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);
}

 

 

 

// 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 () {

}
})