微信小程序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 () { } })
效果如下
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
本文名称:微信小程序3D轮播实现代码
本文链接:http://scyanting.com/article/gdcish.html