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

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


【wepy|wepy微信小程序swiper组件设置自适应图片高度,图片高度不一致取最高图片的高度】js代码:
data = https://www.it610.com/article/{ 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框架编写的跟原生稍有不同,大致一样

    推荐阅读