
image組件也是一個程序不可缺少的,可以這樣說一個app中image組件隨處可以看到,一般 image有兩種加載方式第一種是網絡圖片第二種是本地圖片資源,都用src屬性去指定。
重點屬性:

三種縮放模式

九種剪切方式

wxml
<!--3中是縮放模式 scaleToFill 不保持縱橫比縮放圖片,使圖片的寬高完全拉伸至填滿image元素 aspectFit 保持縱橫比縮放圖片,使圖片的長邊能完全顯示出來。也就是說,可以完整地將圖片顯示出來。 aspectFill 保持縱橫比縮放圖片,只保證圖片的短邊能完全顯示出來--><view>aspectFit 保持縱橫比縮放圖片,只保證圖片的短邊能完全顯示出來</view><image style="width: 100%; height:100%" mode="aspectFit" src="../../image/image.jpg"/><!--9種是裁剪模式 top 不縮放圖片,只顯示圖片的頂部區域 bottom,同上 left right top right top left bottom right bottom left--><view>bottom 不縮放圖片,只顯示圖片的底部區域</view><image style="width: 100%; height: 100%" mode="bottom" src="../../image/image.jpg"/><view>left 不縮放圖片,只顯示圖片的左邊區域</view><image style="width: 100%; height: 100%" mode="left" src="../../image/image.jpg"/><view>top right 不縮放圖片,只顯示圖片的右上邊區域</view><image style="width: 100%; height: 100%" mode="top right" src="../../image/image.jpg"/>
相關文章:
hello WeApp icon組件
Window text組件 switch組件
tabBar底部導航 progress組件 action-sheet
應用生命周期 button組件 modal組件
頁面生命周期 checkbox組件 toast組件
模塊化詳 form組件詳 loading 組件
數據綁定 input 組件 navigator 組件
View組件 picker組件 audio 組件
scroll-view組件 radio組件 video組件
swiper組件 slider組件 Image組件
新聞熱點
疑難解答