您好,登錄后才能下訂單哦!
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)image圖片自適應(yīng)寬度的方法,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
一.了解image組件
由于image有默認(rèn)的固定的寬度和高度,這樣我們在做圖片自適應(yīng)的時候,就不好做了。下面就來一起解決下
二.方法
(一).使用mode:widthFix
widthFix:寬度不變,高度自動變化,保持原圖寬高比不變。
首先我們先設(shè)置image的mode為widthFix,然后給圖片加一個固定rpx的寬度,比如:730rpx。
這樣圖片也可以自適應(yīng)了。。因為小程序的rpx本身就是一個自適應(yīng)顯示的單位
(二).使用bindload綁定函數(shù)動態(tài)自適應(yīng)。
我們可以給image綁定一個函數(shù),這個函數(shù),如上面的bindload說明一樣,我們可以獲取到原圖的寬度和高度。
然后計算他們的寬高比率。。然后設(shè)置一個寬度大?。╮px),最后通過style動態(tài)設(shè)置image的寬高。代碼如下:
1..編寫頁面結(jié)構(gòu)index.wxml:
<image src="../uploads/2.jpg" bindload="imageLoad" style="width:{{imgwidth}}rpx; height:{{imgheight }}rpx;"></image>
2.設(shè)置數(shù)據(jù)index.js
//獲取應(yīng)用實例 var app = getApp() Page({ data: { screenWidth: 0, screenHeight:0, imgwidth:0, imgheight:0, }, onLoad: function() { var _this = this; wx.getSystemInfo({ success: function(res) { _this.setData({ screenHeight: res.windowHeight, screenWidth: res.windowWidth, }); } }); }, imageLoad: function(e) { var _this=this; var $width=e.detail.width, //獲取圖片真實寬度 $height=e.detail.height, ratio=$width/$height; //圖片的真實寬高比例 var viewWidth=500, //設(shè)置圖片顯示寬度, viewHeight=500/ratio; //計算的高度值 this.setData({ imgwidth:viewWidth, imgheight:viewHeight }) } })
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“微信小程序?qū)崿F(xiàn)image圖片自適應(yīng)寬度的方法”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。