小程序入门连载八」小程序组件—媒体组件

上一篇文章讲解了“小程序组件 - 视图容器”,本篇文章讲解“小程序组件 - 媒体组件”。


1. image——图片

1)image标签的使用

①展示一张图片,图片可选网络图片

小程序入门连载八」小程序组件—媒体组件

②编译预览

小程序入门连载八」小程序组件—媒体组件

2)属性——mode

mode属性,图片剪裁、缩放模式。

小程序入门连载八」小程序组件—媒体组件

注意:

1. image组件默认宽度300px、高度225px。

2. mode有13种模式,其中4种是缩放模式,9种是裁剪模式

①scaleToFill

依旧使用test页面,test.wxml文件:

小程序入门连载八」小程序组件—媒体组件

test.wxss文件:

小程序入门连载八」小程序组件—媒体组件

编译预览:

小程序入门连载八」小程序组件—媒体组件

scaleToFill是将图片拉伸至填满整个image,图片会变形。

②widthFix(与我们在HTML中使用的比例相同)

小程序入门连载八」小程序组件—媒体组件

编译预览:

小程序入门连载八」小程序组件—媒体组件
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: