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

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

浏览量:2271 时间: 来源:做块泥
这里我们先来看看效果吧~接着来讲讲怎么实现的首先是页面的内容
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就这些简单的代码就完成啦_

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎