小程序自动轮播图


pages/mine/mine.wxml

  
    
  
/* pages/mine/mine.wxss */
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);
}
  data: {
    autoplay: true,
    swiperH: '',//swiper高度
    nowIdx: 0,//当前swiper索引
    imgList: [//图片列表
      "/img/pic1.jpg",
      "/img/pic1.jpg",
      "/img/pic1.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
    })
  },

小程序自动轮播图_第1张图片

 

你可能感兴趣的:(小程序自动轮播图)