• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序3D轮播图

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
<!-- 轮播图 -->
<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>
<!-- 轮播图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 () {

}
})

 

 

 

 

 

 

 

 
 

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序文件结构介绍发布时间:2022-07-18
下一篇:
小程序wepy.js框架总结发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap