小程序的flex布局
view
视图容器。
| 属性名 | 类型 | 默认值 | 说明 | 最低版本 |
|---|---|---|---|---|
| hover-class | String | none | 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果 | |
| hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态 | |
| hover-start-time | Number | 50 | 按住后多久出现点击态，单位毫秒 | |
| hover-stay-time | Number | 400 | 手指松开后点击态保留时间，单位毫秒 |
示例：
flex-direction: row 1 2 3 flex-direction: column 1 2 3
scroll-view
可滚动视图区域。
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| scroll-x | Boolean | false | 允许横向滚动 |
| scroll-y | Boolean | false | 允许纵向滚动 |
| upper-threshold | Number | 50 | 距顶部/左边多远时（单位px），触发 scrolltoupper 事件 |
| lower-threshold | Number | 50 | 距底部/右边多远时（单位px），触发 scrolltolower 事件 |
| scroll-top | Number | 设置竖向滚动条位置 | |
| scroll-left | Number | 设置横向滚动条位置 | |
| scroll-into-view | String | 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 | |
| scroll-with-animation | Boolean | false | 在设置滚动条位置时使用动画过渡 |
| enable-back-to-top | Boolean | false | iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向 |
| bindscrolltoupper | EventHandle | 滚动到顶部/左边，会触发 scrolltoupper 事件 | |
| bindscrolltolower | EventHandle | 滚动到底部/右边，会触发 scrolltolower 事件 | |
| bindscroll | EventHandle | 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |
使用竖向滚动时，需要给<scroll-view/>一个固定高度，通过 WXSS 设置 height。
Bug & Tip
tip: 请勿在scroll-view中使用textarea、map、canvas、video组件tip:scroll-into-view的优先级高于scroll-toptip: 在滚动scroll-view时会阻止页面回弹，所以在scroll-view中滚动，是无法触发onPullDownRefreshtip: 若要使用下拉刷新，请使用页面的滚动，而不是scroll-view，这样也能通过点击顶部状态栏回到页面顶部
绑定事件
enable-back-to-top返回最上方（在手机端进行调试）
scroll-into-view（值应为某子元素id，id不能以数字开头）
scroll-x
swiper组件（轮播图）
swiper
滑块视图容器。
| 属性名 | 类型 | 默认值 | 说明 | 最低版本 |
|---|---|---|---|---|
| indicator-dots | Boolean | false | 是否显示面板指示点 | |
| indicator-color | Color | rgba(0, 0, 0, .3) | 指示点颜色 | |
| indicator-active-color | Color | #000000 | 当前选中的指示点颜色 | |
| autoplay | Boolean | false | 是否自动切换 | |
| current | Number | 0 | 当前所在滑块的 index | |
| current-item-id | String | "" | 当前所在滑块的 item-id ，不能与 current 被同时指定 | |
| interval | Number | 5000 | 自动切换时间间隔 | |
| duration | Number | 500 | 滑动动画时长 | |
| circular | Boolean | false | 是否采用衔接滑动 | |
| vertical | Boolean | false | 滑动方向是否为纵向 | |
| previous-margin | String | "0px" | 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值 | |
| next-margin | String | "0px" | 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 | |
| display-multiple-items | Number | 1 | 同时显示的滑块数量 | |
| skip-hidden-item-layout | Boolean | false | 是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息 | |
| bindchange | EventHandle | current 改变时会触发 change 事件，event.detail = {current: current, source: source} | ||
| bindanimationfinish | EventHandle | 动画结束时会触发 animationfinish 事件，event.detail 同上 |
从 开始，change事件返回detail中包含一个source字段，表示导致变更的原因，可能值如下：
autoplay自动播放导致swiper变化；touch用户划动引起swiper变化；- 其他原因将用空字符串表示。
注意：其中只可放置<swiper-item/>组件，否则会导致未定义的行为。
swiper-item
仅可放置在<swiper/>组件中，宽高自动设置为100%。
| 属性名 | 类型 | 默认值 | 说明 | 最低版本 |
|---|---|---|---|---|
| item-id | String | "" | 该 swiper-item 的标识符 |
Bug & Tip
tip: 如果在bindchange的事件回调函数中使用setData改变current值，则有可能导致setData被不停地调用，因而通常情况下请在改变current值前检测source字段来判断是否是由于用户触摸引起。
interval durationPage({ data: { imgUrls: [ 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg' ], indicatorDots: false, autoplay: false, interval: 5000, duration: 1000 }, changeIndicatorDots: function(e) { this.setData({ indicatorDots: !this.data.indicatorDots }) }, changeAutoplay: function(e) { this.setData({ autoplay: !this.data.autoplay }) }, intervalChange: function(e) { this.setData({ interval: e.detail.value }) }, durationChange: function(e) { this.setData({ duration: e.detail.value }) }})
可拖动view
movable-area
基础库 1.2.0 开始支持，低版本需做。
movable-view 的可移动区域
| 属性名 | 类型 | 默认值 | 说明 | 最低版本 |
|---|---|---|---|---|
| scale-area | Boolean | false | 当里面的movable-view设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个movable-area |
注意：movable-area 必须设置width和height属性，不设置默认为10px
movable-view
基础库 1.2.0 开始支持，低版本需做。
可移动的视图容器，在页面中可以拖拽滑动
| 属性名 | 类型 | 默认值 | 说明 | 最低版本 |
|---|---|---|---|---|
| direction | String | none | movable-view的移动方向，属性值有all、vertical、horizontal、none | |
| inertia | Boolean | false | movable-view是否带有惯性 | |
| out-of-bounds | Boolean | false | 超过可移动区域后，movable-view是否还可以移动 | |
| x | Number / String | 定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画 | ||
| y | Number / String | 定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画 | ||
| damping | Number | 20 | 阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快 | |
| friction | Number | 2 | 摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值 | |
| disabled | Boolean | false | 是否禁用 | |
| scale | Boolean | false | 是否支持双指缩放，默认缩放手势生效区域是在movable-view内 | |
| scale-min | Number | 0.5 | 定义缩放倍数最小值 | |
| scale-max | Number | 10 | 定义缩放倍数最大值 | |
| scale-value | Number | 1 | 定义缩放倍数，取值范围为 0.5 - 10 | |
| animation | Boolean | true | 是否使用动画 | |
| bindchange | EventHandle | 拖动过程中触发的事件，event.detail = {x: x, y: y, source: source}，其中source表示产生移动的原因，值可为touch（拖动）、touch-out-of-bounds（超出移动范围）、out-of-bounds（超出移动范围后的回弹）、friction（惯性）和空字符串（setData） | ||
| bindscale | EventHandle | 缩放过程中触发的事件，event.detail = {x: x, y: y, scale: scale}，其中x和y字段在之后开始支持返回 |
除了基本事件外，movable-view提供了两个特殊事件
| 类型 | 触发条件 | 最低版本 |
|---|---|---|
| htouchmove | 初次手指触摸后移动为横向的移动，如果catch此事件，则意味着touchmove事件也被catch | |
| vtouchmove | 初次手指触摸后移动为纵向的移动，如果catch此事件，则意味着touchmove事件也被catch |
movable-view 必须设置width和height属性，不设置默认为10px
movable-view 默认为绝对定位，top和left属性为0px
当movable-view小于movable-area时，movable-view的移动范围是在movable-area内；当movable-view大于movable-area时，movable-view的移动范围必须包含movable-area（x轴方向和y轴方向分开考虑）
注意：movable-view必须在<movable-area/>组件中，并且必须是直接子节点，否则不能移动。
checkbox
form组件 -picker普通选择器 form组件-pick多列选择器
| bindchange | EventHandle | value 改变时触发 change 事件，event.detail = {value: value} | ||
| bindcancel | EventHandle | 取消选择时触发 |
时间选择器：mode = time
| 属性名 | 类型 | 默认值 | 说明 | 最低版本 |
|---|---|---|---|---|
| value | String | 表示选中的时间，格式为"hh:mm" | ||
| start | String | 表示有效时间范围的开始，字符串格式为"hh:mm" | ||
| end | String | 表示有效时间范围的结束，字符串格式为"hh:mm" | ||
| bindchange | EventHandle | value 改变时触发 change 事件，event.detail = {value: value} | ||
| bindcancel | EventHandle | 取消选择时触发 | ||
| disabled | Boolean | false | 是否禁用 |
日期选择器：mode = date
| 属性名 | 类型 | 默认值 | 说明 | 最低版本 |
|---|---|---|---|---|
| value | String | 0 | 表示选中的日期，格式为"YYYY-MM-DD" | |
| start | String | 表示有效日期范围的开始，字符串格式为"YYYY-MM-DD" | ||
| end | String | 表示有效日期范围的结束，字符串格式为"YYYY-MM-DD" | ||
| fields | String | day | 有效值 year,month,day，表示选择器的粒度 | |
| bindchange | EventHandle | value 改变时触发 change 事件，event.detail = {value: value} | ||
| bindcancel | EventHandle | 取消选择时触发 | ||
| disabled | Boolean | false | 是否禁用 |
fields 有效值：
| 值 | 说明 |
|---|---|
| year | 选择器粒度为年 |
| month | 选择器粒度为月份 |
| day | 选择器粒度为天 |
省市区选择器：mode = region（最低版本：）
| 属性名 | 类型 | 默认值 | 说明 | 最低版本 |
|---|---|---|---|---|
| value | Array | [] | 表示选中的省市区，默认选中每一列的第一个值 | |
| custom-item | String | 可为每一列的顶部添加一个自定义的项 | ||
| bindchange | EventHandle | value 改变时触发 change 事件，event.detail = {value: value, code: code, postcode: postcode}，其中字段code是统计用区划代码，postcode是邮政编码 | ||
| bindcancel | EventHandle | 取消选择时触发 | ||
| disabled | Boolean | false | 是否禁用 |
picker-view
嵌入页面的滚动选择器
| 属性名 | 类型 | 说明 | 最低版本 |
|---|---|---|---|
| value | NumberArray | 数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。 | |
| indicator-style | String | 设置选择器中间选中框的样式 | |
| indicator-class | String | 设置选择器中间选中框的类名 | |
| mask-style | String | 设置蒙层的样式 | |
| mask-class | String | 设置蒙层的类名 | |
| bindchange | EventHandle | 当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始） |
注意：其中只可放置<picker-view-column/>组件，其他节点不会显示。
picker-view-column
仅可放置于<picker-view />中，其孩子节点的高度会自动设置成与picker-view的选中框的高度一致
slider滑动选择器
slider
滑动选择器。
| 属性名 | 类型 | 默认值 | 说明 | 最低版本 |
|---|---|---|---|---|
| min | Number | 0 | 最小值 | |
| max | Number | 100 | 最大值 | |
| step | Number | 1 | 步长，取值必须大于 0，并且可被(max - min)整除 | |
| disabled | Boolean | false | 是否禁用 | |
| value | Number | 0 | 当前取值 | |
| color | Color | #e9e9e9 | 背景条的颜色（请使用 backgroundColor） | |
| selected-color | Color | #1aad19 | 已选择的颜色（请使用 activeColor） | |
| activeColor | Color | #1aad19 | 已选择的颜色 | |
| backgroundColor | Color | #e9e9e9 | 背景条的颜色 | |
| block-size | Number | 28 | 滑块的大小，取值范围为 12 - 28 | |
| block-color | Color | #ffffff | 滑块的颜色 | |
| show-value | Boolean | false | 是否显示当前 value | |
| bindchange | EventHandle | 完成一次拖动后触发的事件，event.detail = {value: value} | ||
| bindchanging | EventHandle | 拖动过程中触发的事件，event.detail = {value: value} |
swich开关
switch
开关选择器。
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| checked | Boolean | false | 是否选中 |
| disabled | Boolean | false | 是否禁用 |
| type | String | switch | 样式，有效值：switch, checkbox |
| bindchange | EventHandle | checked 改变时触发 change 事件，event.detail={ value:checked} | |
| color | Color | switch 的颜色，同 css 的 color |
textarea
多行输入框。该组件是，使用时请注意相关限制。
| 属性名 | 类型 | 默认值 | 说明 | 最低版本 |
|---|---|---|---|---|
| value | String | 输入框的内容 | ||
| placeholder | String | 输入框为空时占位符 | ||
| placeholder-style | String | 指定 placeholder 的样式 | ||
| placeholder-class | String | textarea-placeholder | 指定 placeholder 的样式类 | |
| disabled | Boolean | false | 是否禁用 | |
| maxlength | Number | 140 | 最大输入长度，设置为 -1 的时候不限制最大长度 | |
| auto-focus | Boolean | false | 自动聚焦，拉起键盘。 | |
| focus | Boolean | false | 获取焦点 | |
| auto-height | Boolean | false | 是否自动增高，设置auto-height时，style.height不生效 | |
| fixed | Boolean | false | 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true | |
| cursor-spacing | Number | 0 | 指定光标与键盘的距离，单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 | |
| cursor | Number | 指定focus时的光标位置 | ||
| show-confirm-bar | Boolean | true | 是否显示键盘上方带有”完成“按钮那一栏 | |
| selection-start | Number | -1 | 光标起始位置，自动聚集时有效，需与selection-end搭配使用 | |
| selection-end | Number | -1 | 光标结束位置，自动聚集时有效，需与selection-start搭配使用 | |
| adjust-position | Boolean | true | 键盘弹起时，是否自动上推页面 | |
| bindfocus | EventHandle | 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度，在基础库 1.9.90 起支持 | ||
| bindblur | EventHandle | 输入框失去焦点时触发，event.detail = {value, cursor} | ||
| bindlinechange | EventHandle | 输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0} | ||
| bindinput | EventHandle | 当键盘输入时，触发 input 事件，event.detail = {value, cursor}，bindinput 处理函数的返回值并不会反映到 textarea 上 | ||
| bindconfirm | EventHandle | 点击完成时， 触发 confirm 事件，event.detail = {value: value} |
小程序的导航组件
navigator
页面链接。
| 属性名 | 类型 | 默认值 | 说明 | 最低版本 |
|---|---|---|---|---|
| target | String | self | 在哪个目标上发生跳转，默认当前小程序，可选值self/miniProgram | |
| url | String | 当前小程序内的跳转链接 | ||
| open-type | String | navigate | 跳转方式 | |
| delta | Number | 当 open-type 为 'navigateBack' 时有效，表示回退的层数 | ||
| app-id | String | 当target="miniProgram"时有效，要打开的小程序 appId | ||
| path | String | 当target="miniProgram"时有效，打开的页面路径，如果为空则打开首页 | ||
| extra-data | Object | 当target="miniProgram"时有效，需要传递给目标小程序的数据，目标小程序可在 App.onLaunch()，App.onShow() 中获取到这份数据。 | ||
| version | version | release | 当target="miniProgram"时有效，要打开的小程序版本，有效值 develop（开发版），trial（体验版），release（正式版），仅在当前小程序为开发版或体验版时此参数有效；如果当前小程序是正式版，则打开的小程序必定是正式版。 | |
| hover-class | String | navigator-hover | 指定点击时的样式类，当hover-class="none"时，没有点击态效果 | |
| hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态 | |
| hover-start-time | Number | 50 | 按住后多久出现点击态，单位毫秒 | |
| hover-stay-time | Number | 600 | 手指松开后点击态保留时间，单位毫秒 | |
| bindsuccess | String | 当target="miniProgram"时有效，跳转小程序成功 | ||
| bindfail | String | 当target="miniProgram"时有效，跳转小程序失败 | ||
| bindcomplete | String | 当target="miniProgram"时有效，跳转小程序完成 |
open-type 有效值：
| 值 | 说明 | 最低版本 |
|---|---|---|
| navigate | 对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能 | |
| redirect | 对应 wx.redirectTo 的功能 | |
| switchTab | 对应 wx.switchTab 的功能 | |
| reLaunch | 对应 wx.reLaunch 的功能 | |
| navigateBack | 对应 wx.navigateBack 的功能 | |
| exit | 退出小程序，target="miniProgram"时生效 |
注：navigator-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, <navigator/> 的子节点背景色应为透明色
示例代码：
/** wxss **//** 修改默认的navigator点击态 **/.navigator-hover { color:blue;}/** 自定义其他点击态样式类 **/.other-navigator-hover { color:red;} 跳转到新页面 在当前页打开 切换 Tab 打开绑定的小程序 { {title}} 点击左上角返回回到之前页面 { {title}} 点击左上角返回回到上级页面 // redirect.js navigator.jsPage({ onLoad: function(options) { this.setData({ title: options.title }) }}) 