最近在开发一个性能,接口返回的图片如果高度大于以后手机屏幕的高度,就让图片能够滚动,否则就让图片撑满整个屏幕,并且禁止滚动。
办法是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是异步的。