每个图片原始宽高不一样,缩小每个图片到指定的宽度,高度等比例缩小,实现图片高度自适应。
下面看看实现代码:
下面是uniapp的条件编译,如果是小程序场景就使用 mode 属性实现高度自适应,如果是H5场景,就通过图片 的 load 获取图片的宽高,然后通过计算出缩小后的宽高动态渲染到页面
<block v-for="(item,index) in awardsList" :key="index">
<!-- #ifdef MP -->
<image mode="widthFix" :id="index" :src='item.img' class="canvas-item-img"></image>
<!-- #endif -->
<!-- #ifdef H5 -->
<image @load="dialImgLoad" :id="index" :src='item.img' :style="{width:item.img_width,height:item.img_height}">
</image>
<!-- #endif -->
<block>
js代码:this.$forceUpdate() 是强制更新视图,因为页面加载的时候,图片设置宽高时是没有 img_width的。
80是需要设置的图片高度,图片的高度根据这个值等比缩小
methods: {
dialImgLoad(e){
let idx = e.currentTarget.id;
let num = e.detail.width/80;
this.awardsList[idx].img_width = 80+'rpx'
this.awardsList[idx].img_height = (e.detail.height/num).toFixed(2)+'rpx'
this.$forceUpdate()
}
}
css代码:设置一个默认宽度,这里仅小程序会生效,H5会被 style 属性覆盖。
.canvas-item-img {
width: 80rpx;
}