媒体组件的使用_第1页
媒体组件的使用_第2页
媒体组件的使用_第3页
媒体组件的使用_第4页
媒体组件的使用_第5页
已阅读5页,还剩12页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

媒体组件image的使用目录image属性2任务实现image简介任务描述任务描述3实现下图效果:1、图片完全适应,2、图片左下对齐显示。image简介4image组件实现图片的布局显示。image属性5属性名类型默认值说明srcString图片资源地址,支持云文件IDmodeString'scaleToFill'图片裁剪、缩放的模式6属性名类型默认值说明binderrorHandleEvent当错误发生时,发布到AppService的事件名,事件对象event.detail={errMsg:'somethingwrong'}bindloadHandleEvent'scaleToFill'当图片载入完毕时,发布到AppService的事件名,事件对象event.detail={height:'图片高度px',width:'图片宽度px'}image属性mode有效值13种,4种是缩放模式,9种是裁剪模式。7模式值说明缩放scaleToFill使图片的宽高完全拉伸至填满image元素缩放aspectFit保持纵横比缩放图片,长边完全显示。缩放aspectFill保持纵横比缩放图片,短边完全显示。缩放widthFix宽度不变,高度自动变化,保持原图宽高比不变image属性8模式值说明裁剪top不缩放图片,只显示图片的顶部区域裁剪bottom不缩放图片,只显示图片的底部区域裁剪center不缩放图片,只显示图片的中间区域image属性mode有效值-裁剪9模式值说明裁剪left不缩放图片,只显示图片的左边区域裁剪right不缩放图片,只显示图片的右边区域裁剪topleft不缩放图片,只显示图片的左上边区域裁剪topright不缩放图片,只显示图片的右上边区域image属性mode有效值-裁剪10模式值说明裁剪bottomleft不缩放图片,只显示图片的左下边区域裁剪bottomright不缩放图片,只显示图片的右下边区域image属性mode有效值-裁剪//index.wxml页面<viewclass="page__hd"><textclass="page__title">image</text><textclass="page__desc">图片</text></view><viewclass="page__bd"><viewclass="sectionsection_gap"wx:for="{{array}}"wx:for-item="item">任务实现11<viewclass="section__title">{{item.text}}</view><viewclass="section__ctn"><imagestyle="width:200px;height:200px;background-color:#eeeeee;"mode="{{item.mode}}"src="{{src}}"></image></view></view></view>12任务实现//index.jsPage({data:{array:[{mode:'scaleToFill',text:'scaleToFill:不保持纵横比缩放图片,使图片完全适应'},13任务实现//index.js{mode:'bottomleft',text:'bottomleft:不缩放图片,只显示图片的左下边区域'},14任务实现//index.jssrc:'../resources/cat.jpg'},imageError:function(e){

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论