本篇內(nèi)容主要講解“微信小程序中image圖片加載完成監(jiān)聽的方法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“微信小程序中image圖片加載完成監(jiān)聽的方法”吧!

成都創(chuàng)新互聯(lián)網(wǎng)站建設(shè)提供從項(xiàng)目策劃、軟件開發(fā)，軟件安全維護(hù)、網(wǎng)站優(yōu)化(SEO)、網(wǎng)站分析、效果評估等整套的建站服務(wù)，主營業(yè)務(wù)為網(wǎng)站建設(shè)、成都網(wǎng)站制作，app軟件開發(fā)公司以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。成都創(chuàng)新互聯(lián)深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

需求

在應(yīng)用中顯示的圖片很多情況不滿足業(yè)務(wù)需求，我們需要?jiǎng)討B(tài)根據(jù)圖片的寬高進(jìn)行縮放或加載中顯示的缺省圖片，這是我沒就需要監(jiān)聽圖片加載完成回調(diào)，來看看微信小程序怎么實(shí)現(xiàn)圖片加載完成回調(diào)。

實(shí)現(xiàn)

1. 綁定回調(diào)

通過image標(biāo)簽的bindload屬性綁定圖片加載完成回調(diào)函數(shù)，src根據(jù)圖片加載是否完成綁定是否顯示缺省圖：

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

2. 回調(diào)監(jiān)聽

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

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

3. 縮放圖片

我們寫一個(gè)工具類，然后調(diào)用imageUtil方法對原始圖片根據(jù)屏幕寬高進(jìn)行等比例縮放。

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獲取到目標(biāo)寬高后，this.setData({width:imageUtil(e).width, height:imageUtil(e).height}) 即可以動態(tài)修改圖片寬高了(e是imageLoad方法中的參數(shù))：

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

到此，相信大家對“微信小程序中image圖片加載完成監(jiān)聽的方法”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

名稱欄目：微信小程序中image圖片加載完成監(jiān)聽的方法
文章路徑：http://chinadenli.net/article32/ppijpc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、微信小程序、標(biāo)簽優(yōu)化、網(wǎng)站建設(shè)、企業(yè)建站、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)