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

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

代码如下

<!-- 轮播图 --> <swiper previous-margin='50px' next-margin='50px' bindchange="swiperChange">   <swiper-item wx:for='{{imgList}}' wx:key=''>     <image bindload='getHeight' src='https://www.jb51.net/{{item}}'></image>   </swiper-item> </swiper> <!-- 轮播图end -->

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 () { } })

效果如下

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

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/c53e184f43bfbc6832b972ffa8514b82.html