- 视图容器
- view
view组件类似于html中的div,其主要作用就是当做一个容器来使用
属性说明
属性名 | 类型 | 默认值 | 说明 |
hover-class | String | none | 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果 |
hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态，App、H5、支付宝小程序、百度小程序不支持（支付宝小程序、百度小程序文档中都有此属性，实测未支持） |
hover-start-time | Number | 50 | 按住后多久出现点击态，单位毫秒 |
hover-stay-time | Number | 400 | 手指松开后点击态保留时间，单位毫秒 |
- scroll-view
可滚动区域,在webview中性能不如页面滚动
使用竖向滚动时，需要给 <scroll-view> 一个固定高度，通过 css 设置 height；使用横向滚动时，需要给<scroll-view>添加white-space: nowrap;样式。
属性说明
属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
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点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向 | app-nvue，微信小程序 |
show-scrollbar | Boolean | false | 控制是否出现滚动条 | App-nvue 2.1.5+ |
refresher-enabled | Boolean | false | 开启自定义下拉刷新 | app-vue 2.5.12+,微信小程序基础库2.10.1+ |
refresher-threshold | number | 45 | 设置自定义下拉刷新阈值 | app-vue 2.5.12+,微信小程序基础库2.10.1+ |
refresher-default-style | string | "black" | 设置自定义下拉刷新默认样式，支持设置 black，white，none，none 表示不使用默认样式 | app-vue 2.5.12+,微信小程序基础库2.10.1+ |
refresher-background | string | "#FFF" | 设置自定义下拉刷新区域背景颜色 | app-vue 2.5.12+,微信小程序基础库2.10.1+ |
refresher-triggered | boolean | false | 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发 | app-vue 2.5.12+,微信小程序基础库2.10.1+ |
enable-flex | boolean | false | 启用 flexbox 布局。开启后，当前节点声明了 display: flex 就会成为 flex container，并作用于其孩子节点。 | 微信小程序 2.7.3 |
scroll-anchoring | boolean | false | 开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS overflow-anchor 属性。 | 微信小程序 2.8.2 |
@scrolltoupper | EventHandle |
| 滚动到顶部/左边，会触发 scrolltoupper 事件 |
|
@scrolltolower | EventHandle |
| 滚动到底部/右边，会触发 scrolltolower 事件 |
|
@scroll | EventHandle |
| 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |
|
@refresherpulling | EventHandle |
| 自定义下拉刷新控件被下拉 | app-vue 2.5.12+,微信小程序基础库2.10.1+ |
@refresherrefresh | EventHandle |
| 自定义下拉刷新被触发 | app-vue 2.5.12+,微信小程序基础库2.10.1+ |
@refresherrestore | EventHandle |
| 自定义下拉刷新被复位 | app-vue 2.5.12+,微信小程序基础库2.10.1+ |
@refresherabort | EventHandle |
| 自定义下拉刷新被中止 | app-vue 2.5.12+,微信小程序基础库2.10.1+ |
- swiper
滑块视图容器,一般用于左右或上下滑动
属性说明
属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
indicator-dots | Boolean | false | 是否显示面板指示点 |
|
indicator-color | Color | rgba(0, 0, 0, .3) | 指示点颜色 |
|
indicator-active-color | Color | #000000 | 当前选中的指示点颜色 |
|
active-class | String |
| swiper-item 可见时的 class | 支付宝小程序 |
changing-class | String |
| acceleration 设置为 {{true}} 时且处于滑动过程中，中间若干屏处于可见时的class | 支付宝小程序 |
autoplay | Boolean | false | 是否自动切换 |
|
current | Number | 0 | 当前所在滑块的 index |
|
current-item-id | String |
| 当前所在滑块的 item-id ，不能与 current 被同时指定 | 支付宝小程序不支持 |
interval | Number | 5000 | 自动切换时间间隔 |
|
duration | Number | 500 | 滑动动画时长 | app-nvue不支持 |
circular | Boolean | false | 是否采用衔接滑动，即播放到末尾后重新回到开头 |
|
vertical | Boolean | false | 滑动方向是否为纵向 |
|
previous-margin | String | 0px | 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值 | app-nvue、字节跳动小程序不支持 |
next-margin | String | 0px | 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 | app-nvue、字节跳动小程序不支持 |
acceleration | Boolean | false | 当开启时，会根据滑动速度，连续滑动多屏 | 支付宝小程序 |
disable-programmatic-animation | Boolean | false | 是否禁用代码变动触发 swiper 切换时使用动画。 | 支付宝小程序 |
display-multiple-items | Number | 1 | 同时显示的滑块数量 | app-nvue、支付宝小程序不支持 |
skip-hidden-item-layout | Boolean | false | 是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息 | App、微信小程序 |
disable-touch | Boolean | false | 是否禁止用户 touch 操作 | App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序（只在初始化时有效，不能动态变更） |
touchable | Boolean | true | 是否监听用户的触摸事件，只在初始化时有效，不能动态变更 | 字节跳动小程序（uni-app 2.5.5+ 推荐统一使用 disable-touch） |
easing-function | String | default | 指定 swiper 切换缓动动画类型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic | 微信小程序、快手小程序 |
@change | EventHandle |
| current 改变时会触发 change 事件，event.detail = {current: current, source: source} |
|
@transition | EventHandle |
| swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}，支付宝小程序暂不支持dx, dy | App、H5、微信小程序、支付宝小程序、字节跳动小程序、QQ小程序、快手小程序 |
@animationfinish | EventHandle |
| 动画结束时会触发 animationfinish 事件，event.detail = {current: current, source: source} | 字节跳动小程序不支持 |
change事件返回的detail表示触发原因,其中有三个取值:autoplay(自动播放),touch(用户触发),空字符串(其他原因)
swiper做左右拖动的长列表时,可以参考这个范例，插件市场新闻模板示例，
swiper-item组件:仅可放在swiper中,宽高自动设置为100%,属性:item-id 该组件的标识
- match-media
media query 匹配检测节点。
类似于网页开发中使用媒体查询来适配大屏小屏，match-media是一个可适配不同屏幕的基本视图组件。可以指定一组 media query 媒体查询规则，满足查询条件时，这个组件才会被展示。
例如在match-media组件中放置一个侧边栏，媒体查询规则设置为宽屏才显示，就可以实现在PC宽屏显示该侧边栏，而在手机窄屏中不显示侧边栏的效果。
属性名 | 类型 | 默认值 | 必填 | 说明 |
min-width | number |
| 否 | 页面最小宽度（ px 为单位） |
max-width | number |
| 否 | 页面最大宽度（ px 为单位） |
width | number |
| 否 | 页面宽度（ px 为单位） |
min-height | number |
| 否 | 页面最小高度（ px 为单位） |
max-height | number |
| 否 | 页面最大高度（ px 为单位） |
height | number |
| 否 | 页面高度（ px 为单位） |
orientation | string |
| 否 | 屏幕方向（ landscape 或 portrait ） |
- movable-area
可拖动区域
movable-area指代可拖动的范围，在其中内嵌movable-view组件用于指示可拖动的区域。
即手指/鼠标按住movable-view拖动或双指缩放，但拖不出movable-area规定的范围。
当然也可以不拖动，而使用代码来触发movable-view在movable-area里的移动缩放。
注意：movable-area 必须设置 width 和 height 属性，不设置默认为 10px
属性名 | 类型 | 默认值 | 说明 |
scale-area | Boolean | false | 当里面的 movable-view 设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个 movable-area |
- movable-view
可移动的视图容器，在页面中可以拖拽滑动或双指缩放。
movable-view必须在movable-area组件中，并且必须是直接子节点，否则不能移动。
属性说明
属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
direction | String | none | movable-view的移动方向，属性值有all、vertical、horizontal、none |
|
inertia | Boolean | false | movable-view是否带有惯性 | 微信小程序、支付宝小程序、App、H5、百度小程序 |
out-of-bounds | Boolean | false | 超过可移动区域后，movable-view是否还可以移动 | 微信小程序、支付宝小程序、App、H5、百度小程序、快手小程序 |
x | Number / String |
| 定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画 |
|
y | Number / String |
| 定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画 |
|
damping | Number | 20 | 阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快 | 微信小程序、支付宝小程序、App、H5、百度小程序 |
friction | Number | 2 | 摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值 | 微信小程序、支付宝小程序、App、H5、百度小程序 |
disabled | Boolean | false | 是否禁用 |
|
scale | Boolean | false | 是否支持双指缩放，默认缩放手势生效区域是在movable-view内 | 微信小程序、支付宝小程序、App、H5、快手小程序 |
scale-min | Number | 0.5 | 定义缩放倍数最小值 | 微信小程序、支付宝小程序、App、H5、快手小程序 |
scale-max | Number | 10 | 定义缩放倍数最大值 | 微信小程序、支付宝小程序、App、H5、快手小程序 |
scale-value | Number | 1 | 定义缩放倍数，取值范围为 0.5 - 10 | 微信小程序、支付宝小程序、App、H5、快手小程序 |
animation | Boolean | true | 是否使用动画 | 微信小程序、支付宝小程序、App、H5、百度小程序、快手小程序 |
@change | EventHandle |
| 拖动过程中触发的事件，event.detail = {x: x, y: y, source: source}，其中source表示产生移动的原因，值可为touch（拖动）、touch-out-of-bounds（超出移动范围）、out-of-bounds（超出移动范围后的回弹）、friction（惯性）和空字符串（setData） |
|
@scale | EventHandle |
| 缩放过程中触发的事件，event.detail = {x: x, y: y, scale: scale}， | 微信小程序、App、H5、百度小程序、快手小程序 |
除了基本事件外，movable-view提供了两个特殊事件
类型 | 触发条件 |
htouchmove | 初次手指触摸后移动为横向的移动，如果catch此事件，则意味着touchmove事件也被catch |
vtouchmove | 初次手指触摸后移动为纵向的移动，如果catch此事件，则意味着touchmove事件也被catch |
- cover-view
覆盖在原生组件上的文本视图。
app-vue和小程序框架，渲染引擎是webview的。但为了优化体验，部分组件如map、video、textarea、canvas通过原生控件实现，原生组件层级高于前端组件（类似flash层级高于div）。为了能正常覆盖原生组件，设计了cover-view.
属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
scroll-top | number/string |
| 设置顶部滚动偏移量，仅在设置了 overflow-y: scroll 成为滚动元素后生效 | 微信小程序2.1.0 |
- cover-image
覆盖在原生组件上的图片视图。可覆盖的原生组件同cover-view，支持嵌套在cover-view里。
属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
src | String |
| 图标路径。支持本地路径、网络路径。不支持 base64 格式。 |
|
@load | eventhandle |
| 图片加载成功时触发 | 微信小程序 2.1.0 |
@error | eventhandle |
| 图片加载失败时触发 | 微信小程序 2.1.0 |
- 基础内容
- icon
图标,由于 icon 组件各端表现存在差异，可以通过使用 字体图标 的方式来弥补各端差异。
属性说明
属性名 | 类型 | 默认值 | 说明 |
type | String |
| icon的类型 |
size | Number | 23 | icon的大小，单位px |
color | Color |
| icon的颜色，同css的color |
- text
文本组件,用于包裹文本内容
属性说明
属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
selectable | Boolean | false | 文本是否可选 | App、H5、快手小程序 |
user-select | Boolean | false | 文本是否可选 | 微信小程序 |
space | String |
| 显示连续空格 | App、H5、微信小程序 |
decode | Boolean | false | 是否解码 | App、H5、微信小程序 |
space值有3个: ensp(中文字符空格一半大),emsp(中文字符空格大小),nbsp(根据字体设置的空格大小)
- rich-text
富文本
属性名 | 类型 | 默认值 | 说明 | 平台兼容 |
nodes | Array / String | [] | 节点列表 / HTML String |
|
space | string |
| 显示连续空格 | |
selectable | Boolean | false | 富文本是否可以长按选中，可用于复制，粘贴等场景 | 百度小程序（真机） |
- progress
进度条
属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
percent | Float | 无 | 百分比0~100 |
|
show-info | Boolean | false | 在进度条右侧显示百分比 |
|
border-radius | number/string | 0 | 圆角大小 | app-nvue、微信基础库2.3.1+、QQ小程序、快手小程序 |
font-size | number/string | 16 | 右侧百分比字体大小 | app-nvue、微信基础库2.3.1+、QQ小程序 |
stroke-width | Number | 6 | 进度条线的宽度，单位px |
|
activeColor | Color | #09BB07（百度为#E6E6E6） | 已选择的进度条的颜色 |
|
backgroundColor | Color | #EBEBEB | 未选择的进度条的颜色 |
|
active | Boolean | false | 进度条从左往右的动画 |
|
active-mode | String | backwards | backwards: 动画从头播；forwards：动画从上次结束点接着播 | App、H5、微信小程序、QQ小程序、快手小程序 |
duration | number | 30 | 进度增加1%所需毫秒数 | App-nvue2.6.1+、微信基础库2.8.2+、H5 3.1.11+、快手小程序 |
@activeend | EventHandle |
| 动画完成事件 | 微信小程序 |
- 表单组件
- button 按钮
- CheckBox 多选框
- editor 富文本编辑器
- form 表单
- input 输入框
- label 表单分组
- picker 普通选择器,底部弹出的滚动选择弹窗
- picker-view 嵌入页面的滚动选择器
- radio 单项选择器
- slider 滑动选择器
- switch 开关选择器
- textarea 多行输入框
- 路由及跳转
- navigater 页面跳转
属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
url | String |
| 应用内的跳转链接，值为相对路径或绝对路径，如："../first/first"，"/pages/first/first"，注意不能加 |
|
open-type | String | navigate | 跳转方式 |
|
delta | Number |
| 当 open-type 为 'navigateBack' 时有效，表示回退的层数 |
|
animation-type | String | pop-in/out | 当 open-type 为 navigate、navigateBack 时有效，窗口的显示/关闭动画效果，详见：窗口动画 | App |
animation-duration | Number | 300 | 当 open-type 为 navigate、navigateBack 时有效，窗口显示/关闭动画的持续时间。 | App |
hover-class | String | navigator-hover | 指定点击时的样式类，当hover-class="none"时，没有点击态效果 |
|
hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态 | 微信小程序 |
hover-start-time | Number | 50 | 按住后多久出现点击态，单位毫秒 |
|
hover-stay-time | Number | 600 | 手指松开后点击态保留时间，单位毫秒 |
|
target | String | self | 在哪个小程序目标上发生跳转，默认当前小程序，值域self/miniProgram | 微信2.0.7+、百度2.5.2+、QQ |
- 媒体组件
- audio 音频
- camera 区域相机
- image 图片
- video 视频播放组件
- live-player 直播拉流
- live-pusher 直播推流
- 地图
- map 地图组件
<polygon> 多边形App-nvue 2.1.5+、微信小程序、百度小程序、支付宝小程序enable-indoorMapBooleanfalse是否展示室内地图App-nvue 3.1.0+@markertapEventHandle 点击标记点时触发，e.detail = {markerId}App-nvue 2.3.3+, App平台需要指定 marker 对象属性 id@labeltapEventHandle 点击label时触发，e.detail = {markerId}微信小程序2.9.0@callouttapEventHandle 点击标记点对应的气泡时触发，e.detail = {markerId} @controltapEventHandle 点击控件时触发，e.detail = {controlId} @regionchangeEventHandle 视野发生变化时触发微信小程序、H5、百度小程序、支付宝小程序@tapEventHandle 点击地图时触发; App-nuve、微信小程序2.9支持返回经纬度 @updatedEventHandle 在地图渲染更新完成时触发微信小程序、H5、百度小程序@anchorpointtapEventHandle 点击定位标时触发，e.detail = {longitude, latitude}App-nvue 3.1.0+、微信小程序2.13+@poitapEventHandle 点击地图poi点时触发，e.detail = {name, longitude, latitude}微信小程序2.3.0+- 画布
- canvas 画布
属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
type | String |
| 指定 canvas 类型，支持 2d (2.9.0) 和 webgl | 微信小程序 2.7.0+ 字节小程序1.78.0+ |
canvas-id | String |
| canvas 组件的唯一标识符 |
|
disable-scroll | Boolean | false | 当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新 | 字节跳动小程序不支持 |
@touchstart | EventHandle |
| 手指触摸动作开始 | 字节小程序1.78.0+ |
@touchmove | EventHandle |
| 手指触摸后移动 | 字节小程序1.78.0+ |
@touchend | EventHandle |
| 手指触摸动作结束 | 字节小程序1.78.0+ |
@touchcancel | EventHandle |
| 手指触摸动作被打断，如来电提醒，弹窗 | 字节小程序1.78.0+ |
@longtap | EventHandle |
| 手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动 | 字节跳动小程序不支持 |
@error | EventHandle |
| 当发生错误时触发 error 事件，detail = {errMsg: 'something wrong'} | 字节跳动小程序不支持 |
- webview
- webview web浏览器组件
属性名 | 类型 | 说明 | 平台差异说明 |
src | String | webview 指向网页的链接 |
|
allow | String | H5 | |
sandbox | String | 该属性对呈现在 iframe 框架中的内容启用一些额外的限制条件。 | H5 |
webview-styles | Object | webview 的样式 | App-vue |
@message | EventHandler | 网页向应用 | H5 暂不支持（可以直接使用 window.postMessage） |
@onPostMessage | EventHandler | 网页向应用实时 | App-nvue |
- 广告
- ad 信息流广告
- ad-draw 沉浸式视频流广告
- ad-content-page 短视频内容联盟组件
- grid广告
- 页面属性节点
- page-meta
- navigation-bar
- custom-tab-bar
