Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-uni-app-x-zh
提交
ce069f27
U
unidocs-uni-app-x-zh
项目概览
DCloud
/
unidocs-uni-app-x-zh
通知
144
Star
2
Fork
33
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
9
列表
看板
标记
里程碑
合并请求
11
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
unidocs-uni-app-x-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
9
Issue
9
列表
看板
标记
里程碑
合并请求
11
合并请求
11
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
ce069f27
编写于
3月 30, 2024
作者:
D
DCloud_LXH
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: css json、custom type json、uts api json
上级
c3995430
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
3 addition
and
3 deletion
+3
-3
docs/.vuepress/utils/cssJson.json
docs/.vuepress/utils/cssJson.json
+1
-1
docs/.vuepress/utils/customTypeJson.json
docs/.vuepress/utils/customTypeJson.json
+1
-1
docs/.vuepress/utils/utsApiJson.json
docs/.vuepress/utils/utsApiJson.json
+1
-1
未找到文件。
docs/.vuepress/utils/cssJson.json
浏览文件 @
ce069f27
因为 它太大了无法显示 source diff 。你可以改为
查看blob
。
docs/.vuepress/utils/customTypeJson.json
浏览文件 @
ce069f27
{
"Event"
:{
"name"
:
"## Event"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
"
\n
### 构造函数
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 | - | - |
\n
| eventInit | [UTSJSONObject](/uts/buildin-object-api/utsjsonobject.md) | 是 | - | - |
\n\n
### Event 的属性值 @event-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| bubbles | boolean | 是 | - | 是否冒泡 |
\n
| cancelable | boolean | 是 | - | 是否可以取消 |
\n
| type | string | 是 | - | 事件类型 |
\n
| target | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| currentTarget | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| timeStamp | number | 是 | - | 事件发生时的时间戳 |
\n
"
,
"methods"
:{
"stopPropagation"
:{
"name"
:
"#### stopPropagation() @stoppropagation"
,
"description"
:
"
\n
阻止当前事件的进一步传播"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"preventDefault"
:{
"name"
:
"#### preventDefault() @preventdefault"
,
"description"
:
"
\n
阻止当前事件的默认行为"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
}}},
"UTSJSONObject"
:{
"name"
:
"## UTSJSONObject"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
""
,
"methods"
:{
"get"
:{
"name"
:
"#### get(key) @get"
,
"description"
:
"
\n
获取一个 属性，返回类型是any 或者 null"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | - |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| any
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
"##### get 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| 3.9 | x | 4.0 |
\n
"
,
"tutorial"
:
"
\n
##### 参见
\n
[get](https://uniapp.dcloud.net.cn/uts/buildin-object-api/UTSJSONObject.html#get)
\n
"
},
"set"
:{
"name"
:
"#### set(key, value) @set"
,
"description"
:
"
\n
获取一个 属性，返回类型是any 或者 null"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | - |
\n
| value | any | 是 | - | - |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
"##### set 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| 3.9 | x | 4.0 |
\n
"
,
"tutorial"
:
"
\n
##### 参见
\n
[set](https://uniapp.dcloud.net.cn/uts/buildin-object-api/UTSJSONObject.html#set)
\n
"
},
"getAny"
:{
"name"
:
"#### getAny(key) @getany"
,
"description"
:
"
\n
获取一个 属性，返回类型是any 或者 null"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | - |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| any
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
"##### getAny 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| 3.9 | x | 4.0 |
\n
"
,
"tutorial"
:
"
\n
##### 参见
\n
[getAny](https://uniapp.dcloud.net.cn/uts/buildin-object-api/UTSJSONObject.html#getAny)
\n
"
},
"getBoolean"
:{
"name"
:
"#### getBoolean(key) @getboolean"
,
"description"
:
"
\n
获取一个Boolean属性，返回类型是Boolean 或者 null"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | - |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| boolean
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
"##### getBoolean 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| 3.9 | x | 4.0 |
\n
"
,
"tutorial"
:
"
\n
##### 参见
\n
[getBoolean](https://uniapp.dcloud.net.cn/uts/buildin-object-api/UTSJSONObject.html#getBoolean)
\n
"
},
"getNumber"
:{
"name"
:
"#### getNumber(key) @getnumber"
,
"description"
:
"
\n
获取一个number属性，返回类型是number 或者 null"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | - |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| number
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
"##### getNumber 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| 3.9 | x | 4.0 |
\n
"
,
"tutorial"
:
"
\n
##### 参见
\n
[getNumber](https://uniapp.dcloud.net.cn/uts/buildin-object-api/UTSJSONObject.html#getNumber)
\n
"
},
"getString"
:{
"name"
:
"#### getString(key) @getstring"
,
"description"
:
"
\n
获取一个string属性，返回类型是string 或者 null"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | - |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| string
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
"##### getString 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| 3.9 | x | 4.0 |
\n
"
,
"tutorial"
:
"
\n
##### 参见
\n
[getString](https://uniapp.dcloud.net.cn/uts/buildin-object-api/UTSJSONObject.html#getString)
\n
"
},
"getJSON"
:{
"name"
:
"#### getJSON(key) @getjson"
,
"description"
:
"
\n
获取一个UTSJSONObject属性，返回类型是UTSJSONObject 或者 null"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | - |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| [UTSJSONObject](/uts/buildin-object-api/utsjsonobject.md)
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
"##### getJSON 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| 3.9 | x | 4.0 |
\n
"
,
"tutorial"
:
"
\n
##### 参见
\n
[getJSON](https://uniapp.dcloud.net.cn/uts/buildin-object-api/UTSJSONObject.html#getJSON)
\n
"
},
"getArray"
:{
"name"
:
"#### getArray(key) @getarray"
,
"description"
:
"
\n
获取一个Array属性，返回类型是Array 或者 null, 数组元素类型由泛型T决定"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | - |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| T[
\\\\
]
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
"##### getArray 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| 3.9 | x | 4.0 |
\n
"
,
"tutorial"
:
"
\n
##### 参见
\n
[getArray](https://uniapp.dcloud.net.cn/uts/buildin-object-api/UTSJSONObject.html#getArray<T>)
\n
"
},
"toMap"
:{
"name"
:
"#### toMap() @tomap"
,
"description"
:
"
\n
将当前 UTSJSONObject 实例转换为 Map 实例。"
,
"param"
:
""
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 |
\n
| :- |
\n
| Map
\\
<string, any> |
\n
\n
"
,
"compatibility"
:
"##### toMap 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| 3.9 | x | 4.0 |
\n
"
,
"tutorial"
:
"
\n
##### 参见
\n
[toMap](https://uniapp.dcloud.net.cn/uts/buildin-object-api/UTSJSONObject.html#toMap)
\n
"
}}},
"UniElement"
:{
"name"
:
"## UniElement"
,
"description"
:
"
\n
UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。"
,
"extends"
:
""
,
"param"
:
"
\n
### UniElement 的属性值 @unielement-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| classList | Array
\\
<string
\\
> | 是 | - | 只读属性 获取当前元素的的 class 属性的动态集合。 |
\n
| firstChild | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| lastChild | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| parentElement | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| previousSibling | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| nextElementSibling | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| children | Array
\\
<[UniElement](/dom/unielement.md)
\\
> | 是 | - | 只读属性 获取当前元素包含的子元素的集合 |
\n
| tagName | string | 是 | - | 只读属性 获取当前元素的标签名 |
\n
| nodeName | string | 是 | - | 只读属性 获取当前元素的元素名称 |
\n
| dataset | Map
\\
<string, any> | 是 | - | 只读属性 获取元素上自定义数据属性（data-*）的集合 |
\n
| attributes | Map
\\
<string, any> | 是 | - | 只读属性 获取元素上所有属性元素的集合 |
\n
| style | [CSSStyleDeclaration](/dom/cssstyledeclaration.md) | 是 | - | 只读属性 获取元素的CSS样式对象 |
\n
| scrollWidth | number | 是 | - | 只读属性 获取可滚动元素内容的总宽度，仅scroll-view、list-view组件支持，其他组件返回视图宽度 |
\n
| scrollHeight | number | 是 | - | 只读属性 获取可滚动元素内容的总高度，仅scroll-view、list-view组件支持，其他组件返回视图高度 |
\n
| scrollLeft | number | 是 | - | 获取或修改元素滚动条到元素左边的距离像素数，仅scroll-view、list-view组件支持。其他组件返回0 |
\n
| scrollTop | number | 是 | - | 获取或修改元素滚动条到元素顶部的距离像素数，仅scroll-view、list-view组件支持。其他组件返回0 |
\n
| offsetLeft | number | 是 | - | 只读属性 元素的左边界偏移值 单位px |
\n
| offsetTop | number | 是 | - | 只读属性 元素的顶部边界偏移值 单位px |
\n
| offsetWidth | number | 是 | - | 只读属性 元素的布局宽度，宽度包含border、padding的数据值 单位px |
\n
| offsetHeight | number | 是 | - | 只读属性 元素的布局高度，高度包含border、padding的数据值 单位px |
\n
| ext | Map
\\
<string, any> | 是 | - | 只读属性 扩展属性 |
\n
"
,
"methods"
:{
"takeSnapshot"
:{
"name"
:
"#### takeSnapshot(options) @takesnapshot"
,
"description"
:
"
\n
对当前组件进行截图，调用此方法会将当前组件（包含子节点）渲染结果导出成图片。
\n
成功会返回图片对应的临时文件路径，目前默认png格式
\n
"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| options | [TakeSnapshotOptions](#takesnapshotoptions-values) | 是 | - | 组件截图的参数对象 |
\n
@| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
@| :- | :- | :- | :- | :- |
\n
@| type | string
\\
| null | 否 |
\"
file
\"
| 截图导出类型，目前仅支持 'file' 保存到临时文件目录 |
\n
@| format | string
\\
| null | 否 |
\"
png
\"
| 截图文件格式，目前仅支持 'png' |
\n
@| success | (res: [TakeSnapshotSuccess](#takesnapshotsuccess-values)) => void
\\
| null | 否 | - | 接口调用成功的回调函数 |
\n
@| fail | (res: [TakeSnapshotFail](#takesnapshotfail-values)) => void
\\
| null | 否 | - | 接口调用失败的回调函数 |
\n
@| complete | (res: any) => void
\\
| null | 否 | - | 接口调用结束的回调函数（调用成功、失败都会执行） |
\n\n
##### TakeSnapshotSuccess 的属性值 @takesnapshotsuccess-values
\n\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| tempFilePath | string | 是 | - | 截图保存的临时文件路径 |
\n\n
##### TakeSnapshotFail 的属性值 @takesnapshotfail-values
\n\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| errMsg | string | 是 | - | - |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
"##### takeSnapshot 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| 3.93 | x | x |
\n
"
,
"tutorial"
:
""
},
"appendChild"
:{
"name"
:
"#### appendChild(aChild) @appendchild"
,
"description"
:
"
\n
将一个元素添加到指定父元素的子元素列表的末尾处。如果将被插入的元素已经存在于当前文档的文档树中，那么将会它从原先的位置移动到新的位置。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| aChild | [UniElement](/dom/unielement.md) | 是 | - | 插入子元素对象 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"insertBefore"
:{
"name"
:
"#### insertBefore(newChild, refChild?) @insertbefore"
,
"description"
:
"
\n
在参考元素之前插入一个拥有指定父元素的子元素。如果给定的子元素是对文档中现有元素的引用，insertBefore() 会将其从当前位置移动到新位置。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| newChild | [UniElement](/dom/unielement.md) | 是 | - | 插入子元素对象 |
\n
| refChild | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| [UniElement](/dom/unielement.md)
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"setAttribute"
:{
"name"
:
"#### setAttribute(key, value) @setattribute"
,
"description"
:
"
\n
设置指定元素上的某个属性值。如果设置的属性已经存在，则更新该属性值；否则使用指定的名称和值添加一个新的属性。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | 属性名称 |
\n
| value | string | 是 | - | 属性值域 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"getAttribute"
:{
"name"
:
"#### getAttribute(key) @getattribute"
,
"description"
:
"
\n
获取元素指定的属性值，如果指定的属性不存在则返回null。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | 属性名称 |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| string
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"hasAttribute"
:{
"name"
:
"#### hasAttribute(key) @hasattribute"
,
"description"
:
"
\n
返回改元素是否包含有指定的属性，属性存在则返回true，否则返回false。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | 属性名称 |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 |
\n
| :- |
\n
| boolean |
\n
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"removeAttribute"
:{
"name"
:
"#### removeAttribute(key) @removeattribute"
,
"description"
:
"
\n
从元素中删除一个属性，如果指定的属性不存在，则不做任何操作，也不会产生错误。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | 属性名称 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"getBoundingClientRect"
:{
"name"
:
"#### getBoundingClientRect() @getboundingclientrect"
,
"description"
:
"
\n
获取元素的大小及其相对于窗口的位置信息。"
,
"param"
:
""
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 |
\n
| :- |
\n
| [DOMRect](/dom/domrect.md) |
\n
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"getDrawableContext"
:{
"name"
:
"#### getDrawableContext() @getdrawablecontext"
,
"description"
:
"
\n
获取组件的绘制对象，仅uvue页面中的 view 组件支持，其它组件不支持则返回null。"
,
"param"
:
""
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| [DrawableContext](/dom/drawablecontext.md)
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
"##### getDrawableContext 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| 3.9 | x | x |
\n
"
,
"tutorial"
:
""
},
"addEventListener"
:{
"name"
:
"#### addEventListener(type, callback) @addeventlistener"
,
"description"
:
"
\n
将指定的监听器注册到元素对象上，当该对象触发指定的事件时，指定的回调函数就会被执行。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 | - | 事件类型 |
\n
| callback | (event: T) => R | 是 | - | 事件监听器 T表示event类型，R表示返回值类型 |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 |
\n
| :- |
\n
| UniCallbackWrapper |
\n
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"removeEventListener"
:{
"name"
:
"#### removeEventListener(type, callbackWrapper) @removeeventlistener"
,
"description"
:
"
\n
删除使用 addEventListener 方法添加的事件监听器。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 | - | 事件类型 |
\n
| callbackWrapper | UniCallbackWrapper | 是 | - | 事件监听回调封装类 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"removeChild"
:{
"name"
:
"#### removeChild(aChild) @removechild"
,
"description"
:
"
\n
从元素中删除一个子元素，返回删除的元素。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| aChild | [UniElement](/dom/unielement.md) | 是 | - | 被删除子元素对象 |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| [UniElement](/dom/unielement.md)
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"remove"
:{
"name"
:
"#### remove() @remove"
,
"description"
:
"
\n
把元素对象从它所属的 DOM 树中删除。"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"dispatchEvent"
:{
"name"
:
"#### dispatchEvent(type, value) @dispatchevent"
,
"description"
:
"
\n
向一个指定的事件目标派发一个 Event，并以合适的顺序（同步地）调用此事件的监听器回调函数。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 | - | 事件类型 |
\n
| value | [UniEvent](/component/common#unievent) | 是 | - | 事件返回对象 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"scrollTo"
:{
"name"
:
"#### scrollTo(x, y) @scrollto"
,
"description"
:
"
\n
使界面滚动到给定元素的指定坐标位置 仅scroll-view、list-view组件支持"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| x | number | 是 | - | x轴要滚动到坐标位置(单位px) |
\n
| y | number | 是 | - | y轴要滚动到坐标位置(单位px) |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"scrollBy"
:{
"name"
:
"#### scrollBy(x, y) @scrollby"
,
"description"
:
"
\n
使得元素滚动一段特定距离 仅scroll-view、list-view组件支持"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| x | number | 是 | - | x轴要滚动的距离(单位px) |
\n
| y | number | 是 | - | y轴要滚动的距离(单位px) |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"querySelector"
:{
"name"
:
"#### querySelector(selector) @queryselector"
,
"description"
:
"
\n
返回文档中与指定选择器或选择器组匹配的第一个 Element对象。如果找不到匹配项，则返回null"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| selector | [string.cssSelectorString](/uts/data-type.md#ide-string) | 是 | - | CSS 选择器字符串 |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| [UniElement](/dom/unielement.md)
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"querySelectorAll"
:{
"name"
:
"#### querySelectorAll(selector) @queryselectorall"
,
"description"
:
"
\n
返回与指定的选择器组匹配的文档中的元素列表"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| selector | [string.cssSelectorString](/uts/data-type.md#ide-string) | 是 | - | CSS 选择器字符串 |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| Array
\\
<[UniElement](/dom/unielement.md)
\\
>
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"focus"
:{
"name"
:
"#### focus() @focus"
,
"description"
:
"
\n
使元素获取焦点 仅input、Textarea组件支持"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"blur"
:{
"name"
:
"#### blur() @blur"
,
"description"
:
"
\n
使元素丢失焦点 仅input、Textarea组件支持"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
}}},
"CSSStyleDeclaration"
:{
"name"
:
"## CSSStyleDeclaration"
,
"description"
:
"
\n
CSSStyleDeclaration表示一个CSS 声明块对象，它是一个 CSS 属性键值对的集合，暴露样式信息和各种与样式相关的方法和属性。"
,
"extends"
:
""
,
"param"
:
""
,
"methods"
:{
"setProperty"
:{
"name"
:
"#### setProperty(name, value?) @setproperty"
,
"description"
:
"
\n
对CSS指定样式设置一个新值，如有此样式已存在则更新。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| name | string ([string.cssPropertyString](/uts/data-type.md#ide-string)) | 是 | - | CSS样式名称 |
\n
| value | any
\\
| null | 否 | - | 要设置的新CSS样式值 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"getPropertyValue"
:{
"name"
:
"#### getPropertyValue(property) @getpropertyvalue"
,
"description"
:
"
\n
获取CSS指定的样式值，如果指定的样式不存在则返回null。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| property | string ([string.cssPropertyString](/uts/data-type.md#ide-string)) | 是 | - | 要获取的CSS样式名称 |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| any
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"removeProperty"
:{
"name"
:
"#### removeProperty(property) @removeproperty"
,
"description"
:
"
\n
删除CSS指定的样式值"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| property | string ([string.cssPropertyString](/uts/data-type.md#ide-string)) | 是 | - | 要删除的CSS样式名称 |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| any
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
}}},
"TakeSnapshotOptions"
:{
"name"
:
"## TakeSnapshotOptions"
,
"description"
:
"
\n
组件截图的参数配置选项"
,
"extends"
:
""
,
"param"
:
"
\n
### TakeSnapshotOptions 的属性值 @takesnapshotoptions-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string
\\
| null | 否 |
\"
file
\"
| 截图导出类型，目前仅支持 'file' 保存到临时文件目录 |
\n
| format | string
\\
| null | 否 |
\"
png
\"
| 截图文件格式，目前仅支持 'png' |
\n
| success | (res: **TakeSnapshotSuccess**) => void
\\
| null | 否 | - | 接口调用成功的回调函数 |
\n
@| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
@| :- | :- | :- | :- | :- |
\n
@| tempFilePath | string | 是 | - | 截图保存的临时文件路径 |
\n
| fail | (res: **TakeSnapshotFail**) => void
\\
| null | 否 | - | 接口调用失败的回调函数 |
\n
@| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
@| :- | :- | :- | :- | :- |
\n
@| errMsg | string | 是 | - | - |
\n
| complete | (res: any) => void
\\
| null | 否 | - | 接口调用结束的回调函数（调用成功、失败都会执行） |
\n
"
},
"TakeSnapshotSuccessCallback"
:{
"name"
:
"## TakeSnapshotSuccessCallback"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
""
},
"TakeSnapshotSuccess"
:{
"name"
:
"## TakeSnapshotSuccess"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
"
\n
### TakeSnapshotSuccess 的属性值 @takesnapshotsuccess-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| tempFilePath | string | 是 | - | 截图保存的临时文件路径 |
\n
"
},
"TakeSnapshotFailCallback"
:{
"name"
:
"## TakeSnapshotFailCallback"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
""
},
"TakeSnapshotFail"
:{
"name"
:
"## TakeSnapshotFail"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
"
\n
### TakeSnapshotFail 的属性值 @takesnapshotfail-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| errMsg | string | 是 | - | - |
\n
"
},
"TakeSnapshotCompleteCallback"
:{
"name"
:
"## TakeSnapshotCompleteCallback"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
""
},
"DOMRect"
:{
"name"
:
"## DOMRect"
,
"description"
:
"
\n
一个 DOMRect 代表一个矩形。"
,
"extends"
:
""
,
"param"
:
"
\n
### 构造函数
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| x | number | 否 | - | - |
\n
| y | number | 否 | - | - |
\n
| width | number | 否 | - | - |
\n
| height | number | 否 | - | - |
\n\n
### DOMRect 的属性值 @domrect-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| width | number | 是 | - | 矩形的宽 |
\n
| height | number | 是 | - | 矩形的高 |
\n
| x | number | 是 | - | 矩形原点的x坐标 |
\n
| y | number | 是 | - | 矩形原点的y坐标 |
\n
| left | number | 是 | - | 矩形的左坐标值 |
\n
| right | number | 是 | - | 矩形的右坐标值 |
\n
| top | number | 是 | - | 矩形的顶坐标值 |
\n
| bottom | number | 是 | - | 矩形的底坐标值 |
\n
"
},
"DrawableContext"
:{
"name"
:
"## DrawableContext"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
"
\n
### DrawableContext 的属性值 @drawablecontext-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| font | string | 是 | 10px | 设置字体大小 |
\n
| fillStyle | [string.ColorString](/uts/data-type.md#ide-string) | 是 | #000 (黑色) | 设置填充颜色 |
\n
| lineCap | string | 是 | butt | 指定如何绘制每一条线条末端的属性，可选值：`butt`线段末端以方形结束；`round`线段末端以圆形结束；`square`线段末端以方形结束，但是会增加一个一半宽度的矩形区域。 |
\n
| lineDashOffset | number | 是 | - | 设置虚线偏移量 |
\n
| lineJoin | string | 是 | miter | 设置 2 个长度不为 0 的线条相连部分如何连接在一起的属性，可选值：`bevel`斜角；`round`圆角；`miter`尖角。 |
\n
| lineWidth | number | 是 | 1px | 设置线条的宽度 |
\n
| strokeStyle | [string.ColorString](/uts/data-type.md#ide-string) | 是 | #000 (黑色) | 设置边框的颜色 |
\n
| textAlign | string | 是 | left | 设置文本的对齐方式，可取值：`left`左对齐；`center`居中对齐；`right`右对齐。 |
\n
"
,
"methods"
:{
"beginPath"
:{
"name"
:
"#### beginPath() @beginpath"
,
"description"
:
"
\n
创建一个新的空路径"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"arc"
:{
"name"
:
"#### arc(x, y, radius, startAngle, endAngle, anticlockwise?) @arc"
,
"description"
:
"
\n
绘制一段弧线"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| x | number | 是 | - | 圆心的X轴坐标 |
\n
| y | number | 是 | - | 圆心的Y轴坐标 |
\n
| radius | number | 是 | - | 圆弧的半径 |
\n
| startAngle | number | 是 | - | 圆弧的起始点，x 轴方向开始计算，单位为弧度 |
\n
| endAngle | number | 是 | - | 圆弧的终点，单位为弧度 |
\n
| anticlockwise | boolean
\\
| null | 否 | true | 圆弧绘制方向，true：逆时针绘制，false：顺时针绘制。 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"moveTo"
:{
"name"
:
"#### moveTo(x, y) @moveto"
,
"description"
:
"
\n
将一个新的路径的起始点移动到 (x，y) 坐标"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| x | number | 是 | - | 点的X轴坐标 |
\n
| y | number | 是 | - | 点的Y轴坐标 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"rect"
:{
"name"
:
"#### rect(x, y, width, height) @rect"
,
"description"
:
"
\n
创建一个矩形路径"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| x | number | 是 | - | 矩形起点的X轴坐标 |
\n
| y | number | 是 | - | 矩形起点的Y轴坐标 |
\n
| width | number | 是 | - | 矩形宽度 |
\n
| height | number | 是 | - | 矩形高度 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"lineTo"
:{
"name"
:
"#### lineTo(x, y) @lineto"
,
"description"
:
"
\n
将路径的最后一个点连接到 (x，y) 坐标"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| x | number | 是 | - | 线终点的X轴坐标 |
\n
| y | number | 是 | - | 线终点的Y轴坐标 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"closePath"
:{
"name"
:
"#### closePath() @closepath"
,
"description"
:
"
\n
闭合路径，将最后一个点与起点连接起来。如果图形已经封闭，或者只有一个点，那么此方法不会产生任何效果。"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"stroke"
:{
"name"
:
"#### stroke() @stroke"
,
"description"
:
"
\n
绘制当前或已经存在的路径的边框。"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"strokeRect"
:{
"name"
:
"#### strokeRect(x, y, width, height) @strokerect"
,
"description"
:
"
\n
绘制一个矩形框"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| x | number | 是 | - | 矩形起点的X轴坐标 |
\n
| y | number | 是 | - | 矩形起点的Y轴坐标 |
\n
| width | number | 是 | - | 矩形宽度 |
\n
| height | number | 是 | - | 矩形高度 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"strokeText"
:{
"name"
:
"#### strokeText(text, x, y) @stroketext"
,
"description"
:
"
\n
绘制空心字符"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| text | string | 是 | - | 要绘制的字符 |
\n
| x | number | 是 | - | 字符开始绘制的X轴坐标 |
\n
| y | number | 是 | - | 字符开始绘制的Y轴坐标 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"fill"
:{
"name"
:
"#### fill(fillRule?) @fill"
,
"description"
:
"
\n
填充当前或已存在的路径"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| fillRule | string
\\
| null | 否 | nonzero | 填充规则。可取值：`nonzero`非零环绕规则；`evenodd`奇偶环绕规则。 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"fillRect"
:{
"name"
:
"#### fillRect(x, y, width, height) @fillrect"
,
"description"
:
"
\n
绘制一个实心矩形"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| x | number | 是 | - | 矩形起点的X轴坐标 |
\n
| y | number | 是 | - | 矩形起点的Y轴坐标 |
\n
| width | number | 是 | - | 矩形宽度 |
\n
| height | number | 是 | - | 矩形高度 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"fillText"
:{
"name"
:
"#### fillText(text, x, y) @filltext"
,
"description"
:
"
\n
绘制实心字符"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| text | string | 是 | - | 要绘制的字符 |
\n
| x | number | 是 | - | 字符开始绘制的X轴坐标 |
\n
| y | number | 是 | - | 字符开始绘制的Y轴坐标 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"reset"
:{
"name"
:
"#### reset() @reset"
,
"description"
:
"
\n
清空绘制数据"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"update"
:{
"name"
:
"#### update() @update"
,
"description"
:
"
\n
将所有绘制内容更新到画布上"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"setLineDash"
:{
"name"
:
"#### setLineDash(segments) @setlinedash"
,
"description"
:
"
\n
设置虚线样式"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| segments | number[
\\
] | 是 | - | 一组描述交替绘制线段和间距长度的数字。 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"bezierCurveTo"
:{
"name"
:
"#### bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) @beziercurveto"
,
"description"
:
"
\n
创建三次方贝塞尔曲线路径"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| cp1x | number | 是 | - | 第一个贝塞尔控制点的 x 坐标 |
\n
| cp1y | number | 是 | - | 第一个贝塞尔控制点的 y 坐标 |
\n
| cp2x | number | 是 | - | 第二个贝塞尔控制点的 x 坐标 |
\n
| cp2y | number | 是 | - | 第二个贝塞尔控制点的 y 坐标 |
\n
| x | number | 是 | - | 结束点的 x 坐标 |
\n
| y | number | 是 | - | 结束点的 y 坐标 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
}},
"example"
:
"### 示例
\n
> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/API/element-draw/element-draw.uvue)
\n
```vue
\n
<template>
\r\n
<!-- #ifdef APP -->
\r\n
<scroll-view class=
\"
page-scroll-view
\"
>
\r\n
<!-- #endif -->
\r\n
<view>
\r\n
<view class=
\"
drawing
\"
id=
\"
draw-text-view
\"
></view>
\r\n
<view class=
\"
drawing
\"
id=
\"
draw-line-view
\"
></view>
\r\n
<view class=
\"
drawing
\"
id=
\"
draw-circle-view
\"
></view>
\r\n
<view class=
\"
drawing
\"
id=
\"
draw-dash-line
\"
></view>
\r\n
<view class=
\"
drawing
\"
id=
\"
draw-house
\"
></view>
\r\n
<view class=
\"
drawing
\"
id=
\"
draw-style
\"
></view>
\r\n
<view class=
\"
drawing
\"
id=
\"
draw-odd
\"
></view>
\r\n
<view class=
\"
drawing
\"
id=
\"
draw-arcto
\"
></view>
\r\n
</view>
\r\n
<!-- #ifdef APP -->
\r\n
</scroll-view>
\r\n
<!-- #endif -->
\r\n
</template>
\r\n\r\n
<script>
\r\n
var y = 160
\r\n
export default {
\r\n
data() {
\r\n
return {
\r\n
texts: [
\r\n
'HBuilderX，轻巧、极速，极客编辑器',
\r\n
'uni-app x，终极跨平台方案',
\r\n
'uniCloud，js serverless云服务',
\r\n
'uts，大一统语言',
\r\n
'uniMPSdk，让你的App具备小程序能力',
\r\n
'uni-admin，开源、现成的全端管理后台',
\r\n
'uni-id，开源、全端的账户中心',
\r\n
'uni-pay，开源、云端一体、全平台的支付',
\r\n
'uni-ai，聚合ai能力',
\r\n
'uni-cms，开源、云端一体、全平台的内容管理平台',
\r\n
'uni-im，开源、云端一体、全平台的im即时消息',
\r\n
'uni统计，开源、完善、全平台的统计报表',
\r\n
'......'
\r\n
] as string[]
\r\n
}
\r\n
},
\r\n
onShow() {
\r\n
},
\r\n\r\n
onReady() {
\r\n
this.drawText()
\r\n
this.drawLines()
\r\n
this.drawCircles()
\r\n
this.drawStar()
\r\n
this.drawhouse()
\r\n
this.drawPoint()
\r\n
this.drawRect()
\r\n
this.drawArcTo()
\r\n
},
\r\n
onUnload() {
\r\n
y = 160
\r\n
},
\r\n
methods: {
\r\n
drawText() {
\r\n
let element = uni.getElementById('draw-text-view')!
\r\n
let ctx = element.getDrawableContext()!
\r\n
let width = element.getBoundingClientRect().width
\r\n
ctx.reset()
\r\n
ctx.font =
\"
15px
\"\r\n
ctx.textAlign =
\"
center
\"\r\n
for (var i = 0; i < this.texts.length; i++) {
\r\n
let value = this.texts[i]
\r\n
if (i % 2 == 0) {
\r\n
ctx.fillText(value, width / 2, (20 * (i + 1)))
\r\n
} else {
\r\n
ctx.strokeText(value, width / 2, (20 * (i + 1)))
\r\n
}
\r\n
}
\r\n
ctx.update()
\r\n
},
\r\n
drawLines() {
\r\n
let ctx = uni.getElementById('draw-line-view')!.getDrawableContext()!
\r\n
ctx.reset()
\r\n
ctx.lineWidth = 10;
\r\n\r\n
[
\"
round
\"
,
\"
bevel
\"
,
\"
miter
\"
].forEach((join, i) => {
\r\n
ctx.lineJoin = join;
\r\n
ctx.beginPath();
\r\n
ctx.moveTo(5, 10 + i * 40);
\r\n
ctx.lineTo(50, 50 + i * 40);
\r\n
ctx.lineTo(90, 10 + i * 40);
\r\n
ctx.lineTo(130, 50 + i * 40);
\r\n
ctx.lineTo(170, 10 + i * 40);
\r\n
ctx.stroke();
\r\n
});
\r\n
ctx.lineWidth = 1
\r\n
var space = 170
\r\n
ctx.strokeStyle = '#09f';
\r\n
ctx.beginPath();
\r\n
ctx.moveTo(10 + space, 10);
\r\n
ctx.lineTo(140 + space, 10);
\r\n
ctx.moveTo(10 + space, 140);
\r\n
ctx.lineTo(140 + space, 140);
\r\n
ctx.stroke();
\r\n
// Draw lines
\r\n
ctx.strokeStyle = 'black';
\r\n
['butt', 'round', 'square'].forEach((lineCap, i) => {
\r\n
ctx.lineWidth = 15;
\r\n
ctx.lineCap = lineCap;
\r\n
ctx.beginPath();
\r\n
ctx.moveTo(25 + space + i * 50, 10);
\r\n
ctx.lineTo(25 + space + i * 50, 140);
\r\n
ctx.stroke();
\r\n
});
\r\n
ctx.lineWidth = 1;
\r\n
this.drawDashedLine([], ctx);
\r\n
this.drawDashedLine([2, 2], ctx);
\r\n
this.drawDashedLine([10, 10], ctx);
\r\n
this.drawDashedLine([20, 5], ctx);
\r\n
this.drawDashedLine([15, 3, 3, 3], ctx);
\r\n
this.drawDashedLine([20, 3, 3, 3, 3, 3, 3, 3], ctx);
\r\n
ctx.lineDashOffset = 18;
\r\n
this.drawDashedLine([12, 3, 3], ctx);
\r\n
ctx.lineDashOffset = 0
\r\n
ctx.setLineDash([0])
\r\n
ctx.update()
\r\n
},
\r\n
drawDashedLine(pattern : Array<number>, ctx : DrawableContext) {
\r\n
ctx.beginPath();
\r\n
ctx.setLineDash(pattern);
\r\n
ctx.moveTo(0, y);
\r\n
ctx.lineTo(300, y);
\r\n
ctx.stroke();
\r\n
y += 15;
\r\n
},
\r\n
drawCircles() {
\r\n
let ctx = uni.getElementById('draw-circle-view')!.getDrawableContext()!
\r\n
ctx.reset()
\r\n
// Draw shapes
\r\n
for (var i = 0; i < 4; i++) {
\r\n
for (var j = 0; j < 3; j++) {
\r\n
ctx.beginPath();
\r\n
var x = 25 + j * 50; // x coordinate
\r\n
var y = 25 + i * 50; // y coordinate
\r\n
var radius = 20; // Arc radius
\r\n
var startAngle = 0; // Starting point on circle
\r\n
var endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
\r\n
var clockwise = i % 2 == 0 ? false : true; // clockwise or anticlockwise
\r\n\r\n
ctx.arc(x, y, radius, startAngle, endAngle, clockwise);
\r\n\r\n
if (i > 1) {
\r\n
ctx.fill();
\r\n
} else {
\r\n
ctx.stroke();
\r\n
}
\r\n
}
\r\n
}
\r\n
ctx.update()
\r\n
},
\r\n\r\n
drawStar() {
\r\n
let ctx = uni.getElementById('draw-dash-line')!.getDrawableContext()!
\r\n
ctx.reset()
\r\n
ctx.beginPath();
\r\n
var horn = 5; // 画5个角
\r\n
var angle = 360 / horn; // 五个角的度数
\r\n
// 两个圆的半径
\r\n
var R = 50;
\r\n
var r = 20;
\r\n
// 坐标
\r\n
var x = 100;
\r\n
var y = 100;
\r\n
for (var i = 0; i < horn; i++) {
\r\n
// 角度转弧度：角度/180*Math.PI
\r\n
// 外圆顶点坐标
\r\n
ctx.lineTo(Math.cos((18 + i * angle) / 180.0 * Math.PI) * R + x, -Math.sin((18 + i * angle) / 180.0 * Math.PI) * R + y);
\r\n
// 內圆顶点坐标
\r\n
ctx.lineTo(Math.cos((54 + i * angle) / 180.0 * Math.PI) * r + x, -Math.sin((54 + i * angle) / 180.0 * Math.PI) * r + y);
\r\n
}
\r\n
// closePath：关闭路径，将路径的终点与起点相连
\r\n
ctx.closePath();
\r\n
ctx.lineWidth = 3;
\r\n
ctx.fillStyle = '#E4EF00';
\r\n
ctx.strokeStyle =
\"
red
\"
;
\r\n
ctx.fill();
\r\n
ctx.stroke();
\r\n\r\n
ctx.lineWidth = 10;
\r\n
ctx.beginPath()
\r\n
ctx.moveTo(170, 100)
\r\n
ctx.lineTo(255, 15)
\r\n
ctx.lineTo(340, 100)
\r\n
ctx.closePath()
\r\n
ctx.fill()
\r\n
ctx.strokeStyle =
\"
blue
\"\r\n
ctx.stroke()
\r\n
ctx.beginPath()
\r\n
ctx.moveTo(170, 145)
\r\n
ctx.lineTo(255, 45)
\r\n
ctx.lineTo(340, 145)
\r\n
ctx.closePath()
\r\n
ctx.fill()
\r\n
ctx.strokeStyle =
\"
gray
\"\r\n
ctx.stroke()
\r\n
// 未设置beginPath，导致上下表现一致，与前端一致
\r\n
ctx.moveTo(170, 190)
\r\n
ctx.lineTo(255, 90)
\r\n
ctx.lineTo(340, 190)
\r\n
ctx.closePath()
\r\n
ctx.fillStyle =
\"
orange
\"\r\n
ctx.fill()
\r\n
ctx.strokeStyle =
\"
khaki
\"\r\n
ctx.stroke()
\r\n
ctx.update()
\r\n
},
\r\n
hex(num : number) : string {
\r\n
if (num == 0) {
\r\n
return
\"
00
\"\r\n
}
\r\n
let hexChars =
\"
0123456789ABCDEF
\"
;
\r\n
let result =
\"\"
;
\r\n
while (num > 0) {
\r\n
let remainder = Math.floor(num) % 16;
\r\n
result = hexChars[remainder] + result;
\r\n
num = Math.floor(Math.floor(num) / 16);
\r\n
}
\r\n
if (result.length == 1) {
\r\n
return
\"
0
\"
+ result
\r\n
}
\r\n
return result
\r\n
},
\r\n
drawhouse() {
\r\n
let ctx = uni.getElementById('draw-house')!.getDrawableContext()!
\r\n
ctx.reset()
\r\n
ctx.lineWidth = 10;
\r\n\r\n
// Wall
\r\n
ctx.strokeRect(75, 140, 150, 110);
\r\n\r\n
// Door
\r\n
ctx.fillRect(130, 190, 40, 60);
\r\n\r\n
// Roof
\r\n
ctx.beginPath();
\r\n
ctx.moveTo(50, 140);
\r\n
ctx.lineTo(150, 60);
\r\n
ctx.lineTo(250, 140);
\r\n
ctx.closePath();
\r\n
ctx.stroke();
\r\n
ctx.update()
\r\n
},
\r\n
drawPoint() {
\r\n
let ctx = uni.getElementById('draw-style')!.getDrawableContext()!
\r\n
ctx.reset()
\r\n
for (let i = 0; i < 6; i++) {
\r\n
for (let j = 0; j < 6; j++) {
\r\n
ctx.strokeStyle = `rgb(0,${Math.floor(255 - 42.5 * i)},${Math.floor(255 - 42.5 * j)})`;
\r\n
ctx.beginPath();
\r\n
ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
\r\n
ctx.stroke();
\r\n
}
\r\n
}
\r\n
for (let i = 0; i < 6; i++) {
\r\n
for (let j = 0; j < 6; j++) {
\r\n
ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)},${Math.floor(255 - 42.5 * j)},0)`;
\r\n
ctx.fillRect(180 + j * 25, i * 25, 25, 25);
\r\n
}
\r\n
}
\r\n
ctx.update()
\r\n
},
\r\n
drawRect() {
\r\n
let ctx = uni.getElementById('draw-odd')!.getDrawableContext()!
\r\n
ctx.reset()
\r\n
// Create path
\r\n
ctx.moveTo(30, 90);
\r\n
ctx.lineTo(110, 20);
\r\n
ctx.lineTo(240, 130);
\r\n
ctx.lineTo(60, 130);
\r\n
ctx.lineTo(190, 20);
\r\n
ctx.lineTo(270, 90);
\r\n
ctx.closePath();
\r\n\r\n
// Fill path
\r\n
ctx.fillStyle =
\"
green
\"
;
\r\n
ctx.fill(
\"
evenodd
\"
);
\r\n
ctx.update()
\r\n\r\n
},
\r\n
drawArcTo() {
\r\n
let ctx = uni.getElementById('draw-arcto')!.getDrawableContext()!
\r\n
ctx.reset()
\r\n
ctx.beginPath();
\r\n
ctx.moveTo(50, 20);
\r\n
ctx.bezierCurveTo(230, 30, 150, 60, 50, 100);
\r\n
ctx.stroke();
\r\n\r\n
ctx.fillStyle =
\"
blue
\"
;
\r\n
// start point
\r\n
ctx.fillRect(50, 20, 10, 10);
\r\n
// end point
\r\n
ctx.fillRect(50, 100, 10, 10);
\r\n\r\n
ctx.fillStyle =
\"
red
\"
;
\r\n
// control point one
\r\n
ctx.fillRect(230, 30, 10, 10);
\r\n
// control point two
\r\n
ctx.fillRect(150, 70, 10, 10);
\r\n
ctx.update()
\r\n
}
\r\n
}
\r\n
}
\r\n
</script>
\r\n\r\n
<style>
\r\n
.drawing {
\r\n
height: 275px;
\r\n
background-color: lightgray;
\r\n
margin-bottom: 15px;
\r\n
}
\r\n
</style>
\r\n\n
```"
},
"UniCallbackWrapper"
:{
"name"
:
"## UniCallbackWrapper"
,
"description"
:
"
\n
事件回调封装类，用于注销监听函数的形参"
,
"extends"
:
""
,
"param"
:
""
},
"UniEvent"
:{
"name"
:
"## UniEvent"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
"
\n
### 构造函数
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 | - | - |
\n
| eventInit | [UTSJSONObject](/uts/buildin-object-api/utsjsonobject.md) | 是 | - | - |
\n\n
### UniEvent 的属性值 @unievent-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| bubbles | boolean | 是 | - | 是否冒泡 |
\n
| cancelable | boolean | 是 | - | 是否可以取消 |
\n
| type | string | 是 | - | 事件类型 |
\n
| target | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| currentTarget | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| timeStamp | number | 是 | - | 事件发生时的时间戳 |
\n
"
,
"methods"
:{
"stopPropagation"
:{
"name"
:
"#### stopPropagation() @stoppropagation"
,
"description"
:
"
\n
阻止当前事件的进一步传播"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"preventDefault"
:{
"name"
:
"#### preventDefault() @preventdefault"
,
"description"
:
"
\n
阻止当前事件的默认行为"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
}}},
"CustomEvent"
:{
"name"
:
"## CustomEvent"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
"
\n
### 构造函数
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 | - | - |
\n
| options | any | 是 | - | - |
\n\n
### CustomEvent 的属性值 @customevent-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| detail | T | 是 | - | - |
\n
| bubbles | boolean | 是 | - | 是否冒泡 |
\n
| cancelable | boolean | 是 | - | 是否可以取消 |
\n
| type | string | 是 | - | 事件类型 |
\n
| target | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| currentTarget | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| timeStamp | number | 是 | - | 事件发生时的时间戳 |
\n
"
,
"methods"
:{
"stopPropagation"
:{
"name"
:
"#### stopPropagation() @stoppropagation"
,
"description"
:
"
\n
阻止当前事件的进一步传播"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"preventDefault"
:{
"name"
:
"#### preventDefault() @preventdefault"
,
"description"
:
"
\n
阻止当前事件的默认行为"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
}}},
"MouseEvent"
:{
"name"
:
"## MouseEvent"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
"
\n
### 构造函数
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 | - | - |
\n
| x | number | 是 | - | - |
\n
| y | number | 是 | - | - |
\n
| clientX | number | 是 | - | - |
\n
| clientY | number | 是 | - | - |
\n
| pageX | number | 是 | - | - |
\n
| pageY | number | 是 | - | - |
\n
| screenX | number | 是 | - | - |
\n
| screenY | number | 是 | - | - |
\n\n
### MouseEvent 的属性值 @mouseevent-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| clientX | number | 是 | - | 相对于页面可显示区域左边的距离 |
\n
| clientY | number | 是 | - | 相对于页面可显示区域顶部的距离 |
\n
| x | number | 是 | - | 相对于页面可显示区域左边的距离，同`clientX` |
\n
| y | number | 是 | - | 相对于页面可显示区域顶部的距离，同`clientY` |
\n
| pageX | number | 是 | - | 相对于文档左边的距离 |
\n
| pageY | number | 是 | - | 相对于文档顶部的距离 |
\n
| screenX | number | 是 | - | 相对于屏幕左边距离 |
\n
| screenY | number | 是 | - | 相对于屏幕顶部的距离 |
\n
| bubbles | boolean | 是 | - | 是否冒泡 |
\n
| cancelable | boolean | 是 | - | 是否可以取消 |
\n
| type | string | 是 | - | 事件类型 |
\n
| target | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| currentTarget | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| timeStamp | number | 是 | - | 事件发生时的时间戳 |
\n
"
,
"methods"
:{
"stopPropagation"
:{
"name"
:
"#### stopPropagation() @stoppropagation"
,
"description"
:
"
\n
阻止当前事件的进一步传播"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"preventDefault"
:{
"name"
:
"#### preventDefault() @preventdefault"
,
"description"
:
"
\n
阻止当前事件的默认行为"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
}}},
"TouchEvent"
:{
"name"
:
"## TouchEvent"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
"
\n
### TouchEvent 的属性值 @touchevent-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| touches | Array
\\
<**UniTouch**
\\
> | 是 | - | 当前停留在屏幕中的触摸点信息的数组 |
\n
@| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
@| :- | :- | :- | :- | :- |
\n
@| clientX | number | 是 | - | 相对于页面可显示区域左边的距离 |
\n
@| clientY | number | 是 | - | 相对于页面可显示区域顶部的距离 |
\n
@| identifier | number | 是 | - | 触摸点的标识符。这个值在这根手指所引发的所有事件中保持一致，直到手指抬起。 |
\n
@| pageX | number | 是 | - | 相对于文档左边的距离 |
\n
@| pageY | number | 是 | - | 相对于文档顶部的距离 |
\n
@| screenX | number | 是 | - | 相对于屏幕左边距离 |
\n
@| screenY | number | 是 | - | 相对于屏幕顶部的距离 |
\n
@| force | number
\\
| null | 否 | - | 返回当前触摸点按下的压力大小 |
\n
| changedTouches | Array
\\
<**UniTouch**
\\
> | 是 | - | 当前变化的触摸点信息的数组 |
\n
@| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
@| :- | :- | :- | :- | :- |
\n
@| clientX | number | 是 | - | 相对于页面可显示区域左边的距离 |
\n
@| clientY | number | 是 | - | 相对于页面可显示区域顶部的距离 |
\n
@| identifier | number | 是 | - | 触摸点的标识符。这个值在这根手指所引发的所有事件中保持一致，直到手指抬起。 |
\n
@| pageX | number | 是 | - | 相对于文档左边的距离 |
\n
@| pageY | number | 是 | - | 相对于文档顶部的距离 |
\n
@| screenX | number | 是 | - | 相对于屏幕左边距离 |
\n
@| screenY | number | 是 | - | 相对于屏幕顶部的距离 |
\n
@| force | number
\\
| null | 否 | - | 返回当前触摸点按下的压力大小 |
\n
| bubbles | boolean | 是 | - | 是否冒泡 |
\n
| cancelable | boolean | 是 | - | 是否可以取消 |
\n
| type | string | 是 | - | 事件类型 |
\n
| target | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| currentTarget | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| timeStamp | number | 是 | - | 事件发生时的时间戳 |
\n
"
,
"methods"
:{
"stopPropagation"
:{
"name"
:
"#### stopPropagation() @stoppropagation"
,
"description"
:
"
\n
阻止当前事件的进一步传播"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"preventDefault"
:{
"name"
:
"#### preventDefault() @preventdefault"
,
"description"
:
"
\n
阻止当前事件的默认行为"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
}}},
"UniTouch"
:{
"name"
:
"## UniTouch"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
"
\n
### UniTouch 的属性值 @unitouch-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| clientX | number | 是 | - | 相对于页面可显示区域左边的距离 |
\n
| clientY | number | 是 | - | 相对于页面可显示区域顶部的距离 |
\n
| identifier | number | 是 | - | 触摸点的标识符。这个值在这根手指所引发的所有事件中保持一致，直到手指抬起。 |
\n
| pageX | number | 是 | - | 相对于文档左边的距离 |
\n
| pageY | number | 是 | - | 相对于文档顶部的距离 |
\n
| screenX | number | 是 | - | 相对于屏幕左边距离 |
\n
| screenY | number | 是 | - | 相对于屏幕顶部的距离 |
\n
| force | number
\\
| null | 否 | - | 返回当前触摸点按下的压力大小 |
\n
"
},
"Touch"
:{
"name"
:
"## Touch"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
"
\n
### Touch 的属性值 @touch-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| clientX | number | 是 | - | 相对于页面可显示区域左边的距离 |
\n
| clientY | number | 是 | - | 相对于页面可显示区域顶部的距离 |
\n
| identifier | number | 是 | - | 触摸点的标识符。这个值在这根手指所引发的所有事件中保持一致，直到手指抬起。 |
\n
| pageX | number | 是 | - | 相对于文档左边的距离 |
\n
| pageY | number | 是 | - | 相对于文档顶部的距离 |
\n
| screenX | number | 是 | - | 相对于屏幕左边距离 |
\n
| screenY | number | 是 | - | 相对于屏幕顶部的距离 |
\n
| force | number
\\
| null | 否 | - | 返回当前触摸点按下的压力大小 |
\n
"
},
"UniCustomEvent"
:{
"name"
:
"## UniCustomEvent"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
"
\n
### 构造函数
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 | - | - |
\n
| options | any | 是 | - | - |
\n\n
### UniCustomEvent 的属性值 @unicustomevent-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| detail | T | 是 | - | - |
\n
| bubbles | boolean | 是 | - | 是否冒泡 |
\n
| cancelable | boolean | 是 | - | 是否可以取消 |
\n
| type | string | 是 | - | 事件类型 |
\n
| target | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| currentTarget | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| timeStamp | number | 是 | - | 事件发生时的时间戳 |
\n
"
,
"methods"
:{
"stopPropagation"
:{
"name"
:
"#### stopPropagation() @stoppropagation"
,
"description"
:
"
\n
阻止当前事件的进一步传播"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"preventDefault"
:{
"name"
:
"#### preventDefault() @preventdefault"
,
"description"
:
"
\n
阻止当前事件的默认行为"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
}}},
"UniMouseEvent"
:{
"name"
:
"## UniMouseEvent"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
"
\n
### 构造函数
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 | - | - |
\n
| x | number | 是 | - | - |
\n
| y | number | 是 | - | - |
\n
| clientX | number | 是 | - | - |
\n
| clientY | number | 是 | - | - |
\n
| pageX | number | 是 | - | - |
\n
| pageY | number | 是 | - | - |
\n
| screenX | number | 是 | - | - |
\n
| screenY | number | 是 | - | - |
\n\n
### UniMouseEvent 的属性值 @unimouseevent-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| clientX | number | 是 | - | 相对于页面可显示区域左边的距离 |
\n
| clientY | number | 是 | - | 相对于页面可显示区域顶部的距离 |
\n
| x | number | 是 | - | 相对于页面可显示区域左边的距离，同`clientX` |
\n
| y | number | 是 | - | 相对于页面可显示区域顶部的距离，同`clientY` |
\n
| pageX | number | 是 | - | 相对于文档左边的距离 |
\n
| pageY | number | 是 | - | 相对于文档顶部的距离 |
\n
| screenX | number | 是 | - | 相对于屏幕左边距离 |
\n
| screenY | number | 是 | - | 相对于屏幕顶部的距离 |
\n
| bubbles | boolean | 是 | - | 是否冒泡 |
\n
| cancelable | boolean | 是 | - | 是否可以取消 |
\n
| type | string | 是 | - | 事件类型 |
\n
| target | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| currentTarget | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| timeStamp | number | 是 | - | 事件发生时的时间戳 |
\n
"
,
"methods"
:{
"stopPropagation"
:{
"name"
:
"#### stopPropagation() @stoppropagation"
,
"description"
:
"
\n
阻止当前事件的进一步传播"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"preventDefault"
:{
"name"
:
"#### preventDefault() @preventdefault"
,
"description"
:
"
\n
阻止当前事件的默认行为"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
}}},
"UniTouchEvent"
:{
"name"
:
"## UniTouchEvent"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
"
\n
### UniTouchEvent 的属性值 @unitouchevent-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| touches | Array
\\
<**UniTouch**
\\
> | 是 | - | 当前停留在屏幕中的触摸点信息的数组 |
\n
@| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
@| :- | :- | :- | :- | :- |
\n
@| clientX | number | 是 | - | 相对于页面可显示区域左边的距离 |
\n
@| clientY | number | 是 | - | 相对于页面可显示区域顶部的距离 |
\n
@| identifier | number | 是 | - | 触摸点的标识符。这个值在这根手指所引发的所有事件中保持一致，直到手指抬起。 |
\n
@| pageX | number | 是 | - | 相对于文档左边的距离 |
\n
@| pageY | number | 是 | - | 相对于文档顶部的距离 |
\n
@| screenX | number | 是 | - | 相对于屏幕左边距离 |
\n
@| screenY | number | 是 | - | 相对于屏幕顶部的距离 |
\n
@| force | number
\\
| null | 否 | - | 返回当前触摸点按下的压力大小 |
\n
| changedTouches | Array
\\
<**UniTouch**
\\
> | 是 | - | 当前变化的触摸点信息的数组 |
\n
@| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
@| :- | :- | :- | :- | :- |
\n
@| clientX | number | 是 | - | 相对于页面可显示区域左边的距离 |
\n
@| clientY | number | 是 | - | 相对于页面可显示区域顶部的距离 |
\n
@| identifier | number | 是 | - | 触摸点的标识符。这个值在这根手指所引发的所有事件中保持一致，直到手指抬起。 |
\n
@| pageX | number | 是 | - | 相对于文档左边的距离 |
\n
@| pageY | number | 是 | - | 相对于文档顶部的距离 |
\n
@| screenX | number | 是 | - | 相对于屏幕左边距离 |
\n
@| screenY | number | 是 | - | 相对于屏幕顶部的距离 |
\n
@| force | number
\\
| null | 否 | - | 返回当前触摸点按下的压力大小 |
\n
| bubbles | boolean | 是 | - | 是否冒泡 |
\n
| cancelable | boolean | 是 | - | 是否可以取消 |
\n
| type | string | 是 | - | 事件类型 |
\n
| target | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| currentTarget | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| timeStamp | number | 是 | - | 事件发生时的时间戳 |
\n
"
,
"methods"
:{
"stopPropagation"
:{
"name"
:
"#### stopPropagation() @stoppropagation"
,
"description"
:
"
\n
阻止当前事件的进一步传播"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"preventDefault"
:{
"name"
:
"#### preventDefault() @preventdefault"
,
"description"
:
"
\n
阻止当前事件的默认行为"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
}}},
"UniPointerEvent"
:{
"name"
:
"## UniPointerEvent"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
"
\n
### 构造函数
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 | - | - |
\n
| x | number | 是 | - | - |
\n
| y | number | 是 | - | - |
\n
| clientX | number | 是 | - | - |
\n
| clientY | number | 是 | - | - |
\n
| pageX | number | 是 | - | - |
\n
| pageY | number | 是 | - | - |
\n
| screenX | number | 是 | - | - |
\n
| screenY | number | 是 | - | - |
\n\n
### UniPointerEvent 的属性值 @unipointerevent-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| clientX | number | 是 | - | 相对于页面可显示区域左边的距离 |
\n
| clientY | number | 是 | - | 相对于页面可显示区域顶部的距离 |
\n
| x | number | 是 | - | 相对于页面可显示区域左边的距离，同`clientX` |
\n
| y | number | 是 | - | 相对于页面可显示区域顶部的距离，同`clientY` |
\n
| pageX | number | 是 | - | 相对于文档左边的距离 |
\n
| pageY | number | 是 | - | 相对于文档顶部的距离 |
\n
| screenX | number | 是 | - | 相对于屏幕左边距离 |
\n
| screenY | number | 是 | - | 相对于屏幕顶部的距离 |
\n
| bubbles | boolean | 是 | - | 是否冒泡 |
\n
| cancelable | boolean | 是 | - | 是否可以取消 |
\n
| type | string | 是 | - | 事件类型 |
\n
| target | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| currentTarget | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| timeStamp | number | 是 | - | 事件发生时的时间戳 |
\n
"
,
"methods"
:{
"stopPropagation"
:{
"name"
:
"#### stopPropagation() @stoppropagation"
,
"description"
:
"
\n
阻止当前事件的进一步传播"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"preventDefault"
:{
"name"
:
"#### preventDefault() @preventdefault"
,
"description"
:
"
\n
阻止当前事件的默认行为"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
}}},
"Element"
:{
"name"
:
"## Element"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
"
\n
### Element 的属性值 @element-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| classList | Array
\\
<string
\\
> | 是 | - | 只读属性 获取当前元素的的 class 属性的动态集合。 |
\n
| firstChild | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| lastChild | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| parentElement | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| previousSibling | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| nextElementSibling | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| children | Array
\\
<[UniElement](/dom/unielement.md)
\\
> | 是 | - | 只读属性 获取当前元素包含的子元素的集合 |
\n
| tagName | string | 是 | - | 只读属性 获取当前元素的标签名 |
\n
| nodeName | string | 是 | - | 只读属性 获取当前元素的元素名称 |
\n
| dataset | Map
\\
<string, any> | 是 | - | 只读属性 获取元素上自定义数据属性（data-*）的集合 |
\n
| attributes | Map
\\
<string, any> | 是 | - | 只读属性 获取元素上所有属性元素的集合 |
\n
| style | [CSSStyleDeclaration](/dom/cssstyledeclaration.md) | 是 | - | 只读属性 获取元素的CSS样式对象 |
\n
| scrollWidth | number | 是 | - | 只读属性 获取可滚动元素内容的总宽度，仅scroll-view、list-view组件支持，其他组件返回视图宽度 |
\n
| scrollHeight | number | 是 | - | 只读属性 获取可滚动元素内容的总高度，仅scroll-view、list-view组件支持，其他组件返回视图高度 |
\n
| scrollLeft | number | 是 | - | 获取或修改元素滚动条到元素左边的距离像素数，仅scroll-view、list-view组件支持。其他组件返回0 |
\n
| scrollTop | number | 是 | - | 获取或修改元素滚动条到元素顶部的距离像素数，仅scroll-view、list-view组件支持。其他组件返回0 |
\n
| offsetLeft | number | 是 | - | 只读属性 元素的左边界偏移值 单位px |
\n
| offsetTop | number | 是 | - | 只读属性 元素的顶部边界偏移值 单位px |
\n
| offsetWidth | number | 是 | - | 只读属性 元素的布局宽度，宽度包含border、padding的数据值 单位px |
\n
| offsetHeight | number | 是 | - | 只读属性 元素的布局高度，高度包含border、padding的数据值 单位px |
\n
| ext | Map
\\
<string, any> | 是 | - | 只读属性 扩展属性 |
\n
"
,
"methods"
:{
"takeSnapshot"
:{
"name"
:
"#### takeSnapshot(options) @takesnapshot"
,
"description"
:
"
\n
对当前组件进行截图，调用此方法会将当前组件（包含子节点）渲染结果导出成图片。
\n
成功会返回图片对应的临时文件路径，目前默认png格式
\n
"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| options | [TakeSnapshotOptions](#takesnapshotoptions-values) | 是 | - | 组件截图的参数对象 |
\n
@| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
@| :- | :- | :- | :- | :- |
\n
@| type | string
\\
| null | 否 |
\"
file
\"
| 截图导出类型，目前仅支持 'file' 保存到临时文件目录 |
\n
@| format | string
\\
| null | 否 |
\"
png
\"
| 截图文件格式，目前仅支持 'png' |
\n
@| success | (res: [TakeSnapshotSuccess](#takesnapshotsuccess-values)) => void
\\
| null | 否 | - | 接口调用成功的回调函数 |
\n
@| fail | (res: [TakeSnapshotFail](#takesnapshotfail-values)) => void
\\
| null | 否 | - | 接口调用失败的回调函数 |
\n
@| complete | (res: any) => void
\\
| null | 否 | - | 接口调用结束的回调函数（调用成功、失败都会执行） |
\n\n
##### TakeSnapshotSuccess 的属性值 @takesnapshotsuccess-values
\n\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| tempFilePath | string | 是 | - | 截图保存的临时文件路径 |
\n\n
##### TakeSnapshotFail 的属性值 @takesnapshotfail-values
\n\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| errMsg | string | 是 | - | - |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
"##### takeSnapshot 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| 3.93 | x | x |
\n
"
,
"tutorial"
:
""
},
"appendChild"
:{
"name"
:
"#### appendChild(aChild) @appendchild"
,
"description"
:
"
\n
将一个元素添加到指定父元素的子元素列表的末尾处。如果将被插入的元素已经存在于当前文档的文档树中，那么将会它从原先的位置移动到新的位置。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| aChild | [UniElement](/dom/unielement.md) | 是 | - | 插入子元素对象 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"insertBefore"
:{
"name"
:
"#### insertBefore(newChild, refChild?) @insertbefore"
,
"description"
:
"
\n
在参考元素之前插入一个拥有指定父元素的子元素。如果给定的子元素是对文档中现有元素的引用，insertBefore() 会将其从当前位置移动到新位置。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| newChild | [UniElement](/dom/unielement.md) | 是 | - | 插入子元素对象 |
\n
| refChild | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| [UniElement](/dom/unielement.md)
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"setAttribute"
:{
"name"
:
"#### setAttribute(key, value) @setattribute"
,
"description"
:
"
\n
设置指定元素上的某个属性值。如果设置的属性已经存在，则更新该属性值；否则使用指定的名称和值添加一个新的属性。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | 属性名称 |
\n
| value | string | 是 | - | 属性值域 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"getAttribute"
:{
"name"
:
"#### getAttribute(key) @getattribute"
,
"description"
:
"
\n
获取元素指定的属性值，如果指定的属性不存在则返回null。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | 属性名称 |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| string
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"hasAttribute"
:{
"name"
:
"#### hasAttribute(key) @hasattribute"
,
"description"
:
"
\n
返回改元素是否包含有指定的属性，属性存在则返回true，否则返回false。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | 属性名称 |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 |
\n
| :- |
\n
| boolean |
\n
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"removeAttribute"
:{
"name"
:
"#### removeAttribute(key) @removeattribute"
,
"description"
:
"
\n
从元素中删除一个属性，如果指定的属性不存在，则不做任何操作，也不会产生错误。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | 属性名称 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"getBoundingClientRect"
:{
"name"
:
"#### getBoundingClientRect() @getboundingclientrect"
,
"description"
:
"
\n
获取元素的大小及其相对于窗口的位置信息。"
,
"param"
:
""
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 |
\n
| :- |
\n
| [DOMRect](/dom/domrect.md) |
\n
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"getDrawableContext"
:{
"name"
:
"#### getDrawableContext() @getdrawablecontext"
,
"description"
:
"
\n
获取组件的绘制对象，仅uvue页面中的 view 组件支持，其它组件不支持则返回null。"
,
"param"
:
""
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| [DrawableContext](/dom/drawablecontext.md)
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
"##### getDrawableContext 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| 3.9 | x | x |
\n
"
,
"tutorial"
:
""
},
"addEventListener"
:{
"name"
:
"#### addEventListener(type, callback) @addeventlistener"
,
"description"
:
"
\n
将指定的监听器注册到元素对象上，当该对象触发指定的事件时，指定的回调函数就会被执行。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 | - | 事件类型 |
\n
| callback | (event: T) => R | 是 | - | 事件监听器 T表示event类型，R表示返回值类型 |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 |
\n
| :- |
\n
| UniCallbackWrapper |
\n
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"removeEventListener"
:{
"name"
:
"#### removeEventListener(type, callbackWrapper) @removeeventlistener"
,
"description"
:
"
\n
删除使用 addEventListener 方法添加的事件监听器。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 | - | 事件类型 |
\n
| callbackWrapper | UniCallbackWrapper | 是 | - | 事件监听回调封装类 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"removeChild"
:{
"name"
:
"#### removeChild(aChild) @removechild"
,
"description"
:
"
\n
从元素中删除一个子元素，返回删除的元素。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| aChild | [UniElement](/dom/unielement.md) | 是 | - | 被删除子元素对象 |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| [UniElement](/dom/unielement.md)
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"remove"
:{
"name"
:
"#### remove() @remove"
,
"description"
:
"
\n
把元素对象从它所属的 DOM 树中删除。"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"dispatchEvent"
:{
"name"
:
"#### dispatchEvent(type, value) @dispatchevent"
,
"description"
:
"
\n
向一个指定的事件目标派发一个 Event，并以合适的顺序（同步地）调用此事件的监听器回调函数。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 | - | 事件类型 |
\n
| value | [UniEvent](/component/common#unievent) | 是 | - | 事件返回对象 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"scrollTo"
:{
"name"
:
"#### scrollTo(x, y) @scrollto"
,
"description"
:
"
\n
使界面滚动到给定元素的指定坐标位置 仅scroll-view、list-view组件支持"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| x | number | 是 | - | x轴要滚动到坐标位置(单位px) |
\n
| y | number | 是 | - | y轴要滚动到坐标位置(单位px) |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"scrollBy"
:{
"name"
:
"#### scrollBy(x, y) @scrollby"
,
"description"
:
"
\n
使得元素滚动一段特定距离 仅scroll-view、list-view组件支持"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| x | number | 是 | - | x轴要滚动的距离(单位px) |
\n
| y | number | 是 | - | y轴要滚动的距离(单位px) |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"querySelector"
:{
"name"
:
"#### querySelector(selector) @queryselector"
,
"description"
:
"
\n
返回文档中与指定选择器或选择器组匹配的第一个 Element对象。如果找不到匹配项，则返回null"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| selector | [string.cssSelectorString](/uts/data-type.md#ide-string) | 是 | - | CSS 选择器字符串 |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| [UniElement](/dom/unielement.md)
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"querySelectorAll"
:{
"name"
:
"#### querySelectorAll(selector) @queryselectorall"
,
"description"
:
"
\n
返回与指定的选择器组匹配的文档中的元素列表"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| selector | [string.cssSelectorString](/uts/data-type.md#ide-string) | 是 | - | CSS 选择器字符串 |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| Array
\\
<[UniElement](/dom/unielement.md)
\\
>
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"focus"
:{
"name"
:
"#### focus() @focus"
,
"description"
:
"
\n
使元素获取焦点 仅input、Textarea组件支持"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"blur"
:{
"name"
:
"#### blur() @blur"
,
"description"
:
"
\n
使元素丢失焦点 仅input、Textarea组件支持"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
}}},
"UniError"
:{
"name"
:
"## UniError"
,
"description"
:
"
\n
uni api统一错误信息对象 "
,
"extends"
:
""
,
"param"
:
"
\n
### 构造函数
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| errSubject | string | 是 | - | - |
\n
| errCode | number | 是 | - | - |
\n
| errMsg | string | 是 | - | - |
\n\n
### UniError 的属性值 @unierror-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| errSubject | string | 是 | - | 统一错误主题（模块）名称 |
\n
| errCode | number | 是 | - | 统一错误码 |
\n
| errMsg | string | 是 | - | 统一错误描述信息 |
\n
| data | any
\\
| null | 否 | - | 错误信息中包含的数据 |
\n
| cause | [Error](https://uniapp.dcloud.net.cn/tutorial/err-spec.html#unierror)
\\
| null | 否 | - | UTS错误信息对象 |
\n
| name | string | 是 | - | - |
\n
| message | string | 是 | - | - |
\n
"
},
"Error"
:{
"name"
:
"## Error"
,
"description"
:
"
\n
UTS错误信息对象"
,
"extends"
:
""
,
"param"
:
"
\n
### 构造函数
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| message | string | 是 | - | - |
\n
| options | [UTSJSONObject](/uts/buildin-object-api/utsjsonobject.md) | 是 | - | - |
\n\n
### Error 的属性值 @error-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| name | string | 是 | - | - |
\n
| message | string | 是 | - | - |
\n
| cause | [Error](https://uniapp.dcloud.net.cn/tutorial/err-spec.html#unierror)
\\
| null | 否 | - | UTS错误信息对象 |
\n
"
},
"general-attribute"
:{
"name"
:
"组件公共属性"
,
"description"
:
""
,
"attribute"
:
"| 名称 | 类型 | 描述 |
\n
| :- | :- | :- |
\n
| id | string(string.IDString) | 组件的唯一标识，一般用于获取组件上下文对象 |
\n
| style | string | 组件的内联样式，可以动态设置的内联样式 |
\n
| class | string(string.ClassString) | 组件的样式类，在对应的 css 中定义的样式类 |
\n
| ref | string | vue中组件的唯一标识，用来给子组件注册引用信息 |
\n
| data-* | any | 自定义属性，组件上触发的事件时，会发送给事件处理函数 |
\n
| android-* | any | App-Android平台专有属性，详见[App-Android平台专有属性](https://doc.dcloud.net.cn/uni-app-x/component/common.html#attribute-android)章节 |"
,
"compatibility"
:
"| | Android | iOS | web |
\n
| :- | :- | :- | :- |
\n
| id | 3.9 | x | 4.0 |
\n
| style | 3.9 | x | 4.0 |
\n
| class | 3.9 | x | 4.0 |
\n
| ref | 3.9 | x | 4.0 |
\n
| data-* | 3.9 | x | 4.0 |
\n
| android-* | 3.9 | x | 4.0 |"
,
"example"
:
"### 示例
\n
> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/general-attribute/general-attribute.uvue)
\n
::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/general-attribute/general-attribute
\n
>Template
\n
```vue
\n
<template>
\r\n
<!-- #ifdef APP -->
\r\n
<scroll-view style=
\"
flex: 1
\"
>
\r\n
<!-- #endif -->
\r\n
<view>
\r\n
<page-head :title=
\"
title
\"
></page-head>
\r\n
<view class=
\"
uni-padding-wrap container
\"
>
\r\n
<view
\r\n
:id=
\"
generalId
\"\r\n
:class=
\"
generalClass
\"\r\n
:name=
\"
generalName
\"\r\n
:title=
\"
generalTitle
\"\r\n
:data-test=
\"
generalData
\"\r\n
:style=
\"
generalStyle
\"\r\n
ref=
\"
general-target
\"\r\n
>
\r\n
<text>id: {{ generalId }}</text>
\r\n
<text>class: {{ generalClass }}</text>
\r\n
<text>name: {{ generalName }}</text>
\r\n
<text>title: {{ generalTitle }}</text>
\r\n
<text>data-test: {{ generalData }}</text>
\r\n
<text>style: {{ generalStyle }}</text>
\r\n
</view>
\r\n
<view
\r\n
class=
\"
btn btn-style uni-common-mt
\"\r\n
@click=
\"
validateGeneralAttributes
\"\r\n
>
\r\n
<text class=
\"
btn-inner
\"
>{{ validateGeneralAttrText }}</text>
\r\n
</view>
\r\n
<view class=
\"
btn btn-ref uni-common-mt
\"
@click=
\"
changeHeight
\"
>
\r\n
<text class=
\"
btn-inner
\"
>{{changeHeightByRefText}}</text>
\r\n
</view>
\r\n
<view class=
\"
view-class
\"
:hover-class=
\"
hoverClass
\"
ref=
\"
view-target
\"
>
\r\n
<text class=
\"
text
\"
>按下 50 ms 后背景变红</text>
\r\n
<text class=
\"
text
\"
>抬起 400 ms 后背景恢复</text>
\r\n
</view>
\r\n
<view
\r\n
class=
\"
view-class
\"\r\n
:hover-class=
\"
hoverClass
\"\r\n
:hover-start-time=
\"
1000
\"\r\n
:hover-stay-time=
\"
1000
\"\r\n
ref=
\"
view-target
\"\r\n
>
\r\n
<text class=
\"
text
\"
>按下 1000 ms 后背景变红</text>
\r\n
<text class=
\"
text
\"
>抬起 1000 ms 后背景恢复</text>
\r\n
</view>
\r\n
</view>
\r\n
</view>
\r\n
<!-- #ifdef APP -->
\r\n
</scroll-view>
\r\n
<!-- #endif -->
\r\n
</template>
\r\n\r\n\r\n\r\n
<style>
\r\n
.btn {
\r\n
height: 50px;
\r\n
display: flex;
\r\n
align-items: center;
\r\n
justify-content: center;
\r\n
background-color: #409eff;
\r\n
border-radius: 5px;
\r\n
}
\r\n
.btn-inner {
\r\n
color: #fff;
\r\n
}
\r\n
.general-class {
\r\n
margin-left: 40px;
\r\n
padding: 10px;
\r\n
width: 260px;
\r\n
height: 160px;
\r\n
background-color: antiquewhite;
\r\n
}
\r\n
.view-class {
\r\n
margin: 20px 0 0 50px;
\r\n
padding: 10px;
\r\n
width: 240px;
\r\n
height: 100px;
\r\n
background-color: antiquewhite;
\r\n
}
\r\n
.view-class .text {
\r\n
margin-top: 5px;
\r\n
text-align: center;
\r\n
}
\r\n
.hover-class {
\r\n
background-color: red;
\r\n
}
\r\n
</style>
\r\n\n
```
\n
>Script
\n
```uts
\n\r\n
export default {
\r\n
data() {
\r\n
return {
\r\n
title: 'general-attribute',
\r\n
generalId: 'general-id',
\r\n
generalClass: 'general-class',
\r\n
generalName: 'general-name',
\r\n
generalTitle: 'general-title',
\r\n
generalData: 'general-data',
\r\n
generalStyle: 'background-color: aqua',
\r\n
validateGeneralAttrText: '验证基础属性',
\r\n
hoverClass: 'hover-class',
\r\n
validateViewAttrText: '验证 view 属性',
\r\n
changeHeightByRefText: '通过 ref 修改高度',
\r\n
}
\r\n
},
\r\n
methods: {
\r\n
validateGeneralAttributes() {
\r\n
const generalTarget = this.$refs['general-target'] as UniElement
\r\n
const generalId = generalTarget.getAttribute('id')
\r\n
if (generalId != this.generalId) {
\r\n
this.validateGeneralAttrText = '基础属性 id 验证失败'
\r\n
return
\r\n
}
\r\n
// #ifdef APP
\r\n
if (!generalTarget.classList.includes('general-class')) {
\r\n
// #endif
\r\n
// #ifdef WEB
\r\n
if (!Array.from(generalTarget.classList).includes('general-class')) {
\r\n
// #endif
\r\n
this.validateGeneralAttrText = '基础属性 class 验证失败'
\r\n
return
\r\n
}
\r\n
const generalName = generalTarget.getAttribute('name')
\r\n
if (generalName != this.generalName) {
\r\n
this.validateGeneralAttrText = '基础属性 name 验证失败'
\r\n
return
\r\n
}
\r\n
const generalTitle = generalTarget.getAttribute('title')
\r\n
if (generalTitle != this.generalTitle) {
\r\n
this.validateGeneralAttrText = '基础属性 title 验证失败'
\r\n
return
\r\n
}
\r\n
const generalData = generalTarget.getAttribute('data-test')
\r\n
if (generalData != this.generalData) {
\r\n
this.validateGeneralAttrText = '基础属性 data-test 验证失败'
\r\n
return
\r\n
}
\r\n
this.validateGeneralAttrText = '基础属性验证成功'
\r\n
},
\r\n
changeHeight(){
\r\n
const generalTarget = this.$refs['general-target'] as UniElement
\r\n
this.changeHeightByRefText = '已通过 ref 修改高度'
\r\n
generalTarget.style.setProperty('height', '200px')
\r\n
}
\r\n
},
\r\n
}
\r\n\n
```
\n\n
:::"
},
"general-event"
:{
"name"
:
"组件公共事件"
,
"description"
:
""
,
"attribute"
:
"| 名称 | 类型 | 描述 |
\n
| :- | :- | :- |
\n
| @click | (event: [UniPointerEvent](/component/common#unipointerevent)) => void | 手指触摸后马上离开。与tap相同，（推荐使用tap事件代替），冒泡事件 |
\n
| @mousedown | (event: [UniMouseEvent](/component/common#unimouseevent)) => void | 鼠标在元素上点击后触发 |
\n
| @mousemove | (event: [UniMouseEvent](/component/common#unimouseevent)) => void | 鼠标在元素上移动时触发 |
\n
| @mouseup | (event: [UniMouseEvent](/component/common#unimouseevent)) => void | 鼠标主按钮在元素上松开时触发 |
\n
| @touchstart | (event: [UniTouchEvent](/component/common#unitouchevent)) => void | 手指触摸动作开始，冒泡事件，event.type 值为 touchstart |
\n
| @touchmove | (event: [UniTouchEvent](/component/common#unitouchevent)) => void | 手指触摸后移动，冒泡事件，event.type 值为 touchmove |
\n
| @touchcancel | (event: [UniTouchEvent](/component/common#unitouchevent)) => void | 手指触摸动作被打断，如来电提醒，弹窗，冒泡事件，event.type 值为 touchcancel |
\n
| @touchend | (event: [UniTouchEvent](/component/common#unitouchevent)) => void | 手指触摸动作结束，冒泡事件，event.type 值为 touchend |
\n
| @tap | (event: [UniPointerEvent](/component/common#unipointerevent)) => void | 手指触摸后马上离开，冒泡事件 |
\n
| @longpress | (event: [UniTouchEvent](/component/common#unitouchevent)) => void | 如果一个组件被绑定了 longpress 事件，那么当用户手指触摸后，超过350ms再离开会触发，冒泡事件 |
\n
| @longtap | (event: [UniTouchEvent](/component/common#unitouchevent)) => void | 手指触摸后，超过350ms再离开（推荐使用 longpress 事件代替） |
\n
| @transitionend | (event: [UniEvent](/component/common#unievent)) => void | transition 效果结束时触发 |"
,
"compatibility"
:
"| | Android | iOS | web |
\n
| :- | :- | :- | :- |
\n
| @click | 3.9 | x | 4.0 |
\n
| @mousedown | x | x | 4.0 |
\n
| @mousemove | x | x | 4.0 |
\n
| @mouseup | x | x | 4.0 |
\n
| @touchstart | 3.9 | x | 4.0 |
\n
| @touchmove | 3.9 | x | 4.0 |
\n
| @touchcancel | 3.9 | x | 4.0 |
\n
| @touchend | 3.9 | x | 4.0 |
\n
| @tap | 3.9 | x | 4.0 |
\n
| @longpress | 3.9 | x | 4.0 |
\n
| @longtap | 3.9 | x | 4.0 |
\n
| @transitionend | 3.93 | x | 4.0 |"
,
"example"
:
"### 示例
\n
> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/general-event/general-event.uvue)
\n
::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/general-event/general-event
\n
>Template
\n
```vue
\n
<template>
\r\n
<!-- #ifdef APP -->
\r\n
<scroll-view style=
\"
flex: 1
\"
>
\r\n
<!-- #endif -->
\r\n
<page-head title=
\"
触摸方块测试相关事件
\"
></page-head>
\r\n
<view class=
\"
uni-padding-wrap uni-common-mt container
\"
>
\r\n
<view class=
\"
target
\"
@touchstart=
\"
onTouchStart
\"
@touchcancel=
\"
onTouchCancel
\"
@touchmove=
\"
onTouchMove
\"\r\n
@touchend=
\"
onTouchEnd
\"
@tap=
\"
onTap
\"
@click=
\"
onClick
\"
@longpress=
\"
onLongPress
\"
></view>
\r\n
<view v-if=
\"
touchStartEvent !== null
\"
>
\r\n
<text class=
\"
title1
\"
>touchStart Event: </text>
\r\n
<text class=
\"
title2
\"
>touches: </text>
\r\n
<template v-for=
\"
(touch, index) in touchStartEvent!.touches
\"
:key=
\"
index
\"
>
\r\n
<text class=
\"
title3
\"
>touch[{{ index }}]:</text>
\r\n
<text>identifier: {{touch.identifier}}</text>
\r\n
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
\r\n
<text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
\r\n
<text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
\r\n
</template>
\r\n
<text class=
\"
title2 uni-common-mt
\"
>changedTouches: </text>
\r\n
<template v-for=
\"
(touch, index) in touchStartEvent!.changedTouches
\"
:key=
\"
index
\"
>
\r\n
<text class=
\"
title3
\"
>touch[{{ index }}]:</text>
\r\n
<text>identifier: {{touch.identifier}}</text>
\r\n
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
\r\n
<text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
\r\n
<text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
\r\n
</template>
\r\n
</view>
\r\n
<view v-if=
\"
touchCancelEvent !== null
\"
>
\r\n
<text class=
\"
title1
\"
>touchCancel Event: </text>
\r\n
<text class=
\"
title2
\"
>touches: </text>
\r\n
<template v-for=
\"
(touch, index) in touchCancelEvent!.touches
\"
:key=
\"
index
\"
>
\r\n
<text class=
\"
title3
\"
>touch[{{ index }}]:</text>
\r\n
<text>identifier: {{touch.identifier}}</text>
\r\n
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
\r\n
<text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
\r\n
<text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
\r\n
</template>
\r\n
<text class=
\"
title2 uni-common-mt
\"
>changedTouches: </text>
\r\n
<template v-for=
\"
(touch, index) in touchCancelEvent!.changedTouches
\"
:key=
\"
index
\"
>
\r\n
<text class=
\"
title3
\"
>touch[{{ index }}]:</text>
\r\n
<text>identifier: {{touch.identifier}}</text>
\r\n
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
\r\n
<text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
\r\n
<text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
\r\n
</template>
\r\n
</view>
\r\n
<view v-if=
\"
touchMoveEvent !== null
\"
>
\r\n
<text class=
\"
title1
\"
>touchMove Event: </text>
\r\n
<text class=
\"
title2
\"
>touches: </text>
\r\n
<template v-for=
\"
(touch, index) in touchMoveEvent!.touches
\"
:key=
\"
index
\"
>
\r\n
<text class=
\"
title3
\"
>touch[{{ index }}]:</text>
\r\n
<text>identifier: {{touch.identifier}}</text>
\r\n
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
\r\n
<text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
\r\n
<text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
\r\n
</template>
\r\n
<text class=
\"
title2 uni-common-mt
\"
>changedTouches: </text>
\r\n
<template v-for=
\"
(touch, index) in touchMoveEvent!.changedTouches
\"
:key=
\"
index
\"
>
\r\n
<text class=
\"
title3
\"
>touch[{{ index }}]:</text>
\r\n
<text>identifier: {{touch.identifier}}</text>
\r\n
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
\r\n
<text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
\r\n
<text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
\r\n
</template>
\r\n
</view>
\r\n
<view v-if=
\"
longPressEvent !== null
\"
>
\r\n
<text class=
\"
title1
\"
>longPress Event: </text>
\r\n
<text class=
\"
title2
\"
>touches: </text>
\r\n
<template v-if=
\"
longPressEvent!.touches.length > 0
\"
v-for=
\"
(touch, index) in longPressEvent!.touches
\"\r\n
:key=
\"
index
\"
>
\r\n
<text class=
\"
title3
\"
>touch[{{ index }}]:</text>
\r\n
<text>identifier: {{touch.identifier}}</text>
\r\n
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
\r\n
<text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
\r\n
<text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
\r\n
</template>
\r\n
<text class=
\"
title2 uni-common-mt
\"
>changedTouches: </text>
\r\n
<template v-for=
\"
(touch, index) in longPressEvent!.changedTouches
\"
:key=
\"
index
\"
>
\r\n
<text class=
\"
title3
\"
>touch[{{ index }}]:</text>
\r\n
<text>identifier: {{touch.identifier}}</text>
\r\n
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
\r\n
<text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
\r\n
<text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
\r\n
</template>
\r\n
</view>
\r\n
<view v-if=
\"
touchEndEvent !== null
\"
>
\r\n
<text class=
\"
title1
\"
>touchEnd Event: </text>
\r\n
<text class=
\"
title2
\"
>touches: </text>
\r\n
<template v-if=
\"
touchEndEvent!.touches.length > 0
\"
v-for=
\"
(touch, index) in touchEndEvent!.touches
\"\r\n
:key=
\"
index
\"
>
\r\n
<text class=
\"
title3
\"
>touch[{{ index }}]:</text>
\r\n
<text>identifier: {{touch.identifier}}</text>
\r\n
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
\r\n
<text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
\r\n
<text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
\r\n
</template>
\r\n
<text class=
\"
title2 uni-common-mt
\"
>changedTouches: </text>
\r\n
<template v-for=
\"
(touch, index) in touchEndEvent!.changedTouches
\"
:key=
\"
index
\"
>
\r\n
<text class=
\"
title3
\"
>touch[{{ index }}]:</text>
\r\n
<text>identifier: {{touch.identifier}}</text>
\r\n
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
\r\n
<text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
\r\n
<text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
\r\n
</template>
\r\n
</view>
\r\n
<view v-if=
\"
tapEvent !== null
\"
>
\r\n
<text class=
\"
title1
\"
>tap Event: </text>
\r\n
<text>x: {{ tapEvent!.x }}, y: {{ tapEvent!.y }}</text>
\r\n
</view>
\r\n
<view v-if=
\"
clickEvent !== null
\"
>
\r\n
<text class=
\"
title1
\"
>click Event: </text>
\r\n
<text>x: {{ clickEvent!.x }}, y: {{ clickEvent!.y }}</text>
\r\n
</view>
\r\n
</view>
\r\n
<!-- #ifdef APP -->
\r\n
</scroll-view>
\r\n
<!-- #endif -->
\r\n
</template>
\r\n\r\n\r\n
<style>
\r\n
.container {
\r\n
padding-bottom: 10px;
\r\n
}
\r\n\r\n
.target {
\r\n
margin: 20px 0 0 50px;
\r\n
width: 200px;
\r\n
height: 100px;
\r\n
background-color: aqua;
\r\n
}
\r\n\r\n
.title1 {
\r\n
margin-top: 15px;
\r\n
font-size: 20px;
\r\n
}
\r\n\r\n
.title2 {
\r\n
margin-top: 10px;
\r\n
font-size: 18px;
\r\n
}
\r\n\r\n
.title3 {
\r\n
margin-top: 5px;
\r\n
font-size: 16px;
\r\n
}
\r\n
</style>
\r\n\n
```
\n
>Script
\n
```uts
\n\r\n
export default {
\r\n
data() {
\r\n
return {
\r\n
title: 'general-event',
\r\n
onTouchStartTime: 0,
\r\n
touchStartEvent: null as TouchEvent | null,
\r\n
touchCancelEvent: null as TouchEvent | null,
\r\n
onTouchMoveTime: 0,
\r\n
touchMoveEvent: null as TouchEvent | null,
\r\n
onTouchEndTime: 0,
\r\n
longPressEvent: null as TouchEvent | null,
\r\n
touchEndEvent: null as TouchEvent | null,
\r\n
onTapTime: 0,
\r\n
tapEvent: null as PointerEvent | null,
\r\n
onClickTime: 0,
\r\n
clickEvent: null as PointerEvent | null,
\r\n
onLongPressTime: 0,
\r\n
}
\r\n
},
\r\n
methods: {
\r\n
onTouchStart(e : TouchEvent) {
\r\n
this.touchStartEvent = e
\r\n
this.onTouchStartTime = Date.now()
\r\n
console.log('onTouchStart')
\r\n
},
\r\n
onTouchCancel(e : TouchEvent) {
\r\n
this.touchCancelEvent = e
\r\n
console.log('onTouchCancel')
\r\n
},
\r\n
onTouchMove(e : TouchEvent) {
\r\n
this.touchMoveEvent = e
\r\n
this.onTouchMoveTime = Date.now()
\r\n
console.log('onTouchMove')
\r\n
},
\r\n
onLongPress(e : TouchEvent) {
\r\n
this.longPressEvent = e
\r\n
this.onLongPressTime = Date.now()
\r\n
console.log('onLongPress')
\r\n
},
\r\n
onTouchEnd(e : TouchEvent) {
\r\n
this.touchEndEvent = e
\r\n
this.onTouchEndTime = Date.now()
\r\n
console.log('onTouchEnd')
\r\n
},
\r\n
onTap(e : PointerEvent) {
\r\n
this.tapEvent = e
\r\n
this.onTapTime = Date.now()
\r\n
console.log('onTap')
\r\n
},
\r\n
onClick(e : PointerEvent) {
\r\n
this.clickEvent = e
\r\n
this.onClickTime = Date.now()
\r\n
console.log('onClick')
\r\n
},
\r\n
},
\r\n
}
\r\n\n
```
\n\n
:::"
}}
\ No newline at end of file
{
"Event"
:{
"name"
:
"## Event"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
"
\n
### 构造函数
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 | - | - |
\n
| eventInit | [UTSJSONObject](/uts/buildin-object-api/utsjsonobject.md) | 是 | - | - |
\n\n
### Event 的属性值 @event-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| bubbles | boolean | 是 | - | 是否冒泡 |
\n
| cancelable | boolean | 是 | - | 是否可以取消 |
\n
| type | string | 是 | - | 事件类型 |
\n
| target | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| currentTarget | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| timeStamp | number | 是 | - | 事件发生时的时间戳 |
\n
"
,
"methods"
:{
"stopPropagation"
:{
"name"
:
"#### stopPropagation() @stoppropagation"
,
"description"
:
"
\n
阻止当前事件的进一步传播"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"preventDefault"
:{
"name"
:
"#### preventDefault() @preventdefault"
,
"description"
:
"
\n
阻止当前事件的默认行为"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
}}},
"UTSJSONObject"
:{
"name"
:
"## UTSJSONObject"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
""
,
"methods"
:{
"get"
:{
"name"
:
"#### get(key) @get"
,
"description"
:
"
\n
获取一个 属性，返回类型是any 或者 null"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | - |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| any
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
"##### get 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| 3.9 | 4.11 | 4.0 |
\n
"
,
"tutorial"
:
"
\n
##### 参见
\n
[get](https://uniapp.dcloud.net.cn/uts/buildin-object-api/UTSJSONObject.html#get)
\n
"
},
"set"
:{
"name"
:
"#### set(key, value) @set"
,
"description"
:
"
\n
获取一个 属性，返回类型是any 或者 null"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | - |
\n
| value | any | 是 | - | - |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
"##### set 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| 3.9 | 4.11 | 4.0 |
\n
"
,
"tutorial"
:
"
\n
##### 参见
\n
[set](https://uniapp.dcloud.net.cn/uts/buildin-object-api/UTSJSONObject.html#set)
\n
"
},
"getAny"
:{
"name"
:
"#### getAny(key) @getany"
,
"description"
:
"
\n
获取一个 属性，返回类型是any 或者 null"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | - |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| any
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
"##### getAny 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| 3.9 | 4.11 | 4.0 |
\n
"
,
"tutorial"
:
"
\n
##### 参见
\n
[getAny](https://uniapp.dcloud.net.cn/uts/buildin-object-api/UTSJSONObject.html#getAny)
\n
"
},
"getBoolean"
:{
"name"
:
"#### getBoolean(key) @getboolean"
,
"description"
:
"
\n
获取一个Boolean属性，返回类型是Boolean 或者 null"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | - |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| boolean
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
"##### getBoolean 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| 3.9 | 4.11 | 4.0 |
\n
"
,
"tutorial"
:
"
\n
##### 参见
\n
[getBoolean](https://uniapp.dcloud.net.cn/uts/buildin-object-api/UTSJSONObject.html#getBoolean)
\n
"
},
"getNumber"
:{
"name"
:
"#### getNumber(key) @getnumber"
,
"description"
:
"
\n
获取一个number属性，返回类型是number 或者 null"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | - |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| number
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
"##### getNumber 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| 3.9 | 4.11 | 4.0 |
\n
"
,
"tutorial"
:
"
\n
##### 参见
\n
[getNumber](https://uniapp.dcloud.net.cn/uts/buildin-object-api/UTSJSONObject.html#getNumber)
\n
"
},
"getString"
:{
"name"
:
"#### getString(key) @getstring"
,
"description"
:
"
\n
获取一个string属性，返回类型是string 或者 null"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | - |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| string
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
"##### getString 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| 3.9 | 4.11 | 4.0 |
\n
"
,
"tutorial"
:
"
\n
##### 参见
\n
[getString](https://uniapp.dcloud.net.cn/uts/buildin-object-api/UTSJSONObject.html#getString)
\n
"
},
"getJSON"
:{
"name"
:
"#### getJSON(key) @getjson"
,
"description"
:
"
\n
获取一个UTSJSONObject属性，返回类型是UTSJSONObject 或者 null"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | - |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| [UTSJSONObject](/uts/buildin-object-api/utsjsonobject.md)
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
"##### getJSON 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| 3.9 | 4.11 | 4.0 |
\n
"
,
"tutorial"
:
"
\n
##### 参见
\n
[getJSON](https://uniapp.dcloud.net.cn/uts/buildin-object-api/UTSJSONObject.html#getJSON)
\n
"
},
"getArray"
:{
"name"
:
"#### getArray(key) @getarray"
,
"description"
:
"
\n
获取一个Array属性，返回类型是Array 或者 null, 数组元素类型由泛型T决定"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | - |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| T[
\\\\
]
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
"##### getArray 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| 3.9 | 4.11 | 4.0 |
\n
"
,
"tutorial"
:
"
\n
##### 参见
\n
[getArray](https://uniapp.dcloud.net.cn/uts/buildin-object-api/UTSJSONObject.html#getArray<T>)
\n
"
},
"toMap"
:{
"name"
:
"#### toMap() @tomap"
,
"description"
:
"
\n
将当前 UTSJSONObject 实例转换为 Map 实例。"
,
"param"
:
""
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 |
\n
| :- |
\n
| Map
\\
<string, any> |
\n
\n
"
,
"compatibility"
:
"##### toMap 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| 3.9 | 4.11 | 4.0 |
\n
"
,
"tutorial"
:
"
\n
##### 参见
\n
[toMap](https://uniapp.dcloud.net.cn/uts/buildin-object-api/UTSJSONObject.html#toMap)
\n
"
}}},
"UniElement"
:{
"name"
:
"## UniElement"
,
"description"
:
"
\n
UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。"
,
"extends"
:
""
,
"param"
:
"
\n
### UniElement 的属性值 @unielement-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| classList | Array
\\
<string
\\
> | 是 | - | 只读属性 获取当前元素的的 class 属性的动态集合。 |
\n
| firstChild | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| lastChild | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| parentElement | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| previousSibling | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| nextElementSibling | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| children | Array
\\
<[UniElement](/dom/unielement.md)
\\
> | 是 | - | 只读属性 获取当前元素包含的子元素的集合 |
\n
| tagName | string | 是 | - | 只读属性 获取当前元素的标签名 |
\n
| nodeName | string | 是 | - | 只读属性 获取当前元素的元素名称 |
\n
| dataset | Map
\\
<string, any> | 是 | - | 只读属性 获取元素上自定义数据属性（data-*）的集合 |
\n
| attributes | Map
\\
<string, any> | 是 | - | 只读属性 获取元素上所有属性元素的集合 |
\n
| style | [CSSStyleDeclaration](/dom/cssstyledeclaration.md) | 是 | - | 只读属性 获取元素的CSS样式对象 |
\n
| scrollWidth | number | 是 | - | 只读属性 获取可滚动元素内容的总宽度，仅scroll-view、list-view组件支持，其他组件返回视图宽度 |
\n
| scrollHeight | number | 是 | - | 只读属性 获取可滚动元素内容的总高度，仅scroll-view、list-view组件支持，其他组件返回视图高度 |
\n
| scrollLeft | number | 是 | - | 获取或修改元素滚动条到元素左边的距离像素数，仅scroll-view、list-view组件支持。其他组件返回0 |
\n
| scrollTop | number | 是 | - | 获取或修改元素滚动条到元素顶部的距离像素数，仅scroll-view、list-view组件支持。其他组件返回0 |
\n
| offsetLeft | number | 是 | - | 只读属性 元素的左边界偏移值 单位px |
\n
| offsetTop | number | 是 | - | 只读属性 元素的顶部边界偏移值 单位px |
\n
| offsetWidth | number | 是 | - | 只读属性 元素的布局宽度，宽度包含border、padding的数据值 单位px |
\n
| offsetHeight | number | 是 | - | 只读属性 元素的布局高度，高度包含border、padding的数据值 单位px |
\n
| ext | Map
\\
<string, any> | 是 | - | 只读属性 扩展属性 |
\n
"
,
"methods"
:{
"takeSnapshot"
:{
"name"
:
"#### takeSnapshot(options) @takesnapshot"
,
"description"
:
"
\n
对当前组件进行截图，调用此方法会将当前组件（包含子节点）渲染结果导出成图片。
\n
成功会返回图片对应的临时文件路径，目前默认png格式
\n
"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| options | [TakeSnapshotOptions](#takesnapshotoptions-values) | 是 | - | 组件截图的参数对象 |
\n
@| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
@| :- | :- | :- | :- | :- |
\n
@| type | string
\\
| null | 否 |
\"
file
\"
| 截图导出类型，目前仅支持 'file' 保存到临时文件目录 |
\n
@| format | string
\\
| null | 否 |
\"
png
\"
| 截图文件格式，目前仅支持 'png' |
\n
@| success | (res: [TakeSnapshotSuccess](#takesnapshotsuccess-values)) => void
\\
| null | 否 | - | 接口调用成功的回调函数 |
\n
@| fail | (res: [TakeSnapshotFail](#takesnapshotfail-values)) => void
\\
| null | 否 | - | 接口调用失败的回调函数 |
\n
@| complete | (res: any) => void
\\
| null | 否 | - | 接口调用结束的回调函数（调用成功、失败都会执行） |
\n\n
##### TakeSnapshotSuccess 的属性值 @takesnapshotsuccess-values
\n\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| tempFilePath | string | 是 | - | 截图保存的临时文件路径 |
\n\n
##### TakeSnapshotFail 的属性值 @takesnapshotfail-values
\n\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| errMsg | string | 是 | - | - |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
"##### takeSnapshot 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| 3.93 | 4.11 | x |
\n
"
,
"tutorial"
:
""
},
"appendChild"
:{
"name"
:
"#### appendChild(aChild) @appendchild"
,
"description"
:
"
\n
将一个元素添加到指定父元素的子元素列表的末尾处。如果将被插入的元素已经存在于当前文档的文档树中，那么将会它从原先的位置移动到新的位置。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| aChild | [UniElement](/dom/unielement.md) | 是 | - | 插入子元素对象 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"insertBefore"
:{
"name"
:
"#### insertBefore(newChild, refChild?) @insertbefore"
,
"description"
:
"
\n
在参考元素之前插入一个拥有指定父元素的子元素。如果给定的子元素是对文档中现有元素的引用，insertBefore() 会将其从当前位置移动到新位置。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| newChild | [UniElement](/dom/unielement.md) | 是 | - | 插入子元素对象 |
\n
| refChild | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| [UniElement](/dom/unielement.md)
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"setAttribute"
:{
"name"
:
"#### setAttribute(key, value) @setattribute"
,
"description"
:
"
\n
设置指定元素上的某个属性值。如果设置的属性已经存在，则更新该属性值；否则使用指定的名称和值添加一个新的属性。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | 属性名称 |
\n
| value | string | 是 | - | 属性值域 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"getAttribute"
:{
"name"
:
"#### getAttribute(key) @getattribute"
,
"description"
:
"
\n
获取元素指定的属性值，如果指定的属性不存在则返回null。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | 属性名称 |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| string
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"hasAttribute"
:{
"name"
:
"#### hasAttribute(key) @hasattribute"
,
"description"
:
"
\n
返回改元素是否包含有指定的属性，属性存在则返回true，否则返回false。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | 属性名称 |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 |
\n
| :- |
\n
| boolean |
\n
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"removeAttribute"
:{
"name"
:
"#### removeAttribute(key) @removeattribute"
,
"description"
:
"
\n
从元素中删除一个属性，如果指定的属性不存在，则不做任何操作，也不会产生错误。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | 属性名称 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"getBoundingClientRect"
:{
"name"
:
"#### getBoundingClientRect() @getboundingclientrect"
,
"description"
:
"
\n
获取元素的大小及其相对于窗口的位置信息。"
,
"param"
:
""
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 |
\n
| :- |
\n
| [DOMRect](/dom/domrect.md) |
\n
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"getDrawableContext"
:{
"name"
:
"#### getDrawableContext() @getdrawablecontext"
,
"description"
:
"
\n
获取组件的绘制对象，仅uvue页面中的 view 组件支持，其它组件不支持则返回null。"
,
"param"
:
""
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| [DrawableContext](/dom/drawablecontext.md)
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
"##### getDrawableContext 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| 3.9 | x | x |
\n
"
,
"tutorial"
:
""
},
"addEventListener"
:{
"name"
:
"#### addEventListener(type, callback) @addeventlistener"
,
"description"
:
"
\n
将指定的监听器注册到元素对象上，当该对象触发指定的事件时，指定的回调函数就会被执行。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 | - | 事件类型 |
\n
| callback | (event: T) => R | 是 | - | 事件监听器 T表示event类型，R表示返回值类型 |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 |
\n
| :- |
\n
| UniCallbackWrapper |
\n
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"removeEventListener"
:{
"name"
:
"#### removeEventListener(type, callbackWrapper) @removeeventlistener"
,
"description"
:
"
\n
删除使用 addEventListener 方法添加的事件监听器。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 | - | 事件类型 |
\n
| callbackWrapper | UniCallbackWrapper | 是 | - | 事件监听回调封装类 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"removeChild"
:{
"name"
:
"#### removeChild(aChild) @removechild"
,
"description"
:
"
\n
从元素中删除一个子元素，返回删除的元素。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| aChild | [UniElement](/dom/unielement.md) | 是 | - | 被删除子元素对象 |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| [UniElement](/dom/unielement.md)
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"remove"
:{
"name"
:
"#### remove() @remove"
,
"description"
:
"
\n
把元素对象从它所属的 DOM 树中删除。"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"dispatchEvent"
:{
"name"
:
"#### dispatchEvent(type, value) @dispatchevent"
,
"description"
:
"
\n
向一个指定的事件目标派发一个 Event，并以合适的顺序（同步地）调用此事件的监听器回调函数。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 | - | 事件类型 |
\n
| value | [UniEvent](/component/common#unievent) | 是 | - | 事件返回对象 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"scrollTo"
:{
"name"
:
"#### scrollTo(x, y) @scrollto"
,
"description"
:
"
\n
使界面滚动到给定元素的指定坐标位置 仅scroll-view、list-view组件支持"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| x | number | 是 | - | x轴要滚动到坐标位置(单位px) |
\n
| y | number | 是 | - | y轴要滚动到坐标位置(单位px) |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"scrollBy"
:{
"name"
:
"#### scrollBy(x, y) @scrollby"
,
"description"
:
"
\n
使得元素滚动一段特定距离 仅scroll-view、list-view组件支持"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| x | number | 是 | - | x轴要滚动的距离(单位px) |
\n
| y | number | 是 | - | y轴要滚动的距离(单位px) |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"querySelector"
:{
"name"
:
"#### querySelector(selector) @queryselector"
,
"description"
:
"
\n
返回文档中与指定选择器或选择器组匹配的第一个 Element对象。如果找不到匹配项，则返回null"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| selector | [string.cssSelectorString](/uts/data-type.md#ide-string) | 是 | - | CSS 选择器字符串 |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| [UniElement](/dom/unielement.md)
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"querySelectorAll"
:{
"name"
:
"#### querySelectorAll(selector) @queryselectorall"
,
"description"
:
"
\n
返回与指定的选择器组匹配的文档中的元素列表"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| selector | [string.cssSelectorString](/uts/data-type.md#ide-string) | 是 | - | CSS 选择器字符串 |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| Array
\\
<[UniElement](/dom/unielement.md)
\\
>
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"focus"
:{
"name"
:
"#### focus() @focus"
,
"description"
:
"
\n
使元素获取焦点 仅input、Textarea组件支持"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"blur"
:{
"name"
:
"#### blur() @blur"
,
"description"
:
"
\n
使元素丢失焦点 仅input、Textarea组件支持"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
}}},
"CSSStyleDeclaration"
:{
"name"
:
"## CSSStyleDeclaration"
,
"description"
:
"
\n
CSSStyleDeclaration表示一个CSS 声明块对象，它是一个 CSS 属性键值对的集合，暴露样式信息和各种与样式相关的方法和属性。"
,
"extends"
:
""
,
"param"
:
""
,
"methods"
:{
"setProperty"
:{
"name"
:
"#### setProperty(name, value?) @setproperty"
,
"description"
:
"
\n
对CSS指定样式设置一个新值，如有此样式已存在则更新。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| name | string ([string.cssPropertyString](/uts/data-type.md#ide-string)) | 是 | - | CSS样式名称 |
\n
| value | any
\\
| null | 否 | - | 要设置的新CSS样式值 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"getPropertyValue"
:{
"name"
:
"#### getPropertyValue(property) @getpropertyvalue"
,
"description"
:
"
\n
获取CSS指定的样式值，如果指定的样式不存在则返回null。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| property | string ([string.cssPropertyString](/uts/data-type.md#ide-string)) | 是 | - | 要获取的CSS样式名称 |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| any
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"removeProperty"
:{
"name"
:
"#### removeProperty(property) @removeproperty"
,
"description"
:
"
\n
删除CSS指定的样式值"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| property | string ([string.cssPropertyString](/uts/data-type.md#ide-string)) | 是 | - | 要删除的CSS样式名称 |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| any
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
}}},
"TakeSnapshotOptions"
:{
"name"
:
"## TakeSnapshotOptions"
,
"description"
:
"
\n
组件截图的参数配置选项"
,
"extends"
:
""
,
"param"
:
"
\n
### TakeSnapshotOptions 的属性值 @takesnapshotoptions-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string
\\
| null | 否 |
\"
file
\"
| 截图导出类型，目前仅支持 'file' 保存到临时文件目录 |
\n
| format | string
\\
| null | 否 |
\"
png
\"
| 截图文件格式，目前仅支持 'png' |
\n
| success | (res: **TakeSnapshotSuccess**) => void
\\
| null | 否 | - | 接口调用成功的回调函数 |
\n
@| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
@| :- | :- | :- | :- | :- |
\n
@| tempFilePath | string | 是 | - | 截图保存的临时文件路径 |
\n
| fail | (res: **TakeSnapshotFail**) => void
\\
| null | 否 | - | 接口调用失败的回调函数 |
\n
@| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
@| :- | :- | :- | :- | :- |
\n
@| errMsg | string | 是 | - | - |
\n
| complete | (res: any) => void
\\
| null | 否 | - | 接口调用结束的回调函数（调用成功、失败都会执行） |
\n
"
},
"TakeSnapshotSuccessCallback"
:{
"name"
:
"## TakeSnapshotSuccessCallback"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
""
},
"TakeSnapshotSuccess"
:{
"name"
:
"## TakeSnapshotSuccess"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
"
\n
### TakeSnapshotSuccess 的属性值 @takesnapshotsuccess-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| tempFilePath | string | 是 | - | 截图保存的临时文件路径 |
\n
"
},
"TakeSnapshotFailCallback"
:{
"name"
:
"## TakeSnapshotFailCallback"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
""
},
"TakeSnapshotFail"
:{
"name"
:
"## TakeSnapshotFail"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
"
\n
### TakeSnapshotFail 的属性值 @takesnapshotfail-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| errMsg | string | 是 | - | - |
\n
"
},
"TakeSnapshotCompleteCallback"
:{
"name"
:
"## TakeSnapshotCompleteCallback"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
""
},
"DOMRect"
:{
"name"
:
"## DOMRect"
,
"description"
:
"
\n
一个 DOMRect 代表一个矩形。"
,
"extends"
:
""
,
"param"
:
"
\n
### 构造函数
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| x | number | 否 | - | - |
\n
| y | number | 否 | - | - |
\n
| width | number | 否 | - | - |
\n
| height | number | 否 | - | - |
\n\n
### DOMRect 的属性值 @domrect-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| width | number | 是 | - | 矩形的宽 |
\n
| height | number | 是 | - | 矩形的高 |
\n
| x | number | 是 | - | 矩形原点的x坐标 |
\n
| y | number | 是 | - | 矩形原点的y坐标 |
\n
| left | number | 是 | - | 矩形的左坐标值 |
\n
| right | number | 是 | - | 矩形的右坐标值 |
\n
| top | number | 是 | - | 矩形的顶坐标值 |
\n
| bottom | number | 是 | - | 矩形的底坐标值 |
\n
"
},
"DrawableContext"
:{
"name"
:
"## DrawableContext"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
"
\n
### DrawableContext 的属性值 @drawablecontext-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| font | string | 是 | 10px | 设置字体大小 |
\n
| fillStyle | [string.ColorString](/uts/data-type.md#ide-string) | 是 | #000 (黑色) | 设置填充颜色 |
\n
| lineCap | string | 是 | butt | 指定如何绘制每一条线条末端的属性，可选值：`butt`线段末端以方形结束；`round`线段末端以圆形结束；`square`线段末端以方形结束，但是会增加一个一半宽度的矩形区域。 |
\n
| lineDashOffset | number | 是 | - | 设置虚线偏移量 |
\n
| lineJoin | string | 是 | miter | 设置 2 个长度不为 0 的线条相连部分如何连接在一起的属性，可选值：`bevel`斜角；`round`圆角；`miter`尖角。 |
\n
| lineWidth | number | 是 | 1px | 设置线条的宽度 |
\n
| strokeStyle | [string.ColorString](/uts/data-type.md#ide-string) | 是 | #000 (黑色) | 设置边框的颜色 |
\n
| textAlign | string | 是 | left | 设置文本的对齐方式，可取值：`left`左对齐；`center`居中对齐；`right`右对齐。 |
\n
"
,
"methods"
:{
"beginPath"
:{
"name"
:
"#### beginPath() @beginpath"
,
"description"
:
"
\n
创建一个新的空路径"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"arc"
:{
"name"
:
"#### arc(x, y, radius, startAngle, endAngle, anticlockwise?) @arc"
,
"description"
:
"
\n
绘制一段弧线"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| x | number | 是 | - | 圆心的X轴坐标 |
\n
| y | number | 是 | - | 圆心的Y轴坐标 |
\n
| radius | number | 是 | - | 圆弧的半径 |
\n
| startAngle | number | 是 | - | 圆弧的起始点，x 轴方向开始计算，单位为弧度 |
\n
| endAngle | number | 是 | - | 圆弧的终点，单位为弧度 |
\n
| anticlockwise | boolean
\\
| null | 否 | true | 圆弧绘制方向，true：逆时针绘制，false：顺时针绘制。 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"moveTo"
:{
"name"
:
"#### moveTo(x, y) @moveto"
,
"description"
:
"
\n
将一个新的路径的起始点移动到 (x，y) 坐标"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| x | number | 是 | - | 点的X轴坐标 |
\n
| y | number | 是 | - | 点的Y轴坐标 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"rect"
:{
"name"
:
"#### rect(x, y, width, height) @rect"
,
"description"
:
"
\n
创建一个矩形路径"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| x | number | 是 | - | 矩形起点的X轴坐标 |
\n
| y | number | 是 | - | 矩形起点的Y轴坐标 |
\n
| width | number | 是 | - | 矩形宽度 |
\n
| height | number | 是 | - | 矩形高度 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"lineTo"
:{
"name"
:
"#### lineTo(x, y) @lineto"
,
"description"
:
"
\n
将路径的最后一个点连接到 (x，y) 坐标"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| x | number | 是 | - | 线终点的X轴坐标 |
\n
| y | number | 是 | - | 线终点的Y轴坐标 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"closePath"
:{
"name"
:
"#### closePath() @closepath"
,
"description"
:
"
\n
闭合路径，将最后一个点与起点连接起来。如果图形已经封闭，或者只有一个点，那么此方法不会产生任何效果。"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"stroke"
:{
"name"
:
"#### stroke() @stroke"
,
"description"
:
"
\n
绘制当前或已经存在的路径的边框。"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"strokeRect"
:{
"name"
:
"#### strokeRect(x, y, width, height) @strokerect"
,
"description"
:
"
\n
绘制一个矩形框"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| x | number | 是 | - | 矩形起点的X轴坐标 |
\n
| y | number | 是 | - | 矩形起点的Y轴坐标 |
\n
| width | number | 是 | - | 矩形宽度 |
\n
| height | number | 是 | - | 矩形高度 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"strokeText"
:{
"name"
:
"#### strokeText(text, x, y) @stroketext"
,
"description"
:
"
\n
绘制空心字符"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| text | string | 是 | - | 要绘制的字符 |
\n
| x | number | 是 | - | 字符开始绘制的X轴坐标 |
\n
| y | number | 是 | - | 字符开始绘制的Y轴坐标 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"fill"
:{
"name"
:
"#### fill(fillRule?) @fill"
,
"description"
:
"
\n
填充当前或已存在的路径"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| fillRule | string
\\
| null | 否 | nonzero | 填充规则。可取值：`nonzero`非零环绕规则；`evenodd`奇偶环绕规则。 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"fillRect"
:{
"name"
:
"#### fillRect(x, y, width, height) @fillrect"
,
"description"
:
"
\n
绘制一个实心矩形"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| x | number | 是 | - | 矩形起点的X轴坐标 |
\n
| y | number | 是 | - | 矩形起点的Y轴坐标 |
\n
| width | number | 是 | - | 矩形宽度 |
\n
| height | number | 是 | - | 矩形高度 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"fillText"
:{
"name"
:
"#### fillText(text, x, y) @filltext"
,
"description"
:
"
\n
绘制实心字符"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| text | string | 是 | - | 要绘制的字符 |
\n
| x | number | 是 | - | 字符开始绘制的X轴坐标 |
\n
| y | number | 是 | - | 字符开始绘制的Y轴坐标 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"reset"
:{
"name"
:
"#### reset() @reset"
,
"description"
:
"
\n
清空绘制数据"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"update"
:{
"name"
:
"#### update() @update"
,
"description"
:
"
\n
将所有绘制内容更新到画布上"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"setLineDash"
:{
"name"
:
"#### setLineDash(segments) @setlinedash"
,
"description"
:
"
\n
设置虚线样式"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| segments | number[
\\
] | 是 | - | 一组描述交替绘制线段和间距长度的数字。 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"bezierCurveTo"
:{
"name"
:
"#### bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) @beziercurveto"
,
"description"
:
"
\n
创建三次方贝塞尔曲线路径"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| cp1x | number | 是 | - | 第一个贝塞尔控制点的 x 坐标 |
\n
| cp1y | number | 是 | - | 第一个贝塞尔控制点的 y 坐标 |
\n
| cp2x | number | 是 | - | 第二个贝塞尔控制点的 x 坐标 |
\n
| cp2y | number | 是 | - | 第二个贝塞尔控制点的 y 坐标 |
\n
| x | number | 是 | - | 结束点的 x 坐标 |
\n
| y | number | 是 | - | 结束点的 y 坐标 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
}},
"example"
:
"### 示例
\n
> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/API/element-draw/element-draw.uvue)
\n
```vue
\n
<template>
\r\n
<!-- #ifdef APP -->
\r\n
<scroll-view class=
\"
page-scroll-view
\"
>
\r\n
<!-- #endif -->
\r\n
<view>
\r\n
<view class=
\"
drawing
\"
id=
\"
draw-text-view
\"
></view>
\r\n
<view class=
\"
drawing
\"
id=
\"
draw-line-view
\"
></view>
\r\n
<view class=
\"
drawing
\"
id=
\"
draw-circle-view
\"
></view>
\r\n
<view class=
\"
drawing
\"
id=
\"
draw-dash-line
\"
></view>
\r\n
<view class=
\"
drawing
\"
id=
\"
draw-house
\"
></view>
\r\n
<view class=
\"
drawing
\"
id=
\"
draw-style
\"
></view>
\r\n
<view class=
\"
drawing
\"
id=
\"
draw-odd
\"
></view>
\r\n
<view class=
\"
drawing
\"
id=
\"
draw-arcto
\"
></view>
\r\n
</view>
\r\n
<!-- #ifdef APP -->
\r\n
</scroll-view>
\r\n
<!-- #endif -->
\r\n
</template>
\r\n\r\n
<script>
\r\n
var y = 160
\r\n
export default {
\r\n
data() {
\r\n
return {
\r\n
texts: [
\r\n
'HBuilderX，轻巧、极速，极客编辑器',
\r\n
'uni-app x，终极跨平台方案',
\r\n
'uniCloud，js serverless云服务',
\r\n
'uts，大一统语言',
\r\n
'uniMPSdk，让你的App具备小程序能力',
\r\n
'uni-admin，开源、现成的全端管理后台',
\r\n
'uni-id，开源、全端的账户中心',
\r\n
'uni-pay，开源、云端一体、全平台的支付',
\r\n
'uni-ai，聚合ai能力',
\r\n
'uni-cms，开源、云端一体、全平台的内容管理平台',
\r\n
'uni-im，开源、云端一体、全平台的im即时消息',
\r\n
'uni统计，开源、完善、全平台的统计报表',
\r\n
'......'
\r\n
] as string[]
\r\n
}
\r\n
},
\r\n
onShow() {
\r\n
},
\r\n\r\n
onReady() {
\r\n
this.drawText()
\r\n
this.drawLines()
\r\n
this.drawCircles()
\r\n
this.drawStar()
\r\n
this.drawhouse()
\r\n
this.drawPoint()
\r\n
this.drawRect()
\r\n
this.drawArcTo()
\r\n
},
\r\n
onUnload() {
\r\n
y = 160
\r\n
},
\r\n
methods: {
\r\n
drawText() {
\r\n
let element = uni.getElementById('draw-text-view')!
\r\n
let ctx = element.getDrawableContext()!
\r\n
let width = element.getBoundingClientRect().width
\r\n
ctx.reset()
\r\n
ctx.font =
\"
15px
\"\r\n
ctx.textAlign =
\"
center
\"\r\n
for (var i = 0; i < this.texts.length; i++) {
\r\n
let value = this.texts[i]
\r\n
if (i % 2 == 0) {
\r\n
ctx.fillText(value, width / 2, (20 * (i + 1)))
\r\n
} else {
\r\n
ctx.strokeText(value, width / 2, (20 * (i + 1)))
\r\n
}
\r\n
}
\r\n
ctx.update()
\r\n
},
\r\n
drawLines() {
\r\n
let ctx = uni.getElementById('draw-line-view')!.getDrawableContext()!
\r\n
ctx.reset()
\r\n
ctx.lineWidth = 10;
\r\n\r\n
[
\"
round
\"
,
\"
bevel
\"
,
\"
miter
\"
].forEach((join, i) => {
\r\n
ctx.lineJoin = join;
\r\n
ctx.beginPath();
\r\n
ctx.moveTo(5, 10 + i * 40);
\r\n
ctx.lineTo(50, 50 + i * 40);
\r\n
ctx.lineTo(90, 10 + i * 40);
\r\n
ctx.lineTo(130, 50 + i * 40);
\r\n
ctx.lineTo(170, 10 + i * 40);
\r\n
ctx.stroke();
\r\n
});
\r\n
ctx.lineWidth = 1
\r\n
var space = 170
\r\n
ctx.strokeStyle = '#09f';
\r\n
ctx.beginPath();
\r\n
ctx.moveTo(10 + space, 10);
\r\n
ctx.lineTo(140 + space, 10);
\r\n
ctx.moveTo(10 + space, 140);
\r\n
ctx.lineTo(140 + space, 140);
\r\n
ctx.stroke();
\r\n
// Draw lines
\r\n
ctx.strokeStyle = 'black';
\r\n
['butt', 'round', 'square'].forEach((lineCap, i) => {
\r\n
ctx.lineWidth = 15;
\r\n
ctx.lineCap = lineCap;
\r\n
ctx.beginPath();
\r\n
ctx.moveTo(25 + space + i * 50, 10);
\r\n
ctx.lineTo(25 + space + i * 50, 140);
\r\n
ctx.stroke();
\r\n
});
\r\n
ctx.lineWidth = 1;
\r\n
this.drawDashedLine([], ctx);
\r\n
this.drawDashedLine([2, 2], ctx);
\r\n
this.drawDashedLine([10, 10], ctx);
\r\n
this.drawDashedLine([20, 5], ctx);
\r\n
this.drawDashedLine([15, 3, 3, 3], ctx);
\r\n
this.drawDashedLine([20, 3, 3, 3, 3, 3, 3, 3], ctx);
\r\n
ctx.lineDashOffset = 18;
\r\n
this.drawDashedLine([12, 3, 3], ctx);
\r\n
ctx.lineDashOffset = 0
\r\n
ctx.setLineDash([0])
\r\n
ctx.update()
\r\n
},
\r\n
drawDashedLine(pattern : Array<number>, ctx : DrawableContext) {
\r\n
ctx.beginPath();
\r\n
ctx.setLineDash(pattern);
\r\n
ctx.moveTo(0, y);
\r\n
ctx.lineTo(300, y);
\r\n
ctx.stroke();
\r\n
y += 15;
\r\n
},
\r\n
drawCircles() {
\r\n
let ctx = uni.getElementById('draw-circle-view')!.getDrawableContext()!
\r\n
ctx.reset()
\r\n
// Draw shapes
\r\n
for (var i = 0; i < 4; i++) {
\r\n
for (var j = 0; j < 3; j++) {
\r\n
ctx.beginPath();
\r\n
var x = 25 + j * 50; // x coordinate
\r\n
var y = 25 + i * 50; // y coordinate
\r\n
var radius = 20; // Arc radius
\r\n
var startAngle = 0; // Starting point on circle
\r\n
var endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
\r\n
var clockwise = i % 2 == 0 ? false : true; // clockwise or anticlockwise
\r\n\r\n
ctx.arc(x, y, radius, startAngle, endAngle, clockwise);
\r\n\r\n
if (i > 1) {
\r\n
ctx.fill();
\r\n
} else {
\r\n
ctx.stroke();
\r\n
}
\r\n
}
\r\n
}
\r\n
ctx.update()
\r\n
},
\r\n\r\n
drawStar() {
\r\n
let ctx = uni.getElementById('draw-dash-line')!.getDrawableContext()!
\r\n
ctx.reset()
\r\n
ctx.beginPath();
\r\n
var horn = 5; // 画5个角
\r\n
var angle = 360 / horn; // 五个角的度数
\r\n
// 两个圆的半径
\r\n
var R = 50;
\r\n
var r = 20;
\r\n
// 坐标
\r\n
var x = 100;
\r\n
var y = 100;
\r\n
for (var i = 0; i < horn; i++) {
\r\n
// 角度转弧度：角度/180*Math.PI
\r\n
// 外圆顶点坐标
\r\n
ctx.lineTo(Math.cos((18 + i * angle) / 180.0 * Math.PI) * R + x, -Math.sin((18 + i * angle) / 180.0 * Math.PI) * R + y);
\r\n
// 內圆顶点坐标
\r\n
ctx.lineTo(Math.cos((54 + i * angle) / 180.0 * Math.PI) * r + x, -Math.sin((54 + i * angle) / 180.0 * Math.PI) * r + y);
\r\n
}
\r\n
// closePath：关闭路径，将路径的终点与起点相连
\r\n
ctx.closePath();
\r\n
ctx.lineWidth = 3;
\r\n
ctx.fillStyle = '#E4EF00';
\r\n
ctx.strokeStyle =
\"
red
\"
;
\r\n
ctx.fill();
\r\n
ctx.stroke();
\r\n\r\n
ctx.lineWidth = 10;
\r\n
ctx.beginPath()
\r\n
ctx.moveTo(170, 100)
\r\n
ctx.lineTo(255, 15)
\r\n
ctx.lineTo(340, 100)
\r\n
ctx.closePath()
\r\n
ctx.fill()
\r\n
ctx.strokeStyle =
\"
blue
\"\r\n
ctx.stroke()
\r\n
ctx.beginPath()
\r\n
ctx.moveTo(170, 145)
\r\n
ctx.lineTo(255, 45)
\r\n
ctx.lineTo(340, 145)
\r\n
ctx.closePath()
\r\n
ctx.fill()
\r\n
ctx.strokeStyle =
\"
gray
\"\r\n
ctx.stroke()
\r\n
// 未设置beginPath，导致上下表现一致，与前端一致
\r\n
ctx.moveTo(170, 190)
\r\n
ctx.lineTo(255, 90)
\r\n
ctx.lineTo(340, 190)
\r\n
ctx.closePath()
\r\n
ctx.fillStyle =
\"
orange
\"\r\n
ctx.fill()
\r\n
ctx.strokeStyle =
\"
khaki
\"\r\n
ctx.stroke()
\r\n
ctx.update()
\r\n
},
\r\n
hex(num : number) : string {
\r\n
if (num == 0) {
\r\n
return
\"
00
\"\r\n
}
\r\n
let hexChars =
\"
0123456789ABCDEF
\"
;
\r\n
let result =
\"\"
;
\r\n
while (num > 0) {
\r\n
let remainder = Math.floor(num) % 16;
\r\n
result = hexChars[remainder] + result;
\r\n
num = Math.floor(Math.floor(num) / 16);
\r\n
}
\r\n
if (result.length == 1) {
\r\n
return
\"
0
\"
+ result
\r\n
}
\r\n
return result
\r\n
},
\r\n
drawhouse() {
\r\n
let ctx = uni.getElementById('draw-house')!.getDrawableContext()!
\r\n
ctx.reset()
\r\n
ctx.lineWidth = 10;
\r\n\r\n
// Wall
\r\n
ctx.strokeRect(75, 140, 150, 110);
\r\n\r\n
// Door
\r\n
ctx.fillRect(130, 190, 40, 60);
\r\n\r\n
// Roof
\r\n
ctx.beginPath();
\r\n
ctx.moveTo(50, 140);
\r\n
ctx.lineTo(150, 60);
\r\n
ctx.lineTo(250, 140);
\r\n
ctx.closePath();
\r\n
ctx.stroke();
\r\n
ctx.update()
\r\n
},
\r\n
drawPoint() {
\r\n
let ctx = uni.getElementById('draw-style')!.getDrawableContext()!
\r\n
ctx.reset()
\r\n
for (let i = 0; i < 6; i++) {
\r\n
for (let j = 0; j < 6; j++) {
\r\n
ctx.strokeStyle = `rgb(0,${Math.floor(255 - 42.5 * i)},${Math.floor(255 - 42.5 * j)})`;
\r\n
ctx.beginPath();
\r\n
ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
\r\n
ctx.stroke();
\r\n
}
\r\n
}
\r\n
for (let i = 0; i < 6; i++) {
\r\n
for (let j = 0; j < 6; j++) {
\r\n
ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)},${Math.floor(255 - 42.5 * j)},0)`;
\r\n
ctx.fillRect(180 + j * 25, i * 25, 25, 25);
\r\n
}
\r\n
}
\r\n
ctx.update()
\r\n
},
\r\n
drawRect() {
\r\n
let ctx = uni.getElementById('draw-odd')!.getDrawableContext()!
\r\n
ctx.reset()
\r\n
// Create path
\r\n
ctx.moveTo(30, 90);
\r\n
ctx.lineTo(110, 20);
\r\n
ctx.lineTo(240, 130);
\r\n
ctx.lineTo(60, 130);
\r\n
ctx.lineTo(190, 20);
\r\n
ctx.lineTo(270, 90);
\r\n
ctx.closePath();
\r\n\r\n
// Fill path
\r\n
ctx.fillStyle =
\"
green
\"
;
\r\n
ctx.fill(
\"
evenodd
\"
);
\r\n
ctx.update()
\r\n\r\n
},
\r\n
drawArcTo() {
\r\n
let ctx = uni.getElementById('draw-arcto')!.getDrawableContext()!
\r\n
ctx.reset()
\r\n
ctx.beginPath();
\r\n
ctx.moveTo(50, 20);
\r\n
ctx.bezierCurveTo(230, 30, 150, 60, 50, 100);
\r\n
ctx.stroke();
\r\n\r\n
ctx.fillStyle =
\"
blue
\"
;
\r\n
// start point
\r\n
ctx.fillRect(50, 20, 10, 10);
\r\n
// end point
\r\n
ctx.fillRect(50, 100, 10, 10);
\r\n\r\n
ctx.fillStyle =
\"
red
\"
;
\r\n
// control point one
\r\n
ctx.fillRect(230, 30, 10, 10);
\r\n
// control point two
\r\n
ctx.fillRect(150, 70, 10, 10);
\r\n
ctx.update()
\r\n
}
\r\n
}
\r\n
}
\r\n
</script>
\r\n\r\n
<style>
\r\n
.drawing {
\r\n
height: 275px;
\r\n
background-color: lightgray;
\r\n
margin-bottom: 15px;
\r\n
}
\r\n
</style>
\r\n\n
```"
},
"UniCallbackWrapper"
:{
"name"
:
"## UniCallbackWrapper"
,
"description"
:
"
\n
事件回调封装类，用于注销监听函数的形参"
,
"extends"
:
""
,
"param"
:
""
},
"UniEvent"
:{
"name"
:
"## UniEvent"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
"
\n
### 构造函数
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 | - | - |
\n
| eventInit | [UTSJSONObject](/uts/buildin-object-api/utsjsonobject.md) | 是 | - | - |
\n\n
### UniEvent 的属性值 @unievent-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| bubbles | boolean | 是 | - | 是否冒泡 |
\n
| cancelable | boolean | 是 | - | 是否可以取消 |
\n
| type | string | 是 | - | 事件类型 |
\n
| target | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| currentTarget | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| timeStamp | number | 是 | - | 事件发生时的时间戳 |
\n
"
,
"methods"
:{
"stopPropagation"
:{
"name"
:
"#### stopPropagation() @stoppropagation"
,
"description"
:
"
\n
阻止当前事件的进一步传播"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"preventDefault"
:{
"name"
:
"#### preventDefault() @preventdefault"
,
"description"
:
"
\n
阻止当前事件的默认行为"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
}}},
"CustomEvent"
:{
"name"
:
"## CustomEvent"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
"
\n
### 构造函数
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 | - | - |
\n
| options | any | 是 | - | - |
\n\n
### CustomEvent 的属性值 @customevent-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| detail | T | 是 | - | - |
\n
| bubbles | boolean | 是 | - | 是否冒泡 |
\n
| cancelable | boolean | 是 | - | 是否可以取消 |
\n
| type | string | 是 | - | 事件类型 |
\n
| target | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| currentTarget | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| timeStamp | number | 是 | - | 事件发生时的时间戳 |
\n
"
,
"methods"
:{
"stopPropagation"
:{
"name"
:
"#### stopPropagation() @stoppropagation"
,
"description"
:
"
\n
阻止当前事件的进一步传播"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"preventDefault"
:{
"name"
:
"#### preventDefault() @preventdefault"
,
"description"
:
"
\n
阻止当前事件的默认行为"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
}}},
"MouseEvent"
:{
"name"
:
"## MouseEvent"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
"
\n
### 构造函数
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 | - | - |
\n
| x | number | 是 | - | - |
\n
| y | number | 是 | - | - |
\n
| clientX | number | 是 | - | - |
\n
| clientY | number | 是 | - | - |
\n
| pageX | number | 是 | - | - |
\n
| pageY | number | 是 | - | - |
\n
| screenX | number | 是 | - | - |
\n
| screenY | number | 是 | - | - |
\n\n
### MouseEvent 的属性值 @mouseevent-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| clientX | number | 是 | - | 相对于页面可显示区域左边的距离 |
\n
| clientY | number | 是 | - | 相对于页面可显示区域顶部的距离 |
\n
| x | number | 是 | - | 相对于页面可显示区域左边的距离，同`clientX` |
\n
| y | number | 是 | - | 相对于页面可显示区域顶部的距离，同`clientY` |
\n
| pageX | number | 是 | - | 相对于文档左边的距离 |
\n
| pageY | number | 是 | - | 相对于文档顶部的距离 |
\n
| screenX | number | 是 | - | 相对于屏幕左边距离 |
\n
| screenY | number | 是 | - | 相对于屏幕顶部的距离 |
\n
| bubbles | boolean | 是 | - | 是否冒泡 |
\n
| cancelable | boolean | 是 | - | 是否可以取消 |
\n
| type | string | 是 | - | 事件类型 |
\n
| target | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| currentTarget | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| timeStamp | number | 是 | - | 事件发生时的时间戳 |
\n
"
,
"methods"
:{
"stopPropagation"
:{
"name"
:
"#### stopPropagation() @stoppropagation"
,
"description"
:
"
\n
阻止当前事件的进一步传播"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"preventDefault"
:{
"name"
:
"#### preventDefault() @preventdefault"
,
"description"
:
"
\n
阻止当前事件的默认行为"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
}}},
"TouchEvent"
:{
"name"
:
"## TouchEvent"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
"
\n
### 构造函数
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 | - | - |
\n
| touches | Array
\\
<**UniTouch**
\\
> | 是 | - | - |
\n
@| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
@| :- | :- | :- | :- | :- |
\n
@| clientX | number | 是 | - | 相对于页面可显示区域左边的距离 |
\n
@| clientY | number | 是 | - | 相对于页面可显示区域顶部的距离 |
\n
@| identifier | number | 是 | - | 触摸点的标识符。这个值在这根手指所引发的所有事件中保持一致，直到手指抬起。 |
\n
@| pageX | number | 是 | - | 相对于文档左边的距离 |
\n
@| pageY | number | 是 | - | 相对于文档顶部的距离 |
\n
@| screenX | number | 是 | - | 相对于屏幕左边距离 |
\n
@| screenY | number | 是 | - | 相对于屏幕顶部的距离 |
\n
@| force | number
\\
| null | 否 | - | 返回当前触摸点按下的压力大小 |
\n
| changedTouches | Array
\\
<**UniTouch**
\\
> | 是 | - | - |
\n
@| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
@| :- | :- | :- | :- | :- |
\n
@| clientX | number | 是 | - | 相对于页面可显示区域左边的距离 |
\n
@| clientY | number | 是 | - | 相对于页面可显示区域顶部的距离 |
\n
@| identifier | number | 是 | - | 触摸点的标识符。这个值在这根手指所引发的所有事件中保持一致，直到手指抬起。 |
\n
@| pageX | number | 是 | - | 相对于文档左边的距离 |
\n
@| pageY | number | 是 | - | 相对于文档顶部的距离 |
\n
@| screenX | number | 是 | - | 相对于屏幕左边距离 |
\n
@| screenY | number | 是 | - | 相对于屏幕顶部的距离 |
\n
@| force | number
\\
| null | 否 | - | 返回当前触摸点按下的压力大小 |
\n\n
### TouchEvent 的属性值 @touchevent-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| touches | Array
\\
<**UniTouch**
\\
> | 是 | - | 当前停留在屏幕中的触摸点信息的数组 |
\n
@| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
@| :- | :- | :- | :- | :- |
\n
@| clientX | number | 是 | - | 相对于页面可显示区域左边的距离 |
\n
@| clientY | number | 是 | - | 相对于页面可显示区域顶部的距离 |
\n
@| identifier | number | 是 | - | 触摸点的标识符。这个值在这根手指所引发的所有事件中保持一致，直到手指抬起。 |
\n
@| pageX | number | 是 | - | 相对于文档左边的距离 |
\n
@| pageY | number | 是 | - | 相对于文档顶部的距离 |
\n
@| screenX | number | 是 | - | 相对于屏幕左边距离 |
\n
@| screenY | number | 是 | - | 相对于屏幕顶部的距离 |
\n
@| force | number
\\
| null | 否 | - | 返回当前触摸点按下的压力大小 |
\n
| changedTouches | Array
\\
<**UniTouch**
\\
> | 是 | - | 当前变化的触摸点信息的数组 |
\n
@| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
@| :- | :- | :- | :- | :- |
\n
@| clientX | number | 是 | - | 相对于页面可显示区域左边的距离 |
\n
@| clientY | number | 是 | - | 相对于页面可显示区域顶部的距离 |
\n
@| identifier | number | 是 | - | 触摸点的标识符。这个值在这根手指所引发的所有事件中保持一致，直到手指抬起。 |
\n
@| pageX | number | 是 | - | 相对于文档左边的距离 |
\n
@| pageY | number | 是 | - | 相对于文档顶部的距离 |
\n
@| screenX | number | 是 | - | 相对于屏幕左边距离 |
\n
@| screenY | number | 是 | - | 相对于屏幕顶部的距离 |
\n
@| force | number
\\
| null | 否 | - | 返回当前触摸点按下的压力大小 |
\n
| bubbles | boolean | 是 | - | 是否冒泡 |
\n
| cancelable | boolean | 是 | - | 是否可以取消 |
\n
| type | string | 是 | - | 事件类型 |
\n
| target | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| currentTarget | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| timeStamp | number | 是 | - | 事件发生时的时间戳 |
\n
"
,
"methods"
:{
"stopPropagation"
:{
"name"
:
"#### stopPropagation() @stoppropagation"
,
"description"
:
"
\n
阻止当前事件的进一步传播"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"preventDefault"
:{
"name"
:
"#### preventDefault() @preventdefault"
,
"description"
:
"
\n
阻止当前事件的默认行为"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
}}},
"UniTouch"
:{
"name"
:
"## UniTouch"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
"
\n
### UniTouch 的属性值 @unitouch-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| clientX | number | 是 | - | 相对于页面可显示区域左边的距离 |
\n
| clientY | number | 是 | - | 相对于页面可显示区域顶部的距离 |
\n
| identifier | number | 是 | - | 触摸点的标识符。这个值在这根手指所引发的所有事件中保持一致，直到手指抬起。 |
\n
| pageX | number | 是 | - | 相对于文档左边的距离 |
\n
| pageY | number | 是 | - | 相对于文档顶部的距离 |
\n
| screenX | number | 是 | - | 相对于屏幕左边距离 |
\n
| screenY | number | 是 | - | 相对于屏幕顶部的距离 |
\n
| force | number
\\
| null | 否 | - | 返回当前触摸点按下的压力大小 |
\n
"
},
"Touch"
:{
"name"
:
"## Touch"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
"
\n
### Touch 的属性值 @touch-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| clientX | number | 是 | - | 相对于页面可显示区域左边的距离 |
\n
| clientY | number | 是 | - | 相对于页面可显示区域顶部的距离 |
\n
| identifier | number | 是 | - | 触摸点的标识符。这个值在这根手指所引发的所有事件中保持一致，直到手指抬起。 |
\n
| pageX | number | 是 | - | 相对于文档左边的距离 |
\n
| pageY | number | 是 | - | 相对于文档顶部的距离 |
\n
| screenX | number | 是 | - | 相对于屏幕左边距离 |
\n
| screenY | number | 是 | - | 相对于屏幕顶部的距离 |
\n
| force | number
\\
| null | 否 | - | 返回当前触摸点按下的压力大小 |
\n
"
},
"UniCustomEvent"
:{
"name"
:
"## UniCustomEvent"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
"
\n
### 构造函数
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 | - | - |
\n
| options | any | 是 | - | - |
\n\n
### UniCustomEvent 的属性值 @unicustomevent-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| detail | T | 是 | - | - |
\n
| bubbles | boolean | 是 | - | 是否冒泡 |
\n
| cancelable | boolean | 是 | - | 是否可以取消 |
\n
| type | string | 是 | - | 事件类型 |
\n
| target | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| currentTarget | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| timeStamp | number | 是 | - | 事件发生时的时间戳 |
\n
"
,
"methods"
:{
"stopPropagation"
:{
"name"
:
"#### stopPropagation() @stoppropagation"
,
"description"
:
"
\n
阻止当前事件的进一步传播"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"preventDefault"
:{
"name"
:
"#### preventDefault() @preventdefault"
,
"description"
:
"
\n
阻止当前事件的默认行为"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
}}},
"UniMouseEvent"
:{
"name"
:
"## UniMouseEvent"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
"
\n
### 构造函数
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 | - | - |
\n
| x | number | 是 | - | - |
\n
| y | number | 是 | - | - |
\n
| clientX | number | 是 | - | - |
\n
| clientY | number | 是 | - | - |
\n
| pageX | number | 是 | - | - |
\n
| pageY | number | 是 | - | - |
\n
| screenX | number | 是 | - | - |
\n
| screenY | number | 是 | - | - |
\n\n
### UniMouseEvent 的属性值 @unimouseevent-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| clientX | number | 是 | - | 相对于页面可显示区域左边的距离 |
\n
| clientY | number | 是 | - | 相对于页面可显示区域顶部的距离 |
\n
| x | number | 是 | - | 相对于页面可显示区域左边的距离，同`clientX` |
\n
| y | number | 是 | - | 相对于页面可显示区域顶部的距离，同`clientY` |
\n
| pageX | number | 是 | - | 相对于文档左边的距离 |
\n
| pageY | number | 是 | - | 相对于文档顶部的距离 |
\n
| screenX | number | 是 | - | 相对于屏幕左边距离 |
\n
| screenY | number | 是 | - | 相对于屏幕顶部的距离 |
\n
| bubbles | boolean | 是 | - | 是否冒泡 |
\n
| cancelable | boolean | 是 | - | 是否可以取消 |
\n
| type | string | 是 | - | 事件类型 |
\n
| target | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| currentTarget | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| timeStamp | number | 是 | - | 事件发生时的时间戳 |
\n
"
,
"methods"
:{
"stopPropagation"
:{
"name"
:
"#### stopPropagation() @stoppropagation"
,
"description"
:
"
\n
阻止当前事件的进一步传播"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"preventDefault"
:{
"name"
:
"#### preventDefault() @preventdefault"
,
"description"
:
"
\n
阻止当前事件的默认行为"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
}}},
"UniTouchEvent"
:{
"name"
:
"## UniTouchEvent"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
"
\n
### 构造函数
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 | - | - |
\n
| touches | Array
\\
<**UniTouch**
\\
> | 是 | - | - |
\n
@| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
@| :- | :- | :- | :- | :- |
\n
@| clientX | number | 是 | - | 相对于页面可显示区域左边的距离 |
\n
@| clientY | number | 是 | - | 相对于页面可显示区域顶部的距离 |
\n
@| identifier | number | 是 | - | 触摸点的标识符。这个值在这根手指所引发的所有事件中保持一致，直到手指抬起。 |
\n
@| pageX | number | 是 | - | 相对于文档左边的距离 |
\n
@| pageY | number | 是 | - | 相对于文档顶部的距离 |
\n
@| screenX | number | 是 | - | 相对于屏幕左边距离 |
\n
@| screenY | number | 是 | - | 相对于屏幕顶部的距离 |
\n
@| force | number
\\
| null | 否 | - | 返回当前触摸点按下的压力大小 |
\n
| changedTouches | Array
\\
<**UniTouch**
\\
> | 是 | - | - |
\n
@| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
@| :- | :- | :- | :- | :- |
\n
@| clientX | number | 是 | - | 相对于页面可显示区域左边的距离 |
\n
@| clientY | number | 是 | - | 相对于页面可显示区域顶部的距离 |
\n
@| identifier | number | 是 | - | 触摸点的标识符。这个值在这根手指所引发的所有事件中保持一致，直到手指抬起。 |
\n
@| pageX | number | 是 | - | 相对于文档左边的距离 |
\n
@| pageY | number | 是 | - | 相对于文档顶部的距离 |
\n
@| screenX | number | 是 | - | 相对于屏幕左边距离 |
\n
@| screenY | number | 是 | - | 相对于屏幕顶部的距离 |
\n
@| force | number
\\
| null | 否 | - | 返回当前触摸点按下的压力大小 |
\n\n
### UniTouchEvent 的属性值 @unitouchevent-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| touches | Array
\\
<**UniTouch**
\\
> | 是 | - | 当前停留在屏幕中的触摸点信息的数组 |
\n
@| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
@| :- | :- | :- | :- | :- |
\n
@| clientX | number | 是 | - | 相对于页面可显示区域左边的距离 |
\n
@| clientY | number | 是 | - | 相对于页面可显示区域顶部的距离 |
\n
@| identifier | number | 是 | - | 触摸点的标识符。这个值在这根手指所引发的所有事件中保持一致，直到手指抬起。 |
\n
@| pageX | number | 是 | - | 相对于文档左边的距离 |
\n
@| pageY | number | 是 | - | 相对于文档顶部的距离 |
\n
@| screenX | number | 是 | - | 相对于屏幕左边距离 |
\n
@| screenY | number | 是 | - | 相对于屏幕顶部的距离 |
\n
@| force | number
\\
| null | 否 | - | 返回当前触摸点按下的压力大小 |
\n
| changedTouches | Array
\\
<**UniTouch**
\\
> | 是 | - | 当前变化的触摸点信息的数组 |
\n
@| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
@| :- | :- | :- | :- | :- |
\n
@| clientX | number | 是 | - | 相对于页面可显示区域左边的距离 |
\n
@| clientY | number | 是 | - | 相对于页面可显示区域顶部的距离 |
\n
@| identifier | number | 是 | - | 触摸点的标识符。这个值在这根手指所引发的所有事件中保持一致，直到手指抬起。 |
\n
@| pageX | number | 是 | - | 相对于文档左边的距离 |
\n
@| pageY | number | 是 | - | 相对于文档顶部的距离 |
\n
@| screenX | number | 是 | - | 相对于屏幕左边距离 |
\n
@| screenY | number | 是 | - | 相对于屏幕顶部的距离 |
\n
@| force | number
\\
| null | 否 | - | 返回当前触摸点按下的压力大小 |
\n
| bubbles | boolean | 是 | - | 是否冒泡 |
\n
| cancelable | boolean | 是 | - | 是否可以取消 |
\n
| type | string | 是 | - | 事件类型 |
\n
| target | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| currentTarget | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| timeStamp | number | 是 | - | 事件发生时的时间戳 |
\n
"
,
"methods"
:{
"stopPropagation"
:{
"name"
:
"#### stopPropagation() @stoppropagation"
,
"description"
:
"
\n
阻止当前事件的进一步传播"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"preventDefault"
:{
"name"
:
"#### preventDefault() @preventdefault"
,
"description"
:
"
\n
阻止当前事件的默认行为"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
}}},
"UniPointerEvent"
:{
"name"
:
"## UniPointerEvent"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
"
\n
### 构造函数
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 | - | - |
\n
| x | number | 是 | - | - |
\n
| y | number | 是 | - | - |
\n
| clientX | number | 是 | - | - |
\n
| clientY | number | 是 | - | - |
\n
| pageX | number | 是 | - | - |
\n
| pageY | number | 是 | - | - |
\n
| screenX | number | 是 | - | - |
\n
| screenY | number | 是 | - | - |
\n\n
### UniPointerEvent 的属性值 @unipointerevent-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| clientX | number | 是 | - | 相对于页面可显示区域左边的距离 |
\n
| clientY | number | 是 | - | 相对于页面可显示区域顶部的距离 |
\n
| x | number | 是 | - | 相对于页面可显示区域左边的距离，同`clientX` |
\n
| y | number | 是 | - | 相对于页面可显示区域顶部的距离，同`clientY` |
\n
| pageX | number | 是 | - | 相对于文档左边的距离 |
\n
| pageY | number | 是 | - | 相对于文档顶部的距离 |
\n
| screenX | number | 是 | - | 相对于屏幕左边距离 |
\n
| screenY | number | 是 | - | 相对于屏幕顶部的距离 |
\n
| bubbles | boolean | 是 | - | 是否冒泡 |
\n
| cancelable | boolean | 是 | - | 是否可以取消 |
\n
| type | string | 是 | - | 事件类型 |
\n
| target | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| currentTarget | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| timeStamp | number | 是 | - | 事件发生时的时间戳 |
\n
"
,
"methods"
:{
"stopPropagation"
:{
"name"
:
"#### stopPropagation() @stoppropagation"
,
"description"
:
"
\n
阻止当前事件的进一步传播"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"preventDefault"
:{
"name"
:
"#### preventDefault() @preventdefault"
,
"description"
:
"
\n
阻止当前事件的默认行为"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
}}},
"Element"
:{
"name"
:
"## Element"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
"
\n
### Element 的属性值 @element-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| classList | Array
\\
<string
\\
> | 是 | - | 只读属性 获取当前元素的的 class 属性的动态集合。 |
\n
| firstChild | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| lastChild | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| parentElement | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| previousSibling | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| nextElementSibling | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
| children | Array
\\
<[UniElement](/dom/unielement.md)
\\
> | 是 | - | 只读属性 获取当前元素包含的子元素的集合 |
\n
| tagName | string | 是 | - | 只读属性 获取当前元素的标签名 |
\n
| nodeName | string | 是 | - | 只读属性 获取当前元素的元素名称 |
\n
| dataset | Map
\\
<string, any> | 是 | - | 只读属性 获取元素上自定义数据属性（data-*）的集合 |
\n
| attributes | Map
\\
<string, any> | 是 | - | 只读属性 获取元素上所有属性元素的集合 |
\n
| style | [CSSStyleDeclaration](/dom/cssstyledeclaration.md) | 是 | - | 只读属性 获取元素的CSS样式对象 |
\n
| scrollWidth | number | 是 | - | 只读属性 获取可滚动元素内容的总宽度，仅scroll-view、list-view组件支持，其他组件返回视图宽度 |
\n
| scrollHeight | number | 是 | - | 只读属性 获取可滚动元素内容的总高度，仅scroll-view、list-view组件支持，其他组件返回视图高度 |
\n
| scrollLeft | number | 是 | - | 获取或修改元素滚动条到元素左边的距离像素数，仅scroll-view、list-view组件支持。其他组件返回0 |
\n
| scrollTop | number | 是 | - | 获取或修改元素滚动条到元素顶部的距离像素数，仅scroll-view、list-view组件支持。其他组件返回0 |
\n
| offsetLeft | number | 是 | - | 只读属性 元素的左边界偏移值 单位px |
\n
| offsetTop | number | 是 | - | 只读属性 元素的顶部边界偏移值 单位px |
\n
| offsetWidth | number | 是 | - | 只读属性 元素的布局宽度，宽度包含border、padding的数据值 单位px |
\n
| offsetHeight | number | 是 | - | 只读属性 元素的布局高度，高度包含border、padding的数据值 单位px |
\n
| ext | Map
\\
<string, any> | 是 | - | 只读属性 扩展属性 |
\n
"
,
"methods"
:{
"takeSnapshot"
:{
"name"
:
"#### takeSnapshot(options) @takesnapshot"
,
"description"
:
"
\n
对当前组件进行截图，调用此方法会将当前组件（包含子节点）渲染结果导出成图片。
\n
成功会返回图片对应的临时文件路径，目前默认png格式
\n
"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| options | [TakeSnapshotOptions](#takesnapshotoptions-values) | 是 | - | 组件截图的参数对象 |
\n
@| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
@| :- | :- | :- | :- | :- |
\n
@| type | string
\\
| null | 否 |
\"
file
\"
| 截图导出类型，目前仅支持 'file' 保存到临时文件目录 |
\n
@| format | string
\\
| null | 否 |
\"
png
\"
| 截图文件格式，目前仅支持 'png' |
\n
@| success | (res: [TakeSnapshotSuccess](#takesnapshotsuccess-values)) => void
\\
| null | 否 | - | 接口调用成功的回调函数 |
\n
@| fail | (res: [TakeSnapshotFail](#takesnapshotfail-values)) => void
\\
| null | 否 | - | 接口调用失败的回调函数 |
\n
@| complete | (res: any) => void
\\
| null | 否 | - | 接口调用结束的回调函数（调用成功、失败都会执行） |
\n\n
##### TakeSnapshotSuccess 的属性值 @takesnapshotsuccess-values
\n\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| tempFilePath | string | 是 | - | 截图保存的临时文件路径 |
\n\n
##### TakeSnapshotFail 的属性值 @takesnapshotfail-values
\n\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| errMsg | string | 是 | - | - |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
"##### takeSnapshot 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| 3.93 | 4.11 | x |
\n
"
,
"tutorial"
:
""
},
"appendChild"
:{
"name"
:
"#### appendChild(aChild) @appendchild"
,
"description"
:
"
\n
将一个元素添加到指定父元素的子元素列表的末尾处。如果将被插入的元素已经存在于当前文档的文档树中，那么将会它从原先的位置移动到新的位置。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| aChild | [UniElement](/dom/unielement.md) | 是 | - | 插入子元素对象 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"insertBefore"
:{
"name"
:
"#### insertBefore(newChild, refChild?) @insertbefore"
,
"description"
:
"
\n
在参考元素之前插入一个拥有指定父元素的子元素。如果给定的子元素是对文档中现有元素的引用，insertBefore() 会将其从当前位置移动到新位置。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| newChild | [UniElement](/dom/unielement.md) | 是 | - | 插入子元素对象 |
\n
| refChild | [UniElement](/dom/unielement.md)
\\
| null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| [UniElement](/dom/unielement.md)
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"setAttribute"
:{
"name"
:
"#### setAttribute(key, value) @setattribute"
,
"description"
:
"
\n
设置指定元素上的某个属性值。如果设置的属性已经存在，则更新该属性值；否则使用指定的名称和值添加一个新的属性。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | 属性名称 |
\n
| value | string | 是 | - | 属性值域 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"getAttribute"
:{
"name"
:
"#### getAttribute(key) @getattribute"
,
"description"
:
"
\n
获取元素指定的属性值，如果指定的属性不存在则返回null。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | 属性名称 |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| string
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"hasAttribute"
:{
"name"
:
"#### hasAttribute(key) @hasattribute"
,
"description"
:
"
\n
返回改元素是否包含有指定的属性，属性存在则返回true，否则返回false。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | 属性名称 |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 |
\n
| :- |
\n
| boolean |
\n
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"removeAttribute"
:{
"name"
:
"#### removeAttribute(key) @removeattribute"
,
"description"
:
"
\n
从元素中删除一个属性，如果指定的属性不存在，则不做任何操作，也不会产生错误。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | 属性名称 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"getBoundingClientRect"
:{
"name"
:
"#### getBoundingClientRect() @getboundingclientrect"
,
"description"
:
"
\n
获取元素的大小及其相对于窗口的位置信息。"
,
"param"
:
""
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 |
\n
| :- |
\n
| [DOMRect](/dom/domrect.md) |
\n
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"getDrawableContext"
:{
"name"
:
"#### getDrawableContext() @getdrawablecontext"
,
"description"
:
"
\n
获取组件的绘制对象，仅uvue页面中的 view 组件支持，其它组件不支持则返回null。"
,
"param"
:
""
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| [DrawableContext](/dom/drawablecontext.md)
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
"##### getDrawableContext 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| 3.9 | x | x |
\n
"
,
"tutorial"
:
""
},
"addEventListener"
:{
"name"
:
"#### addEventListener(type, callback) @addeventlistener"
,
"description"
:
"
\n
将指定的监听器注册到元素对象上，当该对象触发指定的事件时，指定的回调函数就会被执行。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 | - | 事件类型 |
\n
| callback | (event: T) => R | 是 | - | 事件监听器 T表示event类型，R表示返回值类型 |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 |
\n
| :- |
\n
| UniCallbackWrapper |
\n
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"removeEventListener"
:{
"name"
:
"#### removeEventListener(type, callbackWrapper) @removeeventlistener"
,
"description"
:
"
\n
删除使用 addEventListener 方法添加的事件监听器。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 | - | 事件类型 |
\n
| callbackWrapper | UniCallbackWrapper | 是 | - | 事件监听回调封装类 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"removeChild"
:{
"name"
:
"#### removeChild(aChild) @removechild"
,
"description"
:
"
\n
从元素中删除一个子元素，返回删除的元素。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| aChild | [UniElement](/dom/unielement.md) | 是 | - | 被删除子元素对象 |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| [UniElement](/dom/unielement.md)
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"remove"
:{
"name"
:
"#### remove() @remove"
,
"description"
:
"
\n
把元素对象从它所属的 DOM 树中删除。"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"dispatchEvent"
:{
"name"
:
"#### dispatchEvent(type, value) @dispatchevent"
,
"description"
:
"
\n
向一个指定的事件目标派发一个 Event，并以合适的顺序（同步地）调用此事件的监听器回调函数。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 | - | 事件类型 |
\n
| value | [UniEvent](/component/common#unievent) | 是 | - | 事件返回对象 |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"scrollTo"
:{
"name"
:
"#### scrollTo(x, y) @scrollto"
,
"description"
:
"
\n
使界面滚动到给定元素的指定坐标位置 仅scroll-view、list-view组件支持"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| x | number | 是 | - | x轴要滚动到坐标位置(单位px) |
\n
| y | number | 是 | - | y轴要滚动到坐标位置(单位px) |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"scrollBy"
:{
"name"
:
"#### scrollBy(x, y) @scrollby"
,
"description"
:
"
\n
使得元素滚动一段特定距离 仅scroll-view、list-view组件支持"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| x | number | 是 | - | x轴要滚动的距离(单位px) |
\n
| y | number | 是 | - | y轴要滚动的距离(单位px) |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"querySelector"
:{
"name"
:
"#### querySelector(selector) @queryselector"
,
"description"
:
"
\n
返回文档中与指定选择器或选择器组匹配的第一个 Element对象。如果找不到匹配项，则返回null"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| selector | [string.cssSelectorString](/uts/data-type.md#ide-string) | 是 | - | CSS 选择器字符串 |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| [UniElement](/dom/unielement.md)
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"querySelectorAll"
:{
"name"
:
"#### querySelectorAll(selector) @queryselectorall"
,
"description"
:
"
\n
返回与指定的选择器组匹配的文档中的元素列表"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| selector | [string.cssSelectorString](/uts/data-type.md#ide-string) | 是 | - | CSS 选择器字符串 |
\n
"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| Array
\\
<[UniElement](/dom/unielement.md)
\\
>
\\
| null | 否 |
\n
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"focus"
:{
"name"
:
"#### focus() @focus"
,
"description"
:
"
\n
使元素获取焦点 仅input、Textarea组件支持"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"blur"
:{
"name"
:
"#### blur() @blur"
,
"description"
:
"
\n
使元素丢失焦点 仅input、Textarea组件支持"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
}}},
"UniError"
:{
"name"
:
"## UniError"
,
"description"
:
"
\n
uni api统一错误信息对象 "
,
"extends"
:
""
,
"param"
:
"
\n
### 构造函数
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| errSubject | string | 是 | - | - |
\n
| errCode | number | 是 | - | - |
\n
| errMsg | string | 是 | - | - |
\n\n
### UniError 的属性值 @unierror-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| errSubject | string | 是 | - | 统一错误主题（模块）名称 |
\n
| errCode | number | 是 | - | 统一错误码 |
\n
| errMsg | string | 是 | - | 统一错误描述信息 |
\n
| data | any
\\
| null | 否 | - | 错误信息中包含的数据 |
\n
| cause | [Error](https://uniapp.dcloud.net.cn/tutorial/err-spec.html#unierror)
\\
| null | 否 | - | UTS错误信息对象 |
\n
| name | string | 是 | - | - |
\n
| message | string | 是 | - | - |
\n
"
},
"Error"
:{
"name"
:
"## Error"
,
"description"
:
"
\n
UTS错误信息对象"
,
"extends"
:
""
,
"param"
:
"
\n
### 构造函数
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| message | string | 是 | - | - |
\n
| options | [UTSJSONObject](/uts/buildin-object-api/utsjsonobject.md) | 是 | - | - |
\n\n
### Error 的属性值 @error-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| name | string | 是 | - | - |
\n
| message | string | 是 | - | - |
\n
| cause | [Error](https://uniapp.dcloud.net.cn/tutorial/err-spec.html#unierror)
\\
| null | 否 | - | UTS错误信息对象 |
\n
"
},
"general-attribute"
:{
"name"
:
"组件公共属性"
,
"description"
:
""
,
"attribute"
:
"| 名称 | 类型 | 描述 |
\n
| :- | :- | :- |
\n
| id | string(string.IDString) | 组件的唯一标识，一般用于获取组件上下文对象 |
\n
| style | string | 组件的内联样式，可以动态设置的内联样式 |
\n
| class | string(string.ClassString) | 组件的样式类，在对应的 css 中定义的样式类 |
\n
| ref | string | vue中组件的唯一标识，用来给子组件注册引用信息 |
\n
| data-* | any | 自定义属性，组件上触发的事件时，会发送给事件处理函数 |
\n
| android-* | any | App-Android平台专有属性，详见[App-Android平台专有属性](https://doc.dcloud.net.cn/uni-app-x/component/common.html#attribute-android)章节 |"
,
"compatibility"
:
"| | Android | iOS | web |
\n
| :- | :- | :- | :- |
\n
| id | 3.9 | x | 4.0 |
\n
| style | 3.9 | x | 4.0 |
\n
| class | 3.9 | x | 4.0 |
\n
| ref | 3.9 | x | 4.0 |
\n
| data-* | 3.9 | x | 4.0 |
\n
| android-* | 3.9 | x | 4.0 |"
,
"example"
:
"### 示例
\n
> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/general-attribute/general-attribute.uvue)
\n
::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/general-attribute/general-attribute
\n
>Template
\n
```vue
\n
<template>
\r\n
<!-- #ifdef APP -->
\r\n
<scroll-view style=
\"
flex: 1
\"
>
\r\n
<!-- #endif -->
\r\n
<view>
\r\n
<page-head :title=
\"
title
\"
></page-head>
\r\n
<view class=
\"
uni-padding-wrap container
\"
>
\r\n
<view
\r\n
:id=
\"
generalId
\"\r\n
:class=
\"
generalClass
\"\r\n
:name=
\"
generalName
\"\r\n
:title=
\"
generalTitle
\"\r\n
:data-test=
\"
generalData
\"\r\n
:style=
\"
generalStyle
\"\r\n
ref=
\"
general-target
\"\r\n
>
\r\n
<text>id: {{ generalId }}</text>
\r\n
<text>class: {{ generalClass }}</text>
\r\n
<text>name: {{ generalName }}</text>
\r\n
<text>title: {{ generalTitle }}</text>
\r\n
<text>data-test: {{ generalData }}</text>
\r\n
<text>style: {{ generalStyle }}</text>
\r\n
</view>
\r\n
<view
\r\n
class=
\"
btn btn-style uni-common-mt
\"\r\n
@click=
\"
validateGeneralAttributes
\"\r\n
>
\r\n
<text class=
\"
btn-inner
\"
>{{ validateGeneralAttrText }}</text>
\r\n
</view>
\r\n
<view class=
\"
btn btn-ref uni-common-mt
\"
@click=
\"
changeHeight
\"
>
\r\n
<text class=
\"
btn-inner
\"
>{{changeHeightByRefText}}</text>
\r\n
</view>
\r\n
<view class=
\"
view-class
\"
:hover-class=
\"
hoverClass
\"
ref=
\"
view-target
\"
>
\r\n
<text class=
\"
text
\"
>按下 50 ms 后背景变红</text>
\r\n
<text class=
\"
text
\"
>抬起 400 ms 后背景恢复</text>
\r\n
</view>
\r\n
<view
\r\n
class=
\"
view-class
\"\r\n
:hover-class=
\"
hoverClass
\"\r\n
:hover-start-time=
\"
1000
\"\r\n
:hover-stay-time=
\"
1000
\"\r\n
ref=
\"
view-target
\"\r\n
>
\r\n
<text class=
\"
text
\"
>按下 1000 ms 后背景变红</text>
\r\n
<text class=
\"
text
\"
>抬起 1000 ms 后背景恢复</text>
\r\n
</view>
\r\n
</view>
\r\n
</view>
\r\n
<!-- #ifdef APP -->
\r\n
</scroll-view>
\r\n
<!-- #endif -->
\r\n
</template>
\r\n\r\n\r\n\r\n
<style>
\r\n
.btn {
\r\n
height: 50px;
\r\n
display: flex;
\r\n
align-items: center;
\r\n
justify-content: center;
\r\n
background-color: #409eff;
\r\n
border-radius: 5px;
\r\n
}
\r\n
.btn-inner {
\r\n
color: #fff;
\r\n
}
\r\n
.general-class {
\r\n
margin-left: 40px;
\r\n
padding: 10px;
\r\n
width: 260px;
\r\n
height: 160px;
\r\n
background-color: antiquewhite;
\r\n
}
\r\n
.view-class {
\r\n
margin: 20px 0 0 50px;
\r\n
padding: 10px;
\r\n
width: 240px;
\r\n
height: 100px;
\r\n
background-color: antiquewhite;
\r\n
}
\r\n
.view-class .text {
\r\n
margin-top: 5px;
\r\n
text-align: center;
\r\n
}
\r\n
.hover-class {
\r\n
background-color: red;
\r\n
}
\r\n
</style>
\r\n\n
```
\n
>Script
\n
```uts
\n\r\n
export default {
\r\n
data() {
\r\n
return {
\r\n
title: 'general-attribute',
\r\n
generalId: 'general-id',
\r\n
generalClass: 'general-class',
\r\n
generalName: 'general-name',
\r\n
generalTitle: 'general-title',
\r\n
generalData: 'general-data',
\r\n
generalStyle: 'background-color: aqua',
\r\n
validateGeneralAttrText: '验证基础属性',
\r\n
hoverClass: 'hover-class',
\r\n
validateViewAttrText: '验证 view 属性',
\r\n
changeHeightByRefText: '通过 ref 修改高度',
\r\n
}
\r\n
},
\r\n
methods: {
\r\n
validateGeneralAttributes() {
\r\n
const generalTarget = this.$refs['general-target'] as UniElement
\r\n
const generalId = generalTarget.getAttribute('id')
\r\n
if (generalId != this.generalId) {
\r\n
this.validateGeneralAttrText = '基础属性 id 验证失败'
\r\n
return
\r\n
}
\r\n
// #ifdef APP
\r\n
if (!generalTarget.classList.includes('general-class')) {
\r\n
// #endif
\r\n
// #ifdef WEB
\r\n
if (!Array.from(generalTarget.classList).includes('general-class')) {
\r\n
// #endif
\r\n
this.validateGeneralAttrText = '基础属性 class 验证失败'
\r\n
return
\r\n
}
\r\n
const generalName = generalTarget.getAttribute('name')
\r\n
if (generalName != this.generalName) {
\r\n
this.validateGeneralAttrText = '基础属性 name 验证失败'
\r\n
return
\r\n
}
\r\n
const generalTitle = generalTarget.getAttribute('title')
\r\n
if (generalTitle != this.generalTitle) {
\r\n
this.validateGeneralAttrText = '基础属性 title 验证失败'
\r\n
return
\r\n
}
\r\n
const generalData = generalTarget.getAttribute('data-test')
\r\n
if (generalData != this.generalData) {
\r\n
this.validateGeneralAttrText = '基础属性 data-test 验证失败'
\r\n
return
\r\n
}
\r\n
this.validateGeneralAttrText = '基础属性验证成功'
\r\n
},
\r\n
changeHeight(){
\r\n
const generalTarget = this.$refs['general-target'] as UniElement
\r\n
this.changeHeightByRefText = '已通过 ref 修改高度'
\r\n
generalTarget.style.setProperty('height', '200px')
\r\n
}
\r\n
},
\r\n
}
\r\n\n
```
\n\n
:::"
},
"general-event"
:{
"name"
:
"组件公共事件"
,
"description"
:
""
,
"attribute"
:
"| 名称 | 类型 | 描述 |
\n
| :- | :- | :- |
\n
| @click | (event: [UniPointerEvent](/component/common#unipointerevent)) => void | 手指触摸后马上离开。与tap相同，（推荐使用tap事件代替），冒泡事件 |
\n
| @mousedown | (event: [UniMouseEvent](/component/common#unimouseevent)) => void | 鼠标在元素上点击后触发 |
\n
| @mousemove | (event: [UniMouseEvent](/component/common#unimouseevent)) => void | 鼠标在元素上移动时触发 |
\n
| @mouseup | (event: [UniMouseEvent](/component/common#unimouseevent)) => void | 鼠标主按钮在元素上松开时触发 |
\n
| @touchstart | (event: [UniTouchEvent](/component/common#unitouchevent)) => void | 手指触摸动作开始，冒泡事件，event.type 值为 touchstart |
\n
| @touchmove | (event: [UniTouchEvent](/component/common#unitouchevent)) => void | 手指触摸后移动，冒泡事件，event.type 值为 touchmove |
\n
| @touchcancel | (event: [UniTouchEvent](/component/common#unitouchevent)) => void | 手指触摸动作被打断，如来电提醒，弹窗，冒泡事件，event.type 值为 touchcancel |
\n
| @touchend | (event: [UniTouchEvent](/component/common#unitouchevent)) => void | 手指触摸动作结束，冒泡事件，event.type 值为 touchend |
\n
| @tap | (event: [UniPointerEvent](/component/common#unipointerevent)) => void | 手指触摸后马上离开，冒泡事件 |
\n
| @longpress | (event: [UniTouchEvent](/component/common#unitouchevent)) => void | 如果一个组件被绑定了 longpress 事件，那么当用户手指触摸后，超过350ms再离开会触发，冒泡事件 |
\n
| @longtap | (event: [UniTouchEvent](/component/common#unitouchevent)) => void | 手指触摸后，超过350ms再离开（推荐使用 longpress 事件代替） |
\n
| @transitionend | (event: [UniEvent](/component/common#unievent)) => void | transition 效果结束时触发 |"
,
"compatibility"
:
"| | Android | iOS | web |
\n
| :- | :- | :- | :- |
\n
| @click | 3.9 | x | 4.0 |
\n
| @mousedown | x | x | 4.0 |
\n
| @mousemove | x | x | 4.0 |
\n
| @mouseup | x | x | 4.0 |
\n
| @touchstart | 3.9 | x | 4.0 |
\n
| @touchmove | 3.9 | x | 4.0 |
\n
| @touchcancel | 3.9 | x | 4.0 |
\n
| @touchend | 3.9 | x | 4.0 |
\n
| @tap | 3.9 | x | 4.0 |
\n
| @longpress | 3.9 | x | 4.0 |
\n
| @longtap | 3.9 | x | 4.0 |
\n
| @transitionend | 3.93 | x | 4.0 |"
,
"example"
:
"### 示例
\n
> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/general-event/general-event.uvue)
\n
::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/general-event/general-event
\n
>Template
\n
```vue
\n
<template>
\r\n
<!-- #ifdef APP -->
\r\n
<scroll-view style=
\"
flex: 1
\"
>
\r\n
<!-- #endif -->
\r\n
<page-head title=
\"
触摸方块测试相关事件
\"
></page-head>
\r\n
<view class=
\"
uni-padding-wrap uni-common-mt container
\"
>
\r\n
<view class=
\"
target
\"
@touchstart=
\"
onTouchStart
\"
@touchcancel=
\"
onTouchCancel
\"
@touchmove=
\"
onTouchMove
\"\r\n
@touchend=
\"
onTouchEnd
\"
@tap=
\"
onTap
\"
@click=
\"
onClick
\"
@longpress=
\"
onLongPress
\"
></view>
\r\n
<view v-if=
\"
touchStartEvent !== null
\"
>
\r\n
<text class=
\"
title1
\"
>touchStart Event: </text>
\r\n
<text class=
\"
title2
\"
>touches: </text>
\r\n
<template v-for=
\"
(touch, index) in touchStartEvent!.touches
\"
:key=
\"
index
\"
>
\r\n
<text class=
\"
title3
\"
>touch[{{ index }}]:</text>
\r\n
<text>identifier: {{touch.identifier}}</text>
\r\n
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
\r\n
<text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
\r\n
<text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
\r\n
</template>
\r\n
<text class=
\"
title2 uni-common-mt
\"
>changedTouches: </text>
\r\n
<template v-for=
\"
(touch, index) in touchStartEvent!.changedTouches
\"
:key=
\"
index
\"
>
\r\n
<text class=
\"
title3
\"
>touch[{{ index }}]:</text>
\r\n
<text>identifier: {{touch.identifier}}</text>
\r\n
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
\r\n
<text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
\r\n
<text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
\r\n
</template>
\r\n
</view>
\r\n
<view v-if=
\"
touchCancelEvent !== null
\"
>
\r\n
<text class=
\"
title1
\"
>touchCancel Event: </text>
\r\n
<text class=
\"
title2
\"
>touches: </text>
\r\n
<template v-for=
\"
(touch, index) in touchCancelEvent!.touches
\"
:key=
\"
index
\"
>
\r\n
<text class=
\"
title3
\"
>touch[{{ index }}]:</text>
\r\n
<text>identifier: {{touch.identifier}}</text>
\r\n
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
\r\n
<text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
\r\n
<text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
\r\n
</template>
\r\n
<text class=
\"
title2 uni-common-mt
\"
>changedTouches: </text>
\r\n
<template v-for=
\"
(touch, index) in touchCancelEvent!.changedTouches
\"
:key=
\"
index
\"
>
\r\n
<text class=
\"
title3
\"
>touch[{{ index }}]:</text>
\r\n
<text>identifier: {{touch.identifier}}</text>
\r\n
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
\r\n
<text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
\r\n
<text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
\r\n
</template>
\r\n
</view>
\r\n
<view v-if=
\"
touchMoveEvent !== null
\"
>
\r\n
<text class=
\"
title1
\"
>touchMove Event: </text>
\r\n
<text class=
\"
title2
\"
>touches: </text>
\r\n
<template v-for=
\"
(touch, index) in touchMoveEvent!.touches
\"
:key=
\"
index
\"
>
\r\n
<text class=
\"
title3
\"
>touch[{{ index }}]:</text>
\r\n
<text>identifier: {{touch.identifier}}</text>
\r\n
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
\r\n
<text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
\r\n
<text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
\r\n
</template>
\r\n
<text class=
\"
title2 uni-common-mt
\"
>changedTouches: </text>
\r\n
<template v-for=
\"
(touch, index) in touchMoveEvent!.changedTouches
\"
:key=
\"
index
\"
>
\r\n
<text class=
\"
title3
\"
>touch[{{ index }}]:</text>
\r\n
<text>identifier: {{touch.identifier}}</text>
\r\n
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
\r\n
<text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
\r\n
<text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
\r\n
</template>
\r\n
</view>
\r\n
<view v-if=
\"
longPressEvent !== null
\"
>
\r\n
<text class=
\"
title1
\"
>longPress Event: </text>
\r\n
<text class=
\"
title2
\"
>touches: </text>
\r\n
<template v-if=
\"
longPressEvent!.touches.length > 0
\"
v-for=
\"
(touch, index) in longPressEvent!.touches
\"\r\n
:key=
\"
index
\"
>
\r\n
<text class=
\"
title3
\"
>touch[{{ index }}]:</text>
\r\n
<text>identifier: {{touch.identifier}}</text>
\r\n
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
\r\n
<text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
\r\n
<text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
\r\n
</template>
\r\n
<text class=
\"
title2 uni-common-mt
\"
>changedTouches: </text>
\r\n
<template v-for=
\"
(touch, index) in longPressEvent!.changedTouches
\"
:key=
\"
index
\"
>
\r\n
<text class=
\"
title3
\"
>touch[{{ index }}]:</text>
\r\n
<text>identifier: {{touch.identifier}}</text>
\r\n
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
\r\n
<text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
\r\n
<text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
\r\n
</template>
\r\n
</view>
\r\n
<view v-if=
\"
touchEndEvent !== null
\"
>
\r\n
<text class=
\"
title1
\"
>touchEnd Event: </text>
\r\n
<text class=
\"
title2
\"
>touches: </text>
\r\n
<template v-if=
\"
touchEndEvent!.touches.length > 0
\"
v-for=
\"
(touch, index) in touchEndEvent!.touches
\"\r\n
:key=
\"
index
\"
>
\r\n
<text class=
\"
title3
\"
>touch[{{ index }}]:</text>
\r\n
<text>identifier: {{touch.identifier}}</text>
\r\n
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
\r\n
<text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
\r\n
<text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
\r\n
</template>
\r\n
<text class=
\"
title2 uni-common-mt
\"
>changedTouches: </text>
\r\n
<template v-for=
\"
(touch, index) in touchEndEvent!.changedTouches
\"
:key=
\"
index
\"
>
\r\n
<text class=
\"
title3
\"
>touch[{{ index }}]:</text>
\r\n
<text>identifier: {{touch.identifier}}</text>
\r\n
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
\r\n
<text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
\r\n
<text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
\r\n
</template>
\r\n
</view>
\r\n
<view v-if=
\"
tapEvent !== null
\"
>
\r\n
<text class=
\"
title1
\"
>tap Event: </text>
\r\n
<text>x: {{ tapEvent!.x }}, y: {{ tapEvent!.y }}</text>
\r\n
</view>
\r\n
<view v-if=
\"
clickEvent !== null
\"
>
\r\n
<text class=
\"
title1
\"
>click Event: </text>
\r\n
<text>x: {{ clickEvent!.x }}, y: {{ clickEvent!.y }}</text>
\r\n
</view>
\r\n
</view>
\r\n
<!-- #ifdef APP -->
\r\n
</scroll-view>
\r\n
<!-- #endif -->
\r\n
</template>
\r\n\r\n\r\n
<style>
\r\n
.container {
\r\n
padding-bottom: 10px;
\r\n
}
\r\n\r\n
.target {
\r\n
margin: 20px 0 0 50px;
\r\n
width: 200px;
\r\n
height: 100px;
\r\n
background-color: aqua;
\r\n
}
\r\n\r\n
.title1 {
\r\n
margin-top: 15px;
\r\n
font-size: 20px;
\r\n
}
\r\n\r\n
.title2 {
\r\n
margin-top: 10px;
\r\n
font-size: 18px;
\r\n
}
\r\n\r\n
.title3 {
\r\n
margin-top: 5px;
\r\n
font-size: 16px;
\r\n
}
\r\n
</style>
\r\n\n
```
\n
>Script
\n
```uts
\n\r\n
export default {
\r\n
data() {
\r\n
return {
\r\n
title: 'general-event',
\r\n
onTouchStartTime: 0,
\r\n
touchStartEvent: null as TouchEvent | null,
\r\n
touchCancelEvent: null as TouchEvent | null,
\r\n
onTouchMoveTime: 0,
\r\n
touchMoveEvent: null as TouchEvent | null,
\r\n
onTouchEndTime: 0,
\r\n
longPressEvent: null as TouchEvent | null,
\r\n
touchEndEvent: null as TouchEvent | null,
\r\n
onTapTime: 0,
\r\n
tapEvent: null as PointerEvent | null,
\r\n
onClickTime: 0,
\r\n
clickEvent: null as PointerEvent | null,
\r\n
onLongPressTime: 0,
\r\n
}
\r\n
},
\r\n
methods: {
\r\n
onTouchStart(e : TouchEvent) {
\r\n
this.touchStartEvent = e
\r\n
this.onTouchStartTime = Date.now()
\r\n
console.log('onTouchStart')
\r\n
},
\r\n
onTouchCancel(e : TouchEvent) {
\r\n
this.touchCancelEvent = e
\r\n
console.log('onTouchCancel')
\r\n
},
\r\n
onTouchMove(e : TouchEvent) {
\r\n
this.touchMoveEvent = e
\r\n
this.onTouchMoveTime = Date.now()
\r\n
console.log('onTouchMove')
\r\n
},
\r\n
onLongPress(e : TouchEvent) {
\r\n
this.longPressEvent = e
\r\n
this.onLongPressTime = Date.now()
\r\n
console.log('onLongPress')
\r\n
},
\r\n
onTouchEnd(e : TouchEvent) {
\r\n
this.touchEndEvent = e
\r\n
this.onTouchEndTime = Date.now()
\r\n
console.log('onTouchEnd')
\r\n
},
\r\n
onTap(e : PointerEvent) {
\r\n
this.tapEvent = e
\r\n
this.onTapTime = Date.now()
\r\n
console.log('onTap')
\r\n
},
\r\n
onClick(e : PointerEvent) {
\r\n
this.clickEvent = e
\r\n
this.onClickTime = Date.now()
\r\n
console.log('onClick')
\r\n
},
\r\n
},
\r\n
}
\r\n\n
```
\n\n
:::"
}}
\ No newline at end of file
docs/.vuepress/utils/utsApiJson.json
浏览文件 @
ce069f27
因为 它太大了无法显示 source diff 。你可以改为
查看blob
。
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑！
取消
想要评论请
注册
或
登录
