摘要：
aspectFill缩放模式保持缩放图像的纵横比，并且只能完全显示图像的短边。也就是说，图片通常只在水平或垂直方向上是完整的，而另一个方向会被截取。
一、部分常用组件
1、scroll-view可滚动视图区域：
<scroll-view>标签必须设置scroll-x/scroll-y属性，否则不能实现滚动效果
css设置：<scroll-view>标签可以设置white-space:nowrap，子元素设置display:inline-block（如子元素中有文字需要换行，则可以给子元素设置white-space:normal）;
2、image图片（支持 JPG、PNG、SVG、WEBP、GIF 等格式）
lazy-load：懒加载（默认false）
show-menu-by-longpress：开启长按图片显示识别小程序码菜单（默认false）
<image>标签需要设置宽高(image标签有默认宽高320*240)和mode属性（mode的缩放模式是针对image标签自己，所以image标签需要设置宽高）
常用mode属性：
| 值 | 说明 | 最低版本 |
|---|---|---|
| scaleToFill | 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 | |
| aspectFit | 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 | |
| aspectFill | 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 | |
| widthFix | 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 | |
| heightFix | 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变 | 2.10.3 |
| top | 裁剪模式，不缩放图片，只显示图片的顶部区域 | |
| bottom | 裁剪模式，不缩放图片，只显示图片的底部区域 | |
| center | 裁剪模式，不缩放图片，只显示图片的中间区域 | |
| left | 裁剪模式，不缩放图片，只显示图片的左边区域 | |
| right | 裁剪模式，不缩放图片，只显示图片的右边区域 | |
| top left | 裁剪模式，不缩放图片，只显示图片的左上边区域 | |
| top right | 裁剪模式，不缩放图片，只显示图片的右上边区域 | |
| bottom left | 裁剪模式，不缩放图片，只显示图片的左下边区域 | |
| bottom right | 裁剪模式，不缩放图片，只显示图片的右下边区域 |
3、button按钮
size 的合法值
| 值 | 说明 | 最低版本 |
|---|---|---|
| default | 默认大小 | |
| mini | 小尺寸 |
open-type：
| 值 | 说明 | 最低版本 |
|---|---|---|
| contact | 打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，具体说明 | 1.1.0 |
| share | 触发用户转发，使用前建议先阅读使用指引 | 1.2.0 |
| getPhoneNumber | 获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息，具体说明 | 1.2.0 |
| getUserInfo | 获取用户信息，可以从bindgetuserinfo回调中获取到用户信息 | 1.3.0 |
| launchApp | 打开APP，可以通过app-parameter属性设定向APP传的参数具体说明 | 1.9.5 |
| openSetting | 打开授权设置页 | 2.0.7 |
| feedback | 打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容 | 2.1.0 |
disabled不可用性(默认false)
4、checkbox：多选
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| value | string | 否 | checkbox标识，选中时触发checkbox-group的 change 事件，并携带 checkbox的 value | 1.0.0 | |
| disabled | boolean | false | 否 | 是否禁用 | 1.0.0 |
| checked | boolean | false | 否 | 当前是否选中，可用来设置默认选中 | 1.0.0 |
| color | string | #09BB07 | 否 | checkbox的颜色，同css的color | 1.0.0 |
5、picker（从底部弹起的滚动选择器）：
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| header-text | string | 否 | 选择器的标题，仅安卓可用 | 2.11.0 | |
| mode | string | selector | 否 | 选择器类型 | 1.0.0 |
| disabled | boolean | false | 否 | 是否禁用 | 1.0.0 |
| bindcancel | eventhandle | 否 | 取消选择时触发 | 1.9.90 |
mode 的合法值
| 值 | 说明 | 最低版本 |
|---|---|---|
| selector | 普通选择器 | |
| multiSelector | 多列选择器 | |
| time | 时间选择器 | |
| date | 日期选择器 | |
| region | 省市区选择器 |
6、navigator(页面链接)
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| target | string | self | 否 | 在哪个目标上发生跳转，默认当前小程序 | 2.0.7 |
| url | string | 否 | 当前小程序内的跳转链接 | 1.0.0 | |
| open-type | string | navigate | 否 | 跳转方式 | 1.0.0 |
| delta | number | 1 | 否 | 当 open-type 为 'navigateBack' 时有效，表示回退的层数 | 1.0.0 |
| app-id | string | 否 | 当target="miniProgram"时有效，要打开的小程序 appId | 2.0.7 | |
| path | string | 否 | 当target="miniProgram"时有效，打开的页面路径，如果为空则打开首页 | 2.0.7 | |
| extra-data | object | 否 | 当target="miniProgram"时有效，需要传递给目标小程序的数据，目标小程序可在 App.onLaunch()，App.onShow() 中获取到这份数据。详情 | 2.0.7 | |
| version | string | release | 否 | 当target="miniProgram"时有效，要打开的小程序版本 | 2.0.7 |
| hover-class | string | navigator-hover | 否 | 指定点击时的样式类，当hover-class="none"时，没有点击态效果 | 1.0.0 |
| hover-stop-propagation | boolean | false | 否 | 指定是否阻止本节点的祖先节点出现点击态 | 1.5.0 |
| hover-start-time | number | 50 | 否 | 按住后多久出现点击态，单位毫秒 | 1.0.0 |
| hover-stay-time | number | 600 | 否 | 手指松开后点击态保留时间，单位毫秒 | 1.0.0 |
| bindsuccess | string | 否 | 当target="miniProgram"时有效，跳转小程序成功 | 2.0.7 | |
| bindfail | string | 否 | 当target="miniProgram"时有效，跳转小程序失败 | 2.0.7 | |
| bindcomplete | string | 否 | 当target="miniProgram"时有效，跳转小程序完成 | 2.0.7 |
open-type 的合法值
| 值 | 说明 | 最低版本 |
|---|---|---|
| navigate | 对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能 | |
| redirect | 对应 wx.redirectTo 的功能 | |
| switchTab | 对应 wx.switchTab 的功能 | |
| reLaunch | 对应 wx.reLaunch 的功能 | 1.1.0 |
| navigateBack | 对应 wx.navigateBack 的功能 | 1.1.0 |
| exit | 退出小程序，target="miniProgram"时生效 | 2.1.0 |
轮播图组件，一般需要给swiper设置高度，swiper-item设置宽高100%;image设置宽高，如需图片直接有缝隙，则可以给swiper-item设置padding
从底部弹起的滚动选择器。