小編給大家分享一下小程序怎么實(shí)現(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:
2. 設(shè)置數(shù)據(jù)index.js
//獲取應(yīng)用實(shí)例 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, //獲取圖片真實(shí)寬度 $height=e.detail.height, ratio=$width/$height; //圖片的真實(shí)寬高比例 var viewWidth=500, //設(shè)置圖片顯示寬度, viewHeight=500/ratio; //計算的高度值 this.setData({ imgwidth:viewWidth, imgheight:viewHeight }) } })
以上是“小程序怎么實(shí)現(xiàn)image組件圖片自適應(yīng)寬度比例顯示的方法”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!