原理:image组件bindload属性
前端在按照设计图定的宽度做好图片的宽高之后,如果图片的原始宽高比对应不上,那么图片就会出现拉伸变形的情况,虽然微信小程序有mode属性可以对图片进行适应,但是会有部分显示不完全或者会有留白,而且如果不给image组件设置高度或者设置为auto时,图片的宽度为0。
后来我发现了image组件的bindload属性
我发现event.detail 里给出的宽和高是图片的原始宽高,那么我们就可以根据这个宽高得出图片的宽高比,在宽度一定时就可以做到高度自适应而不会拉伸变形或者留白。
js
data:{
poster:{
src: '',//这里放图片路径
width: '',//图片加载完成才会有,先置为空
height: ''
}
},
imgLoad(e) {
// console.log(e)
let width = parseInt(e.detail.width);
let height = parseInt(e.detail.height);
this.setData({
'poster.width': width,
'poster.height': height,
})
},
wxml
高度设置为""时,会取wxss中设置的高度,没有就会取默认高度240px