本文给出了一个用微信小程序实现3d轮播效果的例子。分享给大家参考，如下：

我之前写过一个3d旋转木马，就是这个。使用的方法笨拙，代码不简洁。这一次，我们发现swiper可以达到同样的效果。所以记下来。

先看效果：

wxml:

swiper previous-margin=' 50px ' next-margin=' 50px ' bind change=' Swiprenge ' style=' height : { { Swiperh } }；'swiper-item wx : for=' { { IMglist } } ' wx : key=' ' image class=' le-IMG { { NowIDx==index ' 'le-active ' : ' ' } } ' bind load=' GetHeight ' src=' { { item } } ' style=' height : { { Swiperh } }；'/image/wiper-item/wiper (1)上页边距和下页边距表示前后页边距，这在官方网站文档中有描述。

(2)swipenrange是swiper的切换事件名称

(3)Style=' height : { { sweep RH } } '这是以相等的比例设置sweep的高度。因为刷卡的高度是固定的，所以需要动态修改。本文采用了类似的方法

(4) getHeight是获取图片的宽度和高度，然后设置高度使图片可以按比例缩放

wxss:

swiper { padding-top : 30px；}.le-img { width : 100%；display:块；transform:刻度(0.8)；transition:全部0.3s轻松；border-radius : 6px；}.le-img . le-active { transform :比例尺(1)；}(1)最重要的是属性缩放，只有有了这个属性，第二张图片才能缩放。

js:

Data: {swiperH: ' '，//SWIPER高度nowIdx:0，///当前SWIPER索引imglist :[///图片列表'/public/IMG/IDX-AD。巴布亚新几内亚'，'/公共/IMG/IDX-公元。PNG '，/public/img/idx-ad.png '，]}，//获取高度getheight : function(e){ var winwid=wx . getsysteminfosync()。窗宽-2 * 50；//获取当前屏幕的宽度var imgh=e . detail . height；//图片高度var imgw=e . detail . width；varsh=win wid * imgh/imgw ' px ' this . setdata({ swipe rh3360 sh//set height })}，//swipe事件swipe change : function(e){ this . setdata({ now idx : e . detail . current })}，

希望本文对微信小程序的开发有所帮助。