Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-zh
提交
114db8ce
unidocs-zh
项目概览
DCloud
/
unidocs-zh
通知
3182
Star
105
Fork
807
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
93
列表
看板
标记
里程碑
合并请求
69
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
93
Issue
93
列表
看板
标记
里程碑
合并请求
69
合并请求
69
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
114db8ce
编写于
10月 19, 2023
作者:
G
git_robot
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
更新 customTypeJson.json
上级
84553bf4
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
1 addition
and
1 deletion
+1
-1
docs/.vuepress/utils/customTypeJson.json
docs/.vuepress/utils/customTypeJson.json
+1
-1
未找到文件。
docs/.vuepress/utils/customTypeJson.json
浏览文件 @
114db8ce
{
"Event"
:{
"name"
:
"## Event"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
"
\n
### 构造函数
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 | - | - |
\n
| eventInit | UTSJSONObject | 是 | - | - |
\n\n
### Event 属性值 @event-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 | - | 事件类型 |
\n
| target | Element | 是 | - | 触发事件的组件 |
\n
| currentTarget | Element | 是 | - | 当前组件 |
\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 | 否 |
\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
| firstChild | Element | 否 | - | 获取当前元素的的第一个子元素，如果元素是无子元素，则返回 null。 |
\n
| lastChild | Element | 否 | - | 获取当前元素的最后一个子元素，如果没有子元素，则返回 null。 |
\n
| parentElement | Element | 否 | - | 获取当前元素在 DOM 树中的父元素，如果没有父元素（如未添加到DOM树中），则返回null。 |
\n
| previousSibling | Element | 否 | - | 获取当前元素的前一个同级元素，没有则返回null。 |
\n
| nextElementSibling | Element | 否 | - | 获取在 DOM 树中紧跟在其后面的同级元素，如果指定的元素为最后一个元素，则返回 null。 |
\n
| children | Array
\\\\
<Element
\\
> | 是 | - | 获取当前元素包含的子元素的集合 |
\n
| tagName | string | 是 | - | 获取当前元素的标签名 |
\n
| dataset | Map
\\\\
<string, any> | 是 | - | 获取元素上自定义数据属性（data-*）的集合 |
\n
| attributes | Map
\\\\
<string, any> | 是 | - | 获取元素上所有属性元素的集合 |
\n
| style | CSSStyleDeclaration | 是 | - | 获取元素的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 | 是 | - | 元素高度 单位px |
\n
| offsetHeight | number | 是 | - | 元素宽度 单位px |
\n
| ext | Map
\\\\
<string, any> | 是 | - | 扩展属性 |
\n
"
,
"methods"
:{
"takeSnapshot"
:{
"name"
:
"#### takeSnapshot(options) @takesnapshot"
,
"description"
:
"
\n
对当前组件子树进行截图"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| options | TakeSnapshotOptions | 是 | - | 组件截图的参数对象 |"
,
"returnValue"
:
""
,
"compatibility"
:
"##### takeSnapshot 兼容性
\n
| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |
\n
| :- | :- | :- | :- | :- | :- |
\n
| 5.0 | x | 3.9.3 | x | x | x |
\n
"
,
"tutorial"
:
""
},
"appendChild"
:{
"name"
:
"#### appendChild(aChild) @appendchild"
,
"description"
:
"
\n
将一个元素添加到指定父元素的子元素列表的末尾处。如果将被插入的元素已经存在于当前文档的文档树中，那么将会它从原先的位置移动到新的位置。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| aChild | Element | 是 | - | 插入子元素对象 |"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"insertBefore"
:{
"name"
:
"#### insertBefore(newChild, refChild?) @insertbefore"
,
"description"
:
"
\n
在参考元素之前插入一个拥有指定父元素的子元素。如果给定的子元素是对文档中现有元素的引用，insertBefore() 会将其从当前位置移动到新位置。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| newChild | Element | 是 | - | 插入子元素对象 |
\n
| refChild | Element | 否 | - | 已存在父元素的子元素对象 |"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"setAttribute"
:{
"name"
:
"#### setAttribute(key, value?) @setattribute"
,
"description"
:
"
\n
设置指定元素上的某个属性值。如果设置的属性已经存在，则更新该属性值；否则使用指定的名称和值添加一个新的属性。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | 属性名称 |
\n
| value | any | 否 | - | 属性值域 可为空 |"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"getAttribute"
:{
"name"
:
"#### getAttribute(key) @getattribute"
,
"description"
:
"
\n
获取元素指定的属性值，如果指定的属性不存在则返回null。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | 属性名称 |"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| any | 否 |
\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 |
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"getDrawableContext"
:{
"name"
:
"#### getDrawableContext() @getdrawablecontext"
,
"description"
:
"
\n
获取组件的绘制对象，仅uvue页面中的 view 组件支持，其它组件不支持则返回null。"
,
"param"
:
""
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| DrawableContext | 否 |
\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 | 是 | - | 被删除子元素对象 |"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 |
\n
| :- |
\n
| Element |
\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 | 是 | - | 事件返回对象 |"
,
"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
\"
\\\\
| HBuilderX.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
\"
\\\\
| HBuilderX.cssPropertyString | 是 | - | 要获取的CSS样式名称 |"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| 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 | 是 | #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 | 是 | #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>
\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 : Int = num.toInt() % 16;
\n
result = hexChars[remainder] + result;
\n
num = Math.floor(num.toInt() / 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
| CustomEventOptions | CustomEventOptions
\\\\
<T> | 是 | - | |
\n\n
### CustomEvent 属性值 @customevent-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| detail | T | 是 | - | - |
\n
| type | string | 是 | - | 事件类型 |
\n
| target | Element | 是 | - | 触发事件的组件 |
\n
| currentTarget | Element | 是 | - | 当前组件 |
\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"
:
""
}}},
"CustomEventOptions"
:{
"name"
:
"## CustomEventOptions"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
"
\n
### 构造函数
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| detail | T | 是 | - | - |
\n\n
### CustomEventOptions 属性值 @customeventoptions-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| detail | T | 是 | - | - |
\n
"
},
"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 | 是 | - | 触发事件的组件 |
\n
| currentTarget | Element | 是 | - | 当前组件 |
\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
\\
> | 是 | - | 当前停留在屏幕中的触摸点信息的数组 |
\n
| changedTouches | Array
\\\\
<Touch
\\
> | 是 | - | 当前变化的触摸点信息的数组 |
\n
| type | string | 是 | - | 事件类型 |
\n
| target | Element | 是 | - | 触发事件的组件 |
\n
| currentTarget | Element | 是 | - | 当前组件 |
\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 | 否 | - | 源错误信息，可以包含多个错误，详见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 | 是 | - | - |
\n\n
### Error 属性值 @error-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| name | string | 是 | - | - |
\n
| message | string | 是 | - | - |
\n
| cause | Error | 否 | - | - |
\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
const classList = generalTarget.ext['classList'] as string[]
\n
if (!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
```"
}}
\ No newline at end of file
{
"Event"
:{
"name"
:
"## Event"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
"
\n
### 构造函数
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 | - | - |
\n
| eventInit | UTSJSONObject | 是 | - | - |
\n\n
### Event 属性值 @event-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| type | string | 是 | - | 事件类型 |
\n
| target | Element | 是 | - | 触发事件的组件 |
\n
| currentTarget | Element | 是 | - | 当前组件 |
\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 | 否 |
\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
| firstChild | Element | 否 | - | 获取当前元素的的第一个子元素，如果元素是无子元素，则返回 null。 |
\n
| lastChild | Element | 否 | - | 获取当前元素的最后一个子元素，如果没有子元素，则返回 null。 |
\n
| parentElement | Element | 否 | - | 获取当前元素在 DOM 树中的父元素，如果没有父元素（如未添加到DOM树中），则返回null。 |
\n
| previousSibling | Element | 否 | - | 获取当前元素的前一个同级元素，没有则返回null。 |
\n
| nextElementSibling | Element | 否 | - | 获取在 DOM 树中紧跟在其后面的同级元素，如果指定的元素为最后一个元素，则返回 null。 |
\n
| children | Array
\\\\
<Element
\\
> | 是 | - | 获取当前元素包含的子元素的集合 |
\n
| tagName | string | 是 | - | 获取当前元素的标签名 |
\n
| dataset | Map
\\\\
<string, any> | 是 | - | 获取元素上自定义数据属性（data-*）的集合 |
\n
| attributes | Map
\\\\
<string, any> | 是 | - | 获取元素上所有属性元素的集合 |
\n
| style | CSSStyleDeclaration | 是 | - | 获取元素的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 | 是 | - | 元素高度 单位px |
\n
| offsetHeight | number | 是 | - | 元素宽度 单位px |
\n
| ext | Map
\\\\
<string, any> | 是 | - | 扩展属性 |
\n
"
,
"methods"
:{
"takeSnapshot"
:{
"name"
:
"#### takeSnapshot(options) @takesnapshot"
,
"description"
:
"
\n
对当前组件子树进行截图"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| options | TakeSnapshotOptions | 是 | - | 组件截图的参数对象 |"
,
"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 | 是 | - | 插入子元素对象 |"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"insertBefore"
:{
"name"
:
"#### insertBefore(newChild, refChild?) @insertbefore"
,
"description"
:
"
\n
在参考元素之前插入一个拥有指定父元素的子元素。如果给定的子元素是对文档中现有元素的引用，insertBefore() 会将其从当前位置移动到新位置。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| newChild | Element | 是 | - | 插入子元素对象 |
\n
| refChild | Element | 否 | - | 已存在父元素的子元素对象 |"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"setAttribute"
:{
"name"
:
"#### setAttribute(key, value?) @setattribute"
,
"description"
:
"
\n
设置指定元素上的某个属性值。如果设置的属性已经存在，则更新该属性值；否则使用指定的名称和值添加一个新的属性。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | 属性名称 |
\n
| value | any | 否 | - | 属性值域 可为空 |"
,
"returnValue"
:
""
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"getAttribute"
:{
"name"
:
"#### getAttribute(key) @getattribute"
,
"description"
:
"
\n
获取元素指定的属性值，如果指定的属性不存在则返回null。"
,
"param"
:
"##### 参数
\n\n
| 名称 | 类型 | 必填 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| key | string | 是 | - | 属性名称 |"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| any | 否 |
\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 |
\n
"
,
"compatibility"
:
""
,
"tutorial"
:
""
},
"getDrawableContext"
:{
"name"
:
"#### getDrawableContext() @getdrawablecontext"
,
"description"
:
"
\n
获取组件的绘制对象，仅uvue页面中的 view 组件支持，其它组件不支持则返回null。"
,
"param"
:
""
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| DrawableContext | 否 |
\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 | 是 | - | 被删除子元素对象 |"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 |
\n
| :- |
\n
| Element |
\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 | 是 | - | 事件返回对象 |"
,
"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
\"
\\\\
| HBuilderX.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
\"
\\\\
| HBuilderX.cssPropertyString | 是 | - | 要获取的CSS样式名称 |"
,
"returnValue"
:
"##### 返回值
\n\n
| 类型 | 必备 |
\n
| :- | :- |
\n
| 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 | 是 | #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 | 是 | #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>
\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 : Int = num.toInt() % 16;
\n
result = hexChars[remainder] + result;
\n
num = Math.floor(num.toInt() / 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
| CustomEventOptions | CustomEventOptions
\\\\
<T> | 是 | - | |
\n\n
### CustomEvent 属性值 @customevent-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| detail | T | 是 | - | - |
\n
| type | string | 是 | - | 事件类型 |
\n
| target | Element | 是 | - | 触发事件的组件 |
\n
| currentTarget | Element | 是 | - | 当前组件 |
\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"
:
""
}}},
"CustomEventOptions"
:{
"name"
:
"## CustomEventOptions"
,
"description"
:
""
,
"extends"
:
""
,
"param"
:
"
\n
### 构造函数
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| detail | T | 是 | - | - |
\n\n
### CustomEventOptions 属性值 @customeventoptions-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| detail | T | 是 | - | - |
\n
"
},
"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 | 是 | - | 触发事件的组件 |
\n
| currentTarget | Element | 是 | - | 当前组件 |
\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
\\
> | 是 | - | 当前停留在屏幕中的触摸点信息的数组 |
\n
| changedTouches | Array
\\\\
<Touch
\\
> | 是 | - | 当前变化的触摸点信息的数组 |
\n
| type | string | 是 | - | 事件类型 |
\n
| target | Element | 是 | - | 触发事件的组件 |
\n
| currentTarget | Element | 是 | - | 当前组件 |
\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 | 否 | - | 源错误信息，可以包含多个错误，详见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 | 是 | - | - |
\n\n
### Error 属性值 @error-values
\n
| 名称 | 类型 | 必备 | 默认值 | 描述 |
\n
| :- | :- | :- | :- | :- |
\n
| name | string | 是 | - | - |
\n
| message | string | 是 | - | - |
\n
| cause | Error | 否 | - | - |
\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
const classList = generalTarget.ext['classList'] as string[]
\n
if (!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
```"
}}
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑！
取消
想要评论请
注册
或
登录
