很多開發(fā)者在微信小程序的開發(fā)過程中都可能會遇到圖片失真的情況，因為微信小程序的image標(biāo)簽要設(shè)置其寬高，不然圖片若寬高過大會撐開原始圖片大小的區(qū)域。我們經(jīng)常會看到如下的圖示：
但是寬高設(shè)置固定了會導(dǎo)致有些圖片和規(guī)定顯示圖片大小的比例不一致而出現(xiàn)失真現(xiàn)象，
為此，想到一個方法，當(dāng)圖片加載成功的時候，會觸發(fā)bindload事件，通過這個事件我們可以獲取到圖片的寬高，那么問題就引刃而解了，我們可以把圖片原始的寬高獲取到，然后算出它的比例，根據(jù)需求固定圖片的寬(或高)，再根據(jù)比例來算出相應(yīng)的高(或?qū)?，原理就是這樣，下面放代碼：在utils中創(chuàng)建的一個js文件，暴露其接口imageLoad:function imageLoad(e,zhi,img,or) {
var windowWidth=0;
wx.getSystemInfo({
success: function(res) {
console.log(1);
windowWidth=res.windowWidth;
}
})
var $width=e.detail.width, //獲取圖片真實寬度
$height=e.detail.height, //獲取圖片的真實高度
ratio=$width/$height; //圖片的真實寬高比例
// console.log(e);
if(or=='height'){
var viewWidth=zhi*ratio, //設(shè)置圖片顯示寬度
viewHeight=zhi;
if(viewWidth/2>windowWidth){
console.log("你的圖片已經(jīng)超過屏幕寬度");
}
}else{
var viewWidth=zhi, //設(shè)置圖片顯示寬度
viewHeight=zhi/ratio;
}
var image=img;
//將圖片的datadata-index作為image對象的key,然后存儲圖片的寬高值
image[e.target.dataset.index]={
width:viewWidth,
height:viewHeight
}
return image;
}
module.exports = {
imageLoad: imageLoad
}并且在js中添加代碼：var imgload = require('../../utils/imgload.js')
Page({
data: {
images:{}
},
//當(dāng)圖片加載完成后會調(diào)用imageLoad函數(shù)
imageLoad:function(e){
var that=this;
//imageLoad(e,zhi,img,or)
//--e:圖片加載完成后觸發(fā)事件；zhi:你要固定的寬(高)的值，img:保存圖片的寬高值的變量，or:想要固定的寬(width),高(height)默認(rèn)為固定寬
var imgs= imgload.imageLoad(e,200,this.data.images,'height')
this.setData({
images:imgs
});
},
onLoad:function(){
},
onReady: function () {
// 頁面渲染完成
},
})
在wxml中添加代碼：
<image wx:for="{{srcs}}" style="display:block;" src="{{ item }}" bindload="imageLoad" data-index="{{ index }}"
style="width:{{ images[index].width }}rpx; height:{{ images[index].height }}rpx;"></image>
不過這個方法有個缺點，有些人可能無法接受：
圖片必須價值完才顯示，所以會有延時
愛盈利（aiyingli.com）移動互聯(lián)網(wǎng)最具影響力的盈利指導(dǎo)網(wǎng)站。定位于服務(wù)移動互聯(lián)網(wǎng)創(chuàng)業(yè)者，移動盈利指導(dǎo)。我們的目標(biāo)是讓盈利目標(biāo)清晰可見！降低門檻，讓缺乏經(jīng)驗、資金有限的個人和團隊獲得經(jīng)驗和機會，提高熱情，激發(fā)產(chǎn)品。
【轉(zhuǎn)載說明】 若上述素材出現(xiàn)侵權(quán)，請及時聯(lián)系我們刪除及進行處理：[email protected]
