Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-uni-app-x-zh
提交
b3a72f76
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看板
提交
b3a72f76
编写于
12月 15, 2023
作者:
G
git_robot
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
更新 customTypeJson.json
上级
e9b2b5fe
变更
1
显示空白变更内容
内联
并排
Showing
1 changed file
with
1 addition
and
527 deletion
+1
-527
docs/.vuepress/utils/customTypeJson.json
docs/.vuepress/utils/customTypeJson.json
+1
-527
未找到文件。
docs/.vuepress/utils/customTypeJson.json
浏览文件 @
b3a72f76
{
{
"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
| type | string | 是 | - | 事件类型 |
\n
| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |
\n
| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |
\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"
:{
"getAny"
:{
"name"
:
"#### getAny(key) @getany"
,
"description"
:
"
\r\n
获取一个 属性，返回类型是any 或者 null"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | - |"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| any | 否 |
\n
"
,
"compatibility"
:
"##### getAny 兼容性
\n
| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- |
\n
| 5.0 | 3.9+ | 3.9+ | 9.0 | √ | x |
\n
"
,
"tutorial"
:
"
\n
##### 参见
\n
[getAny](https://uniapp.dcloud.net.cn/uts/buildin-object-api/UTSJSONObject.html#getAny)
\n
"
},
"getBoolean"
:{
"name"
:
"#### getBoolean(key) @getboolean"
,
"description"
:
"
\r\n
获取一个Boolean属性，返回类型是Boolean 或者 null"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | - |"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| boolean | 否 |
\n
"
,
"compatibility"
:
"##### getBoolean 兼容性
\n
| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- |
\n
| 5.0 | 3.9+ | 3.9+ | 9.0 | √ | x |
\n
"
,
"tutorial"
:
"
\n
##### 参见
\n
[getBoolean](https://uniapp.dcloud.net.cn/uts/buildin-object-api/UTSJSONObject.html#getBoolean)
\n
"
},
"getNumber"
:{
"name"
:
"#### getNumber(key) @getnumber"
,
"description"
:
"
\r\n
获取一个number属性，返回类型是number 或者 null"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | - |"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| number | 否 |
\n
"
,
"compatibility"
:
"##### getNumber 兼容性
\n
| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- |
\n
| 5.0 | 3.9+ | 3.9+ | 9.0 | √ | x |
\n
"
,
"tutorial"
:
"
\n
##### 参见
\n
[getNumber](https://uniapp.dcloud.net.cn/uts/buildin-object-api/UTSJSONObject.html#getNumber)
\n
"
},
"getString"
:{
"name"
:
"#### getString(key) @getstring"
,
"description"
:
"
\r\n
获取一个string属性，返回类型是string 或者 null"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | - |"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| string | 否 |
\n
"
,
"compatibility"
:
"##### getString 兼容性
\n
| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- |
\n
| 5.0 | 3.9+ | 3.9+ | 9.0 | √ | x |
\n
"
,
"tutorial"
:
"
\n
##### 参见
\n
[getString](https://uniapp.dcloud.net.cn/uts/buildin-object-api/UTSJSONObject.html#getString)
\n
"
},
"getJSON"
:{
"name"
:
"#### getJSON(key) @getjson"
,
"description"
:
"
\r\n
获取一个UTSJSONObject属性，返回类型是UTSJSONObject 或者 null"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | - |"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| [UTSJSONObject](/uts/buildin-object-api/utsjsonobject.md) | 否 |
\n
"
,
"compatibility"
:
"##### getJSON 兼容性
\n
| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- |
\n
| 5.0 | 3.9+ | 3.9+ | 9.0 | √ | x |
\n
"
,
"tutorial"
:
"
\n
##### 参见
\n
[getJSON](https://uniapp.dcloud.net.cn/uts/buildin-object-api/UTSJSONObject.html#getJSON)
\n
"
},
"getArray"
:{
"name"
:
"#### getArray(key) @getarray"
,
"description"
:
"
\r\n
获取一个Array属性，返回类型是Array 或者 null"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | - |"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| any[
\\
] | 否 |
\n
"
,
"compatibility"
:
"##### getArray 兼容性
\n
| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- |
\n
| 5.0 | 3.9+ | 3.9+ | 9.0 | √ | x |
\n
"
,
"tutorial"
:
"
\n
##### 参见
\n
[getArray](https://uniapp.dcloud.net.cn/uts/buildin-object-api/UTSJSONObject.html#getArray)
\n
"
},
"toMap"
:{
"name"
:
"#### toMap() @tomap"
,
"description"
:
"
\r\n
将当前 UTSJSONObject 实例转换为 Map 实例。"
,
"param"
:
""
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 |
\n
| :- |
\n
| Map
\\
<string, any> |
\n
"
,
"compatibility"
:
"##### toMap 兼容性
\n
| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- |
\n
| 5.0 | 3.9+ | 3.9+ | 9.0 | √ | x |
\n
"
,
"tutorial"
:
"
\n
##### 参见
\n
[toMap](https://uniapp.dcloud.net.cn/uts/buildin-object-api/UTSJSONObject.html#toMap)
\n
"
}}},
"Element"
:{
"name"
:
"## Element"
,
"description"
:
"
\n
UVUE DOM 元素对象，描述了 UVUE DOM 元素的通用属性和方法。"
,
"extends"
:
""
,
"param"
:
"
\n
### Element 属性值 @element-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| classList | Array
\\
<string
\\
> | 是 | - | 只读属性 获取当前元素的的 class 属性的动态集合。 |
\n
| firstChild | [Element](/dom/element.md) | 否 | - | 只读属性 获取当前元素的的第一个子元素，如果元素是无子元素，则返回 null。 |
\n
| lastChild | [Element](/dom/element.md) | 否 | - | 只读属性 获取当前元素的最后一个子元素，如果没有子元素，则返回 null。 |
\n
| parentElement | [Element](/dom/element.md) | 否 | - | 只读属性 获取当前元素在 DOM 树中的父元素，如果没有父元素（如未添加到DOM树中），则返回null。 |
\n
| previousSibling | [Element](/dom/element.md) | 否 | - | 只读属性 获取当前元素的前一个同级元素，没有则返回null。 |
\n
| nextElementSibling | [Element](/dom/element.md) | 否 | - | 只读属性 获取在 DOM 树中紧跟在其后面的同级元素，如果指定的元素为最后一个元素，则返回 null。 |
\n
| children | Array
\\
<[Element](/dom/element.md)
\\
> | 是 | - | 只读属性 获取当前元素包含的子元素的集合 |
\n
| tagName | 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
###### TakeSnapshotOptions 属性值 @takesnapshotoptions-values
\n\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 |
\"
file
\"
| 截图导出类型，目前仅支持 'file' 保存到临时文件目录 |
\n
| format | string | 是 |
\"
png
\"
| 截图文件格式，目前仅支持 'png' |
\n
| success | TakeSnapshotSuccessCallback | 否 | - | 接口调用成功的回调函数 |
\n
| fail | TakeSnapshotFailCallback | 否 | - | 接口调用失败的回调函数 |
\n
| complete | TakeSnapshotCompleteCallback | 否 | - | 接口调用结束的回调函数（调用成功、失败都会执行） |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
"##### takeSnapshot 兼容性
\n
| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- |
\n
| 5.0 | x | 3.93 | x | x | x |
\n
"
,
"tutorial"
:
""
},
"appendChild"
:{
"name"
:
"#### appendChild(aChild) @appendchild"
,
"description"
:
"
\n
将一个元素添加到指定父元素的子元素列表的末尾处。如果将被插入的元素已经存在于当前文档的文档树中，那么将会它从原先的位置移动到新的位置。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| aChild | [Element](/dom/element.md) | 是 | - | 插入子元素对象 |"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"insertBefore"
:{
"name"
:
"#### insertBefore(newChild, refChild?) @insertbefore"
,
"description"
:
"
\n
在参考元素之前插入一个拥有指定父元素的子元素。如果给定的子元素是对文档中现有元素的引用，insertBefore() 会将其从当前位置移动到新位置。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| newChild | [Element](/dom/element.md) | 是 | - | 插入子元素对象 |
\n
| refChild | [Element](/dom/element.md) | 否 | - | 已存在父元素的子元素对象 |"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"setAttribute"
:{
"name"
:
"#### setAttribute(key, value) @setattribute"
,
"description"
:
"
\n
设置指定元素上的某个属性值。如果设置的属性已经存在，则更新该属性值；否则使用指定的名称和值添加一个新的属性。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | 属性名称 |
\n
| value | string | 是 | - | 属性值域 |"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"getAttribute"
:{
"name"
:
"#### getAttribute(key) @getattribute"
,
"description"
:
"
\n
获取元素指定的属性值，如果指定的属性不存在则返回null。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | 属性名称 |"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| string | 否 |
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"hasAttribute"
:{
"name"
:
"#### hasAttribute(key) @hasattribute"
,
"description"
:
"
\n
返回改元素是否包含有指定的属性，属性存在则返回true，否则返回false。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | 属性名称 |"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 |
\n
| :- |
\n
| boolean |
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"removeAttribute"
:{
"name"
:
"#### removeAttribute(key) @removeattribute"
,
"description"
:
"
\n
从元素中删除一个属性，如果指定的属性不存在，则不做任何操作，也不会产生错误。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | 属性名称 |"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"getBoundingClientRect"
:{
"name"
:
"#### getBoundingClientRect() @getboundingclientrect"
,
"description"
:
"
\n
获取元素的大小及其相对于窗口的位置信息。"
,
"param"
:
""
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 |
\n
| :- |
\n
| [DOMRect](/dom/domrect.md) |
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"getDrawableContext"
:{
"name"
:
"#### getDrawableContext() @getdrawablecontext"
,
"description"
:
"
\n
获取组件的绘制对象，仅uvue页面中的 view 组件支持，其它组件不支持则返回null。"
,
"param"
:
""
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| [DrawableContext](/dom/drawablecontext.md) | 否 |
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"addEventListener"
:{
"name"
:
"#### addEventListener(type, callback) @addeventlistener"
,
"description"
:
"
\n
将指定的监听器注册到元素对象上，当该对象触发指定的事件时，指定的回调函数就会被执行。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 | - | 事件类型 |
\n
| callback | (event: T) => R | 是 | - | 事件监听器 T表示event类型，R表示返回值类型 |"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"removeEventListener"
:{
"name"
:
"#### removeEventListener(type, callback?) @removeeventlistener"
,
"description"
:
"
\n
删除使用 addEventListener 方法添加的事件监听器。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 | - | 事件类型 |
\n
| callback | (event: T) => R | 否 | - | 事件监听器 T表示event类型，R表示返回值类型 |"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"removeChild"
:{
"name"
:
"#### removeChild(aChild) @removechild"
,
"description"
:
"
\n
从元素中删除一个子元素，返回删除的元素。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| aChild | [Element](/dom/element.md) | 是 | - | 被删除子元素对象 |"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 |
\n
| :- |
\n
| [Element](/dom/element.md) |
\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 | [Event](/component/common#event) | 是 | - | 事件返回对象 |"
,
"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) |"
,
"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) |"
,
"returnValue"
:
""
,
"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) | 是 | - | CSS样式名称 |
\n
| value | any | 否 | - | 要设置的新CSS样式值 |"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"getPropertyValue"
:{
"name"
:
"#### getPropertyValue(property) @getpropertyvalue"
,
"description"
:
"
\n
获取CSS指定的样式值，如果指定的样式不存在则返回null。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| property | string (string.cssPropertyString) | 是 | - | 要获取的CSS样式名称 |"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| any | 否 |
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"removeProperty"
:{
"name"
:
"#### removeProperty(property) @removeproperty"
,
"description"
:
""
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| property | string (string.cssPropertyString) | 是 | - | - |"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| any | 否 |
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"getStyleMap"
:{
"name"
:
"#### getStyleMap() @getstylemap"
,
"description"
:
""
,
"param"
:
""
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 |
\n
| :- |
\n
| Map
\\
<String, any> |
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
}}},
"TakeSnapshotOptions"
:{
"name"
:
"## TakeSnapshotOptions"
,
"description"
:
"
\n
组件截图的参数配置选项"
,
"extends"
:
""
,
"param"
:
"
\n
### TakeSnapshotOptions 属性值 @takesnapshotoptions-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 |
\"
file
\"
| 截图导出类型，目前仅支持 'file' 保存到临时文件目录 |
\n
| format | string | 是 |
\"
png
\"
| 截图文件格式，目前仅支持 'png' |
\n
| success | TakeSnapshotSuccessCallback | 否 | - | 接口调用成功的回调函数 |
\n
| fail | TakeSnapshotFailCallback | 否 | - | 接口调用失败的回调函数 |
\n
| complete | TakeSnapshotCompleteCallback | 否 | - | 接口调用结束的回调函数（调用成功、失败都会执行） |
\n
"
},
"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 | 是 | #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 | 是 | #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 | 否 | true | 圆弧绘制方向，true：逆时针绘制，false：顺时针绘制。 |"
,
"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轴坐标 |"
,
"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 | 是 | - | 矩形高度 |"
,
"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轴坐标 |"
,
"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 | 是 | - | 矩形高度 |"
,
"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轴坐标 |"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"fill"
:{
"name"
:
"#### fill(fillRule?) @fill"
,
"description"
:
"
\n
填充当前或已存在的路径"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| fillRule | string | 否 | nonzero | 填充规则。可取值：`nonzero`非零环绕规则；`evenodd`奇偶环绕规则。 |"
,
"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 | 是 | - | 矩形高度 |"
,
"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轴坐标 |"
,
"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[
\\
] | 是 | - | 一组描述交替绘制线段和间距长度的数字。 |"
,
"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 坐标 |"
,
"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
```html
\n
<template>
\n
<!-- #ifdef APP -->
\n
<scroll-view style=
\"
flex: 1
\"
>
\n
<!-- #endif -->
\n
<view>
\n
<view id=
\"
draw-text-view
\"
style=
\"
width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;
\"
></view>
\n
<view id=
\"
draw-line-view
\"
style=
\"
width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;
\"
></view>
\n
<view id=
\"
draw-circle-view
\"
style=
\"
width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;
\"
></view>
\n
<view id=
\"
draw-dash-line
\"
style=
\"
width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;
\"
></view>
\n
<view id=
\"
draw-house
\"
style=
\"
width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;
\"
></view>
\n
<view id=
\"
draw-style
\"
style=
\"
width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;
\"
></view>
\n
<view id=
\"
draw-odd
\"
style=
\"
width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;
\"
></view>
\n
<view id=
\"
draw-arcto
\"
style=
\"
width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;
\"
></view>
\n
</view>
\n
<!-- #ifdef APP -->
\n
</scroll-view>
\n
<!-- #endif -->
\n
</template>
\n\n
<script lang=
\"
uts
\"
>
\n
var y = 160
\n
export default {
\n
data() {
\n
return {
\n
texts: [
\n
'HBuilderX，轻巧、极速，极客编辑器',
\n
'uni-app x，终极跨平台方案',
\n
'uniCloud，js serverless云服务',
\n
'uts，大一统语言',
\n
'uniMPSdk，让你的App具备小程序能力',
\n
'uni-admin，开源、现成的全端管理后台',
\n
'uni-id，开源、全端的账户中心',
\n
'uni-pay，开源、云端一体、全平台的支付',
\n
'uni-ai，聚合ai能力',
\n
'uni-cms，开源、云端一体、全平台的内容管理平台',
\n
'uni-im，开源、云端一体、全平台的im即时消息',
\n
'uni统计，开源、完善、全平台的统计报表',
\n
'......'
\n
] as string[]
\n
}
\n
},
\n
onShow() {
\n
},
\n\n
onReady() {
\n
this.drawText()
\n
this.drawLines()
\n
this.drawCircles()
\n
this.drawStar()
\n
this.drawhouse()
\n
this.drawPoint()
\n
this.drawRect()
\n
this.drawArcTo()
\n
},
\n
onUnload() {
\n
y = 160
\n
},
\n
methods: {
\n
drawText() {
\n
let element = uni.getElementById('draw-text-view')!
\n
let ctx = element.getDrawableContext()!
\n
let width = element.getBoundingClientRect().width
\n
ctx.reset()
\n
ctx.font =
\"
15px
\"\n
ctx.textAlign =
\"
center
\"\n
for (var i = 0; i < this.texts.length; i++) {
\n
let value = this.texts[i]
\n
if (i % 2 == 0) {
\n
ctx.fillText(value, width / 2, (20 * (i + 1)))
\n
} else {
\n
ctx.strokeText(value, width / 2, (20 * (i + 1)))
\n
}
\n
}
\n
ctx.update()
\n
},
\n
drawLines() {
\n
let ctx = uni.getElementById('draw-line-view')!.getDrawableContext()!
\n
ctx.reset()
\n
ctx.lineWidth = 10;
\n\n
[
\"
round
\"
,
\"
bevel
\"
,
\"
miter
\"
].forEach((join, i) => {
\n
ctx.lineJoin = join;
\n
ctx.beginPath();
\n
ctx.moveTo(5, 10 + i * 40);
\n
ctx.lineTo(50, 50 + i * 40);
\n
ctx.lineTo(90, 10 + i * 40);
\n
ctx.lineTo(130, 50 + i * 40);
\n
ctx.lineTo(170, 10 + i * 40);
\n
ctx.stroke();
\n
});
\n
ctx.lineWidth = 1
\n
var space = 170
\n
ctx.strokeStyle = '#09f';
\n
ctx.beginPath();
\n
ctx.moveTo(10 + space, 10);
\n
ctx.lineTo(140 + space, 10);
\n
ctx.moveTo(10 + space, 140);
\n
ctx.lineTo(140 + space, 140);
\n
ctx.stroke();
\n
// Draw lines
\n
ctx.strokeStyle = 'black';
\n
['butt', 'round', 'square'].forEach((lineCap, i) => {
\n
ctx.lineWidth = 15;
\n
ctx.lineCap = lineCap;
\n
ctx.beginPath();
\n
ctx.moveTo(25 + space + i * 50, 10);
\n
ctx.lineTo(25 + space + i * 50, 140);
\n
ctx.stroke();
\n
});
\n
ctx.lineWidth = 1;
\n
this.drawDashedLine([], ctx);
\n
this.drawDashedLine([2, 2], ctx);
\n
this.drawDashedLine([10, 10], ctx);
\n
this.drawDashedLine([20, 5], ctx);
\n
this.drawDashedLine([15, 3, 3, 3], ctx);
\n
this.drawDashedLine([20, 3, 3, 3, 3, 3, 3, 3], ctx);
\n
ctx.lineDashOffset = 18;
\n
this.drawDashedLine([12, 3, 3], ctx);
\n
ctx.lineDashOffset = 0
\n
ctx.setLineDash([0])
\n
ctx.update()
\n
},
\n
drawDashedLine(pattern : Array<number>, ctx : DrawableContext) {
\n
ctx.beginPath();
\n
ctx.setLineDash(pattern);
\n
ctx.moveTo(0, y);
\n
ctx.lineTo(300, y);
\n
ctx.stroke();
\n
y += 15;
\n
},
\n
drawCircles() {
\n
let ctx = uni.getElementById('draw-circle-view')!.getDrawableContext()!
\n
ctx.reset()
\n
// Draw shapes
\n
for (var i = 0; i < 4; i++) {
\n
for (var j = 0; j < 3; j++) {
\n
ctx.beginPath();
\n
var x = 25 + j * 50; // x coordinate
\n
var y = 25 + i * 50; // y coordinate
\n
var radius = 20; // Arc radius
\n
var startAngle = 0; // Starting point on circle
\n
var endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
\n
var clockwise = i % 2 == 0 ? false : true; // clockwise or anticlockwise
\n\n
ctx.arc(x, y, radius, startAngle, endAngle, clockwise);
\n\n
if (i > 1) {
\n
ctx.fill();
\n
} else {
\n
ctx.stroke();
\n
}
\n
}
\n
}
\n
ctx.update()
\n
},
\n\n
drawStar() {
\n
let ctx = uni.getElementById('draw-dash-line')!.getDrawableContext()!
\n
ctx.reset()
\n
ctx.beginPath();
\n
var horn = 5; // 画5个角
\n
var angle = 360 / horn; // 五个角的度数
\n
// 两个圆的半径
\n
var R = 50;
\n
var r = 20;
\n
// 坐标
\n
var x = 100;
\n
var y = 100;
\n
for (var i = 0; i < horn; i++) {
\n
// 角度转弧度：角度/180*Math.PI
\n
// 外圆顶点坐标
\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);
\n
// 內圆顶点坐标
\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);
\n
}
\n
// closePath：关闭路径，将路径的终点与起点相连
\n
ctx.closePath();
\n
ctx.lineWidth = 3;
\n
ctx.fillStyle = '#E4EF00';
\n
ctx.strokeStyle =
\"
red
\"
;
\n
ctx.fill();
\n
ctx.stroke();
\n\n
ctx.lineWidth = 10;
\n
ctx.beginPath()
\n
ctx.moveTo(170, 100)
\n
ctx.lineTo(255, 15)
\n
ctx.lineTo(340, 100)
\n
ctx.closePath()
\n
ctx.fill()
\n
ctx.strokeStyle =
\"
blue
\"\n
ctx.stroke()
\n
ctx.beginPath()
\n
ctx.moveTo(170, 145)
\n
ctx.lineTo(255, 45)
\n
ctx.lineTo(340, 145)
\n
ctx.closePath()
\n
ctx.fill()
\n
ctx.strokeStyle =
\"
gray
\"\n
ctx.stroke()
\n
// 未设置beginPath，导致上下表现一致，与前端一致
\n
ctx.moveTo(170, 190)
\n
ctx.lineTo(255, 90)
\n
ctx.lineTo(340, 190)
\n
ctx.closePath()
\n
ctx.fillStyle =
\"
orange
\"\n
ctx.fill()
\n
ctx.strokeStyle =
\"
khaki
\"\n
ctx.stroke()
\n
ctx.update()
\n
},
\n
hex(num : number) : string {
\n
if (num == 0) {
\n
return
\"
00
\"\n
}
\n
let hexChars =
\"
0123456789ABCDEF
\"
;
\n
let result =
\"\"
;
\n
while (num > 0) {
\n
let remainder = Math.floor(num) % 16;
\n
result = hexChars[remainder] + result;
\n
num = Math.floor(Math.floor(num) / 16);
\n
}
\n
if (result.length == 1) {
\n
return
\"
0
\"
+ result
\n
}
\n
return result
\n
},
\n
drawhouse() {
\n
let ctx = uni.getElementById('draw-house')!.getDrawableContext()!
\n
ctx.reset()
\n
ctx.lineWidth = 10;
\n\n
// Wall
\n
ctx.strokeRect(75, 140, 150, 110);
\n\n
// Door
\n
ctx.fillRect(130, 190, 40, 60);
\n\n
// Roof
\n
ctx.beginPath();
\n
ctx.moveTo(50, 140);
\n
ctx.lineTo(150, 60);
\n
ctx.lineTo(250, 140);
\n
ctx.closePath();
\n
ctx.stroke();
\n
ctx.update()
\n
},
\n
drawPoint() {
\n
let ctx = uni.getElementById('draw-style')!.getDrawableContext()!
\n
ctx.reset()
\n
for (let i = 0; i < 6; i++) {
\n
for (let j = 0; j < 6; j++) {
\n
ctx.strokeStyle = `rgb(0,${Math.floor(255 - 42.5 * i)},${Math.floor(255 - 42.5 * j)})`;
\n
ctx.beginPath();
\n
ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
\n
ctx.stroke();
\n
}
\n
}
\n
for (let i = 0; i < 6; i++) {
\n
for (let j = 0; j < 6; j++) {
\n
ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)},${Math.floor(255 - 42.5 * j)},0)`;
\n
ctx.fillRect(180 + j * 25, i * 25, 25, 25);
\n
}
\n
}
\n
ctx.update()
\n
},
\n
drawRect() {
\n
let ctx = uni.getElementById('draw-odd')!.getDrawableContext()!
\n
ctx.reset()
\n
// Create path
\n
ctx.moveTo(30, 90);
\n
ctx.lineTo(110, 20);
\n
ctx.lineTo(240, 130);
\n
ctx.lineTo(60, 130);
\n
ctx.lineTo(190, 20);
\n
ctx.lineTo(270, 90);
\n
ctx.closePath();
\n\n
// Fill path
\n
ctx.fillStyle =
\"
green
\"
;
\n
ctx.fill(
\"
evenodd
\"
);
\n
ctx.update()
\n\n
},
\n
drawArcTo() {
\n
let ctx = uni.getElementById('draw-arcto')!.getDrawableContext()!
\n
ctx.reset()
\n
ctx.beginPath();
\n
ctx.moveTo(50, 20);
\n
ctx.bezierCurveTo(230, 30, 150, 60, 50, 100);
\n
ctx.stroke();
\n\n
ctx.fillStyle =
\"
blue
\"
;
\n
// start point
\n
ctx.fillRect(50, 20, 10, 10);
\n
// end point
\n
ctx.fillRect(50, 100, 10, 10);
\n\n
ctx.fillStyle =
\"
red
\"
;
\n
// control point one
\n
ctx.fillRect(230, 30, 10, 10);
\n
// control point two
\n
ctx.fillRect(150, 70, 10, 10);
\n
ctx.update()
\n
}
\n
}
\n
}
\n
</script>
\n\n
<style>
\n\n
</style>
\n\n
```"
},
"CustomEvent"
:{
"name"
:
"## CustomEvent"
,
"description"
:
""
,
"extends"
:
"```mermaid
\n
classDiagram
\n\n
Event <|-- CustomEvent : Extend
\n
```"
,
"param"
:
"
\n
### 构造函数
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 | - | - |
\n
| options | any | 是 | - | - |
\n\n
### CustomEvent 属性值 @customevent-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| detail | T | 是 | - | - |
\n
| type | string | 是 | - | 事件类型 |
\n
| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |
\n
| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |
\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"
:
"```mermaid
\n
classDiagram
\n\n
Event <|-- MouseEvent : Extend
\n
```"
,
"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
| type | string | 是 | - | 事件类型 |
\n
| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |
\n
| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |
\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"
:
"```mermaid
\n
classDiagram
\n\n
Event <|-- TouchEvent : Extend
\n
```"
,
"param"
:
"
\n
### TouchEvent 属性值 @touchevent-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| touches | Array
\\
<[Touch](/component/common#touch)
\\
> | 是 | - | 当前停留在屏幕中的触摸点信息的数组 |
\n
| changedTouches | Array
\\
<[Touch](/component/common#touch)
\\
> | 是 | - | 当前变化的触摸点信息的数组 |
\n
| type | string | 是 | - | 事件类型 |
\n
| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |
\n
| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |
\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"
:
""
}}},
"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 | 否 | - | 返回当前触摸点按下的压力大小 |
\n
"
},
"UniError"
:{
"name"
:
"## UniError"
,
"description"
:
"
\n
uni api统一错误信息对象 "
,
"extends"
:
"```mermaid
\n
classDiagram
\n\n
Error <|-- UniError : Extend
\n
```"
,
"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 | 否 | - | 错误信息中包含的数据 |
\n
| cause | [Error](https://uniapp.dcloud.net.cn/tutorial/err-spec.html#unierror) | 否 | - | 源错误信息，可以包含多个错误，详见SourceError |
\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) | 否 | - | - |
\n
"
},
"general-attribute"
:{
"example"
:
"### 示例
\n
> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/general-attribute/general-attribute.uvue)
\n
```html
\n
<template>
\n
<!-- #ifdef APP -->
\n
<scroll-view style=
\"
flex: 1
\"
>
\n
<!-- #endif -->
\n
<view>
\n
<page-head :title=
\"
title
\"
></page-head>
\n
<view class=
\"
uni-padding-wrap container
\"
>
\n
<view
\n
:id=
\"
generalId
\"\n
:class=
\"
generalClass
\"\n
:name=
\"
generalName
\"\n
:title=
\"
generalTitle
\"\n
:data-test=
\"
generalData
\"\n
:style=
\"
generalStyle
\"\n
ref=
\"
general-target
\"\n
>
\n
<text>id: {{ generalId }}</text>
\n
<text>class: {{ generalClass }}</text>
\n
<text>name: {{ generalName }}</text>
\n
<text>title: {{ generalTitle }}</text>
\n
<text>data-test: {{ generalData }}</text>
\n
<text>style: {{ generalStyle }}</text>
\n
</view>
\n
<view
\n
class=
\"
btn btn-style uni-common-mt
\"\n
@click=
\"
validateGeneralAttributes
\"\n
>
\n
<text class=
\"
btn-inner
\"
>{{ validateGeneralAttrText }}</text>
\n
</view>
\n
<view class=
\"
btn btn-ref uni-common-mt
\"
@click=
\"
changeHeight
\"
>
\n
<text class=
\"
btn-inner
\"
>{{changeHeightByRefText}}</text>
\n
</view>
\n
<view class=
\"
view-class
\"
:hover-class=
\"
hoverClass
\"
ref=
\"
view-target
\"
>
\n
<text class=
\"
text
\"
>按下 50 ms 后背景变红</text>
\n
<text class=
\"
text
\"
>抬起 400 ms 后背景恢复</text>
\n
</view>
\n
<view
\n
class=
\"
view-class
\"\n
:hover-class=
\"
hoverClass
\"\n
:hover-start-time=
\"
1000
\"\n
:hover-stay-time=
\"
1000
\"\n
ref=
\"
view-target
\"\n
>
\n
<text class=
\"
text
\"
>按下 1000 ms 后背景变红</text>
\n
<text class=
\"
text
\"
>抬起 1000 ms 后背景恢复</text>
\n
</view>
\n
</view>
\n
</view>
\n
<!-- #ifdef APP -->
\n
</scroll-view>
\n
<!-- #endif -->
\n
</template>
\n\n
<script lang=
\"
uts
\"
>
\n
export default {
\n
data() {
\n
return {
\n
title: 'general-attribute',
\n
generalId: 'general-id',
\n
generalClass: 'general-class',
\n
generalName: 'general-name',
\n
generalTitle: 'general-title',
\n
generalData: 'general-data',
\n
generalStyle: 'background-color: aqua',
\n
validateGeneralAttrText: '验证基础属性',
\n
hoverClass: 'hover-class',
\n
validateViewAttrText: '验证 view 属性',
\n
changeHeightByRefText: '通过 ref 修改高度',
\n
}
\n
},
\n
methods: {
\n
validateGeneralAttributes() {
\n
const generalTarget = this.$refs['general-target'] as Element
\n
const generalId = generalTarget.getAttribute('id')
\n
if (generalId != this.generalId) {
\n
this.validateGeneralAttrText = '基础属性 id 验证失败'
\n
return
\n
}
\n
if (!generalTarget.classList.includes('general-class')) {
\n
this.validateGeneralAttrText = '基础属性 class 验证失败'
\n
return
\n
}
\n
const generalName = generalTarget.getAttribute('name')
\n
if (generalName != this.generalName) {
\n
this.validateGeneralAttrText = '基础属性 name 验证失败'
\n
return
\n
}
\n
const generalTitle = generalTarget.getAttribute('title')
\n
if (generalTitle != this.generalTitle) {
\n
this.validateGeneralAttrText = '基础属性 title 验证失败'
\n
return
\n
}
\n
const generalData = generalTarget.getAttribute('data-test')
\n
if (generalData != this.generalData) {
\n
this.validateGeneralAttrText = '基础属性 data-test 验证失败'
\n
return
\n
}
\n
this.validateGeneralAttrText = '基础属性验证成功'
\n
},
\n
changeHeight(){
\n
const generalTarget = this.$refs['general-target'] as Element
\n
this.changeHeightByRefText = '已通过 ref 修改高度'
\n
generalTarget.style.setProperty('height', '200px')
\n
}
\n
},
\n
}
\n
</script>
\n\n
<style>
\n
.btn {
\n
height: 50px;
\n
display: flex;
\n
align-items: center;
\n
justify-content: center;
\n
background-color: #409eff;
\n
border-radius: 5px;
\n
}
\n
.btn-inner {
\n
color: #fff;
\n
}
\n
.general-class {
\n
margin-left: 40px;
\n
padding: 10px;
\n
width: 260px;
\n
height: 160px;
\n
background-color: antiquewhite;
\n
}
\n
.view-class {
\n
margin: 20px 0 0 50px;
\n
padding: 10px;
\n
width: 240px;
\n
height: 100px;
\n
background-color: antiquewhite;
\n
}
\n
.view-class .text {
\n
margin-top: 5px;
\n
text-align: center;
\n
}
\n
.hover-class {
\n
background-color: red;
\n
}
\n
</style>
\n\n
```"
},
"general-event"
:{
"example"
:
"### 示例
\n
> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/general-event/general-event.uvue)
\n
```html
\n
<template>
\n
<!-- #ifdef APP -->
\n
<scroll-view style=
\"
flex: 1
\"
>
\n
<!-- #endif -->
\n
<page-head title=
\"
触摸方块测试相关事件
\"
></page-head>
\n
<view class=
\"
uni-padding-wrap uni-common-mt container
\"
>
\n
<view class=
\"
target
\"
@touchstart=
\"
onTouchStart
\"
@touchcancel=
\"
onTouchCancel
\"
@touchmove=
\"
onTouchMove
\"\n
@touchend=
\"
onTouchEnd
\"
@tap=
\"
onTap
\"
@click=
\"
onClick
\"
@longpress=
\"
onLongPress
\"
></view>
\n
<view v-if=
\"
touchStartEvent !== null
\"
>
\n
<text class=
\"
title1
\"
>touchStart Event: </text>
\n
<text class=
\"
title2
\"
>touches: </text>
\n
<template v-for=
\"
(touch, index) in touchStartEvent!.touches
\"
:key=
\"
index
\"
>
\n
<text class=
\"
title3
\"
>touch[{{ index }}]:</text>
\n
<text>identifier: {{touch.identifier}}</text>
\n
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
\n
<text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
\n
<text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
\n
</template>
\n
<text class=
\"
title2 uni-common-mt
\"
>changedTouches: </text>
\n
<template v-for=
\"
(touch, index) in touchStartEvent!.changedTouches
\"
:key=
\"
index
\"
>
\n
<text class=
\"
title3
\"
>touch[{{ index }}]:</text>
\n
<text>identifier: {{touch.identifier}}</text>
\n
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
\n
<text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
\n
<text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
\n
</template>
\n
</view>
\n
<view v-if=
\"
touchCancelEvent !== null
\"
>
\n
<text class=
\"
title1
\"
>touchCancel Event: </text>
\n
<text class=
\"
title2
\"
>touches: </text>
\n
<template v-for=
\"
(touch, index) in touchCancelEvent!.touches
\"
:key=
\"
index
\"
>
\n
<text class=
\"
title3
\"
>touch[{{ index }}]:</text>
\n
<text>identifier: {{touch.identifier}}</text>
\n
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
\n
<text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
\n
<text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
\n
</template>
\n
<text class=
\"
title2 uni-common-mt
\"
>changedTouches: </text>
\n
<template v-for=
\"
(touch, index) in touchCancelEvent!.changedTouches
\"
:key=
\"
index
\"
>
\n
<text class=
\"
title3
\"
>touch[{{ index }}]:</text>
\n
<text>identifier: {{touch.identifier}}</text>
\n
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
\n
<text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
\n
<text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
\n
</template>
\n
</view>
\n
<view v-if=
\"
touchMoveEvent !== null
\"
>
\n
<text class=
\"
title1
\"
>touchMove Event: </text>
\n
<text class=
\"
title2
\"
>touches: </text>
\n
<template v-for=
\"
(touch, index) in touchMoveEvent!.touches
\"
:key=
\"
index
\"
>
\n
<text class=
\"
title3
\"
>touch[{{ index }}]:</text>
\n
<text>identifier: {{touch.identifier}}</text>
\n
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
\n
<text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
\n
<text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
\n
</template>
\n
<text class=
\"
title2 uni-common-mt
\"
>changedTouches: </text>
\n
<template v-for=
\"
(touch, index) in touchMoveEvent!.changedTouches
\"
:key=
\"
index
\"
>
\n
<text class=
\"
title3
\"
>touch[{{ index }}]:</text>
\n
<text>identifier: {{touch.identifier}}</text>
\n
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
\n
<text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
\n
<text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
\n
</template>
\n
</view>
\n
<view v-if=
\"
longPressEvent !== null
\"
>
\n
<text class=
\"
title1
\"
>longPress Event: </text>
\n
<text class=
\"
title2
\"
>touches: </text>
\n
<template v-if=
\"
longPressEvent!.touches.length > 0
\"
v-for=
\"
(touch, index) in longPressEvent!.touches
\"\n
:key=
\"
index
\"
>
\n
<text class=
\"
title3
\"
>touch[{{ index }}]:</text>
\n
<text>identifier: {{touch.identifier}}</text>
\n
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
\n
<text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
\n
<text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
\n
</template>
\n
<text class=
\"
title2 uni-common-mt
\"
>changedTouches: </text>
\n
<template v-for=
\"
(touch, index) in longPressEvent!.changedTouches
\"
:key=
\"
index
\"
>
\n
<text class=
\"
title3
\"
>touch[{{ index }}]:</text>
\n
<text>identifier: {{touch.identifier}}</text>
\n
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
\n
<text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
\n
<text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
\n
</template>
\n
</view>
\n
<view v-if=
\"
touchEndEvent !== null
\"
>
\n
<text class=
\"
title1
\"
>touchEnd Event: </text>
\n
<text class=
\"
title2
\"
>touches: </text>
\n
<template v-if=
\"
touchEndEvent!.touches.length > 0
\"
v-for=
\"
(touch, index) in touchEndEvent!.touches
\"\n
:key=
\"
index
\"
>
\n
<text class=
\"
title3
\"
>touch[{{ index }}]:</text>
\n
<text>identifier: {{touch.identifier}}</text>
\n
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
\n
<text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
\n
<text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
\n
</template>
\n
<text class=
\"
title2 uni-common-mt
\"
>changedTouches: </text>
\n
<template v-for=
\"
(touch, index) in touchEndEvent!.changedTouches
\"
:key=
\"
index
\"
>
\n
<text class=
\"
title3
\"
>touch[{{ index }}]:</text>
\n
<text>identifier: {{touch.identifier}}</text>
\n
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
\n
<text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
\n
<text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
\n
</template>
\n
</view>
\n
<view v-if=
\"
tapEvent !== null
\"
>
\n
<text class=
\"
title1
\"
>tap Event: </text>
\n
<text>x: {{ tapEvent!.x }}, y: {{ tapEvent!.y }}</text>
\n
</view>
\n
<view v-if=
\"
clickEvent !== null
\"
>
\n
<text class=
\"
title1
\"
>click Event: </text>
\n
<text>x: {{ clickEvent!.x }}, y: {{ clickEvent!.y }}</text>
\n
</view>
\n
</view>
\n
<!-- #ifdef APP -->
\n
</scroll-view>
\n
<!-- #endif -->
\n
</template>
\n
<script lang=
\"
uts
\"
>
\n
export default {
\n
data() {
\n
return {
\n
title: 'general-event',
\n
onTouchStartTime: 0,
\n
touchStartEvent: null as TouchEvent | null,
\n
touchCancelEvent: null as TouchEvent | null,
\n
onTouchMoveTime: 0,
\n
touchMoveEvent: null as TouchEvent | null,
\n
onTouchEndTime: 0,
\n
longPressEvent: null as TouchEvent | null,
\n
touchEndEvent: null as TouchEvent | null,
\n
onTapTime: 0,
\n
tapEvent: null as MouseEvent | null,
\n
onClickTime: 0,
\n
clickEvent: null as MouseEvent | null,
\n
onLongPressTime: 0,
\n
}
\n
},
\n
methods: {
\n
onTouchStart(e : TouchEvent) {
\n
this.touchStartEvent = e
\n
this.onTouchStartTime = Date.now()
\n
console.log('onTouchStart')
\n
},
\n
onTouchCancel(e : TouchEvent) {
\n
this.touchCancelEvent = e
\n
console.log('onTouchCancel')
\n
},
\n
onTouchMove(e : TouchEvent) {
\n
this.touchMoveEvent = e
\n
this.onTouchMoveTime = Date.now()
\n
console.log('onTouchMove')
\n
},
\n
onLongPress(e : TouchEvent) {
\n
this.longPressEvent = e
\n
this.onLongPressTime = Date.now()
\n
console.log('onLongPress')
\n
},
\n
onTouchEnd(e : TouchEvent) {
\n
this.touchEndEvent = e
\n
this.onTouchEndTime = Date.now()
\n
console.log('onTouchEnd')
\n
},
\n
onTap(e : MouseEvent) {
\n
this.tapEvent = e
\n
this.onTapTime = Date.now()
\n
console.log('onTap')
\n
},
\n
onClick(e : MouseEvent) {
\n
this.clickEvent = e
\n
this.onClickTime = Date.now()
\n
console.log('onClick')
\n
},
\n
},
\n
}
\n
</script>
\n\n
<style>
\n
.container {
\n
padding-bottom: 10px;
\n
}
\n\n
.target {
\n
margin: 20px 0 0 50px;
\n
width: 200px;
\n
height: 100px;
\n
background-color: aqua;
\n
}
\n\n
.title1 {
\n
margin-top: 15px;
\n
font-size: 20px;
\n
}
\n\n
.title2 {
\n
margin-top: 10px;
\n
font-size: 18px;
\n
}
\n\n
.title3 {
\n
margin-top: 5px;
\n
font-size: 16px;
\n
}
\n
</style>
\n\n
```"
}}
"Event"
:
{
\ No newline at end of file
"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
| type | string | 是 | - | 事件类型 |
\n
| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |
\n
| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |
\n
| timeStamp | number | 是 | - | 事件发生时的时间戳 |
\n
"
,
"methods"
:
{
"stopPropagation"
:
{
"name"
:
"#### stopPropagation() @stoppropagation"
,
"description"
:
"
\r\n
阻止当前事件的进一步传播"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"preventDefault"
:
{
"name"
:
"#### preventDefault() @preventdefault"
,
"description"
:
"
\r\n
阻止当前事件的默认行为"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
}
}
},
"UTSJSONObject"
:
{
"name"
:
"## UTSJSONObject"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
""
,
"methods"
:
{
"getAny"
:
{
"name"
:
"#### getAny(key) @getany"
,
"description"
:
"
\r\n
获取一个 属性，返回类型是any 或者 null"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | - |"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| any | 否 |
\n
"
,
"compatibility"
:
"##### getAny 兼容性
\n
| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- |
\n
| 5.0 | 3.9+ | 3.9+ | 9.0 | √ | x |
\n
"
,
"tutorial"
:
"
\n
##### 参见
\n
[getAny](https://uniapp.dcloud.net.cn/uts/buildin-object-api/UTSJSONObject.html#getAny)
\n
"
},
"getBoolean"
:
{
"name"
:
"#### getBoolean(key) @getboolean"
,
"description"
:
"
\r\n
获取一个Boolean属性，返回类型是Boolean 或者 null"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | - |"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| boolean | 否 |
\n
"
,
"compatibility"
:
"##### getBoolean 兼容性
\n
| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- |
\n
| 5.0 | 3.9+ | 3.9+ | 9.0 | √ | x |
\n
"
,
"tutorial"
:
"
\n
##### 参见
\n
[getBoolean](https://uniapp.dcloud.net.cn/uts/buildin-object-api/UTSJSONObject.html#getBoolean)
\n
"
},
"getNumber"
:
{
"name"
:
"#### getNumber(key) @getnumber"
,
"description"
:
"
\r\n
获取一个number属性，返回类型是number 或者 null"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | - |"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| number | 否 |
\n
"
,
"compatibility"
:
"##### getNumber 兼容性
\n
| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- |
\n
| 5.0 | 3.9+ | 3.9+ | 9.0 | √ | x |
\n
"
,
"tutorial"
:
"
\n
##### 参见
\n
[getNumber](https://uniapp.dcloud.net.cn/uts/buildin-object-api/UTSJSONObject.html#getNumber)
\n
"
},
"getString"
:
{
"name"
:
"#### getString(key) @getstring"
,
"description"
:
"
\r\n
获取一个string属性，返回类型是string 或者 null"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | - |"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| string | 否 |
\n
"
,
"compatibility"
:
"##### getString 兼容性
\n
| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- |
\n
| 5.0 | 3.9+ | 3.9+ | 9.0 | √ | x |
\n
"
,
"tutorial"
:
"
\n
##### 参见
\n
[getString](https://uniapp.dcloud.net.cn/uts/buildin-object-api/UTSJSONObject.html#getString)
\n
"
},
"getJSON"
:
{
"name"
:
"#### getJSON(key) @getjson"
,
"description"
:
"
\r\n
获取一个UTSJSONObject属性，返回类型是UTSJSONObject 或者 null"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | - |"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| [UTSJSONObject](/uts/buildin-object-api/utsjsonobject.md) | 否 |
\n
"
,
"compatibility"
:
"##### getJSON 兼容性
\n
| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- |
\n
| 5.0 | 3.9+ | 3.9+ | 9.0 | √ | x |
\n
"
,
"tutorial"
:
"
\n
##### 参见
\n
[getJSON](https://uniapp.dcloud.net.cn/uts/buildin-object-api/UTSJSONObject.html#getJSON)
\n
"
},
"getArray"
:
{
"name"
:
"#### getArray(key) @getarray"
,
"description"
:
"
\r\n
获取一个Array属性，返回类型是Array 或者 null"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | - |"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| any[
\\
] | 否 |
\n
"
,
"compatibility"
:
"##### getArray 兼容性
\n
| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- |
\n
| 5.0 | 3.9+ | 3.9+ | 9.0 | √ | x |
\n
"
,
"tutorial"
:
"
\n
##### 参见
\n
[getArray](https://uniapp.dcloud.net.cn/uts/buildin-object-api/UTSJSONObject.html#getArray)
\n
"
},
"toMap"
:
{
"name"
:
"#### toMap() @tomap"
,
"description"
:
"
\r\n
将当前 UTSJSONObject 实例转换为 Map 实例。"
,
"param"
:
""
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 |
\n
| :- |
\n
| Map
\\
<string, any> |
\n
"
,
"compatibility"
:
"##### toMap 兼容性
\n
| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- |
\n
| 5.0 | 3.9+ | 3.9+ | 9.0 | √ | x |
\n
"
,
"tutorial"
:
"
\n
##### 参见
\n
[toMap](https://uniapp.dcloud.net.cn/uts/buildin-object-api/UTSJSONObject.html#toMap)
\n
"
}
}
},
"Element"
:
{
"name"
:
"## Element"
,
"description"
:
"
\r\n
UVUE DOM 元素对象，描述了 UVUE DOM 元素的通用属性和方法。"
,
"extends"
:
""
,
"param"
:
"
\n
### Element 属性值 @element-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| classList | Array
\\
<string
\\
> | 是 | - | 只读属性 获取当前元素的的 class 属性的动态集合。 |
\n
| firstChild | [Element](/dom/element.md) | 否 | - | 只读属性 获取当前元素的的第一个子元素，如果元素是无子元素，则返回 null。 |
\n
| lastChild | [Element](/dom/element.md) | 否 | - | 只读属性 获取当前元素的最后一个子元素，如果没有子元素，则返回 null。 |
\n
| parentElement | [Element](/dom/element.md) | 否 | - | 只读属性 获取当前元素在 DOM 树中的父元素，如果没有父元素（如未添加到DOM树中），则返回null。 |
\n
| previousSibling | [Element](/dom/element.md) | 否 | - | 只读属性 获取当前元素的前一个同级元素，没有则返回null。 |
\n
| nextElementSibling | [Element](/dom/element.md) | 否 | - | 只读属性 获取在 DOM 树中紧跟在其后面的同级元素，如果指定的元素为最后一个元素，则返回 null。 |
\n
| children | Array
\\
<[Element](/dom/element.md)
\\
> | 是 | - | 只读属性 获取当前元素包含的子元素的集合 |
\n
| tagName | 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"
:
"
\r\n
对当前组件进行截图，调用此方法会将当前组件（包含子节点）渲染结果导出成图片。
\r\n
成功会返回图片对应的临时文件路径，目前默认png格式
\r\n
"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| options | [TakeSnapshotOptions](#takesnapshotoptions-values) | 是 | - | 组件截图的参数对象 |
\n
###### TakeSnapshotOptions 属性值 @takesnapshotoptions-values
\n\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 |
\"
file
\"
| 截图导出类型，目前仅支持 'file' 保存到临时文件目录 |
\n
| format | string | 是 |
\"
png
\"
| 截图文件格式，目前仅支持 'png' |
\n
| success | TakeSnapshotSuccessCallback | 否 | - | 接口调用成功的回调函数 |
\n
| fail | TakeSnapshotFailCallback | 否 | - | 接口调用失败的回调函数 |
\n
| complete | TakeSnapshotCompleteCallback | 否 | - | 接口调用结束的回调函数（调用成功、失败都会执行） |
\n
"
,
"returnValue"
:
""
,
"compatibility"
:
"##### takeSnapshot 兼容性
\n
| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- |
\n
| 5.0 | x | 3.93 | x | x | x |
\n
"
,
"tutorial"
:
""
},
"appendChild"
:
{
"name"
:
"#### appendChild(aChild) @appendchild"
,
"description"
:
"
\r\n
将一个元素添加到指定父元素的子元素列表的末尾处。如果将被插入的元素已经存在于当前文档的文档树中，那么将会它从原先的位置移动到新的位置。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| aChild | [Element](/dom/element.md) | 是 | - | 插入子元素对象 |"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"insertBefore"
:
{
"name"
:
"#### insertBefore(newChild, refChild?) @insertbefore"
,
"description"
:
"
\r\n
在参考元素之前插入一个拥有指定父元素的子元素。如果给定的子元素是对文档中现有元素的引用，insertBefore() 会将其从当前位置移动到新位置。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| newChild | [Element](/dom/element.md) | 是 | - | 插入子元素对象 |
\n
| refChild | [Element](/dom/element.md) | 否 | - | 已存在父元素的子元素对象 |"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"setAttribute"
:
{
"name"
:
"#### setAttribute(key, value) @setattribute"
,
"description"
:
"
\r\n
设置指定元素上的某个属性值。如果设置的属性已经存在，则更新该属性值；否则使用指定的名称和值添加一个新的属性。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | 属性名称 |
\n
| value | string | 是 | - | 属性值域 |"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"getAttribute"
:
{
"name"
:
"#### getAttribute(key) @getattribute"
,
"description"
:
"
\r\n
获取元素指定的属性值，如果指定的属性不存在则返回null。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | 属性名称 |"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| string | 否 |
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"hasAttribute"
:
{
"name"
:
"#### hasAttribute(key) @hasattribute"
,
"description"
:
"
\r\n
返回改元素是否包含有指定的属性，属性存在则返回true，否则返回false。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | 属性名称 |"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 |
\n
| :- |
\n
| boolean |
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"removeAttribute"
:
{
"name"
:
"#### removeAttribute(key) @removeattribute"
,
"description"
:
"
\r\n
从元素中删除一个属性，如果指定的属性不存在，则不做任何操作，也不会产生错误。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | 属性名称 |"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"getBoundingClientRect"
:
{
"name"
:
"#### getBoundingClientRect() @getboundingclientrect"
,
"description"
:
"
\r\n
获取元素的大小及其相对于窗口的位置信息。"
,
"param"
:
""
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 |
\n
| :- |
\n
| [DOMRect](/dom/domrect.md) |
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"getDrawableContext"
:
{
"name"
:
"#### getDrawableContext() @getdrawablecontext"
,
"description"
:
"
\r\n
获取组件的绘制对象，仅uvue页面中的 view 组件支持，其它组件不支持则返回null。"
,
"param"
:
""
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| [DrawableContext](/dom/drawablecontext.md) | 否 |
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"addEventListener"
:
{
"name"
:
"#### addEventListener(type, callback) @addeventlistener"
,
"description"
:
"
\r\n
将指定的监听器注册到元素对象上，当该对象触发指定的事件时，指定的回调函数就会被执行。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 | - | 事件类型 |
\n
| callback | (event: T) => R | 是 | - | 事件监听器 T表示event类型，R表示返回值类型 |"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"removeEventListener"
:
{
"name"
:
"#### removeEventListener(type, callback?) @removeeventlistener"
,
"description"
:
"
\r\n
删除使用 addEventListener 方法添加的事件监听器。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 | - | 事件类型 |
\n
| callback | (event: T) => R | 否 | - | 事件监听器 T表示event类型，R表示返回值类型 |"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"removeChild"
:
{
"name"
:
"#### removeChild(aChild) @removechild"
,
"description"
:
"
\r\n
从元素中删除一个子元素，返回删除的元素。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| aChild | [Element](/dom/element.md) | 是 | - | 被删除子元素对象 |"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 |
\n
| :- |
\n
| [Element](/dom/element.md) |
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"remove"
:
{
"name"
:
"#### remove() @remove"
,
"description"
:
"
\r\n
把元素对象从它所属的 DOM 树中删除。"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"dispatchEvent"
:
{
"name"
:
"#### dispatchEvent(type, value) @dispatchevent"
,
"description"
:
"
\r\n
向一个指定的事件目标派发一个 Event，并以合适的顺序（同步地）调用此事件的监听器回调函数。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 | - | 事件类型 |
\n
| value | [Event](/component/common#event) | 是 | - | 事件返回对象 |"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"scrollTo"
:
{
"name"
:
"#### scrollTo(x, y) @scrollto"
,
"description"
:
"
\r\n
使界面滚动到给定元素的指定坐标位置 仅scroll-view、list-view组件支持"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| x | number | 是 | - | x轴要滚动到坐标位置(单位px) |
\n
| y | number | 是 | - | y轴要滚动到坐标位置(单位px) |"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"scrollBy"
:
{
"name"
:
"#### scrollBy(x, y) @scrollby"
,
"description"
:
"
\r\n
使得元素滚动一段特定距离 仅scroll-view、list-view组件支持"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| x | number | 是 | - | x轴要滚动的距离(单位px) |
\n
| y | number | 是 | - | y轴要滚动的距离(单位px) |"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"focus"
:
{
"name"
:
"#### focus() @focus"
,
"description"
:
"
\r\n
使元素获取焦点 仅input、Textarea组件支持"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"blur"
:
{
"name"
:
"#### blur() @blur"
,
"description"
:
"
\r\n
使元素丢失焦点 仅input、Textarea组件支持"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
}
}
},
"CSSStyleDeclaration"
:
{
"name"
:
"## CSSStyleDeclaration"
,
"description"
:
"
\r\n
CSSStyleDeclaration表示一个CSS 声明块对象，它是一个 CSS 属性键值对的集合，暴露样式信息和各种与样式相关的方法和属性。"
,
"extends"
:
""
,
"param"
:
""
,
"methods"
:
{
"setProperty"
:
{
"name"
:
"#### setProperty(name, value?) @setproperty"
,
"description"
:
"
\r\n
对CSS指定样式设置一个新值，如有此样式已存在则更新。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| name | string (string.cssPropertyString) | 是 | - | CSS样式名称 |
\n
| value | any | 否 | - | 要设置的新CSS样式值 |"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"getPropertyValue"
:
{
"name"
:
"#### getPropertyValue(property) @getpropertyvalue"
,
"description"
:
"
\r\n
获取CSS指定的样式值，如果指定的样式不存在则返回null。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| property | string (string.cssPropertyString) | 是 | - | 要获取的CSS样式名称 |"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| any | 否 |
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"removeProperty"
:
{
"name"
:
"#### removeProperty(property) @removeproperty"
,
"description"
:
""
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| property | string (string.cssPropertyString) | 是 | - | - |"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| any | 否 |
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"getStyleMap"
:
{
"name"
:
"#### getStyleMap() @getstylemap"
,
"description"
:
""
,
"param"
:
""
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 |
\n
| :- |
\n
| Map
\\
<String, any> |
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
}
}
},
"TakeSnapshotOptions"
:
{
"name"
:
"## TakeSnapshotOptions"
,
"description"
:
"
\r\n
组件截图的参数配置选项"
,
"extends"
:
""
,
"param"
:
"
\n
### TakeSnapshotOptions 属性值 @takesnapshotoptions-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 |
\"
file
\"
| 截图导出类型，目前仅支持 'file' 保存到临时文件目录 |
\n
| format | string | 是 |
\"
png
\"
| 截图文件格式，目前仅支持 'png' |
\n
| success | TakeSnapshotSuccessCallback | 否 | - | 接口调用成功的回调函数 |
\n
| fail | TakeSnapshotFailCallback | 否 | - | 接口调用失败的回调函数 |
\n
| complete | TakeSnapshotCompleteCallback | 否 | - | 接口调用结束的回调函数（调用成功、失败都会执行） |
\n
"
},
"DOMRect"
:
{
"name"
:
"## DOMRect"
,
"description"
:
"
\r\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 | 是 | #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 | 是 | #000 (黑色) | 设置边框的颜色 |
\n
| textAlign | string | 是 | left | 设置文本的对齐方式，可取值：`left`左对齐；`center`居中对齐；`right`右对齐。 |
\n
"
,
"methods"
:
{
"beginPath"
:
{
"name"
:
"#### beginPath() @beginpath"
,
"description"
:
"
\r\n
创建一个新的空路径"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"arc"
:
{
"name"
:
"#### arc(x, y, radius, startAngle, endAngle, anticlockwise?) @arc"
,
"description"
:
"
\r\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 | 否 | true | 圆弧绘制方向，true：逆时针绘制，false：顺时针绘制。 |"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"moveTo"
:
{
"name"
:
"#### moveTo(x, y) @moveto"
,
"description"
:
"
\r\n
将一个新的路径的起始点移动到 (x，y) 坐标"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| x | number | 是 | - | 点的X轴坐标 |
\n
| y | number | 是 | - | 点的Y轴坐标 |"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"rect"
:
{
"name"
:
"#### rect(x, y, width, height) @rect"
,
"description"
:
"
\r\n
创建一个矩形路径"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| x | number | 是 | - | 矩形起点的X轴坐标 |
\n
| y | number | 是 | - | 矩形起点的Y轴坐标 |
\n
| width | number | 是 | - | 矩形宽度 |
\n
| height | number | 是 | - | 矩形高度 |"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"lineTo"
:
{
"name"
:
"#### lineTo(x, y) @lineto"
,
"description"
:
"
\r\n
将路径的最后一个点连接到 (x，y) 坐标"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| x | number | 是 | - | 线终点的X轴坐标 |
\n
| y | number | 是 | - | 线终点的Y轴坐标 |"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"closePath"
:
{
"name"
:
"#### closePath() @closepath"
,
"description"
:
"
\r\n
闭合路径，将最后一个点与起点连接起来。如果图形已经封闭，或者只有一个点，那么此方法不会产生任何效果。"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"stroke"
:
{
"name"
:
"#### stroke() @stroke"
,
"description"
:
"
\r\n
绘制当前或已经存在的路径的边框。"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"strokeRect"
:
{
"name"
:
"#### strokeRect(x, y, width, height) @strokerect"
,
"description"
:
"
\r\n
绘制一个矩形框"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| x | number | 是 | - | 矩形起点的X轴坐标 |
\n
| y | number | 是 | - | 矩形起点的Y轴坐标 |
\n
| width | number | 是 | - | 矩形宽度 |
\n
| height | number | 是 | - | 矩形高度 |"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"strokeText"
:
{
"name"
:
"#### strokeText(text, x, y) @stroketext"
,
"description"
:
"
\r\n
绘制空心字符"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| text | string | 是 | - | 要绘制的字符 |
\n
| x | number | 是 | - | 字符开始绘制的X轴坐标 |
\n
| y | number | 是 | - | 字符开始绘制的Y轴坐标 |"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"fill"
:
{
"name"
:
"#### fill(fillRule?) @fill"
,
"description"
:
"
\r\n
填充当前或已存在的路径"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| fillRule | string | 否 | nonzero | 填充规则。可取值：`nonzero`非零环绕规则；`evenodd`奇偶环绕规则。 |"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"fillRect"
:
{
"name"
:
"#### fillRect(x, y, width, height) @fillrect"
,
"description"
:
"
\r\n
绘制一个实心矩形"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| x | number | 是 | - | 矩形起点的X轴坐标 |
\n
| y | number | 是 | - | 矩形起点的Y轴坐标 |
\n
| width | number | 是 | - | 矩形宽度 |
\n
| height | number | 是 | - | 矩形高度 |"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"fillText"
:
{
"name"
:
"#### fillText(text, x, y) @filltext"
,
"description"
:
"
\r\n
绘制实心字符"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| text | string | 是 | - | 要绘制的字符 |
\n
| x | number | 是 | - | 字符开始绘制的X轴坐标 |
\n
| y | number | 是 | - | 字符开始绘制的Y轴坐标 |"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"reset"
:
{
"name"
:
"#### reset() @reset"
,
"description"
:
"
\r\n
清空绘制数据"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"update"
:
{
"name"
:
"#### update() @update"
,
"description"
:
"
\r\n
将所有绘制内容更新到画布上"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"setLineDash"
:
{
"name"
:
"#### setLineDash(segments) @setlinedash"
,
"description"
:
"
\r\n
设置虚线样式"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| segments | number[
\\
] | 是 | - | 一组描述交替绘制线段和间距长度的数字。 |"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"bezierCurveTo"
:
{
"name"
:
"#### bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) @beziercurveto"
,
"description"
:
"
\r\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 坐标 |"
,
"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
```html
\n
<template>
\r\n
<!-- #ifdef APP -->
\r\n
<scroll-view style=
\"
flex: 1
\"
>
\r\n
<!-- #endif -->
\r\n
<view>
\r\n
<view id=
\"
draw-text-view
\"
style=
\"
width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;
\"
></view>
\r\n
<view id=
\"
draw-line-view
\"
style=
\"
width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;
\"
></view>
\r\n
<view id=
\"
draw-circle-view
\"
style=
\"
width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;
\"
></view>
\r\n
<view id=
\"
draw-dash-line
\"
style=
\"
width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;
\"
></view>
\r\n
<view id=
\"
draw-house
\"
style=
\"
width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;
\"
></view>
\r\n
<view id=
\"
draw-style
\"
style=
\"
width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;
\"
></view>
\r\n
<view id=
\"
draw-odd
\"
style=
\"
width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;
\"
></view>
\r\n
<view id=
\"
draw-arcto
\"
style=
\"
width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;
\"
></view>
\r\n
</view>
\r\n
<!-- #ifdef APP -->
\r\n
</scroll-view>
\r\n
<!-- #endif -->
\r\n
</template>
\r\n\r\n
<script lang=
\"
uts
\"
>
\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\r\n
</style>
\r\n\n
```"
},
"CustomEvent"
:
{
"name"
:
"## CustomEvent"
,
"description"
:
""
,
"extends"
:
"```mermaid
\n
classDiagram
\n\n
Event <|-- CustomEvent : Extend
\n
```"
,
"param"
:
"
\n
### 构造函数
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 | - | - |
\n
| options | any | 是 | - | - |
\n\n
### CustomEvent 属性值 @customevent-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| detail | T | 是 | - | - |
\n
| type | string | 是 | - | 事件类型 |
\n
| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |
\n
| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |
\n
| timeStamp | number | 是 | - | 事件发生时的时间戳 |
\n
"
,
"methods"
:
{
"stopPropagation"
:
{
"name"
:
"#### stopPropagation() @stoppropagation"
,
"description"
:
"
\r\n
阻止当前事件的进一步传播"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"preventDefault"
:
{
"name"
:
"#### preventDefault() @preventdefault"
,
"description"
:
"
\r\n
阻止当前事件的默认行为"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
}
}
},
"MouseEvent"
:
{
"name"
:
"## MouseEvent"
,
"description"
:
""
,
"extends"
:
"```mermaid
\n
classDiagram
\n\n
Event <|-- MouseEvent : Extend
\n
```"
,
"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
| type | string | 是 | - | 事件类型 |
\n
| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |
\n
| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |
\n
| timeStamp | number | 是 | - | 事件发生时的时间戳 |
\n
"
,
"methods"
:
{
"stopPropagation"
:
{
"name"
:
"#### stopPropagation() @stoppropagation"
,
"description"
:
"
\r\n
阻止当前事件的进一步传播"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"preventDefault"
:
{
"name"
:
"#### preventDefault() @preventdefault"
,
"description"
:
"
\r\n
阻止当前事件的默认行为"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
}
}
},
"TouchEvent"
:
{
"name"
:
"## TouchEvent"
,
"description"
:
""
,
"extends"
:
"```mermaid
\n
classDiagram
\n\n
Event <|-- TouchEvent : Extend
\n
```"
,
"param"
:
"
\n
### TouchEvent 属性值 @touchevent-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| touches | Array
\\
<[Touch](/component/common#touch)
\\
> | 是 | - | 当前停留在屏幕中的触摸点信息的数组 |
\n
| changedTouches | Array
\\
<[Touch](/component/common#touch)
\\
> | 是 | - | 当前变化的触摸点信息的数组 |
\n
| type | string | 是 | - | 事件类型 |
\n
| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |
\n
| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |
\n
| timeStamp | number | 是 | - | 事件发生时的时间戳 |
\n
"
,
"methods"
:
{
"stopPropagation"
:
{
"name"
:
"#### stopPropagation() @stoppropagation"
,
"description"
:
"
\r\n
阻止当前事件的进一步传播"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"preventDefault"
:
{
"name"
:
"#### preventDefault() @preventdefault"
,
"description"
:
"
\r\n
阻止当前事件的默认行为"
,
"param"
:
""
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
}
}
},
"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 | 否 | - | 返回当前触摸点按下的压力大小 |
\n
"
},
"UniError"
:
{
"name"
:
"## UniError"
,
"description"
:
"
\r\n
uni api统一错误信息对象 "
,
"extends"
:
"```mermaid
\n
classDiagram
\n\n
Error <|-- UniError : Extend
\n
```"
,
"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 | 否 | - | 错误信息中包含的数据 |
\n
| cause | [Error](https://uniapp.dcloud.net.cn/tutorial/err-spec.html#unierror) | 否 | - | 源错误信息，可以包含多个错误，详见SourceError |
\n
| name | string | 是 | - | - |
\n
| message | string | 是 | - | - |
\n
"
},
"Error"
:
{
"name"
:
"## Error"
,
"description"
:
"
\r\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) | 否 | - | - |
\n
"
},
"general-attribute"
:
{
"example"
:
"### 示例
\n
> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/general-attribute/general-attribute.uvue)
\n
```html
\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
<script lang=
\"
uts
\"
>
\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 Element
\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
if (!generalTarget.classList.includes('general-class')) {
\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 Element
\r\n
this.changeHeightByRefText = '已通过 ref 修改高度'
\r\n
generalTarget.style.setProperty('height', '200px')
\r\n
}
\r\n
},
\r\n
}
\r\n
</script>
\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
```"
},
"general-event"
:
{
"example"
:
"### 示例
\n
> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/general-event/general-event.uvue)
\n
```html
\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
<script lang=
\"
uts
\"
>
\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 MouseEvent | null,
\r\n
onClickTime: 0,
\r\n
clickEvent: null as MouseEvent | 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 : MouseEvent) {
\r\n
this.tapEvent = e
\r\n
this.onTapTime = Date.now()
\r\n
console.log('onTap')
\r\n
},
\r\n
onClick(e : MouseEvent) {
\r\n
this.clickEvent = e
\r\n
this.onClickTime = Date.now()
\r\n
console.log('onClick')
\r\n
},
\r\n
},
\r\n
}
\r\n
</script>
\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
```"
}
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑！
取消
想要评论请
注册
或
登录
