最近在开发一个性能,接口返回的图片如果高度大于以后手机屏幕的高度,就让图片能够滚动,否则就让图片撑满整个屏幕,并且禁止滚动。
办法是 wx.getImageInfo,微信官网文档
获取一张图片宽高的代码:
wx.getImageInfo({
src: this.data.info.imgUrl,
complete: (res) => {
// 原图的宽度
let imgWidth = res.width;
// 原图的高度
let imgHeight = res.height;
// 设施的宽度
let screenWidth = wx.getSystemInfoSync().windowWidth;
// 设施的高度
let screenHeight = wx.getSystemInfoSync().windowHeight;
// 750 2000
// 图片的宽度除以屏幕的宽度
let ratio2 = imgWidth / screenWidth;
// 获取被渲染后的图片高度
let saleHight = (imgHeight / ratio2).toFixed(2);
if (saleHight >= screenHeight) {
this.setData({['info.width']: screenWidth + 'px',
['info.height']: saleHight + 'px',
['info.mode']: 'aspectFit',
});
} else {
this.setData({['info.width']: '100%',
['info.height']: '100%',
['info.mode']: 'aspectFill',
});
}
}
})
获取循环外面图片宽高的代码:
this.data.list.forEach((item, index) => {
wx.getImageInfo({
src: item.info.imgUrl,
complete: (res) => {
// 原图的宽度
let imgWidth = res.width;
// 原图的高度
let imgHeight = res.height;
let screenWidth = wx.getSystemInfoSync().windowWidth;
let screenHeight = wx.getSystemInfoSync().windowHeight;
// 750 2000
// 图片的宽度除以屏幕的宽度
let ratio2 = imgWidth / screenWidth;
// 获取被渲染后的图片高度
let saleHight = (imgHeight / ratio2).toFixed(2);
if(saleHight >= screenHeight) {
this.setData({[`list[${index}]info.width`]: screenWidth + 'px',
[`list[${index}]info.height`]: saleHight + 'px',
[`list[${index}]info.mode`]: 'aspectFit',
});
} else {
this.setData({[`list[${index}]info.width`]: '100%',
[`list[${index}]info.height`]: '100%',
[`list[${index}]info.mode`]: 'aspectFill',
});
}
}
})
})
实现了我想要的性能,须要留神 wx.getImageInfo 是异步的。