微信小程序image圖片加載完成監(jiān)聽
更新時間：2019年08月31日 09:07:04 作者：T丶快樂知己丬
這篇文章主要為大家詳細介紹了微信小程序image圖片加載完成監(jiān)聽，具有一定的參考價值，感興趣的小伙伴們可以參考一下
需求
在應用中顯示的圖片很多情況不滿足業(yè)務需求，我們需要動態(tài)根據(jù)圖片的寬高進行縮放或加載中顯示的缺省圖片，這是我沒就需要監(jiān)聽圖片加載完成回調(diào)，來看看微信小程序怎么實現(xiàn)圖片加載完成回調(diào)。
實現(xiàn)
1. 綁定回調(diào)
通過image標簽的bindload屬性綁定圖片加載完成回調(diào)函數(shù)，src根據(jù)圖片加載是否完成綁定是否顯示缺省圖：
<image src='{{loadComplete?srcImagePath:defaultImagePath}}' bindload="imageLoad"/>
2. 回調(diào)監(jiān)聽
在js文件中定一個imageLoad函數(shù)，我們就可以通過參數(shù)拿到圖片加載完成寬高信息：
imgOnLoad(ev) {
let src = ev.currentTarget.dataset.src,
width = ev.detail.width,
height = ev.detail.height
}
3. 縮放圖片
我們寫一個工具類，然后調(diào)用imageUtil方法對原始圖片根據(jù)屏幕寬高進行等比例縮放。
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}) 即可以動態(tài)修改圖片寬高了(e是imageLoad方法中的參數(shù))：
<image src='{{loadComplete?srcImagePath:defaultImagePath}}' bindload="imageLoad" style='width:width;height:height'/>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
這篇文章主要介紹了JS正則表達式學習之貪婪和非貪婪模式用法,結合實例形式總結分析了JS正則表達式中貪婪模式與非貪婪模式的具體功能、使用方法與相關注意事項,需要的朋友可以參考下2016-12-12
BootStrap select2 動態(tài)改變值的方法
這篇文章主要介紹了BootStrap select2 動態(tài)改變值的方法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
這篇文章主要介紹了js生成縮略圖后上傳，利用canvas重繪,需要的朋友可以參考下2014-05-05
給一個存放數(shù)字或字符串的數(shù)組去重很簡單,那么現(xiàn)在問題升級,如何一個數(shù)組a里面存放的元素是若干個數(shù)組,那么如何給這個數(shù)組a去重？本文給大家介紹了JS中給數(shù)組去重的方法小結,需要的朋友可以參考下2024-08-08
NodeJs中的非阻塞方法介紹，需要的朋友可以參考下2012-06-06
這篇文章主要介紹了改變隱藏的input中value值的方法,需要的朋友可以參考下2014-03-03
這篇文章主要介紹了如何利用ES6進行Promise封裝總結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-02-02
javascript實現(xiàn)日期時間動態(tài)顯示示例代碼
這篇文章主要介紹了javascript實現(xiàn)日期時間動態(tài)顯示示例代碼，頁面動態(tài)顯示時間變化的方法有很多，本文為大家介紹下使用javascript的具體實現(xiàn)，感興趣的朋友可以參考一下2015-09-09
既然說到了JavaScript,那么就會繞不過去執(zhí)行上下文,只有理解了執(zhí)行上下文才能更好的理解JavaScript本身,不過本部分不是專門講解?JavaScript的,主要從JavaScript的執(zhí)行順序開始介紹一下JavaScript是怎樣運行的2023-09-09
用JS實現(xiàn)HTML標簽替換效果...2007-06-06