您好,登錄后才能下訂單哦!
這篇文章主要介紹了微信小程序如何動態(tài)設(shè)置圖片的高度和寬度,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
前言:
在小程序布局中,如果圖片不是固定高度和高度,但image設(shè)置的是固定的高度和寬度,這時候原始圖片相對image設(shè)置的固定高度和寬度不是等比例大小,那么這張圖片就會變形,變的不清晰。這時就可以使用下面的等比例縮放的方式縮放圖片,讓圖片不變形?;蛘咄ㄟ^image的bindload方法動態(tài)的獲取圖片的高度和寬度,動態(tài)的設(shè)置圖片的高度和寬度,是圖片布局的高度和寬度和原始圖片的高度和寬度相等。
1.圖片等比例縮放工具
//Util.js class Util{ /*** * 按照顯示圖片的寬等比例縮放得到顯示圖片的高 * @params originalWidth 原始圖片的寬 * @params originalHeight 原始圖片的高 * @params imageWidth 顯示圖片的寬,如果不傳就使用屏幕的寬 * 返回圖片的寬高對象 ***/ static imageZoomHeightUtil(originalWidth,originalHeight,imageWidth){ let imageSize = {}; if(imageWidth){ imageSize.imageWidth = imageWidth; imageSize.imageHeight = (imageWidth * originalHeight) / originalWidth; }else{//如果沒有傳imageWidth,使用屏幕的寬 wx.getSystemInfo({ success: function (res) { imageWidth = res.windowWidth; imageSize.imageWidth = imageWidth; imageSize.imageHeight = (imageWidth * originalHeight) / originalWidth; } }); } return imageSize; } /*** * 按照顯示圖片的高等比例縮放得到顯示圖片的寬 * @params originalWidth 原始圖片的寬 * @params originalHeight 原始圖片的高 * @params imageHeight 顯示圖片的高,如果不傳就使用屏幕的高 * 返回圖片的寬高對象 ***/ static imageZoomWidthUtil(originalWidth,originalHeight,imageHeight){ let imageSize = {}; if(imageHeight){ imageSize.imageWidth = (imageHeight *originalWidth) / originalHeight; imageSize.imageHeight = imageHeight; }else{//如果沒有傳imageHeight,使用屏幕的高 wx.getSystemInfo({ success: function (res) { imageHeight = res.windowHeight; imageSize.imageWidth = (imageHeight *originalWidth) / originalHeight; imageSize.imageHeight = imageHeight; } }); } return imageSize; } } export default Util;
2.使用image組件加載圖片,通過bindload動態(tài)的獲取圖片的高度和寬度,動態(tài)的設(shè)置圖片的高度和寬度 index.wxml (../pro.png是本地圖片)
<image bindload="imageLoad" src="../pro.png"/>
index.js
import Util from '../common/Util'; Page({ data:{ imageWidth:0, imageHeight:0 }, imageLoad: function (e) { //獲取圖片的原始寬度和高度 let originalWidth = e.detail.width; let originalHeight = e.detail.height; //let imageSize = Util.imageZoomHeightUtil(originalWidth,originalHeight); //let imageSize = Util.imageZoomHeightUtil(originalWidth,originalHeight,375); let imageSize = Util.imageZoomWidthUtil(originalWidth,originalHeight,145); this.setData({imageWidth:imageSize.imageWidth,imageHeight:imageSize.imageHeight}); } })
感謝你能夠認真閱讀完這篇文章,希望小編分享的“微信小程序如何動態(tài)設(shè)置圖片的高度和寬度”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。