微信小程序 swiper自适应图片的高度

 <view class="page-section page-section-spacing swiper">
<swiper indicator-dots="{{indicatorDots}}" bindchange="swiperChange"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"
style="height:{{imgheights[current]}}rpx;">
<block wx:for="{{background}}" wx:key="*this">
<swiper-item wx:key="*this" style="position: absolute;width: 100%;z-index:1;">
<image src="{{item}}" class="slide-image"  class=img  bindload="imgLoad"/>
</swiper-item>
</block>
</swiper>
</view> 
Page({
onShareAppMessage() {
return {
title: swiper,
path: page/component/pages/swiper/swiper
}
},
data: {
imgwidth: 750,
imgheights: [],
},
imgLoad: function (e) {
//获取图片真实宽度 
var imgwidth = e.detail.width,
imgheight = e.detail.height,
//宽高比  
ratio = imgwidth / imgheight;
// console.log(imgwidth, imgheight)
//计算的高度值  
var viewHeight = 750 / ratio;
var imgheight = viewHeight;
var imgheights = this.data.imgheights;
//每一张图片对应的高度存到数组里
    imgheights.push(imgheight);
this.setData({
imgheights: imgheights
})
}
})

微信小程序 swiper自适应图片的高度

原文:https://www.cnblogs.com/bhj37/p/14783663.html

以上是微信小程序 swiper自适应图片的高度的全部内容。
THE END
分享
二维码
)">
< <上一篇
下一篇>>