开发日记(10): 小程序image设置widthFix后,多张图片遍历出现高度被截取问题

94 阅读1分钟

一、问题描述

小程序一个活动详情部分需要配置多张图片,并且要宽度和手机宽度一致,所以写了一个image设置mode为widthFix。然后wx:for循环图片src路径数组;设置image的样式为 width:100%;height:auto; 结果实际效果好多图片高度在自动计算后,都发生了截取,变形;

二、代码片段

image.png

image.png 就这么简单的几行代码。

三、解决方案

首先我尝试了image的 bindload 来动态获取图片宽高,并且通过 width: wx.getSystemInfoSync().windowWidth 来获取不同手机型号的宽度,最后手动通过 width * 图片高度 / 图片宽度 来计算适配当前手机且等比的图片高度,结果最终在真机上还是和只配置了widthFix一样,图片部分高度被截取;

最终解决方案

在查阅了大量资料后,我也没有得出有效的解决办法,感觉是微信底层对widthFix计算高度的问题,最终我通过对比上传的图片尺寸发现 width为750px,高度为奇数的就会发生高度截取。但是如果高度为偶数,那么则不会发生截取,我把奇数的图片都改成了偶数竟然好了,在各种机型下,也进行了测试,都没问题。