我的书签
添加书签
移除书签第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-text
progress
视图容器
view
scroll-view
swiper
movable-view
button
checkbox
form
input
label
picker
picker-view
radio
slider
switch
textarea
导航
媒体组件
audio
image
图片。
属性
注：image组件默认宽度300px、高度225px
mode 有效值：
| 模式 | 值 | 说明 |
|---|---|---|
| 缩放 | scaleToFill | 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 |
| 缩放 | aspectFit | 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 |
| 缩放 | aspectFill | 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 |
| 缩放 | widthFix | 宽度不变，高度自动变化，保持原图宽高比不变 |
| 裁剪 | top | 不缩放图片，只显示图片的顶部区域 |
| 裁剪 | bottom | 不缩放图片，只显示图片的底部区域 |
| 裁剪 | center | 不缩放图片，只显示图片的中间区域 |
| 裁剪 | left | 不缩放图片，只显示图片的左边区域 |
| 裁剪 | right | 不缩放图片，只显示图片的右边区域 |
| 裁剪 | top left | 不缩放图片，只显示图片的左上边区域 |
| 裁剪 | top right | 不缩放图片，只显示图片的右上边区域 |
| 裁剪 | bottom left | 不缩放图片，只显示图片的左下边区域 |
| 裁剪 | bottom right | 不缩放图片，只显示图片的右下边区域 |
