因?yàn)樽罱?code>iOS的工作量比較少，因此就和公司大牛開始了小程序開發(fā)，由于是新手，許多東西總是喜歡問問同事，免得走彎路，再問了同事之后，建議我用七牛的圖片處理方式來自適應(yīng)圖片，因?yàn)橛闷吲５奶幚矸绞?，需要向七牛發(fā)起一個請求獲得圖片基本信息之后才能裁剪出自己想要的方式，對于一個懶癌晚期的開發(fā)者來說，我是絕對不想這么做的。因?yàn)樵?code>iOS中aspectToSacle這個屬性，因此我堅信在微信小程序里面應(yīng)該也有類似的方法。在問了前端同事后，他告訴我沒有解決辦法，需要讓后臺返回一個正方形圖片，我和后臺小哥交流了一下，他們并不想加這個邏輯，說是也是需要通過七牛的方式去裁切圖片，我認(rèn)為這是不太方便的。他們也不想為了我這個圖片在數(shù)據(jù)庫里添加一個字段或者保存一個默認(rèn)圖，而且保存了固定的圖以后擴(kuò)展性也很差。因此我查看了小程序的開發(fā)文檔，發(fā)現(xiàn)image容器有一個mode屬性來控制圖片的縮放和裁切方式。
之前代碼如下：
<image class='sizeModal-img' src=' {{selected.image || spec.productFirstImage}}'></image>
修改之后代碼如下：
<image class='sizeModal-img' mode='aspectFill' src=' {{selected.image || spec.productFirstImage}}'></image>
以下是微信小程序圖片控件的屬性說明
image
圖片。
| 屬性名 | 類型 | 默認(rèn)值 | 說明 | 最低版本 |
|---|---|---|---|---|
| src | String | 圖片資源地址 | ||
| mode | String | 'scaleToFill' | 圖片裁剪、縮放的模式 | |
| lazy-load | Boolean | false | 圖片懶加載。只針對page與scroll-view下的image有效 | 1.5.0 |
| binderror | HandleEvent | 當(dāng)錯誤發(fā)生時，發(fā)布到 AppService 的事件名，事件對象event.detail = {errMsg: 'something wrong'} | ||
| bindload | HandleEvent | 當(dāng)圖片載入完畢時，發(fā)布到 AppService 的事件名，事件對象event.detail = {height:'圖片高度px', width:'圖片寬度px'} |
注：image組件默認(rèn)寬度300px、高度225px
mode 有效值：
mode 有 13 種模式，其中 4 種是縮放模式，9 種是裁剪模式。
模式 值 說明
縮放 scaleToFill 不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素
縮放 aspectFit 保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。也就是說，可以完整地將圖片顯示出來。
縮放 aspectFill 保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向?qū)l(fā)生截取。
縮放 widthFix 寬度不變，高度自動變化，保持原圖寬高比不變
裁剪 top 不縮放圖片，只顯示圖片的頂部區(qū)域
裁剪 bottom 不縮放圖片，只顯示圖片的底部區(qū)域
裁剪 center 不縮放圖片，只顯示圖片的中間區(qū)域
裁剪 left 不縮放圖片，只顯示圖片的左邊區(qū)域
裁剪 right 不縮放圖片，只顯示圖片的右邊區(qū)域
裁剪 top left 不縮放圖片，只顯示圖片的左上邊區(qū)域
裁剪 top right 不縮放圖片，只顯示圖片的右上邊區(qū)域
裁剪 bottom left 不縮放圖片，只顯示圖片的左下邊區(qū)域
裁剪 bottom right 不縮放圖片，只顯示圖片的右下邊區(qū)域
