E企盈营销工具技术服务商 热线:4006-838-530

小程序swiper,小程序调用swiper实现3d轮播

E企盈直播平台营销卖货系统

这里我们先来看看效果吧~接着来讲讲怎么实现的首先是页面的内容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就这些简单的代码就完成啦_

E企盈系统专业开发:万商直播系统开发,直播系统,直播平台系统源码,小程序直播,商城版小程序,分销小程序,小程序定制,微分销,微商,微信分销,微信分销商城,微信分销系统,微信分销管理,微信分销平台,微商代理系统,E企盈是专业的直播小,E企盈是专业的直播小程序,公众号分销系统,营销系统,社群私域流量卖货系统技术开发商,热线:4006-838-530
赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序swiper,小程序调用swiper实现3d轮播
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏