全国服务热线:4008-888-888

公司新闻

微信小程序订制企业_微信小程序3D轮播完成代码

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

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

代码如下

 !-- 轮播图 -- 
 swiper previous-margin='50px' next-margin='50px' bindchange="swiperChange" 
 swiper-item wx:for='{{imgList}}' wx:key='' 
 image class='le-img {{nowIdx==index "le-active":""}}' bindload='getHeight' src='{{item}}' /image 
 /swiper-item 
 /swiper 
 !-- 轮播图end -- 

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

效果如下

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服