接着来讲讲怎么实现的首先是页面的内容swiperprevious-margin='50px'next-margin='50px'bindchange="swiperChange"style='height:{{swiperH}};'swiper-itemwx:for='{{imgList}}'wx:key=''imageclass='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是获取图片的宽高,然后再去设置高度这样才能让图片等比缩放
接着是样式
styleswiper{padding-top:30px;}.le-img{width:100%;display:block;transform:scale(0.8);transition:all0.3sease;border-radius:6px;}.le-img.le-active{transform:scale(1);}/style(1)最主要的就是scale这个属性了,有了这个属性才能有第二张图片缩放的效果。
然后就是关键的js啦
scriptdata:{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){varwinWid=wx.getSystemInfoSync().windowWidth-250;//获取当前屏幕的宽度varimgh=e.detail.height;//图片高度varimgw=e.detail.width;varsH=winWidimgh/imgw+"px"this.setData({swiperH:sH//设置高度})},//swiper滑动事件swiperChange:function(e){this.setData({nowIdx:e.detail.current})},/script就这些简单的代码就完成啦_













