网站首页 >> 牛刀云小程序开发 >> 第1篇制作模式 >> 页面制作 >> 内容组件

2.3.5.2 图片

图片组件用于显示图片,可以显示静态图片,可以显示数据集中的图片数据,可以将图片缩放显示,可以将图片进行裁剪,可以设置水平对齐方式,也可以设置图片的形状,运行效果如果4-5-2所示。

4-5-2  图片组件

1、基础属性

图片组件提供4个基础属性:

l  图片地址:从上传图片对话框中选择一个图片显示

l  动态图片地址:显示数据集中的图片数据。数据集中可以直接存储图片地址路径,也可以将列类型设置为图片或文件,上传图片到数据列中就可以显示

l  图片链接保护:可防止图片被盗用,图片链接保护后,图片URL有效期为7天。该功能只用于存储在数据集图片类型列和文件类型列中的图片

l  单击预览图片:单击图片是否放大预览

 

2、上传图片

单击图片组件的“图片地址”属性右侧的…按钮,打开上传图片对话框,如图4-5-3所示。在对话框中列出已上传的图片,在图片上单击,图片左上角显示绿色的对勾,表示图片被选中,单击“确定”按钮,图片组件就会显示这张图片。如果需要从本地上传新的图片,单击“上传至当前目录”按钮,选择一张图片后,会在对话框中显示出刚刚上传的图片。

4-5-3  上传图片对话框

3、事件

图片组件提供3个事件:单击事件在单击图片组件时触发;加载完成事件在图片加载后触发;加载失败事件在图片加载不成功时触发。

 

4、样式

图片组件提供3种特有样式:分别是形状样式、预定义图片模式和对齐方式。

1)形状样式

形状样式设置图片的形状,可选项为原始形状、圆角矩形和圆形图片。

 

2)预定义图片模式

图片模式分为缩放和裁剪。图片组件提供4种缩放模式和9种裁剪模式。

4种缩放模式,只有scaleToFill会使图片变形,其它3种图片不会变形。

l  缩放 scaleToFill:不保持纵横比,图片完全拉伸充满图片组件

l  缩放 aspectFit:保持纵横比,根据图片较长边缩放图片,将图片完整显示出来,图片不充满组件组件

l  缩放 aspectFill:保持纵横比,根据图片较短边缩放图片,使短边能够完全显示出来。即图片通常只在水平或垂直方向是完整的,另一个方向将会发生剪裁

l  缩放 widthFix:宽度不变,高度自动变化,保持纵横比不变

9种裁剪模式,均不缩放图片,即显示图片原始大小,超出图片组件的部分不显示。运行效果如图4-5-4所示。

top-left    显示图片左上角 top     显示图片顶部 top-right    显示图片右上角

left        显示图片左边   enter   显示图片中间 right        显示图片右边

bottom-left显示图片左下角  bottom  显示图片底部 bottom-right  显示图片右下角

4-5-4  图片组件9种裁剪模式

 

3)对齐方式

对齐方式设置图片水平对齐方式,可选项为居左、居中和居右。其中图片设置了宽度,才能设置居中对齐。