本文實例講述了微信小程序實現的3d輪播圖效果。分享給大家供大家參考，具體如下：
前面寫過一篇3d輪播，就是這篇，使用的方法比較笨拙，而且代碼不簡潔。這次發現swiper也能實現同樣的效果。故記錄一下。
先看看效果：
wxml：
<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>（1） previous-margin 和 next-margin 表示前邊距和后邊距，官網文檔有說明的。
（2） swiperChange 就是swiper的切換事件名
（3） style='height:{{swiperH}}' 這是等比設置swiper高度，因為swiper有固定的高度，所以要動態修改一下。這篇文章也有類似的做法
（4） getHeight 是獲取圖片的寬高，然后再去設置高度這樣才能讓圖片等比縮放
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);}（1） 最主要的就是scale這個屬性了，有了這個屬性才能有第二張圖片縮放的效果。
js：
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 })},就這些簡單的代碼就完成啦 ^_^
希望本文所述對大家微信小程序開發有所幫助。
新聞熱點
疑難解答
