作者:漢堡請不要欺負(fù)面條,授權(quán)地址
一.了解image組件
由于image有默認(rèn)的固定的寬度和高度,這樣我們在做圖片自適應(yīng)的時(shí)候,就不好做了。下面就來一起解決下
二.方法
(一).使用mode:widthFix
widthFix:寬度不變,高度自動(dòng)變化,保持原圖寬高比不變。
首先我們先設(shè)置image的mode為widthFix,然后給圖片加一個(gè)固定rpx的寬度,比如:730rpx。
這樣圖片也可以自適應(yīng)了。。因?yàn)樾〕绦虻膔px本身就是一個(gè)自適應(yīng)顯示的單位
(二).使用bindload綁定函數(shù)動(dòng)態(tài)自適應(yīng)。
我們可以給image綁定一個(gè)函數(shù),這個(gè)函數(shù),如上面的bindload說明一樣,我們可以獲取到原圖的寬度和高度。
然后計(jì)算他們的寬高比率。。然后設(shè)置一個(gè)寬度大?。╮px),最后通過style動(dòng)態(tài)設(shè)置image的寬高。代碼如下:
1..編寫頁面結(jié)構(gòu)index.wxml:
2.設(shè)置數(shù)據(jù)index.js
一.drawImage參數(shù)
二.使用案例 1.上傳圖片時(shí): chooseImage是調(diào)用相機(jī)和手機(jī)相冊的接口
2.繪制指定的圖片(圖片直接在小程序的images文件夾中)
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)