原理: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,不可以设置为auto,高度不会自适应,会是0。
<image class="poster" bindload="imgLoad"style="height:{{poster.width?(750/(poster.width/poster.height)):''}}rpx;"src="{{poster.src}}"></image>
wxss
.poster{width: 750rpx;height: 350rpx;}