需求

在應用中顯示的圖片很多情況不滿足業務需求，我們需要動態根據圖片的寬高進行縮放或加載中顯示的缺省圖片，這是我沒就需要監聽圖片加載完成回調，來看看微信小程序怎么實現圖片加載完成回調。

實現

1. 綁定回調

通過image標簽的bindload屬性綁定圖片加載完成回調函數，src根據圖片加載是否完成綁定是否顯示缺省圖：

<image src='{{loadComplete?srcImagePath:defaultImagePath}}' bindload="imageLoad"/>

2. 回調監聽

在js文件中定一個imageLoad函數，我們就可以通過參數拿到圖片加載完成寬高信息：

imgOnLoad(ev) {  let src = ev.currentTarget.dataset.src,   width = ev.detail.width,   height = ev.detail.height }

3. 縮放圖片

我們寫一個工具類，然后調用imageUtil方法對原始圖片根據屏幕寬高進行等比例縮放。

function imageUtil(e) { var imageSize = {}; var originalWidth = e.detail.width;//圖片原始寬  var originalHeight = e.detail.height;//圖片原始高  var originalScale = originalHeight / originalWidth;//圖片高寬比  console.log('originalWidth: ' + originalWidth) console.log('originalHeight: ' + originalHeight) imageSize.imageWidth = originalWidth; imageSize.imageHeight = originalHeight; //獲取屏幕寬高  wx.getSystemInfo({  success: function (res) {   var windowWidth = res.windowWidth;   var windowHeight = res.windowHeight;   var windowscale = windowHeight / windowWidth;//屏幕高寬比    if (originalScale < windowscale) {//圖片高寬比小于屏幕高寬比     //圖片縮放后的寬為屏幕寬     imageSize.imageWidth = windowWidth;    imageSize.imageHeight = (windowWidth * originalHeight) / originalWidth;   } else {//圖片高寬比大于屏幕高寬比     //圖片縮放后的高為屏幕高     imageSize.imageHeight = windowHeight;    imageSize.imageWidth = (windowHeight * originalWidth) / originalHeight;   }   imageSize.imageWidth = windowWidth;   imageSize.imageHeight = windowHeight;  } }) console.log('縮放后的寬: ' + imageSize.imageWidth) console.log('縮放后的高: ' + imageSize.imageHeight) return imageSize;}

4. 修改image寬高

通過imageUtil獲取到目標寬高后，this.setData({width:imageUtil(e).width, height:imageUtil(e).height}) 即可以動態修改圖片寬高了(e是imageLoad方法中的參數)：

<image src='{{loadComplete?srcImagePath:defaultImagePath}}' bindload="imageLoad" style='width:width;height:height'/>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。