新聞中心
本文實例講述了微信小程序?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:
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
當(dāng)前文章:微信小程序?qū)崿F(xiàn)image組件圖片自適應(yīng)寬度比例顯示的方法-創(chuàng)新互聯(lián)
文章轉(zhuǎn)載:http://www.dlmjj.cn/article/ighpg.html