微信小程序3D轮播实现代码

这篇文章主要介绍了微信小程序3D轮播实现代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

代码如下

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);
}

// pages/swiper/swiper.js
Page({

data: {
　　swiperH: '',//swiper高度
　　nowIdx: 0,//当前swiper索引
　　imgList: [//图片列表
　　　　'../../imgs/swiper1.jpg',
　　　　'../../imgs/swiper2.jpg',
　　　　'../../imgs/swiper3.jpg',
　　]
},
//获取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
　　})
},

onLoad: function (options) {
},

onReady: function () {
},

onShow: function () {
},

onHide: function () {
},

onUnload: function () {
},

onPullDownRefresh: function () {
},

onReachBottom: function () {
},

onShareAppMessage: function () {
}
})

效果如下

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。