微信小程序实现的3d轮播图效果示例【基于swiper组件】

2019-11-19 12:21:34

字体：大中小

来源：转载

供稿：网友

本文实例讲述了微信小程序实现的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  })},

就这些简单的代码就完成啦 ^_^

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

上一篇：jQuery使用bind动态绑定事件无效的处理方法

下一篇：vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解