wepy微信小程序swiper组件设置自适应图片高度,图片高度不一致取最高图片的高度

微信小程序swiper组件设置自适应图片高度展示,并且为了用户设置一组高度不一致的图片的时候不会产生跳动感,设置外层盒子高度为一组图片中最高的图片高度为盒子高度

html代码:

    
      
        
          
        
      
    

js代码:

  data = {
    indicatorDots: true, // 开启小圆点
    autoplay: true, // 开启自动轮播
    interval: 2000, // 轮播间隔
    duration: 1000, // 动画时长
    swiperCurrent: 0,
    // 所有图片的高度
    imgheights: [],
    // 图片宽度
    imgwidth: 750,
    // 默认
    current: 0,
    imgBoxSize: 0
  };
    swiperChange(e) {
      this.swiperCurrent = e.detail.current
      this.current = e.detail.current
      this.$apply()
    },
    imageLoad(e) {
      this.imgheights = []
      // 获取图片真实宽度
      var imgwidth = e.detail.width
      var imgheight = e.detail.height
      // 宽高比
      var ratio = imgwidth / imgheight
      console.log(imgwidth, imgheight)
      // 计算的高度值
      var viewHeight = 750 / ratio
      imgheight = viewHeight
      // 把每一张图片的高度记录到数组里
      this.imgheights.push(imgheight)
      // 取出图片数组中最高的一个值
      this.imgBoxSize = Math.max.apply(null, this.imgheights)
      this.$apply()
    }

 这里用的wepy框架编写的跟原生稍有不同,大致一样

 

你可能感兴趣的:(wepy,微信小程序)