第4章 小程序的组件
什么是组件：
组件是视图层的基本组成单元。
组件自带一些功能与微信风格的样式。
一个组件通常包括和结束标签，属性用来修饰这个组件，内容在两个标签之内。
注意：所有组件与属性都是小写，以连字符-连接
共同属性类型所有组件都有的属性：
属性名
类型
描述
注解
id
String
组件的唯一标示
保持整个页面唯一
class
String
组件的样式类
在对应的 WXSS 中定义的样式类
style
String
组件的内联样式
可以动态设置的内联样式
hidden
Boolean
组件是否显示
所有组件默认显示
data-*
Any
自定义属性
组件上触发的事件时，会发送给事件处理函数
bind / catch
EventHandler
组件的事件
详见
特殊属性几乎所有组件都有各自定义的属性，可以对该组件的功能或样式进行修饰，请参考各个的定义。
组件列表基础组件分为以下七大类：
组件名
说明
视图容器
scroll-view
可滚动视图容器
滑块视图容器
基础内容(Basic Content)：
组件名
说明
icon
图标
文字
progress
进度条
表单(Form)：
导航(Navigation)：
组件名
说明
应用链接
多媒体(Media)：
组件名
说明
audio
音频
图片
video
视频
地图(Map)：
组件名
说明
地图
画布(Canvas)：
基础内容icon图标。
属性
属性名
类型
默认值
说明
type
String
icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size
Number
23
icon的大小，单位px
color
Color
icon的颜色，同css的color
示例在开发者工具中预览效果
text文本。
属性
属性名
类型
默认值
说明
最低版本
selectable
Boolean
false
文本是否可选
space
String
false
显示连续空格
1.4.0
decode
Boolean
false
是否解码
space 有效值：
值
说明
ensp
中文字符空格一半大小
emsp
中文字符空格大小
nbsp
根据字体设置的空格大小
示例
rich-textprogress视图容器viewscroll-viewswipermovable-viewbuttoncheckboxforminputlabelpickerpicker-viewradiosliderswitchtextarea导航媒体组件audioimage图片。
属性
注：image组件默认宽度300px、高度225px
mode 有效值：
模式
值
说明
缩放
scaleToFill
不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩放
aspectFit
保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
缩放
aspectFill
保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
缩放
widthFix
宽度不变，高度自动变化，保持原图宽高比不变
裁剪
top
不缩放图片，只显示图片的顶部区域
裁剪
bottom
不缩放图片，只显示图片的底部区域
裁剪
center
不缩放图片，只显示图片的中间区域
裁剪
left
不缩放图片，只显示图片的左边区域
裁剪
right
不缩放图片，只显示图片的右边区域
裁剪
top left
不缩放图片，只显示图片的左上边区域
裁剪
top right
不缩放图片，只显示图片的右上边区域
裁剪
bottom left
不缩放图片，只显示图片的左下边区域
裁剪
bottom right
不缩放图片，只显示图片的右下边区域
示例
videocameralive-playerlive-pushermap画布canvas开放能力open-dataweb-viewad