卓象程序员 | 哈尔滨IT培训 | 品质教育,口碑传承 | 为做出口口相传,好口碑的教育品牌而奋斗!

卓象程序员让每一位学员高薪就业 联系我们13101507057

加微信,了解详情
您所在的位置:首页 > 文章 >小程序连载

「小程序入门连载八」小程序组件—媒体组件
时间: 2018-11-08 16:16:16     来源: 卓象IT实训基地【原创】

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


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中使用的比例相同)

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


编译预览:

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



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


小程序组件开始

关注卓象程序员,定期发布技术文章

下一篇文章讲解“小程序组件——导航”

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