diff --git a/docs/.vuepress/utils/utsComJson.json b/docs/.vuepress/utils/utsComJson.json
index a69f420de8cbc40f4198c5fc80232ff6bb9630a2..1f009e07b23beb8bf9efdf12cc1dd7db994678e0 100644
--- a/docs/.vuepress/utils/utsComJson.json
+++ b/docs/.vuepress/utils/utsComJson.json
@@ -1 +1 @@
-{"view":{"name":"## view","description":"> 组件类型:UniViewElement \n\n 基本视图容器","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| hover-class | string([string.ClassString](/uts/data-type.md#ide-string)) | \"none\" | | 指定按下去的样式类。当 hover-class=\"none\" 时,没有点击态效果 |\n| hover-stop-propagation | boolean | false | | 指定是否阻止本节点的祖先节点出现点击态(祖先节点:指根节点到该节点路径上的所有节点都是这个节点的祖先节点) |\n| hover-start-time | number | 50 | | 按住后多久出现点击态,单位毫秒 |\n| hover-stay-time | number | 400 | | 手指松开后点击态保留时间,单位毫秒 |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/view/view.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/view/view\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/view/view\n\n>Template\n```vue\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n import { ItemType } from '@/components/enum-data/enum-data'\r\n export default {\r\n data() {\r\n return {\r\n hover_class: false,\r\n stop_propagation: false,\r\n start_time: 50,\r\n stay_time: 400,\r\n start_time_enum: [{ \"value\": 50, \"name\": \"50毫秒\" }, { \"value\": 200, \"name\": \"200毫秒\" }] as ItemType[],\r\n stay_time_enum: [{ \"value\": 400, \"name\": \"400毫秒\" }, { \"value\": 200, \"name\": \"200毫秒\" }] as ItemType[]\r\n }\r\n },\r\n methods: {\r\n change_hover_class_boolean(checked : boolean) {\r\n this.hover_class = checked\r\n },\r\n change_stop_propagation_boolean(checked : boolean) {\r\n this.stop_propagation = checked\r\n },\r\n radio_change_start_time_enum(time : number) {\r\n this.start_time = time\r\n },\r\n radio_change_stay_time_enum(time : number) {\r\n this.stay_time = time\r\n },\r\n },\r\n }\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.view)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/view.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=view&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=view&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=view&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=view&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=view&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=view)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=view&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"scroll-view":{"name":"## scroll-view","description":"> 组件类型:UniScrollViewElement \n\n 可滚动视图容器","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| type | string | - | | 渲染模式,可取值 nested |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| nested | | 嵌套模式。用于处理父子 scroll-view 间的嵌套滚动,子节点只能是 nested-scroll-header nested-scroll-body 组件或自定义 refresher |\n| direction | string | \"vertical\" | | 滚动方向,可取值 none、all、horizontal、vertical,默认值vertical |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| none | | 禁止滚动 |\n@| all | | 横向竖向都可滚动 app端不支持 |\n@| horizontal | | 横向滚动 |\n@| vertical | | 竖向滚动 |\n| associative-container | string | \"\" | | 关联的滚动容器 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| nested-scroll-view | | 嵌套滚动 |\n| enable-back-to-top | boolean | false | | iOS点击顶部状态栏滚动条返回顶部,只支持竖向 |\n| bounces | boolean | true | | 控制是否回弹效果 优先级高于rebound |\n| upper-threshold | number | 50 | | 距顶部/左边多远时(单位px),触发 scrolltoupper 事件 |\n| lower-threshold | number | 50 | | 距底部/右边多远时(单位px),触发 scrolltolower 事件 |\n| scroll-top | number | 0 | | 设置竖向滚动条位置 |\n| scroll-left | number | 0 | | 设置横向滚动条位置 |\n| scroll-into-view | string([string.IDString](/uts/data-type.md#ide-string)) | - | | 值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素起始位置 |\n| scroll-with-animation | boolean | false | | 是否在设置滚动条位置时使用滚动动画,设置false没有滚动动画 |\n| refresher-enabled | boolean | false | | 开启下拉刷新,暂时不支持scroll-x = true横向刷新 |\n| refresher-threshold | number | 45 | | 设置下拉刷新阈值 |\n| refresher-max-drag-distance | number | - | | 设置下拉最大拖拽距离(单位px),默认是下拉刷新控件高度的2.5倍 |\n| refresher-default-style | string | \"black\" | | 设置下拉刷新默认样式,支持设置 black \\| white \\| none, none 表示不使用默认样式 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| black | | 深颜色雪花样式 |\n@| white | | 浅白色雪花样式 |\n@| none | | 不使用默认样式 |\n| refresher-background | string([string.ColorString](/uts/data-type.md#ide-string)) | \"transparent\" | | 设置下拉刷新区域背景颜色,默认透明 |\n| refresher-triggered | boolean | false | | 设置当前下拉刷新状态,true 表示下拉刷新已经被触发,false 表示下拉刷新未被触发 |\n| show-scrollbar | boolean | true | | 控制是否出现滚动条 |\n| custom-nested-scroll | boolean | false | | 子元素是否开启嵌套滚动 将滚动事件与父元素协商处理 |\n| nested-scroll-child | string([string.IDString](/uts/data-type.md#ide-string)) | \"\" | | 嵌套滚动子元素的id属性,不支持ref,scroll-view惯性滚动时会让对应id元素视图进行滚动,子元素滚动时会触发scroll-view的nestedprescroll事件,嵌套子元素需要设置custom-nested-scroll = true |\n| @refresherpulling | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | | 下拉刷新控件被下拉 |\n| @refresherrefresh | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | | 下拉刷新被触发 |\n| @refresherrestore | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | | 下拉刷新被复位 |\n| @refresherabort | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | | 下拉刷新被中止 |\n| @scrolltoupper | (event: [UniScrollToUpperEvent](#uniscrolltoupperevent)) => void | - | | 滚动到顶部/左边,会触发 scrolltoupper 事件 |\n| @scrolltolower | (event: [UniScrollToLowerEvent](#uniscrolltolowerevent)) => void | - | | 滚动到底部/右边,会触发 scrolltolower 事件 |\n| @scroll | (event: [UniScrollEvent](#uniscrollevent)) => void | - | | 滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |\n| @scrollend | (event: [UniScrollEvent](#uniscrollevent)) => void | - | | 滚动结束时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |\n| @startnestedscroll | (event: [UniStartNestedScrollEvent](#unistartnestedscrollevent)) => Boolean | - | | 子元素开始滚动时触发, return true表示与子元素开启滚动协商 默认return false! event = {node} |\n| @nestedprescroll | (event: [UniNestedPreScrollEvent](#uninestedprescrollevent)) => void | - | | 子元素滚动时触发,可执行event.consumed(x,y)告知子元素deltaX、deltaY各消耗多少。子元素将执行差值后的deltaX、deltaY滚动距离。不执行consumed(x,y)则表示父元素不消耗deltaX、deltaY。event = {deltaX, deltaY} |\n| @stopnestedscroll | (event: [UniStopNestedScrollEvent](#unistopnestedscrollevent)) => void | - | | 子元素滚动结束或意外终止时触发 |\n| ~~rebound~~ | boolean | true | | 控制是否回弹效果。已废弃,请改用bounces |\n| ~~scroll-y~~ | boolean | true | | 允许纵向滚动,不支持同时设置scroll-x属性为true,同时设置true时scroll-y生效。已废弃,请改用direction |\n| ~~scroll-x~~ | boolean | false | | 允许横向滚动,不支持同时设置scroll-y属性为true,同时设置true时scroll-y生效。已废弃,请改用direction |","event":"\n### 事件\n#### UniRefresherEvent\n\n```mermaid\ngraph LR\n \nUniRefresherEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniRefresherEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniRefresherEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| dy | number | 是 | - | - | - |\n\n\n#### UniScrollToUpperEvent\n\n```mermaid\ngraph LR\n \nUniScrollToUpperEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniScrollToUpperEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniScrollToUpperEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| direction | string | 是 | - | - | 滚动方向 top 或 left |\n\n\n#### UniScrollToLowerEvent\n\n```mermaid\ngraph LR\n \nUniScrollToLowerEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniScrollToLowerEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniScrollToLowerEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| direction | string | 是 | - | - | 滚动方向 bottom 或 right |\n\n\n#### UniScrollEvent\n\n```mermaid\ngraph LR\n \nUniScrollEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniScrollEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniScrollEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| scrollTop | number | 是 | - | - | 竖向滚动的距离 |\n@| scrollLeft | number | 是 | - | - | 横向滚动的距离 |\n@| scrollHeight | number | 是 | - | - | 滚动区域的高度 |\n@| scrollWidth | number | 是 | - | - | 滚动区域的宽度 |\n@| deltaY | number | 是 | - | - | 当次滚动事件竖向滚动量 |\n@| deltaX | number | 是 | - | - | 当次滚动事件横向滚动量 |\n\n\n#### UniStartNestedScrollEvent\n\n```mermaid\ngraph LR\n \nUniStartNestedScrollEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniStartNestedScrollEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| node | [UniElement](/dom/unielement.md) | 是 | - | - | 开始滚动子节点对象 |\n| isTouch | boolean | 是 | - | | 是否由触摸行为发生的Event |\n\n\n#### UniNestedPreScrollEvent\n\n```mermaid\ngraph LR\n \nUniNestedPreScrollEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniNestedPreScrollEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| deltaX | number | 是 | - | - | x轴滚动距离 |\n| deltaY | number | 是 | - | - | y轴滚动距离 |\n| isTouch | boolean | 是 | - | | 是否由触摸行为发生的Event |\n\n\n##### UniNestedPreScrollEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| consumed | (consumedX: number, consumedY: number) => void | 是 | - | - | 通知到子节点x,y轴滚动距离的消耗 |\n\n#### UniStopNestedScrollEvent\n\n```mermaid\ngraph LR\n \nUniStopNestedScrollEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniStopNestedScrollEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| isTouch | boolean | 是 | - | - | 是否由触摸行为发生的Event |\n\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/scroll-view/scroll-view.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/scroll-view/scroll-view\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/scroll-view/scroll-view\n\n>Template\n```vue\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Vertical Scroll\r\n 纵向滚动\r\n \r\n \r\n \r\n A\r\n B\r\n C\r\n \r\n \r\n \r\n 点击这里返回顶部\r\n \r\n\r\n \r\n Horizontal Scroll\r\n 横向滚动\r\n \r\n \r\n \r\n A\r\n B\r\n C\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n type ScrollEventTest = {\r\n type : string;\r\n target : UniElement | null;\r\n currentTarget : UniElement | null;\r\n direction ?: string\r\n }\r\n export default {\r\n data() {\r\n return {\r\n scrollTop: 0,\r\n oldScrollTop: 0,\r\n scrollLeft: 120,\r\n showScrollbar: true,\r\n // 自动化测试\r\n isScrollTest: '',\r\n isScrolltolowerTest: '',\r\n isScrolltoupperTest: '',\r\n scrollDetailTest: null as UniScrollEventDetail | null,\r\n scrollEndDetailTest: null as UniScrollEventDetail | null,\r\n }\r\n },\r\n methods: {\r\n upper: function (e : UniScrollToUpperEvent) {\r\n console.log('滚动到顶部/左边', e)\r\n this.checkEventTest({\r\n type: e.type,\r\n target: e.target,\r\n currentTarget: e.currentTarget,\r\n direction: e.detail.direction,\r\n } as ScrollEventTest, 'scrolltoupper')\r\n },\r\n lower: function (e : UniScrollToLowerEvent) {\r\n console.log('滚动到底部/右边', e)\r\n this.checkEventTest({\r\n type: e.type,\r\n target: e.target,\r\n currentTarget: e.currentTarget,\r\n direction: e.detail.direction,\r\n } as ScrollEventTest, 'scrolltolower')\r\n },\r\n scroll: function (e : UniScrollEvent) {\r\n this.scrollDetailTest = e.detail\r\n this.checkEventTest({\r\n type: e.type,\r\n target: e.target,\r\n currentTarget: e.currentTarget\r\n } as ScrollEventTest, 'scroll')\r\n this.oldScrollTop = e.detail.scrollTop\r\n },\r\n end: function (e : UniScrollEvent) {\r\n console.log('滚动结束时触发', e)\r\n this.scrollEndDetailTest = e.detail\r\n this.checkEventTest({\r\n type: e.type,\r\n target: e.target,\r\n currentTarget: e.currentTarget\r\n } as ScrollEventTest, 'scrollend')\r\n },\r\n goTop: function () {\r\n // 解决view层不同步的问题\r\n this.scrollTop = this.oldScrollTop\r\n this.$nextTick(function () {\r\n this.scrollTop = 0\r\n })\r\n uni.showToast({\r\n icon: 'none',\r\n title: '纵向滚动 scrollTop 值已被修改为 0',\r\n })\r\n },\r\n // 自动化测试专用(由于事件event参数对象中存在循环引用,在ios端JSON.stringify报错,自动化测试无法page.data获取)\r\n checkEventTest(e : ScrollEventTest, eventName : String) {\r\n const isPass = e.type === eventName && e.target instanceof UniElement && e.currentTarget instanceof UniElement;\r\n const result = isPass ? `${eventName}:Success` : `${eventName}:Fail`;\r\n switch (eventName) {\r\n case 'scroll':\r\n this.isScrollTest = result\r\n break;\r\n case 'scrolltolower':\r\n this.isScrolltolowerTest = result + `-${e.direction}`\r\n break;\r\n case 'scrolltoupper':\r\n this.isScrolltoupperTest = result + `-${e.direction}`\r\n break;\r\n default:\r\n break;\r\n }\r\n },\r\n // 自动化测试专用\r\n setVerticalScrollBy(y : number) {\r\n const element = uni.getElementById(\"verticalScrollView\")\r\n if (element != null) {\r\n element.scrollBy(0, y)\r\n }\r\n }\r\n },\r\n }\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.scroll-view)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/scroll-view.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=scroll-view&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=scroll-view&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=scroll-view&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=scroll-view&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=scroll-view&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=scroll-view)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=scroll-view&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"swiper-item":{"name":"## swiper-item","description":"> 组件类型:UniSwiperItemElement \n\n swiper的唯一合法子组件。每个swiper-item代表一个滑块。宽高自动设置为100%","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| item-id | string | - | | 该 swiper-item 的标识符 |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.swiper.swiper-item)\n- [参见uni-app相关文档](https://uniapp.dcloud.net.cn/component/swiper.html#swiper-item)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=swiper-item&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=swiper-item&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=swiper-item&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=swiper-item&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=swiper-item&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=swiper-item)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=swiper-item&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"swiper":{"name":"## swiper","description":"> 组件类型:UniSwiperElement \n\n 滑块视图容器","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| indicator-dots | boolean | false | | 是否显示面板指示点 |\n| indicator-color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"rgba(0, 0, 0, .3)\" | | 指示点颜色 |\n| indicator-active-color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#000000\" | | 当前选中的指示点颜色 |\n| disable-touch | boolean | false | | 是否禁止用户 touch 操作 |\n| autoplay | boolean | false | | 是否自动切换 |\n| current | number | 0 | | 当前所在滑块的 index |\n| current-item-id | string | - | | 当前所在滑块的 item-id ,不能与 current 被同时指定 |\n| interval | number | 3000 | | 自动切换时间间隔 |\n| duration | number | - | | 滑动动画时长 |\n| circular | boolean | false | | 是否采用衔接滑动 |\n| vertical | boolean | false | | 滑动方向是否为纵向 |\n| rebound | boolean | true | | 控制是否回弹效果 |\n| @change | (event: [UniSwiperChangeEvent](#uniswiperchangeevent)) => void | - | | current 改变时会触发 change 事件,event.detail = {current: current, source: source} |\n| @transition | (event: [UniSwiperTransitionEvent](#uniswipertransitionevent)) => void | - | | swiper-item 的位置发生改变时会触发 transition 事件,event.detail = {dx: dx, dy: dy} |\n| @animationfinish | (event: [UniSwiperAnimationFinishEvent](#uniswiperanimationfinishevent)) => void | - | | 动画结束时会触发 animationfinish 事件,event.detail = {current: current, source: source} |","event":"\n### 事件\n#### UniSwiperChangeEvent\n\n```mermaid\ngraph LR\n \nUniSwiperChangeEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniSwiperChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniSwiperChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| current | number | 是 | - | - | 发生change事件的滑块下标 |\n@| currentItemId | string | 否 | - | | 切换结束的 swiper-item 的 item-id 属性值 |\n@| source | string | 是 | - | - | autoplay 自动播放导致swiper变化;touch 用户划动引起swiper变化 |\n\n\n#### UniSwiperTransitionEvent\n\n```mermaid\ngraph LR\n \nUniSwiperTransitionEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniSwiperTransitionEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniSwiperTransitionEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| dx | number | 是 | - | - | 横向偏移量,单位是逻辑像素px |\n@| dy | number | 是 | - | - | 纵向偏移量,单位是逻辑像素px |\n\n\n#### UniSwiperAnimationFinishEvent\n\n```mermaid\ngraph LR\n \nUniSwiperAnimationFinishEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniSwiperAnimationFinishEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniSwiperAnimationFinishEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| current | number | 是 | - | - | 发生动画结束事件的滑块下标 |\n@| currentItemId | string | 否 | - | | 动画结束的 swiper-item 的 item-id 属性值 |\n@| source | string | 是 | - | - | autoplay 自动播放导致swiper变化;touch 用户划动引起swiper变化 |\n\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/swiper/swiper.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/swiper/swiper\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/swiper/swiper\n\n>Template\n```vue\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n A\r\n \r\n \r\n B\r\n \r\n \r\n C\r\n \r\n \r\n \r\n \r\n \r\n 是否显示面板指示点\r\n \r\n \r\n \r\n 是否自动切换\r\n \r\n \r\n \r\n 是否循环\r\n \r\n \r\n \r\n 是否显示rebound效果\r\n \r\n \r\n 间隔时间(毫秒)\r\n \r\n \r\n \r\n \r\n 定制指示器颜色\r\n \r\n \r\n \r\n 纵向\r\n \r\n \r\n \r\n 指定current为最后一个元素\r\n \r\n \r\n \r\n 指定current-item-id为最后一个元素\r\n \r\n \r\n \r\n 禁止用户 touch 操作\r\n \r\n \r\n \r\n swiperTransition 是否打印\r\n \r\n \r\n \r\n swiperAnimationfinish 是否打印\r\n \r\n \r\n \r\n swiperChange 是否打印\r\n \r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n type SwiperEventTest = {\r\n type : string;\r\n target : UniElement | null;\r\n currentTarget : UniElement | null;\r\n }\r\n export default {\r\n data() {\r\n return {\r\n background: ['color1', 'color2', 'color3'],\r\n dotsSelect: false,\r\n reboundSelect: false,\r\n autoplaySelect: false,\r\n circularSelect: false,\r\n indicatorColorSelect: false,\r\n verticalSelect: false,\r\n currentSelect: false,\r\n currentItemIdSelect: false,\r\n intervalSelect: 2000,\r\n indicatorColor: \"\",\r\n indicatorColorActive: \"\",\r\n currentVal: 0,\r\n currentItemIdVal: \"\",\r\n disableTouchSelect: false,\r\n swiperTransitionSelect: false,\r\n swiperAnimationfinishSelect: false,\r\n swiperChangeSelect: false,\r\n currentValChange: 0,\r\n // 自动化测试\r\n changeDetailTest: null as UniSwiperChangeEventDetail | null,\r\n transitionDetailTest: null as UniSwiperTransitionEventDetail | null,\r\n animationfinishDetailTest: null as UniSwiperAnimationFinishEventDetail | null,\r\n isChangeTest: '',\r\n isTransitionTest: '',\r\n isAnimationfinishTest: '',\n swipeX: 0,\n swipeY: 0\r\n }\r\n },\n onReady() {\n // 获取模拟滑动手势的起始点\n let ele = uni.getElementById(\"swiper-view\")\n let eleRect = ele?.getBoundingClientRect()\n this.swipeX = eleRect!.width - 10\n this.swipeY += eleRect!.y + uni.getSystemInfoSync().safeArea.top + 44 + 35\n },\r\n methods: {\n swipertouchStart(e: UniTouchEvent) {\n console.log(\"swiper touchstart\")\n },\n viewtouchStart(e: UniTouchEvent) {\n console.log(\"view touchstart:\")\n },\r\n swiperChange: function (e : UniSwiperChangeEvent) {\r\n this.changeDetailTest = e.detail\r\n this.checkEventTest({\r\n type: e.type,\r\n target: e.target,\r\n currentTarget: e.currentTarget\r\n } as SwiperEventTest, 'change')\r\n this.currentValChange = e.detail.current\r\n console.log(this.currentValChange)\r\n if (this.swiperChangeSelect) {\r\n console.log(\"swiperChange\")\r\n console.log(e)\r\n }\r\n },\r\n swiperTransition: function (e : UniSwiperTransitionEvent) {\r\n this.transitionDetailTest = e.detail\r\n this.checkEventTest({\r\n type: e.type,\r\n target: e.target,\r\n currentTarget: e.currentTarget\r\n } as SwiperEventTest, 'transition')\r\n if (this.swiperTransitionSelect) {\r\n console.log(\"swiperTransition\")\r\n console.log(e)\r\n }\r\n },\r\n swiperAnimationfinish: function (e : UniSwiperAnimationFinishEvent) {\r\n this.animationfinishDetailTest = e.detail\r\n this.checkEventTest({\r\n type: e.type,\r\n target: e.target,\r\n currentTarget: e.currentTarget\r\n } as SwiperEventTest, 'animationfinish')\r\n if (this.swiperAnimationfinishSelect) {\r\n console.log(\"swiperAnimationfinish\")\r\n console.log(e)\r\n }\r\n },\r\n // 自动化测试专用(由于事件event参数对象中存在循环引用,在ios端JSON.stringify报错,自动化测试无法page.data获取)\r\n checkEventTest(e : SwiperEventTest, eventName : String) {\r\n const isPass = e.type === eventName && e.target instanceof UniElement && e.currentTarget instanceof UniElement;\r\n const result = isPass ? `${eventName}:Success` : `${eventName}:Fail`;\r\n switch (eventName) {\r\n case 'change':\r\n this.isChangeTest = result\r\n break;\r\n case 'transition':\r\n this.isTransitionTest = result\r\n break;\r\n case 'animationfinish':\r\n this.isAnimationfinishTest = result\r\n break;\r\n default:\r\n break;\r\n }\r\n },\r\n dotsChange: function (e : UniSwitchChangeEvent) {\r\n this.dotsSelect = e.detail.value\r\n },\r\n swiperTransitionChange: function (e : UniSwitchChangeEvent) {\r\n this.swiperTransitionSelect = e.detail.value\r\n },\r\n swiperChangeChange: function (e : UniSwitchChangeEvent) {\r\n this.swiperChangeSelect = e.detail.value\r\n },\r\n swiperAnimationfinishChange: function (e : UniSwitchChangeEvent) {\r\n this.swiperAnimationfinishSelect = e.detail.value\r\n },\r\n autoplayChange: function (e : UniSwitchChangeEvent) {\r\n this.autoplaySelect = e.detail.value\r\n },\r\n verticalChange: function (e : UniSwitchChangeEvent) {\r\n this.verticalSelect = e.detail.value\r\n },\r\n disableTouchChange: function (e : UniSwitchChangeEvent) {\r\n this.disableTouchSelect = e.detail.value\r\n },\r\n currentItemIdChange: function (e : UniSwitchChangeEvent) {\r\n this.currentItemIdSelect = e.detail.value\r\n if (this.currentItemIdSelect) {\r\n this.currentItemIdVal = 'C'\r\n } else {\r\n this.currentItemIdVal = 'A'\r\n }\r\n },\r\n currentChange: function (e : UniSwitchChangeEvent) {\r\n this.currentSelect = e.detail.value\r\n if (this.currentSelect) {\r\n this.currentVal = 2\r\n } else {\r\n this.currentVal = 0\r\n }\r\n\r\n },\r\n circularChange: function (e : UniSwitchChangeEvent) {\r\n this.circularSelect = e.detail.value\r\n console.log(this.circularSelect)\r\n },\r\n reboundSelectChange: function (e : UniSwitchChangeEvent) {\r\n this.reboundSelect = e.detail.value\r\n console.log(this.reboundSelect)\r\n },\r\n sliderChange(e : UniSliderChangeEvent) {\r\n this.intervalSelect = e.detail.value\r\n },\r\n indicatorColorChange(e : UniSwitchChangeEvent) {\r\n this.indicatorColorSelect = e.detail.value\r\n if (this.indicatorColorSelect) {\r\n // 选择了定制指示器颜色\r\n this.indicatorColor = \"#ff00ff\"\r\n this.indicatorColorActive = \"#0000ff\"\r\n } else {\r\n // 没有选择颜色\r\n this.indicatorColor = \"\"\r\n this.indicatorColorActive = \"\"\r\n }\r\n }\r\n }\r\n }\r\n\n```\n\n:::","children":"### 子组件 @children-tags \n - [swiper-item](swiper-item.md)","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.swiper.swiper)\n- [参见uni-app相关文档](https://uniapp.dcloud.net.cn/component/swiper.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=swiper&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=swiper&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=swiper&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=swiper&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=swiper&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=swiper)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=swiper&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"match-media":{"name":"## match-media","description":"media query 匹配检测节点","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| width | number | - | | 页面宽度(px 为单位) |\n| min-width | number | - | | 页面最小宽度(px 为单位) |\n| max-width | number | - | | 页面最大宽度(px 为单位) |\n| height | number | - | | 页面高度(px 为单位) |\n| min-height | number | - | | 页面最小高度(px 为单位) |\n| max-height | number | - | | 页面最大高度(px 为单位) |\n| orientation | string | - | | 屏幕方向(landscape 或 portrait) |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| vertical | - | - |\n@| horizontal | - | - |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.match-media)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/match-media.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=match-media&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=match-media&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=match-media&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=match-media&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=match-media&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=match-media)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=match-media&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"movable-area":{"name":"## movable-area","description":"movable-view 的可移动区域","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | x | x |\n","attribute":"","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.movable.movable-area)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/movable-area.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=movable-area&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=movable-area&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=movable-area&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=movable-area&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=movable-area&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=movable-area)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=movable-area&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"movable-view":{"name":"## movable-view","description":"可移动的视图容器,在页面中可以拖拽滑动","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| direction | string | - | | movable-view的移动方向,属性值有all、vertical、horizontal、none |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| all | - | - |\n@| vertical | - | - |\n@| horizontal | - | - |\n@| none | - | - |\n| inertia | boolean | - | | movable-view 是否带有惯性。 |\n| out-of-bounds | boolean | - | | 超过可移动区域后,movable-view 是否还可以移动。 |\n| x | string \\| number | - | | 定义 x 轴方向的偏移,如果 x 的值不在可移动范围内,会自动移动到可移动范围;改变 x 的值会触发动画。 |\n| y | string \\| number | - | | 定义 y 轴方向的偏移,如果 y 的值不在可移动范围内,会自动移动到可移动范围;改变 y 的值会触发动画。 |\n| damping | number | - | | 阻尼系数,用于控制 x 或 y 改变时的动画和过界回弹的动画,值越大移动越快。 |\n| friction | number | - | | 摩擦系数,用于控制惯性滑动的动画,值越大摩擦力越大,滑动越快停止;必须大于0,否则会被设置成默认值 2。 |\n| disabled | boolean | - | | 是否禁用。 |\n| scale | boolean | - | | 是否支持双指缩放,默认缩放手势生效区域是在 movable-view 内。 |\n| scale-min | number | - | | 定义缩放倍数最小值,默认为 0.5。 |\n| scale-max | number | - | | 定义缩放倍数最大值,默认为 10。 |\n| scale-value | number | - | | 定义缩放倍数,取值范围为 0.5 - 10 |\n| animation | boolean | - | | 是否使用动画,默认为 true。 |\n| @change | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 拖动过程中触发的事件,event.detail = {x: x, y: y, source: source}。其中source表示产生移动的原因,值可为touch(拖动)、touch-out-of-bounds(超出移动范围)、out-of-bounds(超出移动范围后的回弹)、friction(惯性)和空字符串(setData)。 |\n| @scale | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 缩放过程中触发的事件,event.detail = {x: x, y: y, scale: scale}。 |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/movable-view/movable-view.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/movable-view/movable-view\n\n>Template\n```vue\n\r\n \r\n \r\n \r\n \r\n 示例 1\r\n \\nmovable-view 区域小于 movable-area\r\n \r\n \r\n text\r\n \r\n \r\n 点击这里移动至 (30px, 30px)\r\n \r\n \r\n 示例 2\r\n \\nmovable-view区域大于movable-area\r\n \r\n \r\n text\r\n \r\n \r\n 示例 3\r\n \\n只可以横向移动\r\n \r\n \r\n text\r\n \r\n \r\n 示例 4\r\n \\n只可以纵向移动\r\n \r\n \r\n text\r\n \r\n \r\n 示例 5\r\n \\n可超出边界\r\n \r\n \r\n text\r\n \r\n \r\n 示例 6\r\n \\n带有惯性\r\n \r\n \r\n text\r\n \r\n \r\n 示例 7\r\n \\n可放缩\r\n \r\n \r\n text\r\n \r\n \r\n 点击这里放大3倍\r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n x: 0,\r\n y: 0,\r\n scale: 2,\r\n old: {\r\n x: 0,\r\n y: 0,\r\n scale: 2\r\n }\r\n }\r\n },\r\n methods: {\r\n tap: function (e) {\r\n // 解决view层不同步的问题\r\n this.x = this.old.x\r\n this.y = this.old.y\r\n this.$nextTick(function () {\r\n this.x = 30\r\n this.y = 30\r\n })\r\n },\r\n tap2() {\r\n // 解决view层不同步的问题\r\n this.scale = this.old.scale\r\n this.scale = this.old.scale\r\n this.$nextTick(function () {\r\n this.scale = 3\r\n })\r\n },\r\n onChange: function (e) {\r\n this.old.x = e.detail.x\r\n this.old.y = e.detail.y\r\n },\r\n onScale: function (e) {\r\n this.old.scale = e.detail.scale\r\n }\r\n }\r\n }\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.movable.movable-view)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/movable-view.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=movable-view&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=movable-view&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=movable-view&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=movable-view&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=movable-view&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=movable-view)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=movable-view&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"cover-view":{"name":"## cover-view","description":"覆盖在原生组件之上的文本视图,可覆盖的原生组件包括map、video、canvas、camera,只支持嵌套cover-view、cover-image","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | x | x |\n","attribute":"","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/cover-view/cover-view.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/cover-view/cover-view\n\n>Template\n```vue\n\r\n \r\n \r\n \r\n 注意:需要正确配置地图服务商的Key才能正常显示地图组件\r\n \r\n \r\n \r\n 简单的cover-view\r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n showMap: false,\r\n latitude: 39.909,\r\n longitude: 116.39742\r\n };\r\n },\r\n onLoad() {\r\n this.showMap = true\r\n }\r\n }\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.cover.cover-view)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/cover-view.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=cover-view&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=cover-view&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=cover-view&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=cover-view&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=cover-view&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=cover-view)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=cover-view&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"cover-image":{"name":"## cover-image","description":"覆盖在原生组件之上的图片视图,可覆盖的原生组件同cover-view,支持嵌套在cover-view里。","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| v-for | Any | - | | - |\n| v-if | Any | - | | - |\n| v-show | Any | - | | - |\n| src | string([string.ImageURIString](/uts/data-type.md#ide-string)) | - | | 图标路径,支持临时路径、网络地址(1.6.0起支持)。暂不支持base64格式。 |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.cover.cover-image)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/cover-image.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=cover-image&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=cover-image&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=cover-image&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=cover-image&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=cover-image&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=cover-image)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=cover-image&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"list-item":{"name":"## list-item","description":"> 组件类型:UniListItemElement \n\n list-view组件的唯一合法子组件。每个item是一行","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.02 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| type | number | 0 | | 对应list-item的类型 list-view 将对同类型条目进行复用,所以合理的类型拆分,可以很好地提升 list-view 性能 |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.list-view.list-item)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=list-item&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=list-item&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=list-item&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=list-item&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=list-item&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=list-item)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=list-item&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"sticky-header":{"name":"## sticky-header","description":"> 组件类型:UniStickyHeaderElement \n\n 吸顶布局容器
注意:暂时仅支持作为list-view、sticky-section的子节点, sticky-header不支持css样式!当一个容器视图设置多个sticky-header时,后一个sticky-header会停靠在前一个sticky-header的末尾处。","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.02 | 3.93 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| padding | array\\ | [0,0,0,0\\] | | 长度为 4 的数组,按 top、right、bottom、left 顺序指定内边距 |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/sticky-header/sticky-header.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/sticky-header/sticky-header\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/sticky-header/sticky-header\n\n>Template\n```vue\n\r\n \r\n \r\n \r\n \r\n \r\n {{i}}\r\n \r\n \r\n \r\n \r\n 向上滑动页面,体验sticky-header吸顶效果。\r\n \r\n \r\n \r\n \r\n \r\n {{name}}\r\n \r\n \r\n \r\n \r\n\r\n \r\n {{item}}\r\n \r\n \r\n\r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n sift_item: [\"排序\", \"筛选\"],\r\n list_item: [] as Array,\r\n refresher_enabled_boolean: true,\r\n refresher_triggered_boolean: false,\r\n scroll_top_input: 0\r\n }\r\n },\r\n onLoad() {\r\n let lists : Array = []\r\n for (let i = 0; i < 40; i++) {\r\n lists.push(\"item---\" + i)\r\n }\r\n this.list_item = lists\r\n },\r\n methods: {\r\n list_view_refresherrefresh() {\r\n console.log(\"下拉刷新被触发 \")\r\n this.refresher_triggered_boolean = true\r\n setTimeout(() => {\r\n this.refresher_triggered_boolean = false\r\n }, 1500)\r\n },\r\n confirm_scroll_top_input(value : number) {\r\n this.scroll_top_input = value\r\n },\r\n clickTH(index : number) {\r\n console.log(\"点击表头:\" + index);\r\n }\r\n }\r\n }\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.sticky.sticky-header)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=sticky-header&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=sticky-header&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=sticky-header&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=sticky-header&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=sticky-header&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=sticky-header)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=sticky-header&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"sticky-section":{"name":"## sticky-section","description":"> 组件类型:UniStickySectionElement \n\n 吸顶布局容器
注意:暂时仅支持作为list-view的子节点, sticky-section不支持css样式!","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.02 | 3.98 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| push-pinned-header | boolean | true | | sticky-section元素重叠时是否继续上推 |\n| padding | array\\ | [0,0,0,0\\] | | 长度为 4 的数组,按 top、right、bottom、left 顺序指定内边距 |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/sticky-section/sticky-section.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/sticky-section/sticky-section\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/sticky-section/sticky-section\n\n>Template\n```vue\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {{list.text}}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n export type sectionData = {\r\n name : string,\r\n list : sectionListItem[]\r\n }\r\n export type sectionListItem = {\r\n text : string\r\n }\r\n export default {\r\n data() {\r\n return {\r\n data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N'],\r\n sectionPadding: [0, 10, 0, 10] as Array,\r\n scrollIntoView: \"\",\r\n scrolling: false,\r\n sectionArray: [] as sectionData[],\r\n appendId: 0\r\n }\r\n },\r\n onLoad() {\r\n this.data.forEach(key => {\r\n const list = [] as sectionListItem[]\r\n for (let i = 1; i < 11; i++) {\r\n const item = { text: key + \"--item--content----\" + i } as sectionListItem\r\n list.push(item)\r\n }\r\n const data = { name: key, list: list } as sectionData\r\n this.sectionArray.push(data)\r\n }\r\n )\r\n },\r\n methods: {\r\n toTop() {\r\n this.scrollIntoView = \"\"\r\n uni.getElementById(\"list-view\")!.scrollTop = 0\r\n },\r\n //用于自动化测试\r\n listViewScrollByY(y : number) {\r\n const listview = this.$refs[\"list-view\"] as UniElement\r\n // listview.scrollBy(0, y)\r\n listview.scrollTop = y\r\n },\r\n gotoStickyHeader(id : string) {\r\n // #ifdef APP\r\n this.scrollIntoView = id\r\n // #endif\r\n // #ifdef WEB\r\n console.log(\"web端不支持该功能\")\r\n // #endif\r\n },\r\n onScroll() {\r\n this.scrolling = true\r\n },\r\n onScrollEnd() {\r\n this.scrolling = false\r\n //滚动后重置scrollIntoView = \"\"\r\n if (this.scrollIntoView != \"\") {\r\n this.scrollIntoView = \"\"\r\n }\r\n },\r\n appendSectionItem(index : number) {\r\n const data = this.sectionArray[index]\r\n this.appendId++\r\n const list = [\r\n { text: data.name + \"--item--content----new1--\" + this.appendId } as sectionListItem,\r\n { text: data.name + \"--item--content----new2--\" + this.appendId } as sectionListItem,\r\n { text: data.name + \"--item--content----new3--\" + this.appendId } as sectionListItem,\r\n { text: data.name + \"--item--content----new4--\" + this.appendId } as sectionListItem,\r\n { text: data.name + \"--item--content----new5--\" + this.appendId } as sectionListItem\r\n ] as sectionListItem[]\r\n data.list.unshift(...list)\r\n },\r\n deleteSection() {\r\n this.sectionArray.shift()\r\n }\r\n }\r\n }\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.sticky.sticky-section)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=sticky-section&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=sticky-section&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=sticky-section&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=sticky-section&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=sticky-section&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=sticky-section)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=sticky-section&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"list-view":{"name":"## list-view","description":"> 组件类型:UniListViewElement \n\n 列表组件","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.02 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| direction | string | \"vertical\" | | 滚动方向,可取值 none、horizontal、vertical,默认值vertical。注:iOS 平台仅支持vertical |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| none | | 禁止滚动 |\n@| horizontal | | 横向滚动 |\n@| vertical | | 竖向滚动 |\n| associative-container | string | \"\" | | 关联的滚动容器 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| nested-scroll-view | | 嵌套滚动 |\n| bounces | boolean | true | | 控制是否回弹效果 优先级高于rebound |\n| upper-threshold | number | 50 | | 距顶部/左边多远时(单位px),触发 scrolltoupper 事件 |\n| lower-threshold | number | 50 | | 距底部/右边多远时(单位px),触发 scrolltolower 事件 |\n| scroll-top | number | 0 | | 设置竖向滚动条位置 |\n| scroll-left | number | 0 | | 设置横向滚动条位置 |\n| show-scrollbar | boolean | true | | 控制是否出现滚动条 |\n| scroll-into-view | string([string.IDString](/uts/data-type.md#ide-string)) | - | | 值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素起始位置 |\n| scroll-with-animation | boolean | false | | 是否在设置滚动条位置时使用滚动动画,设置false没有滚动动画 |\n| refresher-enabled | boolean | false | | 开启下拉刷新,暂时不支持scroll-x = true横向刷新 |\n| refresher-threshold | number | 45 | | 设置下拉刷新阈值, 仅 refresher-default-style = 'none' 自定义样式下生效 |\n| refresher-max-drag-distance | number | - | | 设置下拉最大拖拽距离(单位px),默认是下拉刷新控件高度的2.5倍 |\n| refresher-default-style | string | \"black\" | | 设置下拉刷新默认样式,支持设置 black \\| white \\| none, none 表示不使用默认样式 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| black | | 深颜色雪花样式 |\n@| white | | 浅白色雪花样式 |\n@| none | | 不使用默认样式 |\n| refresher-background | string([string.ColorString](/uts/data-type.md#ide-string)) | \"transparent\" | | 设置下拉刷新区域背景颜色,默认透明 |\n| refresher-triggered | boolean | false | | 设置当前下拉刷新状态,true 表示下拉刷新已经被触发,false 表示下拉刷新未被触发 |\n| enable-back-to-top | boolean | false | | iOS点击顶部状态栏滚动条返回顶部,只支持竖向 |\n| custom-nested-scroll | boolean | false | | 子元素是否开启嵌套滚动 将滚动事件与父元素协商处理 |\n| @refresherpulling | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | | 下拉刷新控件被下拉 |\n| @refresherrefresh | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | | 下拉刷新被触发 |\n| @refresherrestore | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | | 下拉刷新被复位 |\n| @refresherabort | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | | 下拉刷新被中止 |\n| @scrolltoupper | (event: [UniScrollToUpperEvent](#uniscrolltoupperevent)) => void | - | | 滚动到顶部/左边,会触发 scrolltoupper 事件 |\n| @scrolltolower | (event: [UniScrollToLowerEvent](#uniscrolltolowerevent)) => void | - | | 滚动到底部/右边,会触发 scrolltolower 事件 |\n| @scroll | (event: [UniScrollEvent](#uniscrollevent)) => void | - | | 滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |\n| @scrollend | (event: [UniScrollEvent](#uniscrollevent)) => void | - | | 滚动结束时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |\n| ~~rebound~~ | boolean | true | | 控制是否回弹效果。已废弃,请改用bounces |\n| ~~scroll-y~~ | boolean | true | | 允许纵向滚动,不支持同时设置scroll-x属性为true,同时设置true时scroll-y生效。已废弃,请改用direction |\n| ~~scroll-x~~ | boolean | false | | 允许横向滚动,不支持同时设置scroll-y属性为true,同时设置true时scroll-y生效。已废弃,请改用direction |","event":"\n### 事件\n#### UniRefresherEvent\n\n```mermaid\ngraph LR\n \nUniRefresherEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniRefresherEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniRefresherEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| dy | number | 是 | - | - | - |\n\n\n#### UniScrollToUpperEvent\n\n```mermaid\ngraph LR\n \nUniScrollToUpperEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniScrollToUpperEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniScrollToUpperEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| direction | string | 是 | - | - | 滚动方向 top 或 left |\n\n\n#### UniScrollToLowerEvent\n\n```mermaid\ngraph LR\n \nUniScrollToLowerEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniScrollToLowerEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniScrollToLowerEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| direction | string | 是 | - | - | 滚动方向 bottom 或 right |\n\n\n#### UniScrollEvent\n\n```mermaid\ngraph LR\n \nUniScrollEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniScrollEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniScrollEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| scrollTop | number | 是 | - | - | 竖向滚动的距离 |\n@| scrollLeft | number | 是 | - | - | 横向滚动的距离 |\n@| scrollHeight | number | 是 | - | - | 滚动区域的高度 |\n@| scrollWidth | number | 是 | - | - | 滚动区域的宽度 |\n@| deltaY | number | 是 | - | - | 当次滚动事件竖向滚动量 |\n@| deltaX | number | 是 | - | - | 当次滚动事件横向滚动量 |\n\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/list-view/list-view.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/list-view/list-view\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/list-view/list-view\n\n>Template\n```vue\n\r\n\r\n\r\n \r\n \r\n \r\n {{key}}\r\n \r\n \r\n \r\n {{text[state]}}\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n type ScrollEventTest = {\r\n type : string;\r\n target : UniElement | null;\r\n currentTarget : UniElement | null;\r\n direction ?: string\r\n }\r\n import { ItemType } from '@/components/enum-data/enum-data'\r\n export default {\r\n data() {\r\n return {\r\n refresher_triggered_boolean: false,\r\n refresher_enabled_boolean: false,\r\n scroll_with_animation_boolean: false,\r\n show_scrollbar_boolean: false,\r\n bounces_boolean: true,\r\n scroll_y_boolean: true,\r\n scroll_x_boolean: false,\r\n scroll_direction: \"vertical\",\r\n upper_threshold_input: 50,\r\n lower_threshold_input: 50,\r\n scroll_top_input: 0,\r\n scroll_left_input: 0,\r\n refresher_background_input: \"#FFF\",\r\n scrollData: [] as Array,\r\n size_enum: [{ \"value\": 0, \"name\": \"item---0\" }, { \"value\": 3, \"name\": \"item---3\" }] as ItemType[],\r\n scrollIntoView: \"\",\r\n refresherrefresh: false,\r\n refresher_default_style_input: \"black\",\r\n text: ['继续下拉执行刷新', '释放立即刷新', '刷新中', \"\"],\r\n state: 3,\r\n reset: true,\r\n // 自动化测试\r\n isScrollTest: '',\r\n isScrolltolowerTest: '',\r\n isScrolltoupperTest: '',\r\n scrollDetailTest: null as UniScrollEventDetail | null,\r\n scrollEndDetailTest: null as UniScrollEventDetail | null,\r\n }\r\n },\r\n onLoad() {\r\n let lists : Array = []\r\n for (let i = 0; i < 10; i++) {\r\n lists.push(\"item---\" + i)\r\n }\r\n this.scrollData = lists\r\n },\r\n methods: {\r\n list_view_click() { console.log(\"组件被点击时触发\") },\r\n list_view_touchstart() { console.log(\"手指触摸动作开始\") },\r\n list_view_touchmove() { console.log(\"手指触摸后移动\") },\r\n list_view_touchcancel() { console.log(\"手指触摸动作被打断,如来电提醒,弹窗\") },\r\n list_view_touchend() { console.log(\"手指触摸动作结束\") },\r\n list_view_tap() { console.log(\"手指触摸后马上离开\") },\r\n list_view_longpress() { console.log(\"如果一个组件被绑定了 longpress 事件,那么当用户长按这个组件时,该事件将会被触发。\") },\r\n list_view_refresherpulling(e : RefresherEvent) {\r\n console.log(\"下拉刷新控件被下拉\")\r\n if (this.reset) {\r\n if (e.detail.dy > 45) {\r\n this.state = 1\r\n } else {\r\n this.state = 0\r\n }\r\n }\r\n },\r\n list_view_refresherrefresh() {\r\n console.log(\"下拉刷新被触发 \")\r\n this.refresherrefresh = true\r\n this.refresher_triggered_boolean = true\r\n this.state = 2\r\n this.reset = false;\r\n setTimeout(() => {\r\n this.refresher_triggered_boolean = false\r\n }, 1500)\r\n },\r\n list_view_refresherrestore() {\r\n this.refresherrefresh = false\r\n this.state = 3\r\n this.reset = true\r\n console.log(\"下拉刷新被复位\")\r\n },\r\n list_view_refresherabort() { console.log(\"下拉刷新被中止\") },\r\n list_view_scrolltoupper(e : UniScrollToUpperEvent) {\r\n console.log(\"滚动到顶部/左边,会触发 scrolltoupper 事件 direction=\" + e.detail.direction)\r\n this.checkEventTest({\r\n type: e.type,\r\n target: e.target,\r\n currentTarget: e.currentTarget,\r\n direction: e.detail.direction,\r\n } as ScrollEventTest, 'scrolltoupper')\r\n },\r\n list_view_scrolltolower(e : UniScrollToLowerEvent) {\r\n console.log(\"滚动到底部/右边,会触发 scrolltolower 事件 direction=\" + e.detail.direction)\r\n this.checkEventTest({\r\n type: e.type,\r\n target: e.target,\r\n currentTarget: e.currentTarget,\r\n direction: e.detail.direction,\r\n } as ScrollEventTest, 'scrolltolower')\r\n },\r\n list_view_scroll(e : UniScrollEvent) {\r\n console.log(\"滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}\")\r\n this.scrollDetailTest = e.detail\r\n this.checkEventTest({\r\n type: e.type,\r\n target: e.target,\r\n currentTarget: e.currentTarget\r\n } as ScrollEventTest, 'scroll')\r\n },\r\n list_view_scrollend(e : UniScrollEvent) {\r\n console.log(\"滚动结束时触发\", e.detail)\r\n this.scrollEndDetailTest = e.detail\r\n this.checkEventTest({\r\n type: e.type,\r\n target: e.target,\r\n currentTarget: e.currentTarget\r\n } as ScrollEventTest, 'scrollend')\r\n },\r\n list_item_click() { console.log(\"list-item组件被点击时触发\") },\r\n list_item_touchstart() { console.log(\"手指触摸list-item组件动作开始\") },\r\n list_item_touchmove() { console.log(\"手指触摸list-item组件后移动\") },\r\n list_item_touchcancel() { console.log(\"手指触摸list-item组件动作被打断,如来电提醒,弹窗\") },\r\n list_item_touchend() { console.log(\"手指触摸list-item组件动作结束\") },\r\n list_item_tap() { console.log(\"手指触摸list-item组件后马上离开\") },\r\n list_item_longpress() { console.log(\"list-item组件被绑定了 longpress 事件,那么当用户长按这个组件时,该事件将会被触发。\") },\r\n change_refresher_triggered_boolean(checked : boolean) { this.refresher_triggered_boolean = checked },\r\n change_refresher_enabled_boolean(checked : boolean) { this.refresher_enabled_boolean = checked },\r\n change_scroll_with_animation_boolean(checked : boolean) { this.scroll_with_animation_boolean = checked },\r\n change_show_scrollbar_boolean(checked : boolean) { this.show_scrollbar_boolean = checked },\r\n change_bounces_boolean(checked : boolean) { this.bounces_boolean = checked },\r\n change_scroll_y_boolean(checked : boolean) {\r\n this.scroll_y_boolean = checked\r\n this.change_scroll_direction()\r\n },\r\n change_scroll_x_boolean(checked : boolean) {\r\n this.scroll_x_boolean = checked\r\n this.change_scroll_direction()\r\n },\r\n change_scroll_direction() {\r\n if (this.scroll_y_boolean && this.scroll_x_boolean || this.scroll_y_boolean) {\r\n this.scroll_direction = \"vertical\"\r\n } else if (!this.scroll_y_boolean && !this.scroll_x_boolean) {\r\n this.scroll_direction = \"none\"\r\n } else if (!this.scroll_y_boolean && this.scroll_x_boolean) {\r\n this.scroll_direction = \"horizontal\"\r\n }\r\n },\r\n confirm_upper_threshold_input(value : number) { this.upper_threshold_input = value },\r\n confirm_lower_threshold_input(value : number) { this.lower_threshold_input = value },\r\n confirm_scroll_top_input(value : number) { this.scroll_top_input = value },\r\n confirm_scroll_left_input(value : number) { this.scroll_left_input = value },\r\n confirm_refresher_background_input(value : string) { this.refresher_background_input = value },\r\n item_change_size_enum(index : number) { this.scrollIntoView = \"item---\" + index },\r\n // 自动化测试专用(由于事件event参数对象中存在循环引用,在ios端JSON.stringify报错,自动化测试无法page.data获取)\r\n checkEventTest(e : ScrollEventTest, eventName : String) {\r\n const isPass = e.type === eventName && e.target instanceof UniElement && e.currentTarget instanceof UniElement;\r\n const result = isPass ? `${eventName}:Success` : `${eventName}:Fail`;\r\n switch (eventName) {\r\n case 'scroll':\r\n this.isScrollTest = result\r\n break;\r\n case 'scrolltolower':\r\n this.isScrolltolowerTest = result + `-${e.direction}`\r\n break;\r\n case 'scrolltoupper':\r\n this.isScrolltoupperTest = result + `-${e.direction}`\r\n break;\r\n default:\r\n break;\r\n }\r\n },\r\n //自动化测试例专用\r\n check_scroll_height() : Boolean {\r\n var listElement = this.$refs[\"listview\"] as UniElement\r\n console.log(\"check_scroll_height--\" + listElement.scrollHeight)\r\n if (listElement.scrollHeight > 2000) {\r\n return true\r\n }\r\n return false\r\n },\r\n //自动化测试例专用\r\n check_scroll_width() : Boolean {\r\n var listElement = this.$refs[\"listview\"] as UniElement\r\n console.log(\"check_scroll_width\" + listElement.scrollWidth)\r\n if (listElement.scrollWidth > 2000) {\r\n return true\r\n }\r\n return false\r\n },\r\n change_refresher_style_boolean(checked : boolean) {\r\n if (checked) {\r\n this.refresher_default_style_input = \"none\"\r\n } else {\r\n this.refresher_default_style_input = \"black\"\r\n }\r\n }\r\n }\r\n }\r\n\n```\n\n:::","children":"### 子组件 @children-tags \n - [list-item](list-item.md)\n- [sticky-header](https://doc.dcloud.net.cn/uni-app-x/component/sticky-header.html)\n- [sticky-section](https://doc.dcloud.net.cn/uni-app-x/component/sticky-section.html)","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.list-view.list-view)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=list-view&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=list-view&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=list-view&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=list-view&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=list-view&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=list-view)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=list-view&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"nested-scroll-header":{"name":"## nested-scroll-header","description":"> 组件类型:UniNestedScrollHeaderElement \n\n scroll-view 嵌套模式场景中属于外层 scroll-view 的节点,仅支持作为 \\ 嵌套模式的直接子节点。不支持复数子节点,渲染时会取其第一个子节点来渲染","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| x | 4.11 | 4.11 |\n","attribute":"","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/nested-scroll-header/nested-scroll-header.uvue) \n >\n> 该 API 不支持 Web,请运行 hello uni-app x 到 App 平台体验 \n\n::: preview\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/nested-scroll-header/nested-scroll-header\n```uvue\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {{key}}\r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\n\n```\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.nested-scroll.nested-scroll-header)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=nested-scroll-header&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=nested-scroll-header&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=nested-scroll-header&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=nested-scroll-header&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=nested-scroll-header&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=nested-scroll-header)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=nested-scroll-header&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"nested-scroll-body":{"name":"## nested-scroll-body","description":"> 组件类型:UniNestedScrollHeaderElement \n\n scroll-view 嵌套模式场景中属于嵌套内层 scroll-view 的父节点,仅支持作为 \\ 嵌套模式的直接子节点。不支持复数子节点,渲染时会取其第一个子节点来渲染","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| x | 4.11 | 4.11 |\n","attribute":"","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/nested-scroll-body/nested-scroll-body.uvue) \n >\n> 该 API 不支持 Web,请运行 hello uni-app x 到 App 平台体验 \n\n::: preview\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/nested-scroll-body/nested-scroll-body\n```uvue\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n nested-scroll-body\r\n \r\n \r\n \r\n \r\n \r\n {{key}}\r\n \r\n \r\n \r\n \r\n 不会渲染,因为 nested-scroll-body 只会渲染第一个子节点\r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\n\n```\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.nested-scroll.nested-scroll-body)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=nested-scroll-body&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=nested-scroll-body&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=nested-scroll-body&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=nested-scroll-body&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=nested-scroll-body&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=nested-scroll-body)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=nested-scroll-body&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"icon":{"name":"## icon","description":"图标","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| type | string | - | | icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| success | - | - |\n@| success_no_circle | - | - |\n@| warn | - | - |\n@| waiting | - | - |\n@| cancel | - | - |\n@| download | - | - |\n@| search | - | - |\n@| clear | - | - |\n| size | number | - | | icon的大小,单位px |\n| color | string([string.ColorString](/uts/data-type.md#ide-string)) | - | | icon的颜色,同css的color |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.basic-content.icon)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/icon.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=icon&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=icon&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=icon&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=icon&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=icon&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=icon)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=icon&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"text":{"name":"## text","description":"> 组件类型:[UniTextElement](/dom/unitextelement.md) \n\n 文本","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| selectable | boolean | false | | 文本是否可选 |\n| space | string | - | | 显示连续空格 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| ensp | | 中文字符空格一半大小 |\n@| emsp | | 中文字符空格大小 |\n@| nbsp | | 根据字体设置的空格大小 |\n| decode | boolean | false | | 是否解码 (app平台如需解析字符实体,需要配置为 true) |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/text/text.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/text/text\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/text/text\n\n>Template\n```vue\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n {{ text }}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n title: 'text',\r\n texts: [\r\n 'HBuilderX,轻巧、极速,极客编辑器',\r\n 'uni-app x,终极跨平台方案',\r\n 'uniCloud,js serverless云服务',\r\n 'uts,大一统语言',\r\n 'uniMPSdk,让你的App具备小程序能力',\r\n 'uni-admin,开源、现成的全端管理后台',\r\n 'uni-id,开源、全端的账户中心',\r\n 'uni-pay,开源、云端一体、全平台的支付',\r\n 'uni-ai,聚合ai能力',\r\n 'uni-cms,开源、云端一体、全平台的内容管理平台',\r\n 'uni-im,开源、云端一体、全平台的im即时消息',\r\n 'uni统计,开源、完善、全平台的统计报表',\r\n '......'\r\n ] as string[],\r\n text: '',\r\n canAdd: true,\r\n canRemove: false,\r\n extraLine: [] as string[]\r\n }\r\n },\r\n methods: {\r\n add: function () {\r\n this.extraLine.push(this.texts[this.extraLine.length % 12]);\r\n this.text = this.extraLine.join('\\n');\r\n this.canAdd = this.extraLine.length < 12;\r\n this.canRemove = this.extraLine.length > 0;\r\n },\r\n remove: function () {\r\n if (this.extraLine.length > 0) {\r\n this.extraLine.pop();\r\n this.text = this.extraLine.join('\\n');\r\n this.canAdd = this.extraLine.length < 12;\r\n this.canRemove = this.extraLine.length > 0;\r\n }\r\n },\r\n textProps: function () {\r\n uni.navigateTo({\r\n url: '/pages/component/text/text-props'\r\n })\r\n }\r\n }\r\n }\r\n\n```\n\n:::","children":"### 子组件 @children-tags \n - [text](text.md)","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.basic-content.text)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/text.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=text&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=text&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=text&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=text&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=text&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=text)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=text&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"rich-text":{"name":"## rich-text","description":"> 组件类型:UniRichTextElement \n\n 富文本。可渲染文字样式、图片、超链接。支持部分HTML标签","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| nodes | array \\| string | - | | 节点列表 \\| HTML String |\n| selectable | boolean | false | | 文本是否可选 |\n| @itemclick | (event: [UniRichTextItemClickEvent](#unirichtextitemclickevent)) => void | - | | 拦截点击事件(只支持 a、img标签),返回img标签的src属性或a标签的href属性。event.detail={ src \\| href } |","event":"\n### 事件\n#### UniRichTextItemClickEvent\n\n```mermaid\ngraph LR\n \nUniRichTextItemClickEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniRichTextItemClickEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniRichTextItemClickEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| src | string | 否 | - | - | \\图片链接 |\n@| href | string | 否 | - | - | \\超链接 |\n\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/rich-text/rich-text.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/rich-text/rich-text\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/rich-text/rich-text\n\n>Template\n```vue\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n selectable\r\n \r\n \r\n \r\n \r\n \r\n \r\n \n \r\n\r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n text: \"hello uni-app x!
uni-app x,终极跨平台方案\",\r\n richTextHeight: 0,\r\n richTextElement: null as UniElement | null,\n // 自动化测试\n autoTest: false,\n testNodes: '',\n isItemClickTrigger: false\n }\r\n },\r\n onReady() {\r\n this.richTextElement = uni.getElementById('richtext') as UniElement\r\n setTimeout(() => {\r\n this.updateRichTextHeight()\r\n }, 1200)\r\n },\r\n methods: {\r\n changeText() {\r\n if (this.text === \"hello uni-app x!
uni-app x,终极跨平台方案\") {\r\n this.text = \"hello uni-app x!
uni-app x,终极跨平台方案
\"\r\n } else {\r\n this.text = \"hello uni-app x!
uni-app x,终极跨平台方案\"\r\n }\r\n setTimeout(() => {\r\n this.updateRichTextHeight()\r\n }, 200)\r\n },\r\n updateRichTextHeight() {\r\n if (this.richTextElement != null) {\r\n const elRect = this.richTextElement!.getBoundingClientRect()\r\n this.richTextHeight = elRect.height\r\n console.log('richTextHeight:', this.richTextHeight)\r\n }\r\n },\n // 自动化测试\n itemClickForTest(_ : RichTextItemClickEvent) {\n this.isItemClickTrigger = true;\n },\n getBoundingClientRectForTest() : DOMRect {\n return uni.getElementById('test-rich-text')?.getBoundingClientRect()!;\n },\n getWindowInfoForTest() : GetWindowInfoResult {\n return uni.getWindowInfo();\n }\r\n }\r\n }\r\n\n```\n\n:::","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.basic-content.rich-text)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/rich-text.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=rich-text&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=rich-text&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=rich-text&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=rich-text&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=rich-text&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=rich-text)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=rich-text&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"progress":{"name":"## progress","description":"> 组件类型:UniProgressElement \n\n 进度条","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| duration | number | 30 | | 进度增加1%所需毫秒数 |\n| percent | number | 0 | | 百分比0~100 |\n| show-info | boolean | false | | 在进度条右侧显示百分比 |\n| border-radius | number | 0 | | 圆角大小 |\n| font-size | number | 16 | | 右侧百分比字体大小 |\n| stroke-width | number | 6 | | 进度条线的宽度,单位px |\n| activeColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#09BB07\" | | 已选择的进度条的颜色 |\n| backgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#EBEBEB\" | | 未选择的进度条的颜色 |\n| active | boolean | false | | 进度条从左往右的动画 |\n| active-mode | string | \"backwards\" | | backwards: 动画从头播;forwards:动画从上次结束点接着播 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| backwards | | 动画从头播 |\n@| forwards | | 动画从上次结束点接着播 |\n| @activeend | (event: [UniProgressActiveendEvent](#uniprogressactiveendevent)) => void | - | | 动画完成事件 |","event":"\n### 事件\n#### UniProgressActiveendEvent\n\n```mermaid\ngraph LR\n \nUniProgressActiveendEvent -- Extends --> UniCustomEvent<UniProgressActiveendEventDetail>\n style UniCustomEvent<UniProgressActiveendEventDetail> color:#42b983\n click UniCustomEvent<UniProgressActiveendEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniProgressActiveendEventDetail\n\n\n###### UniProgressActiveendEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| curPercent | number | 是 | - | - | - |\n\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/progress/progress.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/progress/progress\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/progress/progress\n\n>Template\n```vue\n\r\n\r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n import { state, setEventCallbackNum } from '@/store/index.uts'\r\n import { ItemType } from '@/components/enum-data/enum-data'\r\n export default {\r\n data() {\r\n return {\r\n title: 'progress',\r\n pgList: [0, 0, 0, 0] as number[],\r\n curPercent: 0,\r\n showInfo: true,\r\n borderRadius: 0,\r\n fontSize: 16,\r\n strokeWidth: 3,\r\n backgroundColor: '#EBEBEB',\r\n\r\n // 组件属性 autotest\r\n active_boolean: false,\r\n show_info_boolean: false,\r\n duration_input: 30,\r\n percent_input: 0,\r\n stroke_width_input: 6,\r\n activeColor_input: \"#09BB07\",\r\n backgroundColor_input: \"#EBEBEB\",\r\n active_mode_enum: [{ \"value\": 0, \"name\": \"backwards\" }, { \"value\": 1, \"name\": \"forwards\" }] as ItemType[],\r\n active_mode_enum_current: 0\r\n }\r\n },\r\n methods: {\r\n // 自动化测试\r\n getEventCallbackNum() : number {\r\n return state.eventCallbackNum\r\n },\r\n // 自动化测试\r\n setEventCallbackNum(num : number) {\r\n setEventCallbackNum(num)\r\n },\r\n\r\n setProgress() {\r\n this.pgList = [20, 40, 60, 80] as number[]\r\n },\r\n clearProgress() {\r\n this.pgList = [0, 0, 0, 0] as number[]\r\n },\r\n activeend(e : UniProgressActiveendEvent) {\r\n // 自动化测试\r\n if ((e.target?.tagName ?? '').includes('PROGRESS')) {\r\n this.setEventCallbackNum(state.eventCallbackNum + 1)\r\n }\r\n if (e.type === 'activeend') {\r\n this.setEventCallbackNum(state.eventCallbackNum + 2)\r\n }\r\n this.curPercent = e.detail.curPercent\r\n },\r\n progress_touchstart() { console.log(\"手指触摸动作开始\") },\r\n progress_touchmove() { console.log(\"手指触摸后移动\") },\r\n progress_touchcancel() { console.log(\"手指触摸动作被打断,如来电提醒,弹窗\") },\r\n progress_touchend() { console.log(\"手指触摸动作结束\") },\r\n progress_tap() { console.log(\"手指触摸后马上离开\") },\r\n change_active_boolean(checked : boolean) { this.active_boolean = checked },\r\n change_show_info_boolean(checked : boolean) { this.show_info_boolean = checked },\r\n confirm_duration_input(value : number) { this.duration_input = value },\r\n confirm_percent_input(value : number) { this.percent_input = value },\r\n confirm_stroke_width_input(value : number) { this.stroke_width_input = value },\r\n confirm_activeColor_input(value : string) { this.activeColor_input = value },\r\n confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },\r\n radio_change_active_mode_enum(checked : number) { this.active_mode_enum_current = checked }\r\n }\r\n }\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.basic-content.progress)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/progress.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=progress&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=progress&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=progress&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=progress&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=progress&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=progress)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=progress&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"native-view":{"name":"## native-view","description":"> 组件类型:[UniNativeViewElement](/dom/uninativeviewelement.md) \n\n 自定义原生View组件","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| x | 4.31 | 4.31 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| @init | (event: [UniNativeViewInitEvent](#uninativeviewinitevent)) => void | - | | native-view初始化时回调,event.detail = { element: 'native-view元素实例对象'} |","event":"\n### 事件\n#### UniNativeViewInitEvent\nnative-view 组件 init事件event\n```mermaid\ngraph LR\n \nUniNativeViewInitEvent -- Extends --> UniCustomEvent<UniNativeViewInitEventDetail>\n style UniCustomEvent<UniNativeViewInitEventDetail> color:#42b983\n click UniCustomEvent<UniNativeViewInitEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniNativeViewInitEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniNativeViewInitEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| element | [UniNativeViewElement](/dom/uninativeviewelement.md) | 是 | - | - | - |\n| type | string | 是 | - | - | - |\n\n\n##### UniNativeViewInitEventDetail\n\n\n###### UniNativeViewInitEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| element | [UniNativeViewElement](/dom/uninativeviewelement.md) | 是 | - | - | - |\n\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/native-view/native-view.uvue) \n >\n> 该 API 不支持 Web,请运行 hello uni-app x 到 App 平台体验 \n\n::: preview\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/native-view/native-view\n```uvue\n\r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\n\n```\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.basic-content.native-view)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=native-view&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=native-view&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=native-view&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=native-view&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=native-view&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=native-view)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=native-view&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"button":{"name":"## button","description":"> 组件类型:UniButtonElement \n\n 按钮","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| disabled | boolean | false | | 是否禁用 |\n| hover-class | string([string.ClassString](/uts/data-type.md#ide-string)) | \"button-hover\" | | 指定按下去的样式类。当 hover-class=\"none\" 时,没有点击态效果 |\n| hover-start-time | number | 20 | | 按住后多久出现点击态,单位毫秒 |\n| hover-stay-time | number | 70 | | 手指松开后点击态保留时间,单位毫秒 |\n| size | string | \"default\" | | 按钮的大小 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| default | | 默认大小 |\n@| mini | | 小尺寸 |\n| type | string | \"default\" | | 按钮的样式类型 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| default | | 白色 |\n@| primary | | 蓝色 |\n@| warn | | 红色 |\n| plain | boolean | false | | 按钮是否镂空,背景色透明 |\n| loading | boolean | - | | 名称前是否带 loading 图标 |\n| form-type | string | - | | 用于 form 组件,点击分别会触发 form 组件的 submit/reset 事件 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| submit | | 提交表单 |\n@| reset | | 重置表单 |\n| open-type | string | - | | 微信开放能力 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| agreePrivacyAuthorization | | 用户同意隐私协议按钮。用户点击一次此按钮后,所有已声明过的隐私接口可以正常调用。 |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/button/button.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/button/button\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/button/button\n\n>Template\n```vue\n\r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n import { ItemType } from '@/components/enum-data/enum-data'\r\n export default {\r\n data() {\r\n return {\r\n plain_boolean: false,\r\n disabled_boolean: false,\r\n default_style: false,\r\n size_enum: [{ \"value\": 0, \"name\": \"default\" }, { \"value\": 1, \"name\": \"mini\" }] as ItemType[],\r\n size_enum_current: 0,\r\n type_enum: [{ \"value\": 0, \"name\": \"default\" }, { \"value\": 1, \"name\": \"primary\" }, { \"value\": 2, \"name\": \"warn\" }] as ItemType[],\r\n type_enum_current: 0,\r\n count: 0,\r\n text: ''\r\n }\r\n },\r\n onReady() {\r\n this.text = 'uni-app-x'\r\n },\r\n methods: {\r\n button_click() {\r\n console.log(\"组件被点击时触发\")\r\n this.count++\r\n },\r\n button_touchstart() { console.log(\"手指触摸动作开始\") },\r\n button_touchmove() { console.log(\"手指触摸后移动\") },\r\n button_touchcancel() { console.log(\"手指触摸动作被打断,如来电提醒,弹窗\") },\r\n button_touchend() { console.log(\"手指触摸动作结束\") },\r\n button_tap() { console.log(\"手指触摸后马上离开\") },\r\n button_longpress() { console.log(\"如果一个组件被绑定了 longpress 事件,那么当用户长按这个组件时,该事件将会被触发。\") },\r\n change_plain_boolean(checked : boolean) { this.plain_boolean = checked },\r\n change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },\r\n change_default_style(checked : boolean) { this.default_style = checked },\r\n radio_change_size_enum(checked : number) { this.size_enum_current = checked },\r\n radio_change_type_enum(checked : number) { this.type_enum_current = checked },\r\n confirm_text_input(value : string) { this.text = value },\r\n navigateToChild() {\r\n uni.navigateTo({\r\n url: 'buttonstatus',\r\n })\r\n },\r\n //用于自动化测试\r\n checkUniButtonElement() : boolean {\r\n const button = uni.getElementById(\"testButton\")\r\n if (button != null && button instanceof UniButtonElement) {\r\n return true\r\n }\r\n return false\r\n }\r\n }\r\n }\r\n\n```\n\n:::","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.button)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/button.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=button&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=button&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=button&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=button&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=button&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=button)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=button&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"checkbox":{"name":"## checkbox","description":"> 组件类型:UniCheckboxElement \n\n 多选项。在1组check-group中可选择多个","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| disabled | boolean | false | | 是否禁用 |\n| value | string | - | | checkbox 标识,选中时触发 checkbox-group 的 change 事件,并携带 checkbox 的 value |\n| checked | boolean | false | | 当前是否选中,可用来设置默认选中 |\n| backgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | | checkbox默认的背景颜色 |\n| borderColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#d1d1d1\" | | checkbox默认的边框颜色 |\n| activeBackgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | | checkbox选中时的背景颜色 |\n| activeBorderColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#d1d1d1\" | | checkbox选中时的边框颜色 |\n| foreColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | | checkbox的图标颜色,优先级大于color属性 |\n| ~~iconColor~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | | checkbox的图标颜色,优先级大于color属性 (使用foreColor替代) |\n| ~~color~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | | checkbox的颜色 (使用foreColor替代) |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/checkbox/checkbox.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/checkbox/checkbox\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/checkbox/checkbox\n\n>Template\n```vue\n\r\n\r\n\r\n \r\n uni-app-x\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n 默认样式 \r\n \r\n \r\n \r\n 选中\r\n \r\n {{ text }}\r\n 禁用\r\n \r\n {{ wrapText }}\r\n \r\n \r\n \r\n \r\n 不同颜色和尺寸的checkbox \r\n \r\n \r\n \r\n 选中\r\n \r\n 未选中\r\n \r\n \r\n \r\n\r\n \r\n \r\n 推荐展示样式 \r\n \r\n \r\n \r\n \r\n \r\n {{ item.name }}\r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n type ItemType = {\r\n value : string\r\n name : string\r\n checked : boolean\r\n }\r\n export default {\r\n data() {\r\n return {\r\n items: [\r\n {\r\n value: 'CHN',\r\n name: '中国',\r\n checked: true,\r\n },\r\n {\r\n value: 'USA',\r\n name: '美国',\r\n checked: false,\r\n },\r\n {\r\n value: 'BRA',\r\n name: '巴西',\r\n checked: false,\r\n },\r\n {\r\n value: 'JPN',\r\n name: '日本',\r\n checked: false,\r\n },\r\n {\r\n value: 'ENG',\r\n name: '英国',\r\n checked: false,\r\n },\r\n {\r\n value: 'FRA',\r\n name: '法国',\r\n checked: false,\r\n },\r\n ] as ItemType[],\r\n testEvent: false,\r\n text: '未选中',\r\n wrapText: 'uni-app x,终极跨平台方案\\nuts,大一统语言',\r\n value: [] as string[],\r\n disabled: true,\r\n checked: true,\r\n color: '#007aff',\r\n iconColor: '#211cfe',\r\n foreColor: '#ff0000',\r\n // 组件属性 autotest\r\n checked_boolean: false,\r\n disabled_boolean: false,\r\n color_input: \"#007aff\",\r\n backgroundColor_input: \"#ffffff\",\r\n borderColor_input: \"#d1d1d1\",\r\n activeBackgroundColor_input: \"#ffffff\",\r\n activeBorderColor_input: \"#d1d1d1\",\r\n iconColor_input: \"#007aff\",\r\n foreColor_input: '#ff0000'\r\n }\r\n },\r\n methods: {\r\n\r\n checkboxChange: function (e : UniCheckboxGroupChangeEvent) {\r\n // 自动化测试\r\n if ((e.target?.tagName ?? '') == 'CHECKBOX-GROUP' && e.type === 'change') {\r\n this.testEvent = true\r\n }\r\n\r\n const selectedNames : string[] = []\r\n this.items.forEach((item) => {\r\n if (e.detail.value.includes(item.value)) {\r\n selectedNames.push(item.name)\r\n }\r\n })\r\n uni.showToast({\r\n icon: 'none',\r\n title: '当前选中:' + selectedNames.join(','),\r\n })\r\n },\r\n testChange: function (e : UniCheckboxGroupChangeEvent) {\r\n this.value = e.detail.value\r\n },\r\n checkbox_click() { console.log(\"组件被点击时触发\") },\r\n checkbox_touchstart() { console.log(\"手指触摸动作开始\") },\r\n checkbox_touchmove() { console.log(\"手指触摸后移动\") },\r\n checkbox_touchcancel() { console.log(\"手指触摸动作被打断,如来电提醒,弹窗\") },\r\n checkbox_touchend() { console.log(\"手指触摸动作结束\") },\r\n checkbox_tap() { console.log(\"手指触摸后马上离开\") },\r\n checkbox_longpress() { console.log(\"如果一个组件被绑定了 longpress 事件,那么当用户长按这个组件时,该事件将会被触发。\") },\r\n change_checked_boolean(checked : boolean) { this.checked_boolean = checked },\r\n change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },\r\n confirm_color_input(value : string) { this.color_input = value },\r\n confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },\r\n confirm_borderColor_input(value : string) { this.borderColor_input = value },\r\n confirm_activeBackgroundColor_input(value : string) { this.activeBackgroundColor_input = value },\r\n confirm_activeBorderColor_input(value : string) { this.activeBorderColor_input = value },\r\n confirm_iconColor_input(value : string) { this.iconColor_input = value },\r\n confirm_foreColor_input(value : string) { this.foreColor_input = value }\r\n }\r\n }\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.checkbox.checkbox)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/checkbox.html#checkbox)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=checkbox&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=checkbox&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=checkbox&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=checkbox&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=checkbox&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=checkbox)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=checkbox&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"checkbox-group":{"name":"## checkbox-group","description":"> 组件类型:UniCheckboxGroupElement \n\n 多选框组","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | - | | 表单的控件名称,作为键值对的一部分与表单(form组件)一同提交 |\n| @change | (event: [UniCheckboxGroupChangeEvent](#unicheckboxgroupchangeevent)) => void | - | | checkbox-group中选中项发生改变是触发 change 事件,detail = {value:\\[选中的checkbox的value的数组] |","event":"\n### 事件\n#### UniCheckboxGroupChangeEvent\n\n```mermaid\ngraph LR\n \nUniCheckboxGroupChangeEvent -- Extends --> UniCustomEvent<UniCheckboxGroupChangeEventDetail>\n style UniCustomEvent<UniCheckboxGroupChangeEventDetail> color:#42b983\n click UniCustomEvent<UniCheckboxGroupChangeEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniCheckboxGroupChangeEventDetail\n\n\n###### UniCheckboxGroupChangeEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| value | Array\\ | 是 | - | - | - |\n\n","example":"","children":"### 子组件 @children-tags \n - [checkbox](checkbox.md)","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.checkbox.checkbox-group)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/checkbox.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=checkbox-group&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=checkbox-group&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=checkbox-group&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=checkbox-group&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=checkbox-group&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=checkbox-group)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=checkbox-group&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"form":{"name":"## form","description":"> 组件类型:UniFormElement \n\n 表单","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.97 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| disabled | boolean | - | | 是否禁用 |\n| @submit | (event: [UniFormSubmitEvent](#uniformsubmitevent)) => void | - | | 携带 form 中的数据触发 submit 事件,event.detail = {value : {'name': 'value'}} |\n| @reset | (event: [UniFormResetEvent](#uniformresetevent)) => void | - | | 表单重置时会触发 reset 事件 |","event":"\n### 事件\n#### UniFormSubmitEvent\n\n```mermaid\ngraph LR\n \nUniFormSubmitEvent -- Extends --> UniCustomEvent<UniFormSubmitEventDetail>\n style UniCustomEvent<UniFormSubmitEventDetail> color:#42b983\n click UniCustomEvent<UniFormSubmitEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniFormSubmitEventDetail\n\n\n###### UniFormSubmitEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| value | UTSJSONObject | 是 | - | - | - |\n\n\n#### UniFormResetEvent\n\n```mermaid\ngraph LR\n \nUniFormResetEvent -- Extends --> UniCustomEvent<UniFormResetEventDetail>\n style UniCustomEvent<UniFormResetEventDetail> color:#42b983\n click UniCustomEvent<UniFormResetEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/form/form.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/form/form\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/form/form\n\n>Template\n```vue\n\r\n \r\n \r\n \r\n \r\n \r\n 提交的表单数据\r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n nickname: '',\r\n gender: '0',\r\n age: 18,\r\n loves: ['0'],\r\n switch: true,\r\n comment: '',\r\n formData: {} as UTSJSONObject,\r\n // 仅测试\r\n testVerifySubmit: false,\r\n testVerifyReset: false,\r\n }\r\n },\r\n computed: {\r\n formDataText() : string {\r\n return JSON.stringify(this.formData)\r\n }\r\n },\r\n methods: {\r\n onFormSubmit: function (e : UniFormSubmitEvent) {\r\n this.formData = e.detail.value\r\n\r\n // 仅测试\r\n this.testVerifySubmit = (e.type == 'submit' && (e.target?.tagName ?? '') == \"FORM\")\r\n },\r\n onFormReset: function (e : UniFormResetEvent) {\r\n this.formData = {}\r\n\r\n // 仅测试\r\n this.testVerifyReset = (e.type == 'reset' && (e.target?.tagName ?? '') == \"FORM\")\r\n }\r\n }\r\n }\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.form)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/form.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=form&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=form&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=form&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=form&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=form&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=form)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=form&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"input":{"name":"## input","description":"> 组件类型:[UniInputElement](/dom/uniinputelement.md) \n\n 输入框","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | - | | 表单的控件名称,作为键值对的一部分与表单(form组件)一同提交 |\n| disabled | boolean | false | | 是否禁用 |\n| value | string | \"\" | | 输入框的初始内容 |\n| type | text \\| number \\| digit \\| tel | \"text\" | | input的类型 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| text | | 文本输入键盘 |\n@| number | | 数字输入键盘 |\n@| digit | | 带小数点数字输入键盘 |\n@| tel | | 电话输入键盘 |\n| password | boolean | false | | 是否是密码类型 |\n| placeholder | string | \"\" | | 输入框为空时占位符 |\n| placeholder-style | string | \"\" | | 指定 placeholder 的样式 |\n| placeholder-class | string([string.ClassString](/uts/data-type.md#ide-string)) | \"\" | | 指定 placeholder 的样式类,目前仅支持color,font-size和font-weight |\n| maxlength | number | \"不限制长度\" | | 最大输入长度,0和正数为合法值,非法值的时候不限制最大长度 |\n| cursor-spacing | number | 0 | | 指定光标与键盘的距离,单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 |\n| cursor-color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"\" | | 指定光标颜色 |\n| auto-focus | boolean | false | | 自动获取焦点,与`focus`属性对比,此属性只会首次生效。 |\n| focus | boolean | false | | 获取焦点 |\n| confirm-type | send \\| search \\| next \\| go \\| done | \"done\" | | 设置键盘右下角按钮的文字,仅在 type为text 时生效。 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| send | | 发送 |\n@| search | | 搜索 |\n@| next | | 下一个 |\n@| go | | 前往 |\n@| done | | 完成 |\n| confirm-hold | boolean | false | | 点击键盘右下角按钮时是否保持键盘不收起 |\n| cursor | number | 0 | | 指定focus时的光标位置 |\n| selection-start | number | -1 | | 光标起始位置,自动聚集时有效,需与selection-end搭配使用 |\n| selection-end | number | -1 | | 光标结束位置,自动聚集时有效,需与selection-satrt搭配使用 |\n| adjust-position | boolean | true | | 键盘弹起时,是否自动上推页面 |\n| hold-keyboard | boolean | false | | focus时,点击页面的时候不收起键盘 |\n| inputmode | none \\| text \\| decimal \\| numeric \\| tel \\| search \\| email \\| url | \"text\" | | 是一个枚举属性,它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。在符合条件的高版本webview里,uni-app的 web 和 app-vue 平台中可使用本属性。 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| none | | 无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用。 |\n@| text | | 使用用户本地区域设置的标准文本输入键盘。 |\n@| decimal | | 小数输入键盘,包含数字和分隔符(通常是“ . ”或者“ , ”),设备可能也可能不显示减号键。 |\n@| numeric | | 数字输入键盘,所需要的就是 0 到 9 的数字,设备可能也可能不显示减号键。 |\n@| tel | | 电话输入键盘,包含 0 到 9 的数字、星号(*)和井号(#)键。表单输入里面的电话输入通常应该使用 \\ 。 |\n@| search | | 为搜索输入优化的虚拟键盘,比如,返回键可能被重新标记为“搜索”,也可能还有其他的优化。 |\n@| email | | 为邮件地址输入优化的虚拟键盘,通常包含\"@\"符号和其他优化。表单里面的邮件地址输入应该使用 \\ 。 |\n@| url | | 为网址输入优化的虚拟键盘,比如,“/”键会更加明显、历史记录访问等。表单里面的网址输入通常应该使用 \\ 。 |\n| @input | (event: [UniInputEvent](#uniinputevent)) => void | - | | 当键盘输入时,触发input事件,event.detail = {value, cursor},处理函数可以直接 return 一个字符串,将替换输入框的内容。 |\n| @focus | (event: [UniInputFocusEvent](#uniinputfocusevent)) => void | - | | 输入框聚焦时触发,event.detail = { value, height },height 为键盘高度 |\n| @blur | (event: [UniInputBlurEvent](#uniinputblurevent)) => void | - | | 输入框失去焦点时触发,event.detail = {value: value} |\n| @keyboardheightchange | (event: [UniInputKeyboardHeightChangeEvent](#uniinputkeyboardheightchangeevent)) => void | - | | 键盘高度发生变化的时候触发此事件,event.detail = {height: height, duration: duration} |\n| @confirm | (event: [UniInputConfirmEvent](#uniinputconfirmevent)) => void | - | | 点击完成按钮时触发,event.detail = {value: value} |","event":"\n### 事件\n#### UniInputEvent\n\n```mermaid\ngraph LR\n \nUniInputEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | 输入框内容 |\n@| cursor | number | 是 | - | - | 光标的位置 |\n@| keyCode | number | 是 | - | - | 输入字符的Unicode值 |\n\n\n#### UniInputFocusEvent\n\n```mermaid\ngraph LR\n \nUniInputFocusEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputFocusEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputFocusEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| height | number | 是 | - | | 键盘高度 |\n@| value | string | 是 | - | - | 输入框内容 |\n\n\n#### UniInputBlurEvent\n\n```mermaid\ngraph LR\n \nUniInputBlurEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputBlurEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputBlurEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | 输入框内容 |\n@| cursor | number | 是 | - | - | 选择区域的起始位置 |\n\n\n#### UniInputKeyboardHeightChangeEvent\n\n```mermaid\ngraph LR\n \nUniInputKeyboardHeightChangeEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputKeyboardHeightChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputKeyboardHeightChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| height | number | 是 | - | - | 键盘高度 |\n@| duration | number | 是 | - | - | 持续时间 |\n\n\n#### UniInputConfirmEvent\n\n```mermaid\ngraph LR\n \nUniInputConfirmEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputConfirmEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputConfirmEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | 输入框内容 |\n\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/input/input.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/input/input\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/input/input\n\n>Template\n```vue\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n 设置输入框的初始内容\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n type取值(不同输入法表现可能不一致)\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n 密码输入框\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n 无value设置的密码输入框\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n 占位符样式\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n 设置禁用输入框\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n 设置最大输入长度\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n 设置光标与键盘的距离\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n 自动获取焦点\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n confirm-type取值(不同输入法表现可能不一致)\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n 点击键盘右下角按钮时保持键盘不收起\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n 设置输入框聚焦时光标的位置(点击生效)\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n 设置输入框聚焦时光标的起始位置和结束位置(点击生效)\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n 设置光标颜色为红色\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n 键盘弹起时,自动上推页面\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n 设置hold-keyboard\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n input事件\r\n {{\r\n inputEventDetail\r\n }}\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n focus事件和blur事件\r\n {{\r\n focusAndBlurEventDetail\r\n }}\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n confirm事件\r\n {{\r\n confirmEventDetail\r\n }}\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n keyboardheightchange事件\r\n {{ keyboardHeightChangeEventDetail }}\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n 带清除按钮的输入框\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n 可查看密码的输入框\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n 同时存在 v-model 和 value\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n 设置adjust-position\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n title: 'input',\r\n showClearIcon: false,\r\n inputClearValue: '',\r\n showPassword: true,\r\n cursor: -1,\r\n cursor_color: \"#3393E2\",\r\n selectionStart: -1,\r\n selectionEnd: -1,\r\n inputEventDetail: '',\r\n focusAndBlurEventDetail: '',\r\n confirmEventDetail: '',\r\n keyboardHeightChangeEventDetail: '',\r\n focus: true,\r\n inputPassword: true,\r\n inputTypeTel: \"tel\",\r\n inputPlaceHolderStyle: \"color:red\",\r\n inputPlaceHolderClass: \"uni-input-placeholder-class\" as string.ClassString,\r\n inputMaxLengthValue: \"\",\r\n onMaxLengthInputValue: \"\",\r\n inputMaxLengthFocus: false,\r\n inputPasswordValue: \"cipher\",\r\n inputFocusKeyBoardChangeValue: true,\r\n holdKeyboard: false,\r\n keyboardHeight: 0,\r\n focusedForKeyboardHeightChangeTest: false,\r\n demoValue: '123',\r\n adjustPosition: false\r\n }\r\n },\r\n methods: {\r\n inputFocusKeyBoardChange(e : UniInputKeyboardHeightChangeEvent) {\r\n this.inputFocusKeyBoardChangeValue = e.detail.height > 50\r\n },\r\n onMaxLengthInput(event : UniInputEvent) {\r\n this.onMaxLengthInputValue = event.detail.value\r\n },\r\n setCursor: function (cursor : number) {\r\n (this.$refs['input'] as UniInputElement).focus();\r\n this.cursor = cursor;\r\n },\r\n onCursorBlurChange() {\r\n this.cursor = 0\r\n },\r\n setSelection: function (selectionStart : number, selectionEnd : number) {\r\n (this.$refs['input2'] as UniInputElement).focus();\r\n this.selectionStart = selectionStart;\r\n this.selectionEnd = selectionEnd;\r\n },\r\n onSelectionBlurChange() {\r\n this.selectionEnd = 0;\r\n },\r\n clearInput: function (event : UniInputEvent) {\r\n this.inputClearValue = event.detail.value\r\n if (event.detail.value.length > 0) {\r\n this.showClearIcon = true\r\n } else {\r\n this.showClearIcon = false\r\n }\r\n },\r\n clearIcon: function () {\r\n this.inputClearValue = ''\r\n this.showClearIcon = false\r\n },\r\n changePassword: function () {\r\n this.showPassword = !this.showPassword\r\n },\r\n onInput: function (event : UniInputEvent) {\r\n console.log(\"键盘输入\", JSON.stringify(event.detail));\r\n this.inputEventDetail = JSON.stringify(event.detail)\r\n },\r\n onFocus: function (event : UniInputFocusEvent) {\r\n console.log(\"输入框聚焦\", JSON.stringify(event.detail));\r\n this.focusAndBlurEventDetail = JSON.stringify(event.detail);\r\n },\r\n onBlur: function (event : UniInputBlurEvent) {\r\n console.log(\"输入框失去焦点\", JSON.stringify(event.detail));\r\n this.focusAndBlurEventDetail = JSON.stringify(event.detail);\r\n },\r\n onConfirm: function (event : UniInputConfirmEvent) {\r\n console.log(\"点击完成按钮\", JSON.stringify(event.detail));\r\n this.confirmEventDetail = JSON.stringify(event.detail);\r\n },\r\n onKeyborardHeightChange: function (event : UniInputKeyboardHeightChangeEvent) {\r\n console.log(\"键盘高度发生变化\", JSON.stringify(event.detail));\r\n this.keyboardHeightChangeEventDetail = JSON.stringify(event.detail);\r\n this.keyboardHeight = event.detail.height;\r\n },\r\n test_check_input_value() : number {\r\n return this.onMaxLengthInputValue.length\r\n },\r\n changeCursorColor(event : UniSwitchChangeEvent) {\r\n const checked = event.detail.value;\r\n if (checked) {\r\n this.cursor_color = \"red\"\r\n } else {\r\n this.cursor_color = \"#3393E2\"\r\n }\r\n const input = uni.getElementById(\"uni-input-cursor-color\")\r\n input?.focus()\r\n },\r\n changeHoldKeyboard(event : UniSwitchChangeEvent) {\r\n const checked = event.detail.value;\r\n this.holdKeyboard = checked\r\n },\r\n changeAdjustPosition(event : UniSwitchChangeEvent) {\r\n const checked = event.detail.value;\r\n this.adjustPosition = checked\r\n }\r\n }\r\n }\r\n\n```\n\n:::","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.input)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/input.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=input&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=input&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=input&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=input&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=input&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=input)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=input&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"editor":{"name":"## editor","description":"富文本编辑器,可以对图片、文字进行编辑。","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| read-only | boolean | - | | 设置编辑器为只读。 |\n| placeholder | string | - | | 提示信息。 |\n| show-img-size | boolean | - | | 点击图片时显示图片大小控件。 |\n| show-img-toolbar | boolean | - | | 点击图片时显示工具栏控件。 |\n| show-img-resize | string | - | | 点击图片时显示修改尺寸控件。 |\n| @ready | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 编辑器初始化完成时触发 |\n| @focus | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 编辑器聚焦时触发,event.detail = {html, text, delta} |\n| @blur | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 编辑器失去焦点时触发,detail = {html, text, delta} |\n| @input | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 编辑器内容改变时触发,detail = {html, text, delta} |\n| @statuschange | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 通过 Context 方法改变编辑器内样式时触发,返回选区已设置的样式 |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/editor/editor.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/editor/editor\n\n>Template\n```vue\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n\r\n\r\n \r\n \r\n\r\n\r\n \r\n \r\n \r\n\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n type Context = {\r\n id ?: string;\r\n pageId ?: number;\r\n }\r\n\r\n export default {\r\n data() {\r\n return {\r\n readOnly: false,\r\n formats: {},\r\n editorCtx: {} as Context,\r\n // 自动化测试\r\n autoTest: false,\r\n undoTest: false,\r\n redoTest: false,\r\n removeFormatTest: false,\r\n insertImageTest: false,\r\n blurTest: false\r\n }\r\n },\r\n onLoad() {\r\n uni.loadFontFace({\r\n family: 'Pacifico',\r\n source: 'url(\"/static/font/Pacifico-Regular.ttf\")',\r\n success() {\r\n console.log('success load font')\r\n },\r\n fail() {\r\n console.log('fail load font load')\r\n }\r\n })\r\n },\r\n methods: {\r\n readOnlyChange() {\r\n this.readOnly = !this.readOnly\r\n },\r\n onEditorReady() {\r\n uni.createSelectorQuery().select('#editor').context((res) => {\r\n this.editorCtx = res.context\r\n }).exec()\r\n },\r\n // 自动化测试专用\r\n setContents(options) {\r\n this.editorCtx.setContents({\r\n delta: {\r\n ops: options\r\n },\r\n success: (res) => {\r\n console.log('setContents-success', res)\r\n },\r\n fail: (err) => {\r\n console.log(err)\r\n }\r\n })\r\n },\r\n blur() {\r\n this.editorCtx.blur({\r\n success: (res) => {\r\n console.log('编辑器失焦:', res)\r\n this.blurTest = true\r\n },\r\n fail: (err) => {\r\n console.log(err)\r\n }\r\n })\r\n },\r\n getCon() {\r\n this.editorCtx.getContents({\r\n success: (res) => {\r\n console.log('文本详情:', res)\r\n },\r\n fail: (err) => {\r\n console.log(err)\r\n }\r\n })\r\n },\r\n undo() {\r\n this.editorCtx.undo({\r\n success: (res) => {\r\n this.undoTest = true\r\n },\r\n fail: (err) => {\r\n this.undoTest = false\r\n }\r\n })\r\n },\r\n redo() {\r\n this.editorCtx.redo({\r\n success: (res) => {\r\n this.redoTest = true\r\n },\r\n fail: (err) => {\r\n this.redoTest = false\r\n }\r\n })\r\n },\r\n format(e) {\r\n let { name, value } = e.target.dataset\r\n if (!name) return\r\n // console.log('format', name, value)\r\n this.editorCtx.format(name, value)\r\n },\r\n onStatusChange(e) {\r\n const formats = e.detail\r\n this.formats = formats\r\n },\r\n insertDivider() {\r\n this.editorCtx.insertDivider({\r\n success: function () {\r\n console.log('insert divider success')\r\n }\r\n })\r\n },\r\n clear() {\r\n this.editorCtx.clear({\r\n success: function (res) {\r\n console.log(\"clear success\")\r\n }\r\n })\r\n },\r\n clearShowModal() {\r\n uni.showModal({\r\n title: '清空编辑器',\r\n content: '确定清空编辑器全部内容?',\r\n success: res => {\r\n if (res.confirm) {\r\n this.clear()\r\n }\r\n }\r\n })\r\n },\r\n removeFormat() {\r\n this.editorCtx.removeFormat({\r\n success: (res) => {\r\n console.log('removeFormat-success', res)\r\n this.removeFormatTest = true\r\n },\r\n fail: (err) => {\r\n this.removeFormatTest = false\r\n }\r\n })\r\n },\r\n insertDate() {\r\n const date = new Date()\r\n const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`\r\n this.editorCtx.insertText({\r\n text: formatDate\r\n })\r\n },\r\n insertImage(image) {\r\n this.editorCtx.insertImage({\r\n src: image,\r\n alt: '图像',\r\n success: () => {\r\n console.log('insert image success')\r\n this.insertImageTest = true\r\n }\r\n })\r\n },\r\n chooseInsertImage() {\r\n uni.chooseImage({\r\n count: 1,\r\n success: (res) => {\r\n this.insertImage(res.tempFilePaths[0])\r\n }\r\n })\r\n }\r\n }\r\n }\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.editor)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/editor.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=editor&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=editor&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=editor&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=editor&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=editor&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=editor)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=editor&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"label":{"name":"## label","description":"用来改进表单组件的可用性,使用for属性找到对应的id,或者将控件放在该标签下,当点击时,就会触发对应的控件","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| disabled | boolean | - | | 是否禁用 |\n| for | string | - | | 绑定控件的 id |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/label/label.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/label/label\n\n>Template\n```vue\n\r\n \r\n \r\n \r\n \r\n 表单组件在label内\r\n \r\n \r\n \r\n \r\n\r\n \r\n label用for标识表单组件\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n label内有多个时选中第一个\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n title: 'label',\r\n checkboxItems: [{\r\n name: 'USA',\r\n value: '美国'\r\n },\r\n {\r\n name: 'CHN',\r\n value: '中国',\r\n checked: 'true'\r\n }\r\n ],\r\n radioItems: [{\r\n name: 'USA',\r\n value: '美国'\r\n },\r\n {\r\n name: 'CHN',\r\n value: '中国',\r\n checked: 'true'\r\n }\r\n ],\r\n hidden: false,\r\n checkboxValue: [] as string[],\r\n radioValue: ''\r\n }\r\n },\r\n methods: {\r\n checkboxChange: function (e : UniCheckboxGroupChangeEvent) {\r\n console.log(e.detail.value)\r\n this.checkboxValue = e.detail.value\r\n },\r\n radioChange: function (e : UniRadioGroupChangeEvent) {\r\n console.log(e.detail.value)\r\n this.radioValue = e.detail.value\r\n }\r\n }\r\n }\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.label)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/label.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=label&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=label&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=label&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=label&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=label&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=label)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=label&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"picker":{"name":"## picker","description":"从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器。","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| disabled | boolean | - | | 是否禁用 |\n| mode | string | - | | 选择器类型 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| selector | - | 普通选择器 |\n@| multiSelector | - | 多列选择器 |\n@| time | - | 时间选择器 |\n@| date | - | 日期选择器 |\n@| region | - | 省市选择器 |\n| range | array | - | | mode为 selector 或 multiSelector 时,range 有效 |\n| range-key | string | - | | 当 range 是一个 Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 |\n| value | string | - | | mode为select或multiSelector时:value 的值表示选择了 range 中的第几个(下标从 0 开始);mode为time时:表示选中的时间,格式为\"hh:mm\";mode为date时:表示选中的日期,格式为\"YYYY-MM-DD\";mode为region时:
\t\t表示选中的省市区,默认选中每一列的第一个值。 |\n| start | string | - | | mode为time:表示有效时间范围的开始,字符串格式为\"hh:mm\";mode为date:表示有效日期范围的开始,字符串格式为\"YYYY-MM-DD\" |\n| end | string | - | | mode为time:表示有效时间范围的结束,字符串格式为\"hh:mm\";mode为date:表示有效日期范围的结束,字符串格式为\"YYYY-MM-DD\" |\n| fields | string | - | | 有效值 year,month,day,表示选择器的粒度 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| year | - | 选择器粒度为年 |\n@| month | - | 选择器粒度为月份 |\n@| day | - | 选择器粒度为天 |\n| custom-item | string | - | | 可为每一列的顶部添加一个自定义的项 |\n| @change | (event: [UniEvent](/component/common.md#unievent)) => void | - | | value 改变时触发 change 事件,event.detail = {value: value} |\n| @columnchange | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 某一列的值改变时触发 columnchange 事件,event.detail = {column: column, value: value},column 的值表示改变了第几列(下标从0开始),value 的值表示变更值的下标 |\n| @cancel | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 取消选择时触发 |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/picker/picker.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/picker/picker\n\n>Template\n```vue\n\r\n \r\n \r\n 普通选择器\r\n \r\n \r\n \r\n 当前选择\r\n \r\n \r\n \r\n {{array[index].name}}\r\n \r\n \r\n \r\n \r\n\r\n 多列选择器\r\n \r\n \r\n \r\n 当前选择\r\n \r\n \r\n \r\n \r\n {{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}\r\n \r\n \r\n \r\n \r\n \r\n\r\n 时间选择器\r\n \r\n \r\n \r\n 当前选择\r\n \r\n \r\n \r\n {{time}}\r\n \r\n \r\n \r\n \r\n \r\n 注:选择 09:01 ~ 21:01 之间的时间, 不在区间内不能选中\r\n \r\n\r\n 日期选择器\r\n \r\n \r\n \r\n 当前选择\r\n \r\n \r\n \r\n {{date}}\r\n \r\n \r\n \r\n \r\n \r\n 注:选择当前时间 ±10 年之间的时间, 不在区间内不能选中\r\n \r\n \r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n function getDate(type ?: string) : string {\r\n const date = new Date();\r\n\r\n let year : string | number = date.getFullYear();\r\n let month : string | number = date.getMonth() + 1;\r\n let day : string | number = date.getDate();\r\n\r\n if (type === 'start') {\r\n year = year - 10;\r\n } else if (type === 'end') {\r\n year = year + 10;\r\n }\r\n month = month > 9 ? month : '0' + month;;\r\n day = day > 9 ? day : '0' + day;\r\n\r\n return `${year}-${month}-${day}`;\r\n }\r\n export default {\r\n data() {\r\n return {\r\n title: 'picker',\r\n array: [{ name: '中国' }, { name: '美国' }, { name: '巴西' }, { name: '日本' }],\r\n index: 0,\r\n multiArray: [\r\n ['亚洲', '欧洲'],\r\n ['中国', '日本'],\r\n ['北京', '上海', '广州']\r\n ],\r\n multiIndex: [0, 0, 0],\r\n date: getDate(),\r\n startDate: getDate('start'),\r\n endDate: getDate('end'),\r\n time: '12:01'\r\n }\r\n },\r\n methods: {\r\n bindPickerChange: function (e) {\r\n console.log('picker发送选择改变,携带值为:' + e.detail.value)\r\n this.index = e.detail.value\r\n },\r\n bindMultiPickerColumnChange: function (e) {\r\n console.log('修改的列为:' + e.detail.column + ',值为:' + e.detail.value)\r\n this.multiIndex[e.detail.column] = e.detail.value\r\n switch (e.detail.column) {\r\n case 0: //拖动第1列\r\n switch (this.multiIndex[0]) {\r\n case 0:\r\n this.multiArray[1] = ['中国', '日本']\r\n this.multiArray[2] = ['北京', '上海', '广州']\r\n break\r\n case 1:\r\n this.multiArray[1] = ['英国', '法国']\r\n this.multiArray[2] = ['伦敦', '曼彻斯特']\r\n break\r\n }\r\n this.multiIndex.splice(1, 1, 0)\r\n this.multiIndex.splice(2, 1, 0)\r\n break\r\n case 1: //拖动第2列\r\n switch (this.multiIndex[0]) { //判断第一列是什么\r\n case 0:\r\n switch (this.multiIndex[1]) {\r\n case 0:\r\n this.multiArray[2] = ['北京', '上海', '广州']\r\n break\r\n case 1:\r\n this.multiArray[2] = ['东京', '北海道']\r\n break\r\n }\r\n break\r\n case 1:\r\n switch (this.multiIndex[1]) {\r\n case 0:\r\n this.multiArray[2] = ['伦敦', '曼彻斯特']\r\n break\r\n case 1:\r\n this.multiArray[2] = ['巴黎', '马赛']\r\n break\r\n }\r\n break\r\n }\r\n this.multiIndex.splice(2, 1, 0)\r\n break\r\n }\r\n this.$forceUpdate()\r\n },\r\n bindDateChange: function (e) {\r\n this.date = e.detail.value\r\n },\r\n bindTimeChange: function (e) {\r\n this.time = e.detail.value\r\n }\r\n }\r\n }\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.picker)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/picker.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=picker&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=picker&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=picker&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=picker&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=picker&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=picker)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=picker&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"picker-view-column":{"name":"## picker-view-column","description":"仅可放置于 picker-view 中,其子节点未继承 picker-view 的选中框的高度,需要自己设置高度并居中","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.picker-view.picker-view-column)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/picker-view.html#picker-view-column)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=picker-view-column&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=picker-view-column&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=picker-view-column&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=picker-view-column&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=picker-view-column&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=picker-view-column)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=picker-view-column&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"picker-view":{"name":"## picker-view","description":"> 组件类型:UniPickerViewElement \n\n 嵌入页面的滚动选择器","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| value | array\\ | - | | picker-view-column 选择的第几项 |\n| indicator-style | string([string.CSSString](/uts/data-type.md#ide-string)) | - | | 设置选择器中间选中框的样式 |\n| indicator-class | string([string.ClassString](/uts/data-type.md#ide-string)) | - | | 设置选择器中间选中框的类名 |\n| mask-style | string([string.CSSString](/uts/data-type.md#ide-string)) | - | | 设置蒙层的样式 |\n| mask-top-style | string([string.CSSString](/uts/data-type.md#ide-string)) | - | | 设置蒙层上半部分的样式 |\n| mask-bottom-style | string([string.CSSString](/uts/data-type.md#ide-string)) | - | | 设置蒙层下半部分的样式 |\n| mask-class | string([string.ClassString](/uts/data-type.md#ide-string)) | - | | 设置蒙层的类名 |\n| @change | (event: [UniPickerViewChangeEvent](#unipickerviewchangeevent)) => void | - | | 当滚动选择,value 改变时触发 change 事件,event.detail = {value: value};value为数组,表示 picker-view 内的 picker-view-column 当前选择的是第几项(下标从 0
\t\t开始) |","event":"\n### 事件\n#### UniPickerViewChangeEvent\n\n```mermaid\ngraph LR\n \nUniPickerViewChangeEvent -- Extends --> UniCustomEvent<UniPickerViewChangeEventDetail>\n style UniCustomEvent<UniPickerViewChangeEventDetail> color:#42b983\n click UniCustomEvent<UniPickerViewChangeEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniPickerViewChangeEventDetail\n\n\n###### UniPickerViewChangeEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| value | Array\\ | 是 | - | - | - |\n\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/picker-view/picker-view.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/picker-view/picker-view\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/picker-view/picker-view\n\n>Template\n```vue\n\r\n \r\n \r\n \r\n \r\n 日期:{{year}}年{{month}}月{{day}}日\r\n \r\n \r\n \r\n \r\n {{item}}年\r\n \r\n \r\n {{item}}月\r\n \r\n \r\n \r\n {{item}}日\r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n import { state, setEventCallbackNum } from '@/store/index.uts'\r\n export default {\r\n data() {\r\n const date = new Date()\r\n const _years : number[] = []\r\n const _year = date.getFullYear()\r\n const _months : number[] = []\r\n const _month : number = date.getMonth() + 1\r\n const _days : number[] = []\r\n const _day = date.getDate()\r\n for (let i = 2000; i <= _year; i++) {\r\n _years.push(i)\r\n }\r\n for (let i = 1; i <= 12; i++) {\r\n _months.push(i)\r\n }\r\n for (let i = 1; i <= 31; i++) {\r\n _days.push(i)\r\n }\r\n return {\r\n title: 'picker-view',\r\n years: _years as number[],\r\n year: _year as number,\r\n months: _months as number[],\r\n month: _month as number,\r\n days: _days as number[],\r\n day: _day as number,\r\n value: [_year - 2000, _month - 1, _day - 1] as number[],\r\n result: [] as number[],\r\n indicatorStyle: 'height: 50px;',\r\n // 自动化测试\r\n indicatorClass: '',\r\n maskStyle: '',\r\n maskClass: '',\r\n maskTopStyle: '',\r\n maskBottomStyle: ''\r\n }\r\n },\r\n methods: {\r\n // 自动化测试\r\n getEventCallbackNum() : number {\r\n return state.eventCallbackNum\r\n },\r\n // 自动化测试\r\n setEventCallbackNum(num : number) {\r\n setEventCallbackNum(num)\r\n },\r\n bindChange(e : UniPickerViewChangeEvent) {\r\n // 自动化测试\r\n console.log(e.target?.tagName, e.type);\r\n if ((e.target?.tagName ?? '').includes('PICKER-VIEW')) {\r\n this.setEventCallbackNum(state.eventCallbackNum + 1)\r\n }\r\n if (e.type === 'change') {\r\n this.setEventCallbackNum(state.eventCallbackNum + 2)\r\n }\r\n const val = e.detail.value\r\n this.result = val\r\n this.year = this.years[val[0]]\r\n this.month = this.months[val[1]]\r\n this.day = this.days[val[2]]\r\n },\r\n setValue() {\r\n this.value = [0, 0, 0] as number[]\r\n },\r\n setValue1() {\r\n this.value = [10, 10, 10] as number[]\r\n },\r\n }\r\n }\r\n\n```\n\n:::","children":"### 子组件 @children-tags \n - [picker-view-column](picker-view-column.md)","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.picker-view.picker-view)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/picker-view.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=picker-view&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=picker-view&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=picker-view&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=picker-view&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=picker-view&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=picker-view)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=picker-view&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"radio":{"name":"## radio","description":"> 组件类型:UniRadioElement \n\n 单选项。在1组radio-group中只能选中1个","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| disabled | boolean | false | | 是否禁用 |\n| value | string | - | | \\ 标识。当该radio 选中时,radio-group的 change 事件会携带radio的value |\n| checked | boolean | false | | \\ 当前是否选中 |\n| backgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | | radio默认的背景颜色 |\n| borderColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#d1d1d1\" | | radio默认的边框颜色 |\n| activeBackgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007AFF\" | | radio选中时的背景颜色,优先级大于color属性 |\n| activeBorderColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"\" | | radio选中时的边框颜色 |\n| foreColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | | radio的图标颜色 |\n| ~~iconColor~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | | radio的图标颜色 (使用foreColor替代) |\n| ~~color~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007AFF\" | | radio的颜色 (使用foreColor替代) |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/radio/radio.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/radio/radio\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/radio/radio\n\n>Template\n```vue\n\r\n\r\n\r\n \r\n \r\n uni-app-x\r\n \r\n \r\n\r\n \r\n \r\n \r\n 当前是否选中\" @change=\"change_checked_boolean\">\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n 默认样式 \r\n \r\n \r\n 选中\r\n \r\n {{\r\n text\r\n }}\r\n 禁用\r\n {{\r\n wrapText\r\n }}\r\n \r\n \r\n\r\n \r\n \r\n 不同颜色和尺寸的radio \r\n \r\n \r\n 选中\r\n \r\n 未选中\r\n \r\n \r\n\r\n \r\n \r\n 推荐展示样式 \r\n \r\n \r\n \r\n \r\n \r\n {{ item.name }}\r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n type ItemType = {\r\n value : string\r\n name : string\r\n }\r\n export default {\r\n data() {\r\n return {\r\n items: [\r\n {\r\n value: 'CHN',\r\n name: '中国',\r\n },\r\n {\r\n value: 'USA',\r\n name: '美国',\r\n },\r\n\r\n {\r\n value: 'BRA',\r\n name: '巴西',\r\n },\r\n {\r\n value: 'JPN',\r\n name: '日本',\r\n },\r\n {\r\n value: 'ENG',\r\n name: '英国',\r\n },\r\n {\r\n value: 'FRA',\r\n name: '法国',\r\n },\r\n ] as ItemType[],\r\n current: 0,\r\n eventTest: false,\r\n\r\n value: '',\r\n text: '未选中',\r\n wrapText: 'uni-app x,终极跨平台方案\\nuts,大一统语言',\r\n disabled: true,\r\n checked: true,\r\n color: '#007aff',\r\n // 组件属性 autotest\r\n checked_boolean: false,\r\n disabled_boolean: false,\r\n color_input: \"#007AFF\",\r\n backgroundColor_input: \"#ffffff\",\r\n borderColor_input: \"#d1d1d1\",\r\n activeBackgroundColor_input: \"#007AFF\",\r\n activeBorderColor_input: \"\",\r\n iconColor_input: \"#ffffff\"\r\n }\r\n },\r\n\r\n methods: {\r\n radioChange(e : UniRadioGroupChangeEvent) {\r\n\r\n // 自动化测试\r\n console.log('test: radio event detail', e.target?.tagName, e.type)\r\n if ((e.target?.tagName ?? '') == 'RADIO-GROUP' && e.type == 'change') {\r\n this.eventTest = true\r\n }\r\n\r\n const selected = this.items.find((item) : boolean => {\r\n return item.value == e.detail.value\r\n })\r\n uni.showToast({\r\n icon: 'none',\r\n title: '当前选中:' + selected?.name,\r\n })\r\n },\r\n testChange(e : UniRadioGroupChangeEvent) {\r\n\r\n this.value = e.detail.value\r\n },\r\n radio_click() { console.log(\"组件被点击时触发\") },\r\n radio_touchstart() { console.log(\"手指触摸动作开始\") },\r\n radio_touchmove() { console.log(\"手指触摸后移动\") },\r\n radio_touchcancel() { console.log(\"手指触摸动作被打断,如来电提醒,弹窗\") },\r\n radio_touchend() { console.log(\"手指触摸动作结束\") },\r\n radio_tap() { console.log(\"手指触摸后马上离开\") },\r\n radio_longpress() { console.log(\"如果一个组件被绑定了 longpress 事件,那么当用户长按这个组件时,该事件将会被触发。\") },\r\n change_checked_boolean(checked : boolean) { this.checked_boolean = checked },\r\n change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },\r\n confirm_color_input(value : string) { this.color_input = value },\r\n confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },\r\n confirm_borderColor_input(value : string) { this.borderColor_input = value },\r\n confirm_activeBackgroundColor_input(value : string) { this.activeBackgroundColor_input = value },\r\n confirm_activeBorderColor_input(value : string) { this.activeBorderColor_input = value },\r\n confirm_iconColor_input(value : string) { this.iconColor_input = value }\r\n }\r\n }\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.radio.radio)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/radio.html#radio)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=radio&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=radio&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=radio&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=radio&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=radio&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=radio)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=radio&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"radio-group":{"name":"## radio-group","description":"> 组件类型:UniRadioGroupElement \n\n 单选框组","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | - | | 表单的控件名称,作为键值对的一部分与表单(form组件)一同提交 |\n| @change | (event: [UniRadioGroupChangeEvent](#uniradiogroupchangeevent)) => void | - | | radio-group 中的选中项发生变化时触发 change 事件,event.detail = {value: 选中项radio的value} |","event":"\n### 事件\n#### UniRadioGroupChangeEvent\n\n```mermaid\ngraph LR\n \nUniRadioGroupChangeEvent -- Extends --> UniCustomEvent<UniRadioGroupChangeEventDetail>\n style UniCustomEvent<UniRadioGroupChangeEventDetail> color:#42b983\n click UniCustomEvent<UniRadioGroupChangeEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniRadioGroupChangeEventDetail\n\n\n###### UniRadioGroupChangeEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| value | string | 是 | - | - | - |\n\n","example":"","children":"### 子组件 @children-tags \n - [radio](radio.md)","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.radio.radio-group)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/radio.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=radio-group&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=radio-group&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=radio-group&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=radio-group&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=radio-group&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=radio-group)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=radio-group&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"slider":{"name":"## slider","description":"> 组件类型:UniSliderElement \n\n 滑动选择器","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | - | | 表单的控件名称,作为键值对的一部分与表单(form组件)一同提交 |\n| disabled | boolean | - | | 是否禁用 |\n| min | number | 0 | | slider 最小值 |\n| max | number | 100 | | slider 最大值 |\n| step | number | 1 | | slider 步长,取值必须大于 0,并且可被(max - min)整除 |\n| value | number | 0 | | radio当前取值 |\n| activeBackgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | | slider 滑块左侧已选择部分的线条颜色 |\n| backgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#e9e9e9\" | | radio背景条的颜色 |\n| block-size | number | 28 | | radio滑块的大小,取值范围为 12 - 28 |\n| foreColor | string([string.ColorString](/uts/data-type.md#ide-string)) | - | | slider 的滑块背景颜色 |\n| show-value | boolean | false | | 是否显示当前 value |\n| @change | (event: [UniSliderChangeEvent](#unisliderchangeevent)) => void | - | | 完成一次拖动后触发的事件,event.detail = {value: value} |\n| @changing | (event: [UniSliderChangeEvent](#unisliderchangeevent)) => void | - | | 拖动过程中触发的事件,event.detail = {value: value} |\n| ~~block-color~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | | 滑块颜色 (使用foreColor替代) |\n| ~~activeColor~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | | slider 滑块左侧已选择部分的线条颜色 |","event":"\n### 事件\n#### UniSliderChangeEvent\n\n```mermaid\ngraph LR\n \nUniSliderChangeEvent -- Extends --> UniCustomEvent<UniSliderChangeEventDetail>\n style UniCustomEvent<UniSliderChangeEventDetail> color:#42b983\n click UniCustomEvent<UniSliderChangeEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniSliderChangeEventDetail\n\n\n###### UniSliderChangeEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| value | number | 是 | - | - | - |\n\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/slider/slider.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/slider/slider\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/slider/slider\n\n>Template\n```vue\n\r\n\r\n\r\n \r\n uni-app-x\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n 显示当前value\r\n \r\n \r\n \r\n\r\n 设置步进:step=10跳动\r\n \r\n \r\n 0\r\n 100\r\n \r\n \r\n \r\n\r\n 浮点步进:step=0.01跳动\r\n \r\n \r\n \r\n\r\n 设置最小/最大值\r\n \r\n \r\n \r\n\r\n 不同颜色和大小的滑块\r\n \r\n \r\n \r\n 暗黑模式\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n sliderValue: 50,\r\n sliderBlockSize: 20,\r\n sliderBackgroundColor: \"#000000\",\r\n sliderActiveColor: \"#FFCC33\",\r\n sliderBlockColor: \"#8A6DE9\",\r\n // 组件属性 autotest\r\n show_value_boolean: false,\r\n disabled_boolean: false,\r\n min_input: 0,\r\n max_input: 100,\r\n step_input: 1,\r\n value_input: 0,\r\n activeColor_input: \"#007aff\",\r\n backgroundColor_input: \"#e9e9e9\",\r\n block_size_input: 28,\r\n block_color_input: \"#ffffff\",\r\n valueColor: \"#888888\",\r\n };\r\n },\r\n methods: {\r\n sliderChange(e : UniSliderChangeEvent) {\r\n console.log(\"value 发生变化:\" + e.detail.value);\r\n },\r\n slider_click() {\r\n console.log(\"组件被点击时触发\");\r\n },\r\n slider_touchstart() {\r\n console.log(\"手指触摸动作开始\");\r\n },\r\n slider_touchmove() {\r\n console.log(\"手指触摸后移动\");\r\n },\r\n slider_touchcancel() {\r\n console.log(\"手指触摸动作被打断,如来电提醒,弹窗\");\r\n },\r\n slider_touchend() {\r\n console.log(\"手指触摸动作结束\");\r\n },\r\n slider_tap() {\r\n console.log(\"手指触摸后马上离开\");\r\n },\r\n slider_longpress() {\r\n console.log(\r\n \"如果一个组件被绑定了 longpress 事件,那么当用户长按这个组件时,该事件将会被触发。\"\r\n );\r\n },\r\n slider_change() {\r\n console.log(\"完成一次拖动后触发的事件,event.detail = {value: value}\");\r\n },\r\n slider_changing() {\r\n console.log(\"拖动过程中触发的事件,event.detail = {value: value}\");\r\n },\r\n change_show_value_boolean(checked : boolean) {\r\n this.show_value_boolean = checked;\r\n },\r\n change_disabled_boolean(checked : boolean) {\r\n this.disabled_boolean = checked;\r\n },\r\n confirm_min_input(value : number) {\r\n this.min_input = value;\r\n },\r\n confirm_max_input(value : number) {\r\n this.max_input = value;\r\n },\r\n confirm_step_input(value : number) {\r\n this.step_input = value;\r\n },\r\n confirm_value_input(value : number) {\r\n this.value_input = value;\r\n },\r\n confirm_activeColor_input(value : string) {\r\n this.activeColor_input = value;\r\n },\r\n confirm_backgroundColor_input(value : string) {\r\n this.backgroundColor_input = value;\r\n },\r\n confirm_block_size_input(value : number) {\r\n this.block_size_input = value;\r\n },\r\n confirm_block_color_input(value : string) {\r\n this.block_color_input = value;\r\n },\r\n confirm_value_color_input(value : string) {\r\n this.valueColor = value;\r\n },\r\n },\r\n };\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.slider)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/slider.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=slider&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=slider&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=slider&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=slider&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=slider&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=slider)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=slider&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"switch":{"name":"## switch","description":"> 组件类型:UniSwitchElement \n\n 开关选择器","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | - | | 表单的控件名称,作为键值对的一部分与表单(form组件)一同提交 |\n| checked | boolean | - | | 是否选中 |\n| type | string | - | | 样式,有效值:switch, checkbox |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| switch | | - |\n@| checkbox | | - |\n| backgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | - | | switch 的关闭状态背景颜色 |\n| activeBackgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | - | | switch 的开启状态背景颜色 |\n| foreColor | string([string.ColorString](/uts/data-type.md#ide-string)) | - | | switch 的滑块背景颜色 |\n| activeForeColor | string([string.ColorString](/uts/data-type.md#ide-string)) | - | | switch 的开启状态下的滑块背景颜色 |\n| disabled | boolean | - | | 是否禁用 |\n| @change | (event: [UniSwitchChangeEvent](#uniswitchchangeevent)) => void | - | | checked 改变时触发 change 事件,event.detail={ value:checked} |\n| ~~color~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | - | | switch 的颜色,同 css 的 color (使用foreColor替代) |","event":"\n### 事件\n#### UniSwitchChangeEvent\n\n```mermaid\ngraph LR\n \nUniSwitchChangeEvent -- Extends --> UniCustomEvent<UniSwitchChangeEventDetail>\n style UniCustomEvent<UniSwitchChangeEventDetail> color:#42b983\n click UniCustomEvent<UniSwitchChangeEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniSwitchChangeEventDetail\n\n\n###### UniSwitchChangeEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| value | boolean | 是 | - | - | - |\n\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/switch/switch.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/switch/switch\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/switch/switch\n\n>Template\n```vue\n\r\n \r\n \r\n 默认样式\r\n \r\n \r\n \r\n \r\n 暗黑样式\r\n \r\n \r\n \r\n \r\n 禁用样式\r\n \r\n \r\n \r\n \r\n 不同颜色和尺寸的switch\r\n \r\n \r\n \r\n \r\n 推荐展示样式\r\n \r\n \r\n \r\n 开启中\r\n \r\n \r\n \r\n 关闭\r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n title: 'switch 开关',\r\n checked: true,\r\n color: '#FFCC33',\r\n clickCheckedValue: true,\r\n testVerifyEvent: false,\r\n }\r\n },\r\n methods: {\r\n switch1Change: function (e : UniSwitchChangeEvent) {\r\n this.clickCheckedValue = e.detail.value\r\n console.log('switch1 发生 change 事件,携带值为', e.detail.value)\r\n\r\n // 仅测试\r\n this.testVerifyEvent = (e.type == 'change' && (e.target?.tagName ?? '') == \"SWITCH\")\r\n },\r\n switch2Change: function (e : UniSwitchChangeEvent) {\r\n console.log('switch2 发生 change 事件,携带值为', e.detail.value)\r\n }\r\n }\r\n }\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.switch)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/switch.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=switch&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=switch&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=switch&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=switch&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=switch&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=switch)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=switch&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"textarea":{"name":"## textarea","description":"> 组件类型:[UniTextareaElement](/dom/unitextareaelement.md) \n\n 多行输入框","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | - | | 表单的控件名称,作为键值对的一部分与表单(form组件)一同提交 |\n| value | string | \"\" | | 输入框的初始内容 |\n| placeholder | string | \"\" | | 输入框为空时占位符 |\n| placeholder-style | string | \"\" | | 指定 placeholder 的样式,目前仅支持color,font-size和font-weight |\n| placeholder-class | string([string.ClassString](/uts/data-type.md#ide-string)) | \"\" | | 指定 placeholder 的样式类,目前仅支持color,font-size和font-weight |\n| maxlength | number | \"不限制长度\" | | 最大输入长度,0和正数为合法值,非法值的时候不限制最大长度 |\n| auto-focus | boolean | false | | 自动获取焦点,与`focus`属性对比,此属性只会首次生效。 |\n| focus | boolean | false | | 获取焦点 |\n| confirm-type | return \\| send \\| search \\| next \\| go \\| done | \"return\" | | 设置键盘右下角按钮的文字 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| return | | 换行 |\n@| send | | 发送 |\n@| search | | 搜索 |\n@| next | | 下一个 |\n@| go | | 前往 |\n@| done | | 完成 |\n| cursor | number | 0 | | 指定focus时的光标位置 |\n| confirm-hold | boolean | false | | 点击键盘右下角按钮时是否保持键盘不收起 |\n| auto-height | boolean | false | | 是否自动增高,设置auto-height时,style.height不生效 |\n| cursor-spacing | number | 0 | | 指定光标与键盘的距离,单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 |\n| cursor-color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"\" | | 指定光标颜色 |\n| selection-start | number | -1 | | 光标起始位置,自动聚集时有效,需与selection-end搭配使用 |\n| selection-end | number | -1 | | 光标结束位置,自动聚集时有效,需与selection-satrt搭配使用 |\n| adjust-position | boolean | true | | 键盘弹起时,是否自动上推页面 |\n| hold-keyboard | boolean | false | | focus时,点击页面的时候不收起键盘 |\n| @confirm | (event: [UniInputConfirmEvent](#uniinputconfirmevent)) => void | - | | 点击完成时, 触发 confirm 事件,event.detail = {value: value} |\n| @input | (event: [UniInputEvent](#uniinputevent)) => void | - | | 当键盘输入时,触发 input 事件,event.detail = {value, cursor}, @input 处理函数的返回值并不会反映到 textarea 上 |\n| @linechange | (event: [UniTextareaLineChangeEvent](#unitextarealinechangeevent)) => void | - | | 输入框行数变化时调用,event.detail = {height: 0, heightRpx: 0, lineCount: 0} |\n| @blur | (event: [UniTextareaBlurEvent](#unitextareablurevent)) => void | - | | 输入框失去焦点时触发,event.detail = {value, cursor} |\n| @keyboardheightchange | (event: [UniInputKeyboardHeightChangeEvent](#uniinputkeyboardheightchangeevent)) => void | - | | 键盘高度发生变化的时候触发此事件,event.detail = {height: height, duration: duration} |\n| @focus | (event: [UniTextareaFocusEvent](#unitextareafocusevent)) => void | - | | 输入框聚焦时触发,event.detail = { value, height },height 为键盘高度,在基础库 1.9.90 起支持 |","event":"\n### 事件\n#### UniInputConfirmEvent\n\n```mermaid\ngraph LR\n \nUniInputConfirmEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputConfirmEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputConfirmEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | 输入框内容 |\n\n\n#### UniInputEvent\n\n```mermaid\ngraph LR\n \nUniInputEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | 输入框内容 |\n@| cursor | number | 是 | - | - | 光标的位置 |\n@| keyCode | number | 是 | - | - | 输入字符的Unicode值 |\n\n\n#### UniTextareaLineChangeEvent\n\n```mermaid\ngraph LR\n \nUniTextareaLineChangeEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniTextareaLineChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniTextareaLineChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| lineCount | number | 是 | - | - | 行数 |\n@| heightRpx | number | 是 | - | - | textarea的高度 |\n@| height | number | 是 | - | - | textarea的高度 |\n\n\n#### UniTextareaBlurEvent\n\n```mermaid\ngraph LR\n \nUniTextareaBlurEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniTextareaBlurEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniTextareaBlurEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | 输入框内容 |\n@| cursor | number | 是 | - | - | 选择区域的起始位置 |\n\n\n#### UniInputKeyboardHeightChangeEvent\n\n```mermaid\ngraph LR\n \nUniInputKeyboardHeightChangeEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputKeyboardHeightChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputKeyboardHeightChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| height | number | 是 | - | - | 键盘高度 |\n@| duration | number | 是 | - | - | 持续时间 |\n\n\n#### UniTextareaFocusEvent\n\n```mermaid\ngraph LR\n \nUniTextareaFocusEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniTextareaFocusEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniTextareaFocusEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| height | number | 是 | - | | 键盘高度 |\n@| value | string | 是 | - | - | 输入框内容 |\n\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/textarea/textarea.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/textarea/textarea\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/textarea/textarea\n\n>Template\n```vue\n\r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n \r\n maxlength 输入最大长度为10\r\n \r\n \r\n \r\n \r\n\r\n \r\n cursor-spacing、placeholder-class、placeholder-style例子\r\n \r\n \r\n \r\n \r\n \r\n 设置输入框聚焦时光标的起始位置和结束位置(点击生效)\r\n \r\n \r\n \r\n \r\n\r\n \r\n 设置hold-keyboard\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n 同时存在 v-model 和 value\r\n \r\n \r\n \r\n \r\n\r\n \r\n 设置adjust-position\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n import { ItemType } from '@/components/enum-data/enum-data'\r\n export default {\r\n data() {\r\n return {\r\n adjust_position_boolean: false,\r\n show_confirm_bar_boolean: false,\r\n fixed_boolean: false,\r\n auto_height_boolean: false,\r\n confirm_hold_boolean: false,\r\n focus_boolean: true,\r\n auto_focus_boolean: false,\r\n default_value: \"1\\n2\\n3\\n4\\n5\\n6\",\r\n inputmode_enum: [{ \"value\": 1, \"name\": \"text\" }, { \"value\": 2, \"name\": \"decimal\" }, { \"value\": 3, \"name\": \"numeric\" }, { \"value\": 4, \"name\": \"tel\" }, { \"value\": 5, \"name\": \"search\" }, { \"value\": 6, \"name\": \"email\" }, { \"value\": 7, \"name\": \"url\" }, { \"value\": 0, \"name\": \"none\" }] as ItemType[],\r\n confirm_type_list: [{ \"value\": 0, \"name\": \"return\" }, { \"value\": 1, \"name\": \"done\" }, { \"value\": 2, \"name\": \"send\" }, { \"value\": 3, \"name\": \"search\" }, { \"value\": 4, \"name\": \"next\" }, { \"value\": 5, \"name\": \"go\" }] as ItemType[],\r\n cursor_color: \"#3393E2\",\r\n cursor: 0,\r\n inputmode_enum_current: 0,\r\n confirm_type_current: 0,\r\n placeholder_value: \"请输入\",\r\n defaultModel: '123',\r\n textareaMaxLengthValue: \"\",\r\n selectionStart: -1,\r\n selectionEnd: -1,\r\n hold_keyboard: false,\r\n adjust_position: false\r\n }\r\n },\r\n\r\n methods: {\r\n textarea_click() { console.log(\"组件被点击时触发\") },\r\n textarea_touchstart() { console.log(\"手指触摸动作开始\") },\r\n textarea_touchmove() { console.log(\"手指触摸后移动\") },\r\n textarea_touchcancel() { console.log(\"手指触摸动作被打断,如来电提醒,弹窗\") },\r\n textarea_touchend() { console.log(\"手指触摸动作结束\") },\r\n textarea_tap() { console.log(\"手指触摸后马上离开\") },\r\n textarea_longpress() { console.log(\"如果一个组件被绑定了 longpress 事件,那么当用户长按这个组件时,该事件将会被触发。\") },\r\n textarea_confirm() { console.log(\"点击完成时, 触发 confirm 事件,event.detail = {value: value}\") },\r\n textarea_input() { console.log(\"当键盘输入时,触发 input 事件,event.detail = {value, cursor}, @input 处理函数的返回值并不会反映到 textarea 上\") },\r\n textarea_linechange() { console.log(\"输入框行数变化时调用,event.detail = {height: 0, height: 0, lineCount: 0}\") },\r\n textarea_blur() { console.log(\"输入框失去焦点时触发,event.detail = {value, cursor}\") },\r\n textarea_keyboardheightchange() { console.log(\"键盘高度发生变化的时候触发此事件,event.detail = {height: height, duration: duration}\") },\r\n textarea_focus() { console.log(\"输入框聚焦时触发,event.detail = { value, height },height 为键盘高度\") },\r\n change_adjust_position_boolean(checked : boolean) { this.adjust_position_boolean = checked },\r\n change_show_confirm_bar_boolean(checked : boolean) { this.show_confirm_bar_boolean = checked },\r\n change_fixed_boolean(checked : boolean) { this.fixed_boolean = checked },\r\n change_auto_height_boolean(checked : boolean) { this.auto_height_boolean = checked },\r\n change_confirm_hold_boolean(checked : boolean) { this.confirm_hold_boolean = checked },\r\n change_focus_boolean(checked : boolean) { this.focus_boolean = checked },\r\n change_auto_focus_boolean(checked : boolean) { this.auto_focus_boolean = checked },\r\n change_cursor_color_boolean(checked : boolean) { if (checked) { this.cursor_color = \"transparent\" } else { this.cursor_color = \"#3393E2\" } },\r\n radio_change_inputmode_enum(checked : number) { this.inputmode_enum_current = checked },\r\n radio_change_confirm_type(checked : number) { this.confirm_type_current = checked },\r\n setSelection: function (selectionStart : number, selectionEnd : number) {\r\n uni.getElementById(\"textarea-instance-2\")?.focus()\r\n this.selectionStart = selectionStart;\r\n this.selectionEnd = selectionEnd;\r\n },\r\n onSelectionBlurChange() {\r\n this.selectionEnd = 0;\r\n },\r\n changeHoldKeyboard(event : UniSwitchChangeEvent) {\r\n const checked = event.detail.value;\r\n this.hold_keyboard = checked;\r\n },\r\n changeAdjustPosition(event : UniSwitchChangeEvent) {\r\n const checked = event.detail.value;\r\n this.adjust_position = checked;\r\n }\r\n }\r\n }\r\n\n```\n\n:::","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.textarea)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/textarea.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=textarea&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=textarea&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=textarea&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=textarea&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=textarea&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=textarea)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=textarea&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"navigator":{"name":"## navigator","description":"> 组件类型:UniNavigatorElement \n\n 页面链接","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| target | string | - | | 在哪个目标上发生跳转,默认当前应用 |\n| url | string([string.PageURIString](/uts/data-type.md#ide-string)) | - | | 当前应用内的跳转链接 |\n| open-type | string | \"navigate\" | | 跳转方式 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| navigate | | 对应 uni.navigateTo 或 navigateToMiniProgram 的功能 |\n@| redirect | | 对应 uni.redirectTo 的功能 |\n@| switchTab | | 对应 uni.switchTab 的功能 |\n@| reLaunch | | 对应 uni.reLaunch 的功能 |\n@| navigateBack | | 对应 uni.navigateBack 的功能 |\n| delta | number | - | | 当 open-type 为 navigateBack 时有效,表示回退的层数 |\n| app-id | string | - | - | 当target=\"miniProgram\"时有效,要打开的小程序 appId |\n| path | string | - | | 当target=\"miniProgram\"时有效,打开的页面路径,如果为空则打开首页 |\n| extra-data | object | - | - | 当target=\"miniProgram\"时有效,需要传递给目标应用的数据,目标应用可在 App.onLaunch(),App.onShow() 中获取到这份数据 |\n| version | string | - | - | 当target=\"miniProgram\"时有效,要打开的小程序版本,有效值 develop(开发版),trial(体验版),release(正式版),仅在当前小程序为开发版或体验版时此参数有效;如果当前小程序是体验版或正式版,则打开的小程序必定是正式版 |\n| animation-type | string | \"pop-in/out\" | | 当 open-type=\"navigateTo\" 或 open-type=\"navigateBack\" 时有效,窗口的显示/关闭的动画类型。 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| auto | - | 自动选择动画效果 |\n@| none | - | 无动画效果 |\n@| slide-in-right | - | 从右侧横向滑动效果 |\n@| slide-in-left | - | 左侧横向滑动效果 |\n@| slide-in-top | - | 从上侧竖向滑动效果 |\n@| slide-in-bottom | - | 从下侧竖向滑动效果 |\n@| fade-in | - | 从透明到不透明逐渐显示效果 |\n@| zoom-out | - | 从小到大逐渐放大显示效果 |\n@| zoom-fade-out | - | 从小到大逐渐放大并且从透明到不透明逐渐显示效果 |\n@| pop-in | - | 从右侧平移入栈动画效果 |\n@| slide-out-right | - | 横向向右侧滑出屏幕动画 |\n@| slide-out-left | - | 横向向左侧滑出屏幕动画 |\n@| slide-out-top | - | 竖向向上侧滑出屏幕动画 |\n@| slide-out-bottom | - | 竖向向下侧滑出屏幕动画 |\n@| fade-out | - | 从不透明到透明逐渐隐藏动画 |\n@| zoom-in | - | 从大逐渐缩小关闭动画 |\n@| zoom-fade-in | - | 从大逐渐缩小并且从不透明到透明逐渐隐藏关闭动画 |\n@| pop-out | - | 从右侧平移出栈动画效果 |\n| animation-duration | number | 300 | | 当 open-type=\"navigateTo\" 或 open-type=\"navigateBack\" 时有效,窗口的显示/关闭动画的持续时间。 |\n| hover-class | string | - | - | 指定按下去的样式类。当 hover-class=\"none\" 时,没有点击态效果 |\n| hover-stop-propagation | boolean | - | - | 指定是否阻止本节点的祖先节点出现点击态 |\n| hover-start-time | number | - | - | 按住后多久出现点击态,单位毫秒 |\n| hover-stay-time | number | - | - | 手指松开后点击态保留时间,单位毫秒 |\n| render-link | boolean | true | | 是否给 navigator 组件加一层 a 标签控制 ssr 渲染 |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/navigator/navigator.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/navigator/navigator\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/navigator/navigator\n\n>Template\n```vue\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n 两端对齐样式测试\r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n title: 'navigator'\r\n }\r\n }\r\n }\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.navigation.navigator)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/navigator.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=navigator&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=navigator&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=navigator&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=navigator&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=navigator&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=navigator)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=navigator&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"image":{"name":"## image","description":"> 组件类型:[UniImageElement](/dom/uniimageelement.md) \n\n 图片","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| src | string([string.ImageURIString](/uts/data-type.md#ide-string)) | - | | 图片资源地址 |\n| mode | string | \"scaleToFill\" | | 图片裁剪、缩放的模式 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| scaleToFill | | 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 |\n@| aspectFit | | 保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。 |\n@| aspectFill | | 保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取 |\n@| widthFix | | 宽度不变,高度自动变化,保持原图宽高比不变 |\n@| heightFix | | 高度不变,宽度自动变化,保持原图宽高比不变 |\n@| top | | 不缩放图片,只显示图片的顶部区域 |\n@| bottom | | 不缩放图片,只显示图片的底部区域 |\n@| center | | 不缩放图片,只显示图片的中间区域 |\n@| left | | 不缩放图片,只显示图片的左边区域 |\n@| right | | 不缩放图片,只显示图片的右边区域 |\n@| top left | | 不缩放图片,只显示图片的左上边区域 |\n@| top right | | 不缩放图片,只显示图片的右上边区域 |\n@| bottom left | | 不缩放图片,只显示图片的左下边区域 |\n@| bottom right | | 不缩放图片,只显示图片的右下边区域 |\n| lazy-load | boolean | false | | 图片懒加载。只针对page与scroll-view下的image有效。 安卓默认懒加载不支持修改 |\n| fade-show | boolean | false | | 图片显示动画效果 |\n| draggable | boolean | false | | 鼠标长按是否能拖动图片(仅H5平台) |\n| @error | (event: [UniImageErrorEvent](#uniimageerrorevent)) => void | - | | 图片加载错误时触发,event.detail = { errMsg } |\n| @load | (event: [UniImageLoadEvent](#uniimageloadevent)) => void | - | | 图片加载完成时触发,event.detail = { width: '图片宽度px', height: '图片高度px' } |","event":"\n### 事件\n#### UniImageErrorEvent\n\n```mermaid\ngraph LR\n \nUniImageErrorEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniImageErrorEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniImageErrorEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| errMsg | string | 是 | - | - | 错误信息 |\n\n\n#### UniImageLoadEvent\n\n```mermaid\ngraph LR\n \nUniImageLoadEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniImageLoadEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniImageLoadEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| width | number | 是 | - | - | 图片宽度 |\n@| height | number | 是 | - | - | 图片高度 |\n\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/image/image.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/image/image\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/image/image\n\n>Template\n```vue\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n title: 'image',\r\n imageSrc: \"/static/test-image/logo.png\" as string.ImageURIString,\r\n loadError: false,\r\n // 自动化测试\r\n autoTest: false,\r\n setCookieImage: \"\",\r\n verifyCookieImage: \"\",\r\n eventLoad: null as UTSJSONObject | null,\r\n eventError: null as UTSJSONObject | null\r\n }\r\n },\r\n methods: {\r\n error(event : ImageErrorEvent) {\r\n this.loadError = true\r\n console.log(event.type, event.detail);\r\n if (this.autoTest) {\r\n this.eventError = {\r\n \"tagName\": event.target?.tagName,\r\n \"type\": event.type,\r\n // \"errMsg\": event.detail.errMsg\r\n };\r\n }\r\n },\r\n load(event : ImageLoadEvent) {\r\n console.log(event.type, event.detail);\r\n if (this.autoTest) {\r\n this.eventLoad = {\r\n \"tagName\": event.target?.tagName,\r\n \"type\": event.type,\r\n \"width\": event.detail.width,\r\n \"height\": event.detail.height\r\n };\r\n }\r\n },\r\n imageFormat() {\r\n uni.navigateTo({\r\n url: '/pages/component/image/image-format'\r\n });\r\n },\r\n imageMode() {\r\n uni.navigateTo({\r\n url: '/pages/component/image/image-mode'\r\n });\r\n },\r\n imagePath() {\r\n uni.navigateTo({\r\n url: '/pages/component/image/image-path'\r\n });\r\n },\r\n imageLarge() {\r\n uni.navigateTo({\r\n url: '/pages/component/image/image-large'\r\n });\r\n }\r\n }\r\n }\r\n\n```\n\n:::","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.media.image)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/image.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=image&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=image&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=image&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=image&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=image&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=image)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=image&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"video":{"name":"## video","description":"> 组件类型:[UniVideoElement](/dom/univideoelement.md) \n\n 视频","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| loop | boolean | false | | 是否循环播放 |\n| src | string([string.VideoURIString](/uts/data-type.md#ide-string)) | - | | 视频资源地址 |\n| initial-time | number | 0 | | 指定视频初始播放位置 |\n| duration | number | - | | 指定视频长度 |\n| controls | boolean | true | | 是否显示默认播放控件(播放/暂停按钮、播放进度、时间) |\n| danmu-list | array | - | | 弹幕列表 |\n| danmu-btn | boolean | false | | 是否显示弹幕按钮,只在初始化时有效,不能动态变更 |\n| enable-danmu | boolean | false | | 是否展示弹幕,只在初始化时有效,不能动态变更 |\n| autoplay | boolean | false | | 是否自动播放 |\n| muted | boolean | false | | 是否静音播放 |\n| page-gesture | boolean | false | | 在非全屏模式下,是否开启亮度与音量调节手势 |\n| direction | number | - | | 设置全屏时视频的方向,不指定则根据宽高比自动判断。有效值为 0(正常竖向), 90(屏幕逆时针90度), -90(屏幕顺时针90度) |\n| show-progress | boolean | true | | 若不设置,宽度大于240时才会显示 |\n| show-fullscreen-btn | boolean | true | | 是否显示全屏按钮 |\n| show-play-btn | boolean | true | | 是否显示视频底部控制栏的播放按钮 |\n| show-center-play-btn | boolean | true | | 是否显示视频中间的播放按钮 |\n| show-loading | boolean | true | | 是否显示loading控件 |\n| enable-progress-gesture | boolean | true | | 是否开启控制进度的手势 |\n| object-fit | string | \"contain\" | | 当视频大小与 video 容器大小不一致时,视频的表现形式。 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| contain | | 包含 |\n@| fill | | 填充 |\n@| cover | | 覆盖 |\n| poster | string | - | | 视频封面的图片网络资源地址,如果 controls 属性值为 false 则设置 poster 无效 |\n| show-mute-btn | boolean | false | | 是否显示静音按钮 |\n| title | string | - | | 视频的标题,全屏时在顶部展示 |\n| play-btn-position | string | - | | 播放按钮的位置 |\n| enable-play-gesture | boolean | false | | 是否开启播放手势,即双击切换播放、暂停 |\n| auto-pause-if-navigate | boolean | - | | 当跳转到其它页面时,是否自动暂停本页面的视频 |\n| auto-pause-if-open-native | boolean | - | | 当跳转到其它小程序宿主原生页面时,是否自动暂停本页面的视频 |\n| vslide-gesture | boolean | false | | 在非全屏模式下,是否开启亮度与音量调节手势(同 page-gesture) |\n| vslide-gesture-in-fullscreen | boolean | true | | 在全屏模式下,是否开启亮度与音量调节手势 |\n| poster-for-crawler | string | - | | 用于给搜索等场景作为视频封面展示,建议使用无播放 icon 的视频封面图,只支持网络地址 |\n| codec | string | \"hardware\" | | 解码器选择 |\n| http-cache | boolean | false | | 是否对 http、https 视频源开启本地缓存 |\n| play-strategy | number | 0 | | 播放策略 |\n| is-live | boolean | - | | 是否为直播源 |\n| @loadedmetadata | (event: [UniVideoLoadedMetadataEvent](#univideoloadedmetadataevent)) => void | - | | 视频元数据加载完成时触发 |\n| @play | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 当开始/继续播放时触发 |\n| @pause | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 当暂停播放时触发 |\n| @ended | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 当播放到视频末尾时触发 |\n| @timeupdate | (event: [UniVideoTimeUpdateEvent](#univideotimeupdateevent)) => void | - | | 播放进度变化时触发,event.detail = { currentTime, duration }。触发频率 250ms 一次 |\n| @fullscreenchange | (event: [UniVideoFullScreenChangeEvent](#univideofullscreenchangeevent)) => void | - | | 当视频进入和退出全屏时触发,event.detail = { fullScreen, direction },direction取为 vertical 或 horizontal |\n| @waiting | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 视频出现缓冲时触发 |\n| @error | (event: [UniVideoErrorEvent](#univideoerrorevent)) => void | - | | 播放出错时触发 |\n| @progress | (event: [UniVideoProgressEvent](#univideoprogressevent)) => void | - | | 加载进度变化时触发,只支持一段加载。event.detail = { buffered },百分比 |\n| @fullscreenclick | (event: [UniVideoFullScreenClickEvent](#univideofullscreenclickevent)) => void | - | | 视频全屏播放时点击屏幕触发。event.detail = { screenX, screenY, screenWidth, screenHeight } |\n| @controlstoggle | (event: [UniVideoControlsToggleEvent](#univideocontrolstoggleevent)) => void | - | | 切换 controls 显示隐藏时触发。event.detail = { show } |","event":"\n### 事件\n#### UniVideoTimeUpdateEvent\ntimeupdate 事件
播放进度变化时触发\n\n##### UniVideoTimeUpdateEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniVideoTimeUpdateEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| currentTime | number | 是 | - | - | 当前进度 |\n@| duration | number | 是 | - | - | 总进度 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) | 否 | - | - | 触发事件的组件 |\n| currentTarget | [UniElement](/dom/unielement.md) | 否 | - | - | 当前组件 |\n| timeStamp | Long | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniVideoTimeUpdateEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | - | 阻止当前事件的默认行为 |\n\n#### UniVideoFullScreenChangeEvent\nfullscreenchange 事件
当视频进入和退出全屏是触发\n\n##### UniVideoFullScreenChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniVideoFullScreenChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| fullScreen | boolean | 是 | - | - | 是否全屏 |\n@| direction | string | 是 | - | - | 横竖屏,取值 vertical 或 horizontal |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) | 否 | - | - | 触发事件的组件 |\n| currentTarget | [UniElement](/dom/unielement.md) | 否 | - | - | 当前组件 |\n| timeStamp | Long | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniVideoFullScreenChangeEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | - | 阻止当前事件的默认行为 |\n\n#### UniVideoErrorEvent\nerror 事件
视频播放出错时触发\n\n##### UniVideoErrorEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **VideoError** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| errCode | number | 是 | - | - | 统一错误码
100001 网络错误
200001 内部错误
300001 SDK错误 |\n@@| 合法值 | 兼容性 | 描述 |\n@@| :- | :-: | :- |\n@@| 100001 | - | - |\n@@| 200001 | - | - |\n@@| 300001 | - | - |\n@| errSubject | string | 是 | - | - | 统一错误主题(模块)名称 |\n@| data | any | 否 | - | - | 错误信息中包含的数据 |\n@| cause | [Error](https://uniapp.dcloud.net.cn/tutorial/err-spec.html#unierror) | 否 | - | - | 源错误信息,可以包含多个错误,详见SourceError |\n@| errMsg | string | 是 | - | - | - |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) | 否 | - | - | 触发事件的组件 |\n| currentTarget | [UniElement](/dom/unielement.md) | 否 | - | - | 当前组件 |\n| timeStamp | Long | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniVideoErrorEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | - | 阻止当前事件的默认行为 |\n\n#### UniVideoProgressEvent\nprogress 事件
加载进度变化时触发\n\n##### UniVideoProgressEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniVideoProgressEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| buffered | number | 是 | - | - | 加载进度百分比 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) | 否 | - | - | 触发事件的组件 |\n| currentTarget | [UniElement](/dom/unielement.md) | 否 | - | - | 当前组件 |\n| timeStamp | Long | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniVideoProgressEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | - | 阻止当前事件的默认行为 |\n\n#### UniVideoFullScreenClickEvent\nfullscreenclick 事件
视频播放全屏播放时点击事件\n\n##### UniVideoFullScreenClickEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniVideoFullScreenClickEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| screenX | number | 是 | - | - | 点击点相对于屏幕左侧边缘的 X 轴坐标 |\n@| screenY | number | 是 | - | - | 点击点相对于屏幕顶部边缘的 Y 轴坐标 |\n@| screenWidth | number | 是 | - | - | 屏幕总宽度 |\n@| screenHeight | number | 是 | - | - | 屏幕总高度 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) | 否 | - | - | 触发事件的组件 |\n| currentTarget | [UniElement](/dom/unielement.md) | 否 | - | - | 当前组件 |\n| timeStamp | Long | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniVideoFullScreenClickEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | - | 阻止当前事件的默认行为 |\n\n#### UniVideoControlsToggleEvent\ncontrolstoggle 事件
切换播放控件显示隐藏时触发\n\n##### UniVideoControlsToggleEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniVideoControlsToggleEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| show | boolean | 是 | - | - | 是否显示 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) | 否 | - | - | 触发事件的组件 |\n| currentTarget | [UniElement](/dom/unielement.md) | 否 | - | - | 当前组件 |\n| timeStamp | Long | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniVideoControlsToggleEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | - | 阻止当前事件的默认行为 |\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/video/video.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/video/video\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/video/video\n\n>Template\n```vue\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n 子组件实现快进、快退、发送弹幕功能(全屏后显示)\r\n \r\n \r\n \r\n \r\n API示例\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n 属性示例\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n import { ItemType } from '@/components/enum-data/enum-data';\r\n // #ifdef APP-ANDROID\r\n import ViewGroup from 'android.view.ViewGroup';\r\n // #endif\r\n export default {\r\n onReady() {\r\n this.videoContext = uni.createVideoContext('video');\r\n // this.videoContext = uni.createVideoContext('video', this);\r\n },\r\n data() {\r\n return {\r\n videoContext: null as VideoContext | null,\r\n // 属性\r\n src: \"https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.mp4\",\r\n autoplay: false,\r\n loop: false,\r\n muted: false,\r\n initialTime: 0,\r\n duration: 0,\r\n controls: true,\r\n danmuList: [{\r\n text: '要显示的文本',\r\n color: '#FF0000',\r\n time: 3\r\n }, {\r\n text: '要显示的文本2',\r\n color: '#31ff23',\r\n time: 5\r\n }, {\r\n text: '要显示的文本3',\r\n color: '#f13ef8',\r\n time: 7\r\n }, {\r\n text: '要显示的文本4',\r\n color: '#4972f8',\r\n time: 9\r\n }, {\r\n text: '要显示的文本5',\r\n color: '#000000',\r\n time: 11\r\n }] as Array,\r\n danmuBtn: false,\r\n enableDanmu: true,\r\n pageGesture: false,\r\n direction: -1,\r\n directionItemTypes: [{ \"value\": 0, \"name\": \"0(正常竖向)\" }, { \"value\": 1, \"name\": \"90(屏幕逆时针90度)\" }, { \"value\": 2, \"name\": \"-90(屏幕顺时针90度)\" }] as ItemType[],\r\n directionItems: [0, 90, -90],\r\n showProgress: true,\r\n showFullscreenBtn: true,\r\n showPlayBtn: true,\r\n showCenterPlayBtn: true,\r\n showLoading: true,\r\n enableProgressGesture: true,\r\n objectFit: \"contain\",\r\n objectFitItemTypes: [{ \"value\": 0, \"name\": \"contain(包含)\" }, { \"value\": 1, \"name\": \"fill(填充)\" }, { \"value\": 2, \"name\": \"cover(覆盖)\" }] as ItemType[],\r\n objectFitItems: [\"contain\", \"fill\", \"cover\"],\r\n poster: \"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-android.png\",\r\n showMuteBtn: false,\r\n title: \"video-component\",\r\n enablePlayGesture: false,\r\n vslideGesture: false,\r\n vslideGestureInFullscreen: true,\r\n codec: \"hardware\",\r\n codecItemTypes: [{ \"value\": 0, \"name\": \"hardware(硬解码)\" }, { \"value\": 1, \"name\": \"software(软解码)\" }] as ItemType[],\r\n codecItems: [\"hardware\", \"software\"],\r\n httpCache: true,\r\n playStrategy: 0,\r\n playStrategyItemTypes: [{ \"value\": 0, \"name\": \"0(普通模式)\" }, { \"value\": 1, \"name\": \"1(平滑播放模式)\" }, { \"value\": 1, \"name\": \"2(M3U8优化模式)\" }] as ItemType[],\r\n playStrategyItems: [0, 1, 2],\r\n header: {\r\n 'User-Agent': 'User-Agent test',\r\n 'header': 'header test',\r\n 'cookie': 'cookie test'\r\n } as UTSJSONObject,\r\n // API\r\n pos: 0,\r\n requestFullScreenOptions: null as RequestFullScreenOptions | null,\r\n danmu: {\r\n text: '要显示的文本',\r\n color: '#FF0000'\r\n } as Danmu,\r\n rate: 1,\r\n rateItemTypes: [{ \"value\": 0, \"name\": \"0.5\" }, { \"value\": 1, \"name\": \"0.8\" }, { \"value\": 2, \"name\": \"1.0\" }, { \"value\": 3, \"name\": \"1.25\" }, { \"value\": 4, \"name\": \"1.5\" }] as ItemType[],\r\n rateItems: [0.5, 0.8, 1.0, 1.25, 1.5],\r\n subCompEnable: false,\r\n subCompShow: false,\r\n curPos: 0,\r\n endPos: 0,\r\n // 自动化测试\r\n autoTest: false,\r\n isPlaying: false,\r\n isPause: false,\r\n isError: false,\r\n eventPlay: null as UTSJSONObject | null,\r\n eventPause: null as UTSJSONObject | null,\r\n eventEnded: null as UTSJSONObject | null,\r\n eventTimeupdate: null as UTSJSONObject | null,\r\n eventFullscreenchange: null as UTSJSONObject | null,\r\n eventWaiting: null as UTSJSONObject | null,\r\n eventError: null as UTSJSONObject | null,\r\n eventProgress: null as UTSJSONObject | null,\r\n eventFullscreenclick: null as UTSJSONObject | null,\r\n eventControlstoggle: null as UTSJSONObject | null\r\n }\r\n },\r\n onLoad() {\r\n },\r\n methods: {\r\n // API\r\n play: function () {\r\n console.log(\"play\");\r\n this.videoContext?.play();\r\n },\r\n pause: function () {\r\n console.log(\"pause\");\r\n (uni.getElementById(\"video\") as UniVideoElement).pause(); //as写法测试。注意id不对时as会崩溃\r\n // this.videoContext?.pause();\r\n },\r\n seek: function (pos : number) {\r\n console.log(\"seek -> \" + pos);\r\n this.videoContext?.seek(pos);\r\n },\r\n onSeekInput: function (event : UniInputEvent) {\r\n this.pos = parseInt(event.detail.value);\r\n },\r\n requestFullScreen: function () {\r\n console.log(\"requestFullScreen -> \" + this.requestFullScreenOptions);\r\n this.videoContext?.requestFullScreen(this.requestFullScreenOptions);\r\n },\r\n exitFullScreen: function () {\r\n console.log(\"exitFullScreen\");\r\n this.videoContext?.exitFullScreen();\r\n },\r\n stop: function () {\r\n console.log(\"stop\");\r\n uni.getElementById(\"video\")?.stop(); //泛型写法测试\r\n // this.videoContext?.stop();\r\n },\r\n sendDanmu: function () {\r\n console.log(\"sendDanmu -> \" + this.danmu);\r\n this.videoContext?.sendDanmu(this.danmu);\r\n },\r\n onSendDanmuInput: function (event : UniInputEvent) {\r\n let json = JSON.parse(event.detail.value)\r\n if (json == null) return;\r\n this.danmu = json as Danmu;\r\n },\r\n playbackRate: function () {\r\n console.log(\"playbackRate -> \" + this.rate);\r\n this.videoContext?.playbackRate(this.rate);\r\n },\r\n onPlaybackRateChange: function (value : number) {\r\n this.rate = this.rateItems[value];\r\n },\r\n fastBackward: function () {\r\n let pos = this.curPos - 15;\r\n if (pos < 0) pos = 0;\r\n this.seek(pos);\r\n },\r\n fastForward: function () {\r\n let pos = this.curPos + 15;\r\n if (pos > this.endPos) pos = this.endPos;\r\n this.seek(pos);\r\n },\r\n onSendDanmuConfirm: function (event : UniInputConfirmEvent) {\r\n this.videoContext?.sendDanmu({\r\n text: event.detail.value,\r\n color: '#ff0000'\r\n } as Danmu);\r\n },\r\n onSendDanmuKeyboardHeightChange: function (event : UniInputKeyboardHeightChangeEvent) {\r\n const element = uni.getElementById('input-send-danmu') as UniElement;\r\n if (event.detail.height.toInt() == 0) {\r\n element.style.setProperty('bottom', '50px');\r\n } else {\r\n element.style.setProperty('bottom', event.detail.height + element.getBoundingClientRect().height);\r\n }\r\n },\r\n onSendDanmuBlur: function (_ : UniInputBlurEvent) {\r\n (uni.getElementById('input-send-danmu') as UniElement).style.setProperty('bottom', '50px');\r\n },\r\n // 属性\r\n onSrcComfirm: function (event : UniInputConfirmEvent) {\r\n let value = event.detail.value;\r\n if (value == '') return;\r\n this.src = value;\r\n console.log(\"src -> \" + this.src)\r\n },\r\n onAutoplayChange: function (value : boolean) {\r\n this.autoplay = value;\r\n console.log(\"autoplay -> \" + this.autoplay)\r\n },\r\n onLoopChange: function (value : boolean) {\r\n this.loop = value;\r\n console.log(\"loop -> \" + this.loop)\r\n },\r\n onMutedChange: function (value : boolean) {\r\n this.muted = value;\r\n console.log(\"muted -> \" + this.muted)\r\n },\r\n onInitialTimeComfirm: function (event : UniInputConfirmEvent) {\r\n let value = parseInt(event.detail.value)\r\n if (isNaN(value)) value = 0;\r\n this.initialTime = value;\r\n console.log(\"initialTime -> \" + this.initialTime)\r\n },\r\n onDurationComfirm: function (event : UniInputConfirmEvent) {\r\n let value = parseInt(event.detail.value)\r\n if (isNaN(value)) value = 0;\r\n this.duration = value;\r\n console.log(\"duration -> \" + this.duration)\r\n },\r\n onControlsChange: function (value : boolean) {\r\n this.controls = value;\r\n console.log(\"controls -> \" + this.controls)\r\n },\r\n onEnableDanmuChange: function (value : boolean) {\r\n this.enableDanmu = value;\r\n console.log(\"enableDanmu -> \" + this.enableDanmu)\r\n },\r\n onDanmuBtnChange: function (value : boolean) {\r\n this.danmuBtn = value;\r\n console.log(\"danmuBtn -> \" + this.danmuBtn)\r\n },\r\n onPageGestureChange: function (value : boolean) {\r\n this.pageGesture = value;\r\n console.log(\"pageGesture -> \" + this.pageGesture)\r\n },\r\n onRequestFullScreenDirectionChange: function (value : number) {\r\n let direction = this.directionItems[value];\r\n this.requestFullScreenOptions = {\r\n direction\r\n } as RequestFullScreenOptions;\r\n },\r\n onDirectionChange: function (value : number) {\r\n this.direction = this.directionItems[value];\r\n console.log(\"direction -> \" + this.direction)\r\n },\r\n onShowProgressChange: function (value : boolean) {\r\n this.showProgress = value;\r\n console.log(\"showProgress -> \" + this.showProgress)\r\n },\r\n onShowFullscreenBtnChange: function (value : boolean) {\r\n this.showFullscreenBtn = value;\r\n console.log(\"showFullscreenBtn -> \" + this.showFullscreenBtn)\r\n },\r\n onShowPlayBtnChange: function (value : boolean) {\r\n this.showPlayBtn = value;\r\n console.log(\"showPlayBtn -> \" + this.showPlayBtn)\r\n },\r\n onShowCenterPlayBtnChange: function (value : boolean) {\r\n this.showCenterPlayBtn = value;\r\n console.log(\"showCenterPlayBtn -> \" + this.showCenterPlayBtn)\r\n },\r\n onShowLoadingChange: function (value : boolean) {\r\n this.showLoading = value;\r\n console.log(\"showLoading -> \" + this.showLoading)\r\n },\r\n onEnableProgressGestureChange: function (value : boolean) {\r\n this.enableProgressGesture = value;\r\n console.log(\"enableProgressGesture -> \" + this.enableProgressGesture)\r\n },\r\n onObjectFitChange: function (value : number) {\r\n this.objectFit = this.objectFitItems[value];\r\n console.log(\"objectFit -> \" + this.objectFit)\r\n },\r\n onPosterComfirm: function (event : UniInputConfirmEvent) {\r\n let value = event.detail.value;\r\n if (value == '') return;\r\n this.poster = value;\r\n console.log(\"poster -> \" + this.poster)\r\n },\r\n onShowMuteBtnChange: function (value : boolean) {\r\n this.showMuteBtn = value;\r\n console.log(\"showMuteBtn -> \" + this.showMuteBtn)\r\n },\r\n onTitleComfirm: function (event : UniInputConfirmEvent) {\r\n let value = event.detail.value;\r\n if (value == '') return;\r\n this.title = value;\r\n console.log(\"title -> \" + this.title)\r\n },\r\n onEnablePlayGestureChange: function (value : boolean) {\r\n this.enablePlayGesture = value;\r\n console.log(\"enablePlayGesture -> \" + this.enablePlayGesture)\r\n },\r\n onVslideGestureChange: function (value : boolean) {\r\n this.vslideGesture = value;\r\n console.log(\"vslideGesture -> \" + this.vslideGesture)\r\n },\r\n onVslideGestureInFullscreenChange: function (value : boolean) {\r\n this.vslideGestureInFullscreen = value;\r\n console.log(\"vslideGestureInFullscreen -> \" + this.vslideGestureInFullscreen)\r\n },\r\n onCodecChange: function (value : number) {\r\n this.codec = this.codecItems[value];\r\n console.log(\"codec -> \" + this.codec)\r\n },\r\n onHttpCacheChange: function (value : boolean) {\r\n this.httpCache = value;\r\n console.log(\"httpCache -> \" + this.httpCache)\r\n },\r\n onPlayStrategyChange: function (value : number) {\r\n this.playStrategy = this.playStrategyItems[value];\r\n console.log(\"playStrategy -> \" + this.playStrategy)\r\n },\r\n onHeaderComfirm: function (event : UniInputConfirmEvent) {\r\n let json = JSON.parse(event.detail.value)\r\n if (json == null) return;\r\n this.header = json as UTSJSONObject;\r\n console.log(\"header -> \" + JSON.stringify(this.header))\r\n },\r\n onSubCompEnableChange: function (event : UniSwitchChangeEvent) {\r\n this.subCompEnable = event.detail.value;\r\n },\r\n // 事件\r\n onPlay: function (res : UniEvent) {\r\n console.log(res.type);\r\n this.isPlaying = true;\r\n this.isPause = false;\r\n if (this.autoTest) {\r\n this.eventPlay = {\r\n \"tagName\": res.target?.tagName,\r\n \"type\": res.type\r\n };\r\n }\r\n },\r\n onPause: function (res : UniEvent) {\r\n console.log(res.type);\r\n this.isPlaying = false;\r\n this.isPause = true;\r\n if (this.autoTest) {\r\n this.eventPause = {\r\n \"tagName\": res.target?.tagName,\r\n \"type\": res.type\r\n };\r\n }\r\n },\r\n onEnded: function (res : UniEvent) {\r\n console.log(res.type);\r\n if (this.autoTest) {\r\n this.eventEnded = {\r\n \"tagName\": res.target?.tagName,\r\n \"type\": res.type\r\n };\r\n }\r\n },\r\n onTimeUpdate: function (res : UniVideoTimeUpdateEvent) {\r\n console.log(res.type + \" -> \" + JSON.stringify(res.detail));\r\n this.curPos = res.detail.currentTime;\r\n this.endPos = res.detail.duration;\r\n if (this.autoTest) {\r\n this.eventTimeupdate = {\r\n \"tagName\": res.target?.tagName,\r\n \"type\": res.type,\r\n \"currentTime\": Math.trunc(res.detail.currentTime),\r\n \"duration\": Math.trunc(res.detail.duration)\r\n };\r\n }\r\n },\r\n onFullScreenChange: function (res : UniVideoFullScreenChangeEvent) {\r\n console.log(res.type + \" -> \" + JSON.stringify(res.detail));\r\n this.subCompShow = res.detail.fullScreen;\r\n if (this.autoTest) {\r\n this.eventFullscreenchange = {\r\n \"tagName\": res.target?.tagName,\r\n \"type\": res.type,\r\n \"fullScreen\": res.detail.fullScreen,\r\n \"direction\": res.detail.direction\r\n };\r\n }\r\n },\r\n onWaiting: function (res : UniEvent) {\r\n console.log(res.type);\r\n if (this.autoTest) {\r\n this.eventWaiting = {\r\n \"tagName\": res.target?.tagName,\r\n \"type\": res.type\r\n };\r\n }\r\n },\r\n onError: function (res : UniVideoErrorEvent) {\r\n console.log(res.type + \" -> \" + JSON.stringify(res.detail));\r\n this.isError = true;\r\n if (this.autoTest) {\r\n this.eventError = {\r\n \"tagName\": res.target?.tagName,\r\n \"type\": res.type,\r\n \"errCode\": res.detail.errCode\r\n };\r\n }\r\n },\r\n onProgress: function (res : UniVideoProgressEvent) {\r\n console.log(res.type + \" -> \" + JSON.stringify(res.detail));\r\n if (this.autoTest) {\r\n this.eventProgress = {\r\n \"tagName\": res.target?.tagName,\r\n \"type\": res.type,\r\n \"isBufferedValid\": res.detail.buffered >= 0\r\n };\r\n }\r\n },\r\n onFullScreenClick: function (res : UniVideoFullScreenClickEvent) {\r\n console.log(res.type + \" -> \" + JSON.stringify(res.detail));\r\n if (this.autoTest) {\r\n this.eventFullscreenclick = {\r\n \"tagName\": res.target?.tagName,\r\n \"type\": res.type,\r\n \"screenX\": Math.trunc(res.detail.screenX),\r\n \"screenY\": Math.trunc(res.detail.screenY),\r\n \"screenWidth\": Math.trunc(res.detail.screenWidth),\r\n \"screenHeight\": Math.trunc(res.detail.screenHeight)\r\n };\r\n }\r\n },\r\n onControlsToggle: function (res : UniVideoControlsToggleEvent) {\r\n console.log(res.type + \" -> \" + JSON.stringify(res.detail));\r\n if (this.autoTest) {\r\n this.eventControlstoggle = {\r\n \"tagName\": res.target?.tagName,\r\n \"type\": res.type,\r\n \"show\": res.detail.show\r\n };\r\n }\r\n },\r\n // 自动化测试\r\n downloadSource() {\r\n uni.downloadFile({\r\n url: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.mp4',\r\n success: (res) => {\r\n this.src = res.tempFilePath;\r\n },\r\n fail: (_) => {\r\n this.isError = true;\r\n }\r\n })\r\n },\r\n // #ifdef APP-ANDROID\r\n hasSubComponent() : boolean {\r\n const view = uni.getElementById('video')?.getAndroidView();\r\n return view == null ? false : view.getChildAt(0) instanceof ViewGroup;\r\n }\r\n // #endif\r\n }\r\n }\r\n\n```\n\n:::","children":"### 子组件 @children-tags \n 支持所有组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.media.video)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/video.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=video&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=video&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=video&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=video&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=video&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=video)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=video&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"animation-view":{"name":"## animation-view","description":"Lottie 动画\n> 本 Component 是 uni ext component,需下载插件:[animation-view](https://ext.dcloud.net.cn/plugin?name=uni-animation-view)\n","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| x | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| path | string | \"\" | | 动画资源地址,目前只支持绝对路径 |\n| loop | boolean | false | | 动画是否循环播放 |\n| autoplay | boolean | false | | 动画是否自动播放 |\n| action | string | \"stop\" | | 动画操作,可取值 play、pause、stop |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| play | | 播放 |\n@| pause | | 暂停 |\n@| stop | | 停止 |\n| hidden | boolean | false | | 是否隐藏动画 |\n| @ended | (event: [UniEvent](/component/common.md#unievent)) => void | - | | - |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.media.animation-view)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/animation-view.html)\n- [插件市场](https://ext.dcloud.net.cn/plugin?id=10674)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=animation-view&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=animation-view&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=animation-view&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=animation-view&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=animation-view&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=animation-view)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=animation-view&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"map":{"name":"## map","description":"地图","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 4.31 | 4.31 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| longitude | number | - | | 中心经度 |\n| latitude | number | - | | 中心纬度 |\n| scale | number | - | | 缩放级别,取值范围为5-18 |\n| markers | array | - | | 标记点 |\n| covers | array | - | | 即将移除,请使用 markers |\n| polyline | array | - | | 路线 |\n| circles | array | - | | 圆 |\n| controls | array | - | | 控件 |\n| include-points | array | - | | 缩放视野以包含所有给定的坐标点 |\n| show-location | boolean | - | | 显示带有方向的当前定位点 |\n| @markertap | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 点击标记点时触发 |\n| @callouttap | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 点击标记点对应的气泡时触发 |\n| @controltap | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 点击控件时触发 |\n| @regionchange | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 视野发生变化时触发 |\n| @updated | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 在地图渲染更新完成时触发 |\n| @tap | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 点击地图时触发 |\n| @anchorpointtap | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 点击定位标时触发 |\n| @poitap | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 点击地图poi点时触发 |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/map/map.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/map/map\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/map/map\n\n>Template\n```vue\n\r\n \r\n \r\n \r\n 注意:需要正确配置地图服务商的Key才能正常显示地图组件\r\n \r\n 属性示例\r\n \r\n \r\n \r\n\r\n\r\n \r\n \n \n \n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n 方法示例\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n\r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n type TypeJestResult = {\r\n translateMarkerMsg : string,\r\n animationEnd : boolean,\r\n centerPoints : LocationObject,\r\n southwest : LocationObject,\r\n northeast : LocationObject,\r\n moveToLocationMsg : string,\r\n scale : number\r\n }\r\n\r\n const testMarkers :Marker[]= [{\r\n id: 0,\r\n latitude: 39.989631,\r\n longitude: 116.481018,\r\n title: '方恒国际 阜通东大街6号',\r\n iconPath: '../../../static/location.png',\r\n rotate: 0,\r\n width: 20,\r\n height: 20,\r\n anchor: {\r\n x: 0.5,\r\n y: 1\r\n } ,\r\n callout: {\r\n content: '方恒国际 阜通东大街6号',\r\n color: '#00BFFF',\r\n fontSize: 10,\r\n borderRadius: 4,\r\n borderWidth: 1,\r\n borderColor: '#333300',\r\n bgColor: '#CCFF99',\r\n padding: 5,\r\n display: 'ALWAYS'\r\n } as MapMarkerCallout\r\n },\r\n {\r\n id: 1,\r\n latitude: 39.9086920000,\r\n longitude: 116.3974770000,\r\n title: '天安门',\r\n // zIndex: '1',\r\n iconPath: '../../../static/location.png',\r\n width: 40,\r\n height: 40,\r\n anchor: {\r\n x: 0.5,\r\n y: 1\r\n },\r\n callout: {\r\n content: '首都北京\\n天安门',\r\n color: '#00BFFF',\r\n fontSize: 12,\r\n borderRadius: 10,\r\n borderWidth: 2,\r\n borderColor: '#333300',\r\n bgColor: '#CCFF11',\r\n padding: 5,\r\n display: 'ALWAYS'\r\n } as MapMarkerCallout\r\n },\r\n {\r\n id: 2,\r\n latitude: 39.894793,\r\n longitude: 116.321592,\r\n title: '北京西站',\r\n iconPath: '../../../static/location.png',\r\n width: 40,\r\n height: 40,\r\n anchor: {\r\n x: 0.5,\r\n y: 1\r\n },\r\n callout: {\r\n content: '北京西站',\r\n color: '#ffffff',\r\n fontSize: 12,\r\n borderRadius: 10,\r\n borderWidth: 2,\r\n borderColor: '#333300',\r\n bgColor: '#ff5500',\r\n padding: 5,\r\n display: 'ALWAYS'\r\n } as MapMarkerCallout\r\n },\r\n {\r\n id: 3,\r\n latitude: 39.902344,\r\n longitude: 116.484822,\r\n title: '北京东站',\r\n iconPath: '../../../static/location.png',\r\n width: 20,\r\n height: 20,\r\n anchor: {\r\n x: 0.5,\r\n y: 1\r\n },\r\n callout: {\r\n content: '北京东站',\r\n color: '#ffffff',\r\n fontSize: 12,\r\n borderRadius: 10,\r\n borderWidth: 2,\r\n borderColor: '#333300',\r\n bgColor: '#ff5500',\r\n padding: 5,\r\n display: 'ALWAYS'\r\n } as MapMarkerCallout\r\n },\r\n {\r\n id: 4,\r\n latitude: 39.865011,\r\n longitude: 116.379007,\r\n title: '北京南站',\r\n iconPath: '../../../static/location.png',\r\n width: 40,\r\n height: 40,\r\n anchor: {\r\n x: 0.5,\r\n y: 1\r\n },\r\n callout: {\r\n content: '北京南站',\r\n color: '#ffffff',\r\n fontSize: 12,\r\n borderRadius: 10,\r\n borderWidth: 2,\r\n borderColor: '#333300',\r\n bgColor: '#00aa00',\r\n padding: 5,\r\n display: 'ALWAYS'\r\n } as MapMarkerCallout\r\n },\r\n ];\r\n\r\n\r\n const testPolyline: Polyline[] = [{\r\n points: [{\r\n latitude: 39.925539,\r\n longitude: 116.279037\r\n },\r\n {\r\n latitude: 39.925539,\r\n longitude: 116.520285\r\n }],\r\n color: '#FFCCFF',\r\n width: 7,\r\n dottedLine: true,\r\n arrowLine: true,\r\n borderColor: '#000000',\r\n borderWidth: 2\r\n },\r\n {\r\n points: [{\r\n latitude: 39.938698,\r\n longitude: 116.275177\r\n },\r\n {\r\n latitude: 39.966069,\r\n longitude: 116.289253\r\n },\r\n {\r\n latitude: 39.944226,\r\n longitude: 116.306076\r\n },\r\n {\r\n latitude: 39.966069,\r\n longitude: 116.322899\r\n },\r\n {\r\n latitude: 39.938698,\r\n longitude: 116.336975\r\n }],\r\n color: '#CCFFFF',\r\n width: 5,\r\n dottedLine: false,\r\n arrowLine: true,\r\n borderColor: '#CC0000',\r\n borderWidth: 3\r\n }\r\n ];\r\n\r\n const testPolygons : Polygon[] = [{\r\n points: [{\r\n latitude: 39.781892,\r\n longitude: 116.293413\r\n },\r\n {\r\n latitude: 39.787600,\r\n longitude: 116.391842\r\n },\r\n {\r\n latitude: 39.733187,\r\n longitude: 116.417932\r\n },\r\n {\r\n latitude: 39.704653,\r\n longitude: 116.338255\r\n }],\r\n fillColor: '#FFCCFF',\r\n strokeWidth: 3,\r\n strokeColor: '#CC99CC',\r\n zIndex: 11\r\n },\r\n {\r\n points: [{\r\n latitude: 39.887600,\r\n longitude: 116.518932\r\n },\r\n {\r\n latitude: 39.781892,\r\n longitude: 116.518932\r\n },\r\n {\r\n latitude: 39.781892,\r\n longitude: 116.428932\r\n },\r\n {\r\n latitude: 39.887600,\r\n longitude: 116.428932\r\n }\r\n ],\r\n fillColor: '#CCFFFF',\r\n strokeWidth: 5,\r\n strokeColor: '#CC0000',\r\n zIndex: 3\r\n }\r\n ];\r\n\r\n const testCircles: Circle[] = [{\r\n latitude: 39.996441,\r\n longitude: 116.411146,\r\n radius: 15000,\r\n strokeWidth: 5,\r\n color: '#CCFFFF',\r\n fillColor: '#CC0000'\r\n },\r\n {\r\n latitude: 40.096441,\r\n longitude: 116.511146,\r\n radius: 12000,\r\n strokeWidth: 3,\r\n color: '#CCFFFF',\r\n fillColor: '#FFCCFF'\r\n },\r\n {\r\n latitude: 39.896441,\r\n longitude: 116.311146,\r\n radius: 9000,\r\n strokeWidth: 1,\r\n color: '#CCFFFF',\r\n fillColor: '#CC0000'\r\n }\r\n ];\r\n\r\n const testIncludePoints :LocationObject[] = [{\r\n latitude: 39.989631,\r\n longitude: 116.481018,\r\n },\r\n {\r\n latitude: 39.9086920000,\r\n longitude: 116.3974770000,\r\n }\r\n ];\r\n\r\n\r\n const mapContext = ref(null as MapContext | null);\r\n const location = ref({ longitude: 116.39742, latitude: 39.909 } as LocationObject);\r\n const rotate = ref(0);\r\n const skew = ref(0);\r\n // 自动化测试\r\n const autoTest = ref(false);\r\n const updateAutoTest = (value : boolean) => {\r\n autoTest.value = value\r\n }\r\n\r\n\r\n const jestResult = reactive({\r\n translateMarkerMsg: \"\",\r\n animationEnd: false,\r\n centerPoints: {\r\n latitude: 0,\r\n longitude: 0\r\n },\r\n southwest: {\r\n latitude: 0,\r\n longitude: 0\r\n },\r\n northeast: {\r\n latitude: 0,\r\n longitude: 0\r\n },\r\n moveToLocationMsg: \"\",\r\n scale: 0,\r\n } as TypeJestResult);\r\n\r\n\r\n onReady(() => {\r\n mapContext.value = uni.createMapContext(\"map1\", getCurrentInstance()!.proxy!)\r\n });\r\n\r\n const scale = ref(13);\r\n const confirm_scale_input = (value : number) => {\r\n scale.value = value\r\n };\r\n\r\n const controls = ref([] as Control[]);\r\n const addControls = () => {\r\n controls.value = [{\r\n id: 1,\r\n position: {\r\n left: 5,\r\n top: 180,\r\n width: 30,\r\n height: 30\r\n } as ControlPosition,\r\n iconPath: '../../../static/uni.png',\r\n clickable: true\r\n } as Control]\n }\r\n\r\n const showLocation = ref(false);\r\n const change_show_location = (checked : boolean) => {\r\n showLocation.value = checked\r\n }\r\n\r\n const includePoints = ref([] as LocationObject[]);\r\n const includePoint = () => {\r\n includePoints.value = testIncludePoints;\r\n };\r\n\r\n\r\n let markers = ref([] as Marker[]);\r\n const addMarkers = () => {\r\n scale.value = 11\r\n const temp = JSON.parse(JSON.stringify(testMarkers))!\r\n markers.value = temp\r\n };\r\n\r\n const removeMarker = () => {\r\n // #ifdef APP\r\n mapContext.value?.removeMarkers({markerIds:[4]})\r\n // #endif\r\n // #ifdef WEB\r\n const index = markers.value.findIndex((marker: Marker):boolean=>{\r\n return marker.id == 4\r\n });\r\n if (index != -1) {\r\n delete markers.value[index].label;\r\n markers.value.splice(index, 1);\r\n } else {\r\n uni.showToast({\r\n title: '未找到该标记点',\r\n icon: 'none'\r\n });\r\n }\r\n // #endif\r\n };\r\n\n // #ifdef WEB\n const addMarkersLabel = () => {\r\n markers.value.forEach((marker, index) => {\r\n marker.label = {\r\n content: 'Hello Label' + (index + 1),\r\n color: '#aa00ff',\r\n fontSize: 12,\r\n x: 5,\r\n y: 0,\r\n borderColor: '#333300',\r\n borderWidth: 2,\r\n borderRadius: 20,\r\n bgColor: '#aaffff',\r\n padding: 10\r\n };\r\n });\r\n };\n // #endif\r\n\r\n\r\n const polyline = ref([] as Polyline[]);\r\n const addPolyline = () => {\r\n scale.value = 11;\n polyline.value = JSON.parse(JSON.stringify(testPolyline))!;\r\n };\r\n const removePolyline = () => {\r\n if (polyline.value.length > 1) {\r\n polyline.value = JSON.parse(JSON.stringify(testPolyline))!.splice(0, 1);\r\n }\r\n };\r\n\r\n\r\n const polygons = ref([] as Polygon[]);\r\n const addPolygons = () => {\r\n scale.value = 10;\r\n polygons.value = JSON.parse(JSON.stringify(testPolygons))!;\r\n };\r\n const removePolygon = () => {\r\n if (polygons.value.length > 1) {\r\n polygons.value = JSON.parse(JSON.stringify(testPolygons))!.splice(0, 1);\r\n }\r\n };\r\n\r\n\r\n const circles = ref([] as Circle[]);\r\n const addCircles = () => {\r\n scale.value = 10;\r\n circles.value = JSON.parse(JSON.stringify(testCircles))!;\r\n };\r\n const removeCircle = () => {\r\n if (circles.value.length > 1) {\r\n circles.value = JSON.parse(JSON.stringify(testCircles))!.slice(1);\r\n }\r\n };\r\n\r\n\r\n const showCompass = ref(true);\r\n const enable3D = ref(true);\r\n const enableOverlooking = ref(true);\r\n const enableZoom = ref(true);\r\n const enableScroll = ref(true);\r\n const enableRotate = ref(true);\r\n const enableSatellite = ref(false);\r\n const enableTraffic = ref(false);\r\n\r\n const enableThreeD = (e) => {\r\n enable3D.value = e.detail.value;\r\n }\r\n const changeShowCompass = (e) => {\r\n showCompass.value = e.detail.value;\r\n }\r\n const changeEnableOverlooking = (e) => {\r\n enableOverlooking.value = e.detail.value;\r\n };\r\n\r\n const changeEnableZoom = (e) => {\r\n enableZoom.value = e.detail.value;\r\n };\r\n\r\n const changeEnableScroll = (e) => {\r\n enableScroll.value = e.detail.value;\r\n };\r\n\r\n const changeEnableRotate = (e) => {\r\n enableRotate.value = e.detail.value;\r\n };\r\n\r\n const changeEnableSatellite = (e) => {\r\n enableSatellite.value = e.detail.value;\r\n };\r\n\r\n const changeEnableTraffic = (e) => {\r\n enableTraffic.value = e.detail.value;\r\n };\r\n\r\n\r\n const handleGetCenterLocation = () => {\r\n mapContext.value?.getCenterLocation({\r\n success: ret => {\r\n // console.log('getCenterLocation',ret);\r\n jestResult.centerPoints = ret;\r\n if (!autoTest.value) {\r\n uni.showModal({\r\n content: JSON.stringify(ret)\r\n });\r\n }\r\n }\r\n });\r\n };\r\n\r\n const handleGetRegion = () => {\r\n mapContext.value?.getRegion({\r\n success: ret => {\r\n // console.log('getRegion',JSON.stringify(ret));\r\n jestResult.southwest = ret.southwest;\r\n jestResult.northeast = ret.northeast\r\n if (!autoTest.value) {\r\n uni.showModal({\r\n content: JSON.stringify(ret)\r\n });\r\n }\r\n }\r\n });\r\n };\r\n\r\n\r\n const handleTranslateMarker = () => {\r\n mapContext.value?.translateMarker({\r\n markerId: 1,\r\n destination: {\r\n latitude: 39.989631,\r\n longitude: 116.481018\r\n },\n autoRotate: true,\r\n rotate: 10,\r\n duration: 2000,\n moveWithRotate: true,\r\n // #ifdef WEB\r\n animationEnd: () => {\r\n console.log('动画结束');\r\n jestResult.animationEnd = true;\r\n },\r\n // #endif\r\n success: ret => {\r\n console.log('handleTranslateMarker',JSON.stringify(ret));\n const result = ret as UTSJSONObject\r\n jestResult.translateMarkerMsg = result[\"errMsg\"] as string;\r\n },\r\n fail: error => {\r\n console.log(error)\r\n }\r\n });\r\n mapContext.value?.translateMarker({\r\n markerId: 2,\r\n destination: {\r\n latitude: 39.902344,\r\n longitude: 116.484822,\r\n },\r\n autoRotate: true,\r\n rotate: 0,\r\n duration: 2000,\r\n success: ret => {\r\n console.log('handleTranslateMarker', JSON.stringify(ret));\r\n },\r\n fail: error => {\r\n console.log(error)\r\n }\r\n });\r\n };\r\n\r\n\r\n const handleGetScale = () => {\r\n mapContext.value?.getScale({\r\n success: res => {\r\n // console.log('getScale',res);\r\n scale.value = res.scale\r\n jestResult.scale = res.scale\r\n if (!autoTest.value) {\r\n uni.showModal({\r\n content: '当前地图的缩放级别为:' + res.scale\r\n });\r\n }\r\n },\r\n fail: error => {\r\n console.log(error)\r\n },\r\n });\r\n };\r\n\r\n const handleMoveToLocation = () => {\r\n mapContext.value?.moveToLocation({\r\n latitude: 39.909,\r\n longitude: 116.39742,\r\n success: res => {\r\n console.log('moveToLocation',res);\n const result = res as UTSJSONObject\r\n jestResult.moveToLocationMsg = result[\"errMsg\"] as string;\n\r\n if (!autoTest.value) {\r\n uni.showModal({\r\n content: JSON.stringify(res)\r\n });\r\n }\r\n },\r\n fail: error => {\r\n console.log(error)\r\n }\r\n });\r\n };\r\n\r\n const maptap = (e : UniMapUpdatedEvent) => {\r\n // console.log('点击地图时触发',e)\r\n uni.showModal({\r\n content: JSON.stringify(e)\r\n });\r\n };\r\n\r\n const onmarkertap = (e : UniMapMarkerTapEvent) => {\r\n // console.log('点击标记点时触发',e)\r\n uni.showModal({\r\n content: JSON.stringify(e)\r\n });\r\n };\r\n\r\n const oncontroltap = (e : UniMapControlTapEvent) => {\r\n // console.log('点击控件时触发',e)\r\n uni.showModal({\r\n content: JSON.stringify(e)\r\n });\r\n };\r\n\r\n const oncallouttap = (e : UniEvent) => {\r\n // console.log('点击标记点对应的气泡时触发',e)\r\n uni.showModal({\r\n content: JSON.stringify(e)\r\n });\r\n };\r\n\r\n const onupdated = (e : UniMapUpdatedEvent) => {\r\n console.log('在地图渲染更新完成时触发', e)\r\n };\r\n\r\n const onregionchange = (e : UniMapRegionChangeEvent) => {\r\n console.log('视野发生变化时触发', e)\r\n };\r\n\r\n const onpoitap = (e : UniMapPoiTapEvent) => {\r\n // console.log('点击地图poi点时触发',e)\r\n uni.showModal({\r\n content: JSON.stringify(e)\r\n });\r\n };\r\n\r\n defineExpose({\r\n jestResult,\r\n autoTest,\r\n updateAutoTest,\r\n addControls,\r\n addMarkers,\n // #ifdef WEB\n addMarkersLabel,\n // #endif\r\n removeMarker,\r\n addPolyline,\r\n removePolyline,\r\n addPolygons,\r\n removePolygon,\r\n addCircles,\r\n removeCircle,\r\n includePoint,\r\n handleGetCenterLocation,\r\n handleGetRegion,\r\n handleTranslateMarker,\r\n handleMoveToLocation,\r\n handleGetScale\r\n })\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.map.map)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/map.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=map&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=map&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=map&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=map&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=map&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=map)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=map&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"canvas":{"name":"## canvas","description":"> 组件类型:[UniCanvasElement](/dom/unicanvaselement.md) \n\n 画布","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.21 | 4.25 | 4.25 |\n","attribute":"","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/canvas/canvas.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/canvas/canvas\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/canvas/canvas\n\n>Template\n```vue\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n testToBlobResult: {{testToBlobResult}}\r\n \r\n \r\n \r\n 0\">\r\n canvasToDataURL:\r\n {{dataBase64.slice(0,22)}}...\r\n \r\n \r\n \r\n \r\n \r\n CanvasContext API 演示\r\n \r\n \r\n \r\n\r\n \r\n 获取 CanvasContext 结果:\r\n {{testCanvasContext}}\r\n \r\n \r\n 测试 ToDataURL 结果:\r\n {{testToDataURLResult}}\r\n \r\n\r\n \r\n 测试 createImage 结果:\r\n {{testCreateImage}}\r\n \r\n\r\n \r\n 测试 createPath2D 结果:\r\n {{testCreatePath2D}}\r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n function hidpi(canvas : UniCanvasElement) {\r\n const context = canvas.getContext(\"2d\")!;\r\n const dpr = uni.getDeviceInfo().devicePixelRatio ?? 1;\r\n canvas.width = canvas.offsetWidth * dpr;\r\n canvas.height = canvas.offsetHeight * dpr;\r\n context.scale(dpr, dpr);\r\n }\r\n\r\n export default {\r\n data() {\r\n return {\r\n title: 'Context2D',\r\n canvas: null as UniCanvasElement | null,\r\n canvasContext: null as CanvasContext | null,\r\n renderingContext: null as CanvasRenderingContext2D | null,\r\n canvasWidth: 0,\r\n canvasHeight: 0,\r\n dataBase64: '',\r\n taskId: 0,\r\n lastTime: 0,\r\n frameCount: 0,\r\n // 仅测试\r\n testCanvasContext: false,\r\n testToBlobResult: false,\r\n testToDataURLResult: false,\r\n testCreateCanvasContextAsyncSuccess: false,\r\n testCreateImage: false,\r\n testCreatePath2D: false,\r\n testFrameCount: 0\r\n }\r\n },\r\n onReady() {\r\n // HBuilderX 4.25+\r\n // 异步调用方式, 跨平台写法\r\n uni.createCanvasContextAsync({\r\n id: 'canvas',\r\n component: this,\r\n success: (context : CanvasContext) => {\r\n this.canvasContext = context;\r\n this.renderingContext = context.getContext('2d')!;\r\n this.canvas = this.renderingContext!.canvas;\r\n\r\n hidpi(this.canvas!);\r\n this.canvasWidth = this.canvas!.width;\r\n this.canvasHeight = this.canvas!.height;\r\n\r\n // #ifdef WEB\r\n context.toBlob((blob : Blob) => {\r\n this.testToBlobResult = (blob.size > 0 && blob.type == 'image/jpeg')\r\n }, 'image/jpeg', 0.95)\r\n // #endif\r\n this.testToDataURLResult = context.toDataURL().startsWith('data:image/png;base64')\r\n this.testCanvasContext = true\r\n }\r\n })\r\n\r\n // 同步调用方式,仅支持 app/web\r\n // let canvas = uni.getElementById(\"canvas\") as UniCanvasElement\r\n // this.renderingContext = canvas.getContext(\"2d\")\r\n // hidpi(canvas);\r\n // this.canvas = canvas;\r\n // this.canvasWidth = canvas.width;\r\n // this.canvasHeight = canvas.height;\r\n },\r\n onUnload() {\r\n if (this.taskId > 0) {\r\n this.stopAnimationFrame()\r\n }\r\n },\r\n methods: {\r\n // #ifdef WEB\r\n canvasToBlob() {\r\n this.canvasContext!.toBlob((blob : Blob) => {\r\n this.testToBlobResult = (blob.size > 0 && blob.type == 'image/jpeg')\r\n }, 'image/jpeg', 0.95)\r\n },\r\n // #endif\r\n canvasToDataURL() {\r\n this.dataBase64 = this.canvasContext!.toDataURL()\r\n },\r\n onCreateImage() {\r\n this.renderingContext!.clearRect(0, 0, this.canvasWidth, this.canvasHeight)\r\n let image = this.canvasContext!.createImage();\r\n image.src = \"../../static/logo.png\"\r\n image.onload = () => {\r\n this.testCreateImage = true\r\n this.renderingContext?.drawImage(image, 0, 0, 100, 100);\r\n }\r\n },\r\n onCreatePath2D() {\r\n this.renderingContext!.clearRect(0, 0, this.canvasWidth, this.canvasHeight)\r\n const context = this.renderingContext!\r\n let path2D = this.canvasContext!.createPath2D()\r\n this.testCreatePath2D = true\r\n const amplitude = 64;\r\n const wavelength = 64;\r\n for (let i = 0; i < 5; i++) {\r\n const x1 = 0 + (i * wavelength);\r\n const y1 = 128;\r\n const x2 = x1 + wavelength / 4;\r\n const y2 = y1 - amplitude;\r\n const x3 = x1 + 3 * wavelength / 4;\r\n const y3 = y1 + amplitude;\r\n const x4 = x1 + wavelength;\r\n const y4 = y1;\r\n context.moveTo(x1, y1);\r\n path2D.bezierCurveTo(x2, y2, x3, y3, x4, y4);\r\n }\r\n context.stroke(path2D);\r\n },\r\n startAnimationFrame() {\r\n this.taskId = this.canvasContext!.requestAnimationFrame((timestamp : number) => {\r\n this.testFrameCount++\r\n this.updateFPS(timestamp)\r\n this.startAnimationFrame()\r\n })\r\n },\r\n stopAnimationFrame() {\r\n this.canvasContext!.cancelAnimationFrame(this.taskId)\r\n this.taskId = 0\r\n },\r\n updateFPS(timestamp : number) {\r\n this.frameCount++\r\n if (timestamp - this.lastTime >= 1000) {\r\n const timeOfFrame = (1000 / this.frameCount)\r\n this.renderingContext!.clearRect(0, 0, this.canvasWidth, this.canvasHeight)\r\n this.renderingContext!.fillText(`${this.frameCount} / ${timeOfFrame.toFixed(3)}ms`, 10, 18)\r\n this.frameCount = 0\r\n this.lastTime = timestamp\r\n }\r\n }\r\n }\r\n }\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.canvas.canvas)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/canvas.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=canvas&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=canvas&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=canvas&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=canvas&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=canvas&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=canvas)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=canvas&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"ad":{"name":"## ad","description":"广告","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| x | 4.31 | 4.31 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| adpid | string | - | | 广告位id,在uniAD官网申请广告位 |\n| @load | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 广告加载成功的回调 |\n| @close | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 广告关闭的回调 |\n| @error | (e:[UniAdErrorEvent](#uniaderrorevent)) => void | - | | 广告加载失败的回调 |","event":"\n### 事件\n#### UniAdErrorEvent\n\n\n##### UniAdErrorEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **IUniAdError** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| errCode | number | 是 | - | - | 错误码
- -5001 广告位标识adpid为空,请传入有效的adpid
- -5002 无效的广告位标识adpid,请使用正确的adpid
- -5003 广告位未开通广告,请在广告平台申请并确保已审核通过
- -5004 无广告模块,打包时请配置要使用的广告模块
- -5005 广告加载失败,请稍后重试
- -5006 广告已经展示过了,请重新加载
- -5007 广告不可用或已过期,请重新请求
- -5008 广告不可用或已过期,请重新请求
- -5009 广告类型不符,请检查后再试
- -5011 打包或开通的渠道,不支持此类型广告
- -5013 广告播放失败,请重新加载 |\n@| errSubject | string | 是 | - | - | 统一错误主题(模块)名称 |\n@| data | any | 否 | - | - | 错误信息中包含的数据 |\n@| cause | [Error](https://uniapp.dcloud.net.cn/tutorial/err-spec.html#unierror) | 否 | - | - | 源错误信息,可以包含多个错误,详见SourceError |\n@| errMsg | string | 是 | - | - | - |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) | 否 | - | - | 触发事件的组件 |\n| currentTarget | [UniElement](/dom/unielement.md) | 否 | - | - | 当前组件 |\n| timeStamp | Long | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniAdErrorEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | - | 阻止当前事件的默认行为 |\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/ad/ad.uvue) \n >\n> 该 API 不支持 Web,请运行 hello uni-app x 到 App 平台体验 \n\n::: preview\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/ad/ad\n```uvue\n\r\n \r\n \r\n \r\n 信息流广告加载失败,请退出当前页面重试。\n \r\n \r\n\r\n\r\n\r\n\r\n\n\n```\n:::","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.ad.ad)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/ad.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=ad&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=ad&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=ad&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=ad&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=ad&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=ad)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=ad&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"web-view":{"name":"## web-view","description":"> 组件类型:[UniWebViewElement](/dom/uniwebviewelement.md) \n\n 承载网页的容器","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| src | string([string.HTMLURIString](/uts/data-type.md#ide-string)) | - | | webview 指向网页的链接 |\n| allow | string | - | | 用于为 [iframe](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe) 指定其[特征策略](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/策略特征) |\n| sandbox | string | - | | 该属性对呈现在 [iframe](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe) 框架中的内容启用一些额外的限制条件。 |\n| fullscreen | boolean | - | | 是否铺满整个页面,默认值:`true`。 |\n| webview-styles | **WebViewStyles** | {\"progress\":{\"color\":\"#00FF00\"}} | | webview 网络地址页面加载进度条样式 |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| progress | [WebViewProgressStyles](#webviewprogressstyles-values) \\| boolean | 是 | false | - | 网络地址页面加载进度条样式,设置为 false 时表示不显示加载进度条。 |\n@\n| horizontalScrollBarAccess | boolean | true | | 设置是否显示横向滚动条 |\n| verticalScrollBarAccess | boolean | true | | 设置是否显示纵向滚动条 |\n| @message | (event: [UniWebViewMessageEvent](#uniwebviewmessageevent)) => void | - | | 网页向应用 postMessage 时触发。e.detail = { data } |\n| @error | (event: [UniWebViewErrorEvent](#uniwebviewerrorevent)) => void | - | | 网页加载错误时触发。e.detail = { errSubject, errCode, errMsg, url, fullUrl, src } |\n| @load | (event: [UniWebViewLoadEvent](#uniwebviewloadevent)) => void | - | | 网页加载完成后触发。e.detail = { url, src } |\n| @loading | (event: [UniWebViewLoadingEvent](#uniwebviewloadingevent)) => void | - | | 网页加载中触发。e.detail = { url, src } |\n| @download | (event: [UniWebViewDownloadEvent](#uniwebviewdownloadevent)) => void | - | | 点击网页中可下载链接时触发。e.detail = { url, userAgent, contentDisposition, mimetype, contentLength } |","event":"\n### 事件\n#### UniWebViewMessageEvent\n\n```mermaid\ngraph LR\n \nUniWebViewMessageEvent -- Extends --> UniCustomEvent<UniWebViewMessageEventDetail>\n style UniCustomEvent<UniWebViewMessageEventDetail> color:#42b983\n click UniCustomEvent<UniWebViewMessageEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniWebViewMessageEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| type | string | 是 | - | - | 事件类型,固定值message |\n\n\n##### UniWebViewMessageEventDetail\n\n\n###### UniWebViewMessageEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| data | UTSJSONObject[\\] | 是 | - | - | 消息包含的数据,4.13版本之前类型为Map\\ \\| null,4.13版本(含)之后类型为Array\\ |\n\n\n#### UniWebViewErrorEvent\n\n```mermaid\ngraph LR\n \nUniWebViewErrorEvent -- Extends --> UniCustomEvent<UniWebViewErrorEventDetail>\n style UniCustomEvent<UniWebViewErrorEventDetail> color:#42b983\n click UniCustomEvent<UniWebViewErrorEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniWebViewErrorEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| type | string | 是 | - | - | 事件类型,固定值error |\n\n\n##### UniWebViewErrorEventDetail\n\n\n###### UniWebViewErrorEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| errSubject | string | 是 | - | - | 统一错误主题(模块)名称,固定值uni-web-view |\n| errCode | number | 是 | - | - | 统一错误码
100001 ssl error
100002 page error
100003 http error |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| 100001 | - | - |\n@| 100002 | - | - |\n@| 100003 | - | - |\n| errMsg | string | 是 | - | - | 统一错误描述信息 |\n| url | string | 是 | - | - | 加载错误的网页链接,非完整链接,仅包含scheme://authority部分,4.13版本起支持 |\n| fullUrl | string | 是 | - | - | 加载错误的网页链接,完整链接,4.13版本起支持 |\n| src | string | 是 | - | - | 加载错误的网页链接,完整链接,4.13版本起支持 |\n\n\n#### UniWebViewLoadEvent\n\n```mermaid\ngraph LR\n \nUniWebViewLoadEvent -- Extends --> UniCustomEvent<UniWebViewLoadEventDetail>\n style UniCustomEvent<UniWebViewLoadEventDetail> color:#42b983\n click UniCustomEvent<UniWebViewLoadEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniWebViewLoadEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| type | string | 是 | - | - | 事件类型,固定值load |\n\n\n##### UniWebViewLoadEventDetail\n\n\n###### UniWebViewLoadEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| ~~url~~ | string | 是 | - | - | 加载完成的网页链接 |\n| src | string | 是 | - | - | 加载完成的网页链接,4.13版本起支持 |\n\n\n#### UniWebViewLoadingEvent\n\n```mermaid\ngraph LR\n \nUniWebViewLoadingEvent -- Extends --> UniCustomEvent<UniWebViewLoadingEventDetail>\n style UniCustomEvent<UniWebViewLoadingEventDetail> color:#42b983\n click UniCustomEvent<UniWebViewLoadingEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniWebViewLoadingEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| type | string | 是 | - | - | 事件类型,固定值loading |\n\n\n##### UniWebViewLoadingEventDetail\n\n\n###### UniWebViewLoadingEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| ~~url~~ | string | 是 | - | - | 加载中的网页链接 |\n| src | string | 是 | - | - | 加载中的网页链接,4.13版本起支持 |\n\n\n#### UniWebViewDownloadEvent\n\n```mermaid\ngraph LR\n \nUniWebViewDownloadEvent -- Extends --> UniCustomEvent<UniWebViewDownloadEventDetail>\n style UniCustomEvent<UniWebViewDownloadEventDetail> color:#42b983\n click UniCustomEvent<UniWebViewDownloadEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniWebViewDownloadEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| type | string | 是 | - | - | 事件类型,固定值download |\n\n\n##### UniWebViewDownloadEventDetail\n\n\n###### UniWebViewDownloadEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| url | string | 是 | - | - | 下载链接 |\n| userAgent | string | 是 | - | - | 用户代理 |\n| contentDisposition | string | 是 | - | - | 指示回复的内容该以何种形式展示,是以内联的形式(即网页或者页面的一部分),还是以附件的形式下载并保存到本地 |\n| mimetype | string | 是 | - | - | 媒体类型 |\n| contentLength | number | 是 | - | - | 文件大小 |\n\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/web-view/web-view.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/web-view/web-view\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/web-view/web-view\n\n>Template\n```vue\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n 显示横向滚动条\r\n \r\n \r\n \r\n 显示竖向滚动条\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n 前进、后退功能在Windows端需要打自定义基座,MAC端需要配置Xcode环境后进行真机运行或者打自定义基座\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n // #ifdef APP\r\n import { canWebViewGoBack, canWebViewGoForward, hasNativeView } from '@/uni_modules/uts-get-native-view';\r\n // #endif\r\n export default {\r\n data() {\r\n return {\r\n src: 'https://www.dcloud.io',\r\n webview_styles: {\r\n progress: {\r\n color: '#FF3333'\r\n }\r\n },\r\n webviewContext: null as WebviewContext | null,\r\n webviewElement: null as UniWebViewElement | null,\r\n loadError: false,\r\n horizontalScrollBarAccess: true,\r\n verticalScrollBarAccess: true,\r\n canGoBack: false,\r\n canGoForward: false,\r\n // 自动化测试\r\n autoTest: false,\r\n eventLoading: null as UTSJSONObject | null,\r\n eventLoad: null as UTSJSONObject | null,\r\n eventError: null as UTSJSONObject | null,\r\n eventTouchstart: null as UTSJSONObject | null,\r\n eventTap: null as UTSJSONObject | null,\r\n pointerEvents: 'auto'\r\n }\r\n },\r\n onReady() {\r\n // #ifdef APP\r\n // TODO web 实现createWebviewContext\r\n this.webviewContext = uni.createWebviewContext('web-view', this)\r\n this.webviewElement = uni.getElementById('web-view') as UniWebViewElement //推荐使用element,功能更丰富\r\n // console.log('url: ',this.webviewElement?.getAttribute(\"src\"));\r\n // this.webviewElement?.setAttribute(\"src\",\"https://ext.dcloud.net.cn/\")\r\n // #endif\r\n },\r\n methods: {\r\n getPackageName() : string {\r\n let packageName : string = \"\"\r\n\r\n // #ifdef APP-IOS\r\n const res = uni.getAppBaseInfo();\r\n packageName = res.bundleId\r\n // #endif\r\n\r\n return packageName\r\n },\r\n isProd() : boolean {\r\n if (this.getPackageName() == 'io.dcloud.hellouniappx') {\r\n return true\r\n }\r\n return false\r\n },\r\n back() {\r\n this.webviewContext?.back();\r\n },\r\n forward() {\r\n this.webviewContext?.forward();\r\n },\r\n reload() {\r\n this.webviewContext?.reload();\r\n // this.webviewElement?.reload();\r\n },\r\n stop() {\r\n this.webviewContext?.stop();\r\n },\r\n nativeToWeb() {\r\n this.webviewContext?.evalJS(\"alert('hello uni-app x')\");\r\n },\r\n message(event : UniWebViewMessageEvent) {\r\n console.log(JSON.stringify(event.detail));\r\n },\r\n error(event : UniWebViewErrorEvent) {\r\n this.loadError = true\r\n console.log(JSON.stringify(event.detail));\r\n if (this.autoTest) {\r\n this.eventError = {\r\n \"tagName\": event.target?.tagName,\r\n \"type\": event.type,\r\n \"errCode\": event.detail.errCode,\r\n \"errMsg\": event.detail.errMsg,\r\n \"url\": event.detail.url,\r\n \"fullUrl\": event.detail.fullUrl,\r\n \"src\": event.detail.src\r\n };\r\n }\r\n },\r\n loading(event : UniWebViewLoadingEvent) {\r\n console.log(JSON.stringify(event.detail));\r\n if (this.autoTest) {\r\n this.eventLoading = {\r\n \"tagName\": event.target?.tagName,\r\n \"type\": event.type,\r\n \"src\": event.detail.src\r\n };\r\n }\r\n },\r\n load(event : UniWebViewLoadEvent) {\r\n console.log(JSON.stringify(event.detail));\r\n // #ifdef APP\r\n this.canGoBack = canWebViewGoBack('web-view');\r\n this.canGoForward = canWebViewGoForward('web-view');\r\n // #endif\r\n if (this.autoTest) {\r\n this.eventLoad = {\r\n \"tagName\": event.target?.tagName,\r\n \"type\": event.type,\r\n \"src\": event.detail.src\r\n };\r\n }\r\n },\r\n download(event : UniWebViewDownloadEvent) {\r\n console.log(JSON.stringify(event.detail));\r\n uni.showModal({\r\n content: \"下载链接: \" + event.detail.url + \"\\n文件大小: \" + event.detail.contentLength / 1024 + \"KB\",\r\n showCancel: false\r\n });\r\n },\r\n confirm(event : UniInputConfirmEvent) {\r\n let url = event.detail.value;\r\n if (!url.startsWith('https://') && !url.startsWith('http://')) {\r\n url = 'https://' + url;\r\n }\r\n this.src = url;\r\n },\r\n changeHorizontalScrollBarAccess(event : UniSwitchChangeEvent) {\r\n this.horizontalScrollBarAccess = event.detail.value;\r\n },\r\n changeVerticalScrollBarAccess(event : UniSwitchChangeEvent) {\r\n this.verticalScrollBarAccess = event.detail.value;\r\n },\r\n // 自动化测试\r\n touchstart(event : UniTouchEvent) {\r\n if (this.autoTest) {\r\n this.eventTouchstart = {\r\n clientX: Math.ceil(event.touches[0].clientX),\r\n clientY: Math.ceil(event.touches[0].clientY)\r\n };\r\n }\r\n },\r\n tap(event : UniPointerEvent) {\r\n if (this.autoTest) {\r\n this.eventTap = {\r\n clientX: Math.ceil(event.clientX),\r\n clientY: Math.ceil(event.clientY)\r\n };\r\n }\r\n },\r\n getWindowInfo() : GetWindowInfoResult {\r\n return uni.getWindowInfo();\r\n },\r\n //自动化测试专用\r\n checkNativeWebView() : boolean {\r\n // #ifdef APP\r\n return hasNativeView('web-view')\r\n // #endif\r\n // #ifdef WEB\r\n return true\r\n // #endif\r\n }\r\n }\r\n }\r\n\n```\n\n:::","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.web-view.web-view)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/web-view.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=web-view&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=web-view&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=web-view&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=web-view&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=web-view&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=web-view)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=web-view&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"custom-tab-bar":{"name":"## custom-tab-bar","description":"自定义tabBar","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.24 | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| direction | string | - | | 选项的排列方向 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| horizontal | - | 选项的排列方向水平 |\n@| vertical | - | 选项的排列方向水平 |\n| show-icon | boolean | - | | 是否显示icon |\n| selected | number | - | | 选中的tabBar选项索引值 |\n| @onTabItemTap | (event: [OnTabItemTapOption](#ontabitemtapoption)) => void | - | | 点击自定义 tabBar 触发事件,detail = {index, pagePath, text} |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.page-meta.custom-tab-bar)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/custom-tab-bar.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=custom-tab-bar&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=custom-tab-bar&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=custom-tab-bar&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=custom-tab-bar&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=custom-tab-bar&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=custom-tab-bar)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=custom-tab-bar&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"unicloud-db":{"name":"## unicloud-db","description":"> 组件类型:[UniCloudDBElement](#uniclouddbelement) \n\n 是一个数据库查询组件,它将clientDB的API封装为组件,进一步减少开发者使用所需的代码量。","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.93 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| id | string([string.IDString](/uts/data-type.md#ide-string)) | - | - | 唯一标识 |\n| v-slot:default | string | - | | {data, loading, hasMore, pagination, error} |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| data | - | 查询结果,类型为Array\\ |\n@| loading | - | 查询中的状态。可根据此状态,在template中通过v-if显示等待内容 |\n@| hasMore | - | 是否有更多数据。可根据此状态,在template中通过v-if显示没有更多数据了 |\n@| error | - | 查询错误。可根据此状态,在template中通过v-if显示等待内容 |\n@| pagination | - | 分页属性 |\n@@| 合法值 | 兼容性 | 描述 |\n@@| :- | :-: | :- |\n@@| current | - | 当前页号 |\n@@| size | - | 分页大小 |\n@@| count | - | 数据库的总数据量, 设置 :getcount=true 时有效 |\n| collection | string([string.DBCollectionString](/uts/data-type.md#ide-string)) | - | | 表名 |\n| field | string([string.DBFieldString](/uts/data-type.md#ide-string)) | - | | 查询字段,多个字段用 `,` 分割 |\n| where | string([string.JQLString](/uts/data-type.md#ide-string)) | - | | 查询条件 |\n| orderby | string | - | | 排序字段及正序倒叙设置 |\n| groupby | string | - | | 对数据进行分组 |\n| group-field | string | - | | 对数据进行分组统计 |\n| distinct | boolean | - | | 是否对数据查询结果中重复的记录进行去重 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| true | - | 去重 |\n@| false | - | 不去重 |\n| page-data | string | - | | add 多次查询的集合, replace 当前查询的集合 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| add | - | 多次查询的集合 |\n@| replace | - | 当前查询的集合 |\n| page-current | number | - | | 当前页 |\n| page-size | number | - | | 每页数据数量 |\n| getone | boolean | - | | 指定查询结果是否返回数组第一条数据,默认 false。在false情况下返回的是数组,即便只有一条结果,也需要\\[0]方式获取。在true下,直接返回结果数据,少一层数组 |\n| getcount | boolean | - | | 是否查询总数量 |\n| gettree | boolean | - | | 是否查询树状结构数据 |\n| startwith | string | - | | gettree的第一层级条件,此初始条件可以省略,不传startWith时默认从最顶级开始查询 |\n| limitlevel | number | - | | gettree查询返回的树的最大层级。超过设定层级的节点不会返回。默认10级,最大15,最小1 |\n| manual | boolean | - | | 是否手动加载数据,默认为 false,页面onLoad时自动联网加载数据 |\n| loadtime | string | - | | 加载数据时机,默认auto,可选值 auto\\|onready\\|manual |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| auto | - | 页面就绪后或属性变化后加载数据,默认为auto |\n@| onready | - | 页面就绪后不自动加载数据,属性变化后加载。适合在onLoad中接收上个页面的参数作为where条件时 |\n@| manual | - | 手动模式,不自动加载数据。如果涉及到分页,需要先手动修改当前页,在调用加载数据 |\n| @load | (data : Array\\, ended : boolean, pagination : [UTSJSONObject](/uts/buildin-object-api/utsjsonobject.md)) => void | - | | 成功回调。如联网返回结果后,想修改下数据再渲染界面,则在本方法里对data进行修改 |\n| @error | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 失败回调 |\n| ~~action~~ | string([string.ClientDBActionString](/uts/data-type.md#ide-string)) | - | | 云端执行数据库查询的前或后,触发某个action函数操作,进行预处理或后处理(推荐改用JQL触发器) |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/unicloud-db/unicloud-db.uvue) \n >\n> 该 API 不支持 Web,请运行 hello uni-app x 到 App 平台体验 \n```uvue\n\r\n \r\n \r\n 0\" ref=\"listView\" class=\"list\" :scroll-y=\"true\" @scrolltolower=\"loadMore()\">\r\n \r\n \r\n {{item}}\r\n \r\n \r\n ❌\r\n \r\n \r\n \r\n Loading...\r\n {{error.errMsg}}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\n\n```","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.unicloud.unicloud-db)\n- [unicloud-db组件教程](https://doc.dcloud.net.cn/uniCloud/unicloud-db.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=unicloud-db&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=unicloud-db&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=unicloud-db&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=unicloud-db&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=unicloud-db&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=unicloud-db)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=unicloud-db&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n","component_type":"### UniCloudDBElement\n\n#### UniCloudDBElement 的属性值\n| 名称 | 类型 | 必填 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| dataList | Array\\ | 是 | - | 已加载的数据 |\n#### UniCloudDBElement 的方法\n##### loadData(options?: UTSJSONObject \\| null): void @loaddata\n加载数据\n当 \\ 组件的 manual 属性设为 true 或者 loadtime 属性设置为 manual 时,不会在页面初始化时联网查询数据,此时需要通过本方法在需要的时候手动加载数据。\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| options | **UniCloudDBComponentLoadDataOptions** | 否 | - | - | 可选参数 |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| clear | boolean | 否 | false | - | 是否清空数据 |\n@| current | number | 否 | - | - | 当前第几页 |\n@| success | (res?: T) => void | 否 | - | - | 成功回调 |\n@| fail | (err?: any) => void | 否 | - | - | 失败回调 |\n@| complete | () => void | 否 | - | - | 完成回调 | \n\n\n###### loadData 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| - | - | - |\n\n\n##### loadMore(): void @loadmore\n加载更多数据\n在列表的加载下一页场景下,使用ref方式访问组件方法,加载更多数据,每加载成功一次,当前页 +1\n\n\n###### loadMore 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| - | - | - |\n\n\n##### add(value: UTSJSONObject, options?: UTSJSONObject \\| null): void @add\n新增数据\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| value | UTSJSONObject | 是 | - | - | 新增数据. |\n| options | **UniCloudDBComponentAddOptions** | 否 | - | - | 可选参数 |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| showToast | boolean | 否 | true | - | 是否显示 Toast |\n@| toastTitle | string | 否 | - | - | Toast 标题 |\n@| needLoading | boolean | 否 | true | - | 是否需要 Loading |\n@| loadingTitle | string | 否 | - | - | Loading 标题 |\n@| success | (res?: T) => void | 否 | - | - | 成功回调 |\n@| fail | (err?: any) => void | 否 | - | - | 失败回调 |\n@| complete | () => void | 否 | - | - | 完成回调 | \n\n\n###### add 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| - | - | - |\n\n\n##### remove(): void @remove\n移除数据\n\n\n###### remove 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| - | - | - |\n\n\n##### remove(): void @remove\n移除数据\n\n\n###### remove 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| - | - | - |\n\n\n##### update(id: string, value: UTSJSONObject, options?: UTSJSONObject \\| null): void @update\n更新数据\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| id | string | 是 | - | - | 数据库字段的唯一标识. |\n| value | UTSJSONObject | 是 | - | - | 需要修改的新数据. |\n| options | **UniCloudDBComponentUpdateOptions** | 否 | - | - | 可选参数 |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| showToast | boolean | 否 | true | - | 是否显示更新后 Toast |\n@| toastTitle | string | 否 | \"\" | - | 更新成功后 Toast 标题 |\n@| confirmTitle | string | 否 | - | - | 确认框标题 |\n@| confirmContent | string | 否 | - | - | 确认框内容 |\n@| needConfirm | boolean | 否 | true | - | 是否显示更新确认框 |\n@| needLoading | boolean | 否 | true | - | 是否需要 Loading |\n@| loadingTitle | string | 否 | - | - | Loading 标题 |\n@| success | (res?: T) => void | 否 | - | - | 成功回调 |\n@| fail | (err?: any) => void | 否 | - | - | 失败回调 |\n@| complete | () => void | 否 | - | - | 完成回调 | \n\n\n###### update 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| - | - | - |\n\n"}}
\ No newline at end of file
+{"view":{"name":"## view","description":"> 组件类型:UniViewElement \n\n 基本视图容器","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| hover-class | string([string.ClassString](/uts/data-type.md#ide-string)) | \"none\" | | 指定按下去的样式类。当 hover-class=\"none\" 时,没有点击态效果 |\n| hover-stop-propagation | boolean | false | | 指定是否阻止本节点的祖先节点出现点击态(祖先节点:指根节点到该节点路径上的所有节点都是这个节点的祖先节点) |\n| hover-start-time | number | 50 | | 按住后多久出现点击态,单位毫秒 |\n| hover-stay-time | number | 400 | | 手指松开后点击态保留时间,单位毫秒 |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/view/view.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/view/view\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/view/view\n\n>Template\n```vue\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n import { ItemType } from '@/components/enum-data/enum-data'\r\n export default {\r\n data() {\r\n return {\r\n hover_class: false,\r\n stop_propagation: false,\r\n start_time: 50,\r\n stay_time: 400,\r\n start_time_enum: [{ \"value\": 50, \"name\": \"50毫秒\" }, { \"value\": 200, \"name\": \"200毫秒\" }] as ItemType[],\r\n stay_time_enum: [{ \"value\": 400, \"name\": \"400毫秒\" }, { \"value\": 200, \"name\": \"200毫秒\" }] as ItemType[]\r\n }\r\n },\r\n methods: {\r\n change_hover_class_boolean(checked : boolean) {\r\n this.hover_class = checked\r\n },\r\n change_stop_propagation_boolean(checked : boolean) {\r\n this.stop_propagation = checked\r\n },\r\n radio_change_start_time_enum(time : number) {\r\n this.start_time = time\r\n },\r\n radio_change_stay_time_enum(time : number) {\r\n this.stay_time = time\r\n },\r\n },\r\n }\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.view)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/view.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=view&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=view&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=view&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=view&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=view&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=view)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=view&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"scroll-view":{"name":"## scroll-view","description":"> 组件类型:UniScrollViewElement \n\n 可滚动视图容器","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| type | string | - | | 渲染模式,可取值 nested |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| nested | | 嵌套模式。用于处理父子 scroll-view 间的嵌套滚动,子节点只能是 nested-scroll-header nested-scroll-body 组件或自定义 refresher |\n| direction | string | \"vertical\" | | 滚动方向,可取值 none、all、horizontal、vertical,默认值vertical |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| none | | 禁止滚动 |\n@| all | | 横向竖向都可滚动 app端不支持 |\n@| horizontal | | 横向滚动 |\n@| vertical | | 竖向滚动 |\n| associative-container | string | \"\" | | 关联的滚动容器 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| nested-scroll-view | | 嵌套滚动 |\n| enable-back-to-top | boolean | false | | iOS点击顶部状态栏滚动条返回顶部,只支持竖向 |\n| bounces | boolean | true | | 控制是否回弹效果 优先级高于rebound |\n| upper-threshold | number | 50 | | 距顶部/左边多远时(单位px),触发 scrolltoupper 事件 |\n| lower-threshold | number | 50 | | 距底部/右边多远时(单位px),触发 scrolltolower 事件 |\n| scroll-top | number | 0 | | 设置竖向滚动条位置 |\n| scroll-left | number | 0 | | 设置横向滚动条位置 |\n| scroll-into-view | string([string.IDString](/uts/data-type.md#ide-string)) | - | | 值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素起始位置 |\n| scroll-with-animation | boolean | false | | 是否在设置滚动条位置时使用滚动动画,设置false没有滚动动画 |\n| refresher-enabled | boolean | false | | 开启下拉刷新,暂时不支持scroll-x = true横向刷新 |\n| refresher-threshold | number | 45 | | 设置下拉刷新阈值 |\n| refresher-max-drag-distance | number | - | | 设置下拉最大拖拽距离(单位px),默认是下拉刷新控件高度的2.5倍 |\n| refresher-default-style | string | \"black\" | | 设置下拉刷新默认样式,支持设置 black \\| white \\| none, none 表示不使用默认样式 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| black | | 深颜色雪花样式 |\n@| white | | 浅白色雪花样式 |\n@| none | | 不使用默认样式 |\n| refresher-background | string([string.ColorString](/uts/data-type.md#ide-string)) | \"transparent\" | | 设置下拉刷新区域背景颜色,默认透明 |\n| refresher-triggered | boolean | false | | 设置当前下拉刷新状态,true 表示下拉刷新已经被触发,false 表示下拉刷新未被触发 |\n| show-scrollbar | boolean | true | | 控制是否出现滚动条 |\n| custom-nested-scroll | boolean | false | | 子元素是否开启嵌套滚动 将滚动事件与父元素协商处理 |\n| nested-scroll-child | string([string.IDString](/uts/data-type.md#ide-string)) | \"\" | | 嵌套滚动子元素的id属性,不支持ref,scroll-view惯性滚动时会让对应id元素视图进行滚动,子元素滚动时会触发scroll-view的nestedprescroll事件,嵌套子元素需要设置custom-nested-scroll = true |\n| @refresherpulling | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | | 下拉刷新控件被下拉 |\n| @refresherrefresh | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | | 下拉刷新被触发 |\n| @refresherrestore | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | | 下拉刷新被复位 |\n| @refresherabort | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | | 下拉刷新被中止 |\n| @scrolltoupper | (event: [UniScrollToUpperEvent](#uniscrolltoupperevent)) => void | - | | 滚动到顶部/左边,会触发 scrolltoupper 事件 |\n| @scrolltolower | (event: [UniScrollToLowerEvent](#uniscrolltolowerevent)) => void | - | | 滚动到底部/右边,会触发 scrolltolower 事件 |\n| @scroll | (event: [UniScrollEvent](#uniscrollevent)) => void | - | | 滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |\n| @scrollend | (event: [UniScrollEvent](#uniscrollevent)) => void | - | | 滚动结束时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |\n| @startnestedscroll | (event: [UniStartNestedScrollEvent](#unistartnestedscrollevent)) => Boolean | - | | 子元素开始滚动时触发, return true表示与子元素开启滚动协商 默认return false! event = {node} |\n| @nestedprescroll | (event: [UniNestedPreScrollEvent](#uninestedprescrollevent)) => void | - | | 子元素滚动时触发,可执行event.consumed(x,y)告知子元素deltaX、deltaY各消耗多少。子元素将执行差值后的deltaX、deltaY滚动距离。不执行consumed(x,y)则表示父元素不消耗deltaX、deltaY。event = {deltaX, deltaY} |\n| @stopnestedscroll | (event: [UniStopNestedScrollEvent](#unistopnestedscrollevent)) => void | - | | 子元素滚动结束或意外终止时触发 |\n| ~~rebound~~ | boolean | true | | 控制是否回弹效果。已废弃,请改用bounces |\n| ~~scroll-y~~ | boolean | true | | 允许纵向滚动,不支持同时设置scroll-x属性为true,同时设置true时scroll-y生效。已废弃,请改用direction |\n| ~~scroll-x~~ | boolean | false | | 允许横向滚动,不支持同时设置scroll-y属性为true,同时设置true时scroll-y生效。已废弃,请改用direction |","event":"\n### 事件\n#### UniRefresherEvent\n\n```mermaid\ngraph LR\n \nUniRefresherEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniRefresherEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniRefresherEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| dy | number | 是 | - | - | - |\n\n\n#### UniScrollToUpperEvent\n\n```mermaid\ngraph LR\n \nUniScrollToUpperEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniScrollToUpperEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniScrollToUpperEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| direction | string | 是 | - | - | 滚动方向 top 或 left |\n\n\n#### UniScrollToLowerEvent\n\n```mermaid\ngraph LR\n \nUniScrollToLowerEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniScrollToLowerEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniScrollToLowerEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| direction | string | 是 | - | - | 滚动方向 bottom 或 right |\n\n\n#### UniScrollEvent\n\n```mermaid\ngraph LR\n \nUniScrollEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniScrollEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniScrollEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| scrollTop | number | 是 | - | - | 竖向滚动的距离 |\n@| scrollLeft | number | 是 | - | - | 横向滚动的距离 |\n@| scrollHeight | number | 是 | - | - | 滚动区域的高度 |\n@| scrollWidth | number | 是 | - | - | 滚动区域的宽度 |\n@| deltaY | number | 是 | - | - | 当次滚动事件竖向滚动量 |\n@| deltaX | number | 是 | - | - | 当次滚动事件横向滚动量 |\n\n\n#### UniStartNestedScrollEvent\n\n```mermaid\ngraph LR\n \nUniStartNestedScrollEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniStartNestedScrollEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| node | [UniElement](/dom/unielement.md) | 是 | - | - | 开始滚动子节点对象 |\n| isTouch | boolean | 是 | - | | 是否由触摸行为发生的Event |\n\n\n#### UniNestedPreScrollEvent\n\n```mermaid\ngraph LR\n \nUniNestedPreScrollEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniNestedPreScrollEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| deltaX | number | 是 | - | - | x轴滚动距离 |\n| deltaY | number | 是 | - | - | y轴滚动距离 |\n| isTouch | boolean | 是 | - | | 是否由触摸行为发生的Event |\n\n\n##### UniNestedPreScrollEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| consumed | (consumedX: number, consumedY: number) => void | 是 | - | - | 通知到子节点x,y轴滚动距离的消耗 |\n\n#### UniStopNestedScrollEvent\n\n```mermaid\ngraph LR\n \nUniStopNestedScrollEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniStopNestedScrollEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| isTouch | boolean | 是 | - | - | 是否由触摸行为发生的Event |\n\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/scroll-view/scroll-view.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/scroll-view/scroll-view\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/scroll-view/scroll-view\n\n>Template\n```vue\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Vertical Scroll\r\n 纵向滚动\r\n \r\n \r\n \r\n A\r\n B\r\n C\r\n \r\n \r\n \r\n 点击这里返回顶部\r\n \r\n\r\n \r\n Horizontal Scroll\r\n 横向滚动\r\n \r\n \r\n \r\n A\r\n B\r\n C\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n type ScrollEventTest = {\r\n type : string;\r\n target : UniElement | null;\r\n currentTarget : UniElement | null;\r\n direction ?: string\r\n }\r\n export default {\r\n data() {\r\n return {\r\n scrollTop: 0,\r\n oldScrollTop: 0,\r\n scrollLeft: 120,\r\n showScrollbar: true,\r\n // 自动化测试\r\n isScrollTest: '',\r\n isScrolltolowerTest: '',\r\n isScrolltoupperTest: '',\r\n scrollDetailTest: null as UniScrollEventDetail | null,\r\n scrollEndDetailTest: null as UniScrollEventDetail | null,\r\n }\r\n },\r\n methods: {\r\n upper: function (e : UniScrollToUpperEvent) {\r\n console.log('滚动到顶部/左边', e)\r\n this.checkEventTest({\r\n type: e.type,\r\n target: e.target,\r\n currentTarget: e.currentTarget,\r\n direction: e.detail.direction,\r\n } as ScrollEventTest, 'scrolltoupper')\r\n },\r\n lower: function (e : UniScrollToLowerEvent) {\r\n console.log('滚动到底部/右边', e)\r\n this.checkEventTest({\r\n type: e.type,\r\n target: e.target,\r\n currentTarget: e.currentTarget,\r\n direction: e.detail.direction,\r\n } as ScrollEventTest, 'scrolltolower')\r\n },\r\n scroll: function (e : UniScrollEvent) {\r\n this.scrollDetailTest = e.detail\r\n this.checkEventTest({\r\n type: e.type,\r\n target: e.target,\r\n currentTarget: e.currentTarget\r\n } as ScrollEventTest, 'scroll')\r\n this.oldScrollTop = e.detail.scrollTop\r\n },\r\n end: function (e : UniScrollEvent) {\r\n console.log('滚动结束时触发', e)\r\n this.scrollEndDetailTest = e.detail\r\n this.checkEventTest({\r\n type: e.type,\r\n target: e.target,\r\n currentTarget: e.currentTarget\r\n } as ScrollEventTest, 'scrollend')\r\n },\r\n goTop: function () {\r\n // 解决view层不同步的问题\r\n this.scrollTop = this.oldScrollTop\r\n this.$nextTick(function () {\r\n this.scrollTop = 0\r\n })\r\n uni.showToast({\r\n icon: 'none',\r\n title: '纵向滚动 scrollTop 值已被修改为 0',\r\n })\r\n },\r\n // 自动化测试专用(由于事件event参数对象中存在循环引用,在ios端JSON.stringify报错,自动化测试无法page.data获取)\r\n checkEventTest(e : ScrollEventTest, eventName : String) {\r\n const isPass = e.type === eventName && e.target instanceof UniElement && e.currentTarget instanceof UniElement;\r\n const result = isPass ? `${eventName}:Success` : `${eventName}:Fail`;\r\n switch (eventName) {\r\n case 'scroll':\r\n this.isScrollTest = result\r\n break;\r\n case 'scrolltolower':\r\n this.isScrolltolowerTest = result + `-${e.direction}`\r\n break;\r\n case 'scrolltoupper':\r\n this.isScrolltoupperTest = result + `-${e.direction}`\r\n break;\r\n default:\r\n break;\r\n }\r\n },\r\n // 自动化测试专用\r\n setVerticalScrollBy(y : number) {\r\n const element = uni.getElementById(\"verticalScrollView\")\r\n if (element != null) {\r\n element.scrollBy(0, y)\r\n }\r\n }\r\n },\r\n }\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.scroll-view)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/scroll-view.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=scroll-view&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=scroll-view&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=scroll-view&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=scroll-view&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=scroll-view&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=scroll-view)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=scroll-view&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"swiper-item":{"name":"## swiper-item","description":"> 组件类型:UniSwiperItemElement \n\n swiper的唯一合法子组件。每个swiper-item代表一个滑块。宽高自动设置为100%","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| item-id | string | - | | 该 swiper-item 的标识符 |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.swiper.swiper-item)\n- [参见uni-app相关文档](https://uniapp.dcloud.net.cn/component/swiper.html#swiper-item)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=swiper-item&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=swiper-item&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=swiper-item&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=swiper-item&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=swiper-item&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=swiper-item)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=swiper-item&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"swiper":{"name":"## swiper","description":"> 组件类型:UniSwiperElement \n\n 滑块视图容器","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| indicator-dots | boolean | false | | 是否显示面板指示点 |\n| indicator-color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"rgba(0, 0, 0, .3)\" | | 指示点颜色 |\n| indicator-active-color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#000000\" | | 当前选中的指示点颜色 |\n| disable-touch | boolean | false | | 是否禁止用户 touch 操作 |\n| autoplay | boolean | false | | 是否自动切换 |\n| current | number | 0 | | 当前所在滑块的 index |\n| current-item-id | string | - | | 当前所在滑块的 item-id ,不能与 current 被同时指定 |\n| interval | number | 3000 | | 自动切换时间间隔 |\n| duration | number | - | | 滑动动画时长 |\n| circular | boolean | false | | 是否采用衔接滑动 |\n| vertical | boolean | false | | 滑动方向是否为纵向 |\n| rebound | boolean | true | | 控制是否回弹效果 |\n| @change | (event: [UniSwiperChangeEvent](#uniswiperchangeevent)) => void | - | | current 改变时会触发 change 事件,event.detail = {current: current, source: source} |\n| @transition | (event: [UniSwiperTransitionEvent](#uniswipertransitionevent)) => void | - | | swiper-item 的位置发生改变时会触发 transition 事件,event.detail = {dx: dx, dy: dy} |\n| @animationfinish | (event: [UniSwiperAnimationFinishEvent](#uniswiperanimationfinishevent)) => void | - | | 动画结束时会触发 animationfinish 事件,event.detail = {current: current, source: source} |","event":"\n### 事件\n#### UniSwiperChangeEvent\n\n```mermaid\ngraph LR\n \nUniSwiperChangeEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniSwiperChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniSwiperChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| current | number | 是 | - | - | 发生change事件的滑块下标 |\n@| currentItemId | string | 否 | - | | 切换结束的 swiper-item 的 item-id 属性值 |\n@| source | string | 是 | - | - | autoplay 自动播放导致swiper变化;touch 用户划动引起swiper变化 |\n\n\n#### UniSwiperTransitionEvent\n\n```mermaid\ngraph LR\n \nUniSwiperTransitionEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniSwiperTransitionEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniSwiperTransitionEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| dx | number | 是 | - | - | 横向偏移量,单位是逻辑像素px |\n@| dy | number | 是 | - | - | 纵向偏移量,单位是逻辑像素px |\n\n\n#### UniSwiperAnimationFinishEvent\n\n```mermaid\ngraph LR\n \nUniSwiperAnimationFinishEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniSwiperAnimationFinishEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniSwiperAnimationFinishEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| current | number | 是 | - | - | 发生动画结束事件的滑块下标 |\n@| currentItemId | string | 否 | - | | 动画结束的 swiper-item 的 item-id 属性值 |\n@| source | string | 是 | - | - | autoplay 自动播放导致swiper变化;touch 用户划动引起swiper变化 |\n\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/swiper/swiper.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/swiper/swiper\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/swiper/swiper\n\n>Template\n```vue\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n A\r\n \r\n \r\n B\r\n \r\n \r\n C\r\n \r\n \r\n \r\n \r\n \r\n 是否显示面板指示点\r\n \r\n \r\n \r\n 是否自动切换\r\n \r\n \r\n \r\n 是否循环\r\n \r\n \r\n \r\n 是否显示rebound效果\r\n \r\n \r\n 间隔时间(毫秒)\r\n \r\n \r\n \r\n \r\n 定制指示器颜色\r\n \r\n \r\n \r\n 纵向\r\n \r\n \r\n \r\n 指定current为最后一个元素\r\n \r\n \r\n \r\n 指定current-item-id为最后一个元素\r\n \r\n \r\n \r\n 禁止用户 touch 操作\r\n \r\n \r\n \r\n swiperTransition 是否打印\r\n \r\n \r\n \r\n swiperAnimationfinish 是否打印\r\n \r\n \r\n \r\n swiperChange 是否打印\r\n \r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n type SwiperEventTest = {\r\n type : string;\r\n target : UniElement | null;\r\n currentTarget : UniElement | null;\r\n }\r\n export default {\r\n data() {\r\n return {\r\n background: ['color1', 'color2', 'color3'],\r\n dotsSelect: false,\r\n reboundSelect: false,\r\n autoplaySelect: false,\r\n circularSelect: false,\r\n indicatorColorSelect: false,\r\n verticalSelect: false,\r\n currentSelect: false,\r\n currentItemIdSelect: false,\r\n intervalSelect: 2000,\r\n indicatorColor: \"\",\r\n indicatorColorActive: \"\",\r\n currentVal: 0,\r\n currentItemIdVal: \"\",\r\n disableTouchSelect: false,\r\n swiperTransitionSelect: false,\r\n swiperAnimationfinishSelect: false,\r\n swiperChangeSelect: false,\r\n currentValChange: 0,\r\n // 自动化测试\r\n changeDetailTest: null as UniSwiperChangeEventDetail | null,\r\n transitionDetailTest: null as UniSwiperTransitionEventDetail | null,\r\n animationfinishDetailTest: null as UniSwiperAnimationFinishEventDetail | null,\r\n isChangeTest: '',\r\n isTransitionTest: '',\r\n isAnimationfinishTest: '',\n swipeX: 0,\n swipeY: 0\r\n }\r\n },\n onReady() {\n // 获取模拟滑动手势的起始点\n let ele = uni.getElementById(\"swiper-view\")\n let eleRect = ele?.getBoundingClientRect()\n this.swipeX = eleRect!.width - 10\n this.swipeY += eleRect!.y + uni.getSystemInfoSync().safeArea.top + 44 + 35\n },\r\n methods: {\n swipertouchStart(e: UniTouchEvent) {\n console.log(\"swiper touchstart\")\n },\n viewtouchStart(e: UniTouchEvent) {\n console.log(\"view touchstart:\")\n },\r\n swiperChange: function (e : UniSwiperChangeEvent) {\r\n this.changeDetailTest = e.detail\r\n this.checkEventTest({\r\n type: e.type,\r\n target: e.target,\r\n currentTarget: e.currentTarget\r\n } as SwiperEventTest, 'change')\r\n this.currentValChange = e.detail.current\r\n console.log(this.currentValChange)\r\n if (this.swiperChangeSelect) {\r\n console.log(\"swiperChange\")\r\n console.log(e)\r\n }\r\n },\r\n swiperTransition: function (e : UniSwiperTransitionEvent) {\r\n this.transitionDetailTest = e.detail\r\n this.checkEventTest({\r\n type: e.type,\r\n target: e.target,\r\n currentTarget: e.currentTarget\r\n } as SwiperEventTest, 'transition')\r\n if (this.swiperTransitionSelect) {\r\n console.log(\"swiperTransition\")\r\n console.log(e)\r\n }\r\n },\r\n swiperAnimationfinish: function (e : UniSwiperAnimationFinishEvent) {\r\n this.animationfinishDetailTest = e.detail\r\n this.checkEventTest({\r\n type: e.type,\r\n target: e.target,\r\n currentTarget: e.currentTarget\r\n } as SwiperEventTest, 'animationfinish')\r\n if (this.swiperAnimationfinishSelect) {\r\n console.log(\"swiperAnimationfinish\")\r\n console.log(e)\r\n }\r\n },\r\n // 自动化测试专用(由于事件event参数对象中存在循环引用,在ios端JSON.stringify报错,自动化测试无法page.data获取)\r\n checkEventTest(e : SwiperEventTest, eventName : String) {\r\n const isPass = e.type === eventName && e.target instanceof UniElement && e.currentTarget instanceof UniElement;\r\n const result = isPass ? `${eventName}:Success` : `${eventName}:Fail`;\r\n switch (eventName) {\r\n case 'change':\r\n this.isChangeTest = result\r\n break;\r\n case 'transition':\r\n this.isTransitionTest = result\r\n break;\r\n case 'animationfinish':\r\n this.isAnimationfinishTest = result\r\n break;\r\n default:\r\n break;\r\n }\r\n },\r\n dotsChange: function (e : UniSwitchChangeEvent) {\r\n this.dotsSelect = e.detail.value\r\n },\r\n swiperTransitionChange: function (e : UniSwitchChangeEvent) {\r\n this.swiperTransitionSelect = e.detail.value\r\n },\r\n swiperChangeChange: function (e : UniSwitchChangeEvent) {\r\n this.swiperChangeSelect = e.detail.value\r\n },\r\n swiperAnimationfinishChange: function (e : UniSwitchChangeEvent) {\r\n this.swiperAnimationfinishSelect = e.detail.value\r\n },\r\n autoplayChange: function (e : UniSwitchChangeEvent) {\r\n this.autoplaySelect = e.detail.value\r\n },\r\n verticalChange: function (e : UniSwitchChangeEvent) {\r\n this.verticalSelect = e.detail.value\r\n },\r\n disableTouchChange: function (e : UniSwitchChangeEvent) {\r\n this.disableTouchSelect = e.detail.value\r\n },\r\n currentItemIdChange: function (e : UniSwitchChangeEvent) {\r\n this.currentItemIdSelect = e.detail.value\r\n if (this.currentItemIdSelect) {\r\n this.currentItemIdVal = 'C'\r\n } else {\r\n this.currentItemIdVal = 'A'\r\n }\r\n },\r\n currentChange: function (e : UniSwitchChangeEvent) {\r\n this.currentSelect = e.detail.value\r\n if (this.currentSelect) {\r\n this.currentVal = 2\r\n } else {\r\n this.currentVal = 0\r\n }\r\n\r\n },\r\n circularChange: function (e : UniSwitchChangeEvent) {\r\n this.circularSelect = e.detail.value\r\n console.log(this.circularSelect)\r\n },\r\n reboundSelectChange: function (e : UniSwitchChangeEvent) {\r\n this.reboundSelect = e.detail.value\r\n console.log(this.reboundSelect)\r\n },\r\n sliderChange(e : UniSliderChangeEvent) {\r\n this.intervalSelect = e.detail.value\r\n },\r\n indicatorColorChange(e : UniSwitchChangeEvent) {\r\n this.indicatorColorSelect = e.detail.value\r\n if (this.indicatorColorSelect) {\r\n // 选择了定制指示器颜色\r\n this.indicatorColor = \"#ff00ff\"\r\n this.indicatorColorActive = \"#0000ff\"\r\n } else {\r\n // 没有选择颜色\r\n this.indicatorColor = \"\"\r\n this.indicatorColorActive = \"\"\r\n }\r\n }\r\n }\r\n }\r\n\n```\n\n:::","children":"### 子组件 @children-tags \n - [swiper-item](swiper-item.md)","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.swiper.swiper)\n- [参见uni-app相关文档](https://uniapp.dcloud.net.cn/component/swiper.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=swiper&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=swiper&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=swiper&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=swiper&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=swiper&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=swiper)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=swiper&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"match-media":{"name":"## match-media","description":"media query 匹配检测节点","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| width | number | - | | 页面宽度(px 为单位) |\n| min-width | number | - | | 页面最小宽度(px 为单位) |\n| max-width | number | - | | 页面最大宽度(px 为单位) |\n| height | number | - | | 页面高度(px 为单位) |\n| min-height | number | - | | 页面最小高度(px 为单位) |\n| max-height | number | - | | 页面最大高度(px 为单位) |\n| orientation | string | - | | 屏幕方向(landscape 或 portrait) |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| vertical | - | - |\n@| horizontal | - | - |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.match-media)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/match-media.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=match-media&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=match-media&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=match-media&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=match-media&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=match-media&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=match-media)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=match-media&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"movable-area":{"name":"## movable-area","description":"movable-view 的可移动区域","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | x | x |\n","attribute":"","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.movable.movable-area)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/movable-area.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=movable-area&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=movable-area&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=movable-area&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=movable-area&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=movable-area&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=movable-area)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=movable-area&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"movable-view":{"name":"## movable-view","description":"可移动的视图容器,在页面中可以拖拽滑动","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| direction | string | - | | movable-view的移动方向,属性值有all、vertical、horizontal、none |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| all | - | - |\n@| vertical | - | - |\n@| horizontal | - | - |\n@| none | - | - |\n| inertia | boolean | - | | movable-view 是否带有惯性。 |\n| out-of-bounds | boolean | - | | 超过可移动区域后,movable-view 是否还可以移动。 |\n| x | string \\| number | - | | 定义 x 轴方向的偏移,如果 x 的值不在可移动范围内,会自动移动到可移动范围;改变 x 的值会触发动画。 |\n| y | string \\| number | - | | 定义 y 轴方向的偏移,如果 y 的值不在可移动范围内,会自动移动到可移动范围;改变 y 的值会触发动画。 |\n| damping | number | - | | 阻尼系数,用于控制 x 或 y 改变时的动画和过界回弹的动画,值越大移动越快。 |\n| friction | number | - | | 摩擦系数,用于控制惯性滑动的动画,值越大摩擦力越大,滑动越快停止;必须大于0,否则会被设置成默认值 2。 |\n| disabled | boolean | - | | 是否禁用。 |\n| scale | boolean | - | | 是否支持双指缩放,默认缩放手势生效区域是在 movable-view 内。 |\n| scale-min | number | - | | 定义缩放倍数最小值,默认为 0.5。 |\n| scale-max | number | - | | 定义缩放倍数最大值,默认为 10。 |\n| scale-value | number | - | | 定义缩放倍数,取值范围为 0.5 - 10 |\n| animation | boolean | - | | 是否使用动画,默认为 true。 |\n| @change | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 拖动过程中触发的事件,event.detail = {x: x, y: y, source: source}。其中source表示产生移动的原因,值可为touch(拖动)、touch-out-of-bounds(超出移动范围)、out-of-bounds(超出移动范围后的回弹)、friction(惯性)和空字符串(setData)。 |\n| @scale | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 缩放过程中触发的事件,event.detail = {x: x, y: y, scale: scale}。 |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/movable-view/movable-view.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/movable-view/movable-view\n\n>Template\n```vue\n\r\n \r\n \r\n \r\n \r\n 示例 1\r\n \\nmovable-view 区域小于 movable-area\r\n \r\n \r\n text\r\n \r\n \r\n 点击这里移动至 (30px, 30px)\r\n \r\n \r\n 示例 2\r\n \\nmovable-view区域大于movable-area\r\n \r\n \r\n text\r\n \r\n \r\n 示例 3\r\n \\n只可以横向移动\r\n \r\n \r\n text\r\n \r\n \r\n 示例 4\r\n \\n只可以纵向移动\r\n \r\n \r\n text\r\n \r\n \r\n 示例 5\r\n \\n可超出边界\r\n \r\n \r\n text\r\n \r\n \r\n 示例 6\r\n \\n带有惯性\r\n \r\n \r\n text\r\n \r\n \r\n 示例 7\r\n \\n可放缩\r\n \r\n \r\n text\r\n \r\n \r\n 点击这里放大3倍\r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n x: 0,\r\n y: 0,\r\n scale: 2,\r\n old: {\r\n x: 0,\r\n y: 0,\r\n scale: 2\r\n }\r\n }\r\n },\r\n methods: {\r\n tap: function (e) {\r\n // 解决view层不同步的问题\r\n this.x = this.old.x\r\n this.y = this.old.y\r\n this.$nextTick(function () {\r\n this.x = 30\r\n this.y = 30\r\n })\r\n },\r\n tap2() {\r\n // 解决view层不同步的问题\r\n this.scale = this.old.scale\r\n this.scale = this.old.scale\r\n this.$nextTick(function () {\r\n this.scale = 3\r\n })\r\n },\r\n onChange: function (e) {\r\n this.old.x = e.detail.x\r\n this.old.y = e.detail.y\r\n },\r\n onScale: function (e) {\r\n this.old.scale = e.detail.scale\r\n }\r\n }\r\n }\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.movable.movable-view)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/movable-view.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=movable-view&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=movable-view&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=movable-view&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=movable-view&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=movable-view&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=movable-view)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=movable-view&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"cover-view":{"name":"## cover-view","description":"覆盖在原生组件之上的文本视图,可覆盖的原生组件包括map、video、canvas、camera,只支持嵌套cover-view、cover-image","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | x | x |\n","attribute":"","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/cover-view/cover-view.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/cover-view/cover-view\n\n>Template\n```vue\n\r\n \r\n \r\n \r\n 注意:需要正确配置地图服务商的Key才能正常显示地图组件\r\n \r\n \r\n \r\n 简单的cover-view\r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n showMap: false,\r\n latitude: 39.909,\r\n longitude: 116.39742\r\n };\r\n },\r\n onLoad() {\r\n this.showMap = true\r\n }\r\n }\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.cover.cover-view)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/cover-view.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=cover-view&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=cover-view&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=cover-view&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=cover-view&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=cover-view&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=cover-view)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=cover-view&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"cover-image":{"name":"## cover-image","description":"覆盖在原生组件之上的图片视图,可覆盖的原生组件同cover-view,支持嵌套在cover-view里。","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| v-for | Any | - | | - |\n| v-if | Any | - | | - |\n| v-show | Any | - | | - |\n| src | string([string.ImageURIString](/uts/data-type.md#ide-string)) | - | | 图标路径,支持临时路径、网络地址(1.6.0起支持)。暂不支持base64格式。 |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.cover.cover-image)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/cover-image.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=cover-image&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=cover-image&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=cover-image&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=cover-image&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=cover-image&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=cover-image)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=cover-image&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"list-item":{"name":"## list-item","description":"> 组件类型:UniListItemElement \n\n list-view组件的唯一合法子组件。每个item是一行","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.02 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| type | number | 0 | | 对应list-item的类型 list-view 将对同类型条目进行复用,所以合理的类型拆分,可以很好地提升 list-view 性能 |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.list-view.list-item)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=list-item&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=list-item&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=list-item&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=list-item&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=list-item&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=list-item)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=list-item&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"sticky-header":{"name":"## sticky-header","description":"> 组件类型:UniStickyHeaderElement \n\n 吸顶布局容器
注意:暂时仅支持作为list-view、sticky-section的子节点, sticky-header不支持css样式!当一个容器视图设置多个sticky-header时,后一个sticky-header会停靠在前一个sticky-header的末尾处。","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.02 | 3.93 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| padding | array\\ | [0,0,0,0\\] | | 长度为 4 的数组,按 top、right、bottom、left 顺序指定内边距 |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/sticky-header/sticky-header.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/sticky-header/sticky-header\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/sticky-header/sticky-header\n\n>Template\n```vue\n\r\n \r\n \r\n \r\n \r\n \r\n {{i}}\r\n \r\n \r\n \r\n \r\n 向上滑动页面,体验sticky-header吸顶效果。\r\n \r\n \r\n \r\n \r\n \r\n {{name}}\r\n \r\n \r\n \r\n \r\n\r\n \r\n {{item}}\r\n \r\n \r\n\r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n sift_item: [\"排序\", \"筛选\"],\r\n list_item: [] as Array,\r\n refresher_enabled_boolean: true,\r\n refresher_triggered_boolean: false,\r\n scroll_top_input: 0\r\n }\r\n },\r\n onLoad() {\r\n let lists : Array = []\r\n for (let i = 0; i < 40; i++) {\r\n lists.push(\"item---\" + i)\r\n }\r\n this.list_item = lists\r\n },\r\n methods: {\r\n list_view_refresherrefresh() {\r\n console.log(\"下拉刷新被触发 \")\r\n this.refresher_triggered_boolean = true\r\n setTimeout(() => {\r\n this.refresher_triggered_boolean = false\r\n }, 1500)\r\n },\r\n confirm_scroll_top_input(value : number) {\r\n this.scroll_top_input = value\r\n },\r\n clickTH(index : number) {\r\n console.log(\"点击表头:\" + index);\r\n }\r\n }\r\n }\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.sticky.sticky-header)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=sticky-header&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=sticky-header&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=sticky-header&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=sticky-header&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=sticky-header&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=sticky-header)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=sticky-header&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"sticky-section":{"name":"## sticky-section","description":"> 组件类型:UniStickySectionElement \n\n 吸顶布局容器
注意:暂时仅支持作为list-view的子节点, sticky-section不支持css样式!","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.02 | 3.98 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| push-pinned-header | boolean | true | | sticky-section元素重叠时是否继续上推 |\n| padding | array\\ | [0,0,0,0\\] | | 长度为 4 的数组,按 top、right、bottom、left 顺序指定内边距 |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/sticky-section/sticky-section.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/sticky-section/sticky-section\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/sticky-section/sticky-section\n\n>Template\n```vue\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {{list.text}}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n export type sectionData = {\r\n name : string,\r\n list : sectionListItem[]\r\n }\r\n export type sectionListItem = {\r\n text : string\r\n }\r\n export default {\r\n data() {\r\n return {\r\n data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N'],\r\n sectionPadding: [0, 10, 0, 10] as Array,\r\n scrollIntoView: \"\",\r\n scrolling: false,\r\n sectionArray: [] as sectionData[],\r\n appendId: 0\r\n }\r\n },\r\n onLoad() {\r\n this.data.forEach(key => {\r\n const list = [] as sectionListItem[]\r\n for (let i = 1; i < 11; i++) {\r\n const item = { text: key + \"--item--content----\" + i } as sectionListItem\r\n list.push(item)\r\n }\r\n const data = { name: key, list: list } as sectionData\r\n this.sectionArray.push(data)\r\n }\r\n )\r\n },\r\n methods: {\r\n toTop() {\r\n this.scrollIntoView = \"\"\r\n uni.getElementById(\"list-view\")!.scrollTop = 0\r\n },\r\n //用于自动化测试\r\n listViewScrollByY(y : number) {\r\n const listview = this.$refs[\"list-view\"] as UniElement\r\n // listview.scrollBy(0, y)\r\n listview.scrollTop = y\r\n },\r\n gotoStickyHeader(id : string) {\r\n // #ifdef APP\r\n this.scrollIntoView = id\r\n // #endif\r\n // #ifdef WEB\r\n console.log(\"web端不支持该功能\")\r\n // #endif\r\n },\r\n onScroll() {\r\n this.scrolling = true\r\n },\r\n onScrollEnd() {\r\n this.scrolling = false\r\n //滚动后重置scrollIntoView = \"\"\r\n if (this.scrollIntoView != \"\") {\r\n this.scrollIntoView = \"\"\r\n }\r\n },\r\n appendSectionItem(index : number) {\r\n const data = this.sectionArray[index]\r\n this.appendId++\r\n const list = [\r\n { text: data.name + \"--item--content----new1--\" + this.appendId } as sectionListItem,\r\n { text: data.name + \"--item--content----new2--\" + this.appendId } as sectionListItem,\r\n { text: data.name + \"--item--content----new3--\" + this.appendId } as sectionListItem,\r\n { text: data.name + \"--item--content----new4--\" + this.appendId } as sectionListItem,\r\n { text: data.name + \"--item--content----new5--\" + this.appendId } as sectionListItem\r\n ] as sectionListItem[]\r\n data.list.unshift(...list)\r\n },\r\n deleteSection() {\r\n this.sectionArray.shift()\r\n }\r\n }\r\n }\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.sticky.sticky-section)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=sticky-section&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=sticky-section&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=sticky-section&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=sticky-section&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=sticky-section&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=sticky-section)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=sticky-section&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"list-view":{"name":"## list-view","description":"> 组件类型:UniListViewElement \n\n 列表组件","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.02 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| direction | string | \"vertical\" | | 滚动方向,可取值 none、horizontal、vertical,默认值vertical。注:iOS 平台仅支持vertical |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| none | | 禁止滚动 |\n@| horizontal | | 横向滚动 |\n@| vertical | | 竖向滚动 |\n| associative-container | string | \"\" | | 关联的滚动容器 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| nested-scroll-view | | 嵌套滚动 |\n| bounces | boolean | true | | 控制是否回弹效果 优先级高于rebound |\n| upper-threshold | number | 50 | | 距顶部/左边多远时(单位px),触发 scrolltoupper 事件 |\n| lower-threshold | number | 50 | | 距底部/右边多远时(单位px),触发 scrolltolower 事件 |\n| scroll-top | number | 0 | | 设置竖向滚动条位置 |\n| scroll-left | number | 0 | | 设置横向滚动条位置 |\n| show-scrollbar | boolean | true | | 控制是否出现滚动条 |\n| scroll-into-view | string([string.IDString](/uts/data-type.md#ide-string)) | - | | 值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素起始位置 |\n| scroll-with-animation | boolean | false | | 是否在设置滚动条位置时使用滚动动画,设置false没有滚动动画 |\n| refresher-enabled | boolean | false | | 开启下拉刷新,暂时不支持scroll-x = true横向刷新 |\n| refresher-threshold | number | 45 | | 设置下拉刷新阈值, 仅 refresher-default-style = 'none' 自定义样式下生效 |\n| refresher-max-drag-distance | number | - | | 设置下拉最大拖拽距离(单位px),默认是下拉刷新控件高度的2.5倍 |\n| refresher-default-style | string | \"black\" | | 设置下拉刷新默认样式,支持设置 black \\| white \\| none, none 表示不使用默认样式 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| black | | 深颜色雪花样式 |\n@| white | | 浅白色雪花样式 |\n@| none | | 不使用默认样式 |\n| refresher-background | string([string.ColorString](/uts/data-type.md#ide-string)) | \"transparent\" | | 设置下拉刷新区域背景颜色,默认透明 |\n| refresher-triggered | boolean | false | | 设置当前下拉刷新状态,true 表示下拉刷新已经被触发,false 表示下拉刷新未被触发 |\n| enable-back-to-top | boolean | false | | iOS点击顶部状态栏滚动条返回顶部,只支持竖向 |\n| custom-nested-scroll | boolean | false | | 子元素是否开启嵌套滚动 将滚动事件与父元素协商处理 |\n| @refresherpulling | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | | 下拉刷新控件被下拉 |\n| @refresherrefresh | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | | 下拉刷新被触发 |\n| @refresherrestore | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | | 下拉刷新被复位 |\n| @refresherabort | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | | 下拉刷新被中止 |\n| @scrolltoupper | (event: [UniScrollToUpperEvent](#uniscrolltoupperevent)) => void | - | | 滚动到顶部/左边,会触发 scrolltoupper 事件 |\n| @scrolltolower | (event: [UniScrollToLowerEvent](#uniscrolltolowerevent)) => void | - | | 滚动到底部/右边,会触发 scrolltolower 事件 |\n| @scroll | (event: [UniScrollEvent](#uniscrollevent)) => void | - | | 滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |\n| @scrollend | (event: [UniScrollEvent](#uniscrollevent)) => void | - | | 滚动结束时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |\n| ~~rebound~~ | boolean | true | | 控制是否回弹效果。已废弃,请改用bounces |\n| ~~scroll-y~~ | boolean | true | | 允许纵向滚动,不支持同时设置scroll-x属性为true,同时设置true时scroll-y生效。已废弃,请改用direction |\n| ~~scroll-x~~ | boolean | false | | 允许横向滚动,不支持同时设置scroll-y属性为true,同时设置true时scroll-y生效。已废弃,请改用direction |","event":"\n### 事件\n#### UniRefresherEvent\n\n```mermaid\ngraph LR\n \nUniRefresherEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniRefresherEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniRefresherEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| dy | number | 是 | - | - | - |\n\n\n#### UniScrollToUpperEvent\n\n```mermaid\ngraph LR\n \nUniScrollToUpperEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniScrollToUpperEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniScrollToUpperEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| direction | string | 是 | - | - | 滚动方向 top 或 left |\n\n\n#### UniScrollToLowerEvent\n\n```mermaid\ngraph LR\n \nUniScrollToLowerEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniScrollToLowerEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniScrollToLowerEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| direction | string | 是 | - | - | 滚动方向 bottom 或 right |\n\n\n#### UniScrollEvent\n\n```mermaid\ngraph LR\n \nUniScrollEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniScrollEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniScrollEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| scrollTop | number | 是 | - | - | 竖向滚动的距离 |\n@| scrollLeft | number | 是 | - | - | 横向滚动的距离 |\n@| scrollHeight | number | 是 | - | - | 滚动区域的高度 |\n@| scrollWidth | number | 是 | - | - | 滚动区域的宽度 |\n@| deltaY | number | 是 | - | - | 当次滚动事件竖向滚动量 |\n@| deltaX | number | 是 | - | - | 当次滚动事件横向滚动量 |\n\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/list-view/list-view.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/list-view/list-view\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/list-view/list-view\n\n>Template\n```vue\n\r\n\r\n\r\n \r\n \r\n \r\n {{key}}\r\n \r\n \r\n \r\n {{text[state]}}\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n type ScrollEventTest = {\r\n type : string;\r\n target : UniElement | null;\r\n currentTarget : UniElement | null;\r\n direction ?: string\r\n }\r\n import { ItemType } from '@/components/enum-data/enum-data'\r\n export default {\r\n data() {\r\n return {\r\n refresher_triggered_boolean: false,\r\n refresher_enabled_boolean: false,\r\n scroll_with_animation_boolean: false,\r\n show_scrollbar_boolean: false,\r\n bounces_boolean: true,\r\n scroll_y_boolean: true,\r\n scroll_x_boolean: false,\r\n scroll_direction: \"vertical\",\r\n upper_threshold_input: 50,\r\n lower_threshold_input: 50,\r\n scroll_top_input: 0,\r\n scroll_left_input: 0,\r\n refresher_background_input: \"#FFF\",\r\n scrollData: [] as Array,\r\n size_enum: [{ \"value\": 0, \"name\": \"item---0\" }, { \"value\": 3, \"name\": \"item---3\" }] as ItemType[],\r\n scrollIntoView: \"\",\r\n refresherrefresh: false,\r\n refresher_default_style_input: \"black\",\r\n text: ['继续下拉执行刷新', '释放立即刷新', '刷新中', \"\"],\r\n state: 3,\r\n reset: true,\r\n // 自动化测试\r\n isScrollTest: '',\r\n isScrolltolowerTest: '',\r\n isScrolltoupperTest: '',\r\n scrollDetailTest: null as UniScrollEventDetail | null,\r\n scrollEndDetailTest: null as UniScrollEventDetail | null,\r\n }\r\n },\r\n onLoad() {\r\n let lists : Array = []\r\n for (let i = 0; i < 10; i++) {\r\n lists.push(\"item---\" + i)\r\n }\r\n this.scrollData = lists\r\n },\r\n methods: {\r\n list_view_click() { console.log(\"组件被点击时触发\") },\r\n list_view_touchstart() { console.log(\"手指触摸动作开始\") },\r\n list_view_touchmove() { console.log(\"手指触摸后移动\") },\r\n list_view_touchcancel() { console.log(\"手指触摸动作被打断,如来电提醒,弹窗\") },\r\n list_view_touchend() { console.log(\"手指触摸动作结束\") },\r\n list_view_tap() { console.log(\"手指触摸后马上离开\") },\r\n list_view_longpress() { console.log(\"如果一个组件被绑定了 longpress 事件,那么当用户长按这个组件时,该事件将会被触发。\") },\r\n list_view_refresherpulling(e : RefresherEvent) {\r\n console.log(\"下拉刷新控件被下拉\")\r\n if (this.reset) {\r\n if (e.detail.dy > 45) {\r\n this.state = 1\r\n } else {\r\n this.state = 0\r\n }\r\n }\r\n },\r\n list_view_refresherrefresh() {\r\n console.log(\"下拉刷新被触发 \")\r\n this.refresherrefresh = true\r\n this.refresher_triggered_boolean = true\r\n this.state = 2\r\n this.reset = false;\r\n setTimeout(() => {\r\n this.refresher_triggered_boolean = false\r\n }, 1500)\r\n },\r\n list_view_refresherrestore() {\r\n this.refresherrefresh = false\r\n this.state = 3\r\n this.reset = true\r\n console.log(\"下拉刷新被复位\")\r\n },\r\n list_view_refresherabort() { console.log(\"下拉刷新被中止\") },\r\n list_view_scrolltoupper(e : UniScrollToUpperEvent) {\r\n console.log(\"滚动到顶部/左边,会触发 scrolltoupper 事件 direction=\" + e.detail.direction)\r\n this.checkEventTest({\r\n type: e.type,\r\n target: e.target,\r\n currentTarget: e.currentTarget,\r\n direction: e.detail.direction,\r\n } as ScrollEventTest, 'scrolltoupper')\r\n },\r\n list_view_scrolltolower(e : UniScrollToLowerEvent) {\r\n console.log(\"滚动到底部/右边,会触发 scrolltolower 事件 direction=\" + e.detail.direction)\r\n this.checkEventTest({\r\n type: e.type,\r\n target: e.target,\r\n currentTarget: e.currentTarget,\r\n direction: e.detail.direction,\r\n } as ScrollEventTest, 'scrolltolower')\r\n },\r\n list_view_scroll(e : UniScrollEvent) {\r\n console.log(\"滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}\")\r\n this.scrollDetailTest = e.detail\r\n this.checkEventTest({\r\n type: e.type,\r\n target: e.target,\r\n currentTarget: e.currentTarget\r\n } as ScrollEventTest, 'scroll')\r\n },\r\n list_view_scrollend(e : UniScrollEvent) {\r\n console.log(\"滚动结束时触发\", e.detail)\r\n this.scrollEndDetailTest = e.detail\r\n this.checkEventTest({\r\n type: e.type,\r\n target: e.target,\r\n currentTarget: e.currentTarget\r\n } as ScrollEventTest, 'scrollend')\r\n },\r\n list_item_click() { console.log(\"list-item组件被点击时触发\") },\r\n list_item_touchstart() { console.log(\"手指触摸list-item组件动作开始\") },\r\n list_item_touchmove() { console.log(\"手指触摸list-item组件后移动\") },\r\n list_item_touchcancel() { console.log(\"手指触摸list-item组件动作被打断,如来电提醒,弹窗\") },\r\n list_item_touchend() { console.log(\"手指触摸list-item组件动作结束\") },\r\n list_item_tap() { console.log(\"手指触摸list-item组件后马上离开\") },\r\n list_item_longpress() { console.log(\"list-item组件被绑定了 longpress 事件,那么当用户长按这个组件时,该事件将会被触发。\") },\r\n change_refresher_triggered_boolean(checked : boolean) { this.refresher_triggered_boolean = checked },\r\n change_refresher_enabled_boolean(checked : boolean) { this.refresher_enabled_boolean = checked },\r\n change_scroll_with_animation_boolean(checked : boolean) { this.scroll_with_animation_boolean = checked },\r\n change_show_scrollbar_boolean(checked : boolean) { this.show_scrollbar_boolean = checked },\r\n change_bounces_boolean(checked : boolean) { this.bounces_boolean = checked },\r\n change_scroll_y_boolean(checked : boolean) {\r\n this.scroll_y_boolean = checked\r\n this.change_scroll_direction()\r\n },\r\n change_scroll_x_boolean(checked : boolean) {\r\n this.scroll_x_boolean = checked\r\n this.change_scroll_direction()\r\n },\r\n change_scroll_direction() {\r\n if (this.scroll_y_boolean && this.scroll_x_boolean || this.scroll_y_boolean) {\r\n this.scroll_direction = \"vertical\"\r\n } else if (!this.scroll_y_boolean && !this.scroll_x_boolean) {\r\n this.scroll_direction = \"none\"\r\n } else if (!this.scroll_y_boolean && this.scroll_x_boolean) {\r\n this.scroll_direction = \"horizontal\"\r\n }\r\n },\r\n confirm_upper_threshold_input(value : number) { this.upper_threshold_input = value },\r\n confirm_lower_threshold_input(value : number) { this.lower_threshold_input = value },\r\n confirm_scroll_top_input(value : number) { this.scroll_top_input = value },\r\n confirm_scroll_left_input(value : number) { this.scroll_left_input = value },\r\n confirm_refresher_background_input(value : string) { this.refresher_background_input = value },\r\n item_change_size_enum(index : number) { this.scrollIntoView = \"item---\" + index },\r\n // 自动化测试专用(由于事件event参数对象中存在循环引用,在ios端JSON.stringify报错,自动化测试无法page.data获取)\r\n checkEventTest(e : ScrollEventTest, eventName : String) {\r\n const isPass = e.type === eventName && e.target instanceof UniElement && e.currentTarget instanceof UniElement;\r\n const result = isPass ? `${eventName}:Success` : `${eventName}:Fail`;\r\n switch (eventName) {\r\n case 'scroll':\r\n this.isScrollTest = result\r\n break;\r\n case 'scrolltolower':\r\n this.isScrolltolowerTest = result + `-${e.direction}`\r\n break;\r\n case 'scrolltoupper':\r\n this.isScrolltoupperTest = result + `-${e.direction}`\r\n break;\r\n default:\r\n break;\r\n }\r\n },\r\n //自动化测试例专用\r\n check_scroll_height() : Boolean {\r\n var listElement = this.$refs[\"listview\"] as UniElement\r\n console.log(\"check_scroll_height--\" + listElement.scrollHeight)\r\n if (listElement.scrollHeight > 2000) {\r\n return true\r\n }\r\n return false\r\n },\r\n //自动化测试例专用\r\n check_scroll_width() : Boolean {\r\n var listElement = this.$refs[\"listview\"] as UniElement\r\n console.log(\"check_scroll_width\" + listElement.scrollWidth)\r\n if (listElement.scrollWidth > 2000) {\r\n return true\r\n }\r\n return false\r\n },\r\n change_refresher_style_boolean(checked : boolean) {\r\n if (checked) {\r\n this.refresher_default_style_input = \"none\"\r\n } else {\r\n this.refresher_default_style_input = \"black\"\r\n }\r\n }\r\n }\r\n }\r\n\n```\n\n:::","children":"### 子组件 @children-tags \n - [list-item](list-item.md)\n- [sticky-header](https://doc.dcloud.net.cn/uni-app-x/component/sticky-header.html)\n- [sticky-section](https://doc.dcloud.net.cn/uni-app-x/component/sticky-section.html)","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.list-view.list-view)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=list-view&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=list-view&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=list-view&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=list-view&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=list-view&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=list-view)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=list-view&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"nested-scroll-header":{"name":"## nested-scroll-header","description":"> 组件类型:UniNestedScrollHeaderElement \n\n scroll-view 嵌套模式场景中属于外层 scroll-view 的节点,仅支持作为 \\ 嵌套模式的直接子节点。不支持复数子节点,渲染时会取其第一个子节点来渲染","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| x | 4.11 | 4.11 |\n","attribute":"","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/nested-scroll-header/nested-scroll-header.uvue) \n >\n> 该 API 不支持 Web,请运行 hello uni-app x 到 App 平台体验 \n\n::: preview\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/nested-scroll-header/nested-scroll-header\n```uvue\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {{key}}\r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\n\n```\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.nested-scroll.nested-scroll-header)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=nested-scroll-header&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=nested-scroll-header&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=nested-scroll-header&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=nested-scroll-header&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=nested-scroll-header&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=nested-scroll-header)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=nested-scroll-header&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"nested-scroll-body":{"name":"## nested-scroll-body","description":"> 组件类型:UniNestedScrollHeaderElement \n\n scroll-view 嵌套模式场景中属于嵌套内层 scroll-view 的父节点,仅支持作为 \\ 嵌套模式的直接子节点。不支持复数子节点,渲染时会取其第一个子节点来渲染","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| x | 4.11 | 4.11 |\n","attribute":"","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/nested-scroll-body/nested-scroll-body.uvue) \n >\n> 该 API 不支持 Web,请运行 hello uni-app x 到 App 平台体验 \n\n::: preview\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/nested-scroll-body/nested-scroll-body\n```uvue\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n nested-scroll-body\r\n \r\n \r\n \r\n \r\n \r\n {{key}}\r\n \r\n \r\n \r\n \r\n 不会渲染,因为 nested-scroll-body 只会渲染第一个子节点\r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\n\n```\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.nested-scroll.nested-scroll-body)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=nested-scroll-body&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=nested-scroll-body&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=nested-scroll-body&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=nested-scroll-body&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=nested-scroll-body&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=nested-scroll-body)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=nested-scroll-body&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"icon":{"name":"## icon","description":"图标","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| type | string | - | | icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| success | - | - |\n@| success_no_circle | - | - |\n@| warn | - | - |\n@| waiting | - | - |\n@| cancel | - | - |\n@| download | - | - |\n@| search | - | - |\n@| clear | - | - |\n| size | number | - | | icon的大小,单位px |\n| color | string([string.ColorString](/uts/data-type.md#ide-string)) | - | | icon的颜色,同css的color |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.basic-content.icon)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/icon.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=icon&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=icon&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=icon&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=icon&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=icon&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=icon)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=icon&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"text":{"name":"## text","description":"> 组件类型:[UniTextElement](/dom/unitextelement.md) \n\n 文本","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| selectable | boolean | false | | 文本是否可选 |\n| space | string | - | | 显示连续空格 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| ensp | | 中文字符空格一半大小 |\n@| emsp | | 中文字符空格大小 |\n@| nbsp | | 根据字体设置的空格大小 |\n| decode | boolean | false | | 是否解码 (app平台如需解析字符实体,需要配置为 true) |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/text/text.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/text/text\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/text/text\n\n>Template\n```vue\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n {{ text }}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n title: 'text',\r\n texts: [\r\n 'HBuilderX,轻巧、极速,极客编辑器',\r\n 'uni-app x,终极跨平台方案',\r\n 'uniCloud,js serverless云服务',\r\n 'uts,大一统语言',\r\n 'uniMPSdk,让你的App具备小程序能力',\r\n 'uni-admin,开源、现成的全端管理后台',\r\n 'uni-id,开源、全端的账户中心',\r\n 'uni-pay,开源、云端一体、全平台的支付',\r\n 'uni-ai,聚合ai能力',\r\n 'uni-cms,开源、云端一体、全平台的内容管理平台',\r\n 'uni-im,开源、云端一体、全平台的im即时消息',\r\n 'uni统计,开源、完善、全平台的统计报表',\r\n '......'\r\n ] as string[],\r\n text: '',\r\n canAdd: true,\r\n canRemove: false,\r\n extraLine: [] as string[]\r\n }\r\n },\r\n methods: {\r\n add: function () {\r\n this.extraLine.push(this.texts[this.extraLine.length % 12]);\r\n this.text = this.extraLine.join('\\n');\r\n this.canAdd = this.extraLine.length < 12;\r\n this.canRemove = this.extraLine.length > 0;\r\n },\r\n remove: function () {\r\n if (this.extraLine.length > 0) {\r\n this.extraLine.pop();\r\n this.text = this.extraLine.join('\\n');\r\n this.canAdd = this.extraLine.length < 12;\r\n this.canRemove = this.extraLine.length > 0;\r\n }\r\n },\r\n textProps: function () {\r\n uni.navigateTo({\r\n url: '/pages/component/text/text-props'\r\n })\r\n }\r\n }\r\n }\r\n\n```\n\n:::","children":"### 子组件 @children-tags \n - [text](text.md)","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.basic-content.text)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/text.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=text&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=text&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=text&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=text&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=text&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=text)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=text&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"rich-text":{"name":"## rich-text","description":"> 组件类型:UniRichTextElement \n\n 富文本。可渲染文字样式、图片、超链接。支持部分HTML标签","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| nodes | array \\| string | - | | 节点列表 \\| HTML String |\n| selectable | boolean | false | | 文本是否可选 |\n| @itemclick | (event: [UniRichTextItemClickEvent](#unirichtextitemclickevent)) => void | - | | 拦截点击事件(只支持 a、img标签),返回img标签的src属性或a标签的href属性。event.detail={ src \\| href } |","event":"\n### 事件\n#### UniRichTextItemClickEvent\n\n```mermaid\ngraph LR\n \nUniRichTextItemClickEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniRichTextItemClickEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniRichTextItemClickEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| src | string | 否 | - | - | \\图片链接 |\n@| href | string | 否 | - | - | \\超链接 |\n\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/rich-text/rich-text.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/rich-text/rich-text\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/rich-text/rich-text\n\n>Template\n```vue\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n selectable\r\n \r\n \r\n \r\n \r\n \r\n \r\n \n \r\n\r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n text: \"hello uni-app x!
uni-app x,终极跨平台方案\",\r\n richTextHeight: 0,\r\n richTextElement: null as UniElement | null,\n // 自动化测试\n autoTest: false,\n testNodes: '',\n isItemClickTrigger: false\n }\r\n },\r\n onReady() {\r\n this.richTextElement = uni.getElementById('richtext') as UniElement\r\n setTimeout(() => {\r\n this.updateRichTextHeight()\r\n }, 1200)\r\n },\r\n methods: {\r\n changeText() {\r\n if (this.text === \"hello uni-app x!
uni-app x,终极跨平台方案\") {\r\n this.text = \"hello uni-app x!
uni-app x,终极跨平台方案
\"\r\n } else {\r\n this.text = \"hello uni-app x!
uni-app x,终极跨平台方案\"\r\n }\r\n setTimeout(() => {\r\n this.updateRichTextHeight()\r\n }, 200)\r\n },\r\n updateRichTextHeight() {\r\n if (this.richTextElement != null) {\r\n const elRect = this.richTextElement!.getBoundingClientRect()\r\n this.richTextHeight = elRect.height\r\n console.log('richTextHeight:', this.richTextHeight)\r\n }\r\n },\n // 自动化测试\n itemClickForTest(_ : RichTextItemClickEvent) {\n this.isItemClickTrigger = true;\n },\n getBoundingClientRectForTest() : DOMRect {\n return uni.getElementById('test-rich-text')?.getBoundingClientRect()!;\n },\n getWindowInfoForTest() : GetWindowInfoResult {\n return uni.getWindowInfo();\n }\r\n }\r\n }\r\n\n```\n\n:::","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.basic-content.rich-text)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/rich-text.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=rich-text&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=rich-text&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=rich-text&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=rich-text&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=rich-text&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=rich-text)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=rich-text&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"progress":{"name":"## progress","description":"> 组件类型:UniProgressElement \n\n 进度条","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| duration | number | 30 | | 进度增加1%所需毫秒数 |\n| percent | number | 0 | | 百分比0~100 |\n| show-info | boolean | false | | 在进度条右侧显示百分比 |\n| border-radius | number | 0 | | 圆角大小 |\n| font-size | number | 16 | | 右侧百分比字体大小 |\n| stroke-width | number | 6 | | 进度条线的宽度,单位px |\n| activeColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#09BB07\" | | 已选择的进度条的颜色 |\n| backgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#EBEBEB\" | | 未选择的进度条的颜色 |\n| active | boolean | false | | 进度条从左往右的动画 |\n| active-mode | string | \"backwards\" | | backwards: 动画从头播;forwards:动画从上次结束点接着播 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| backwards | | 动画从头播 |\n@| forwards | | 动画从上次结束点接着播 |\n| @activeend | (event: [UniProgressActiveendEvent](#uniprogressactiveendevent)) => void | - | | 动画完成事件 |","event":"\n### 事件\n#### UniProgressActiveendEvent\n\n```mermaid\ngraph LR\n \nUniProgressActiveendEvent -- Extends --> UniCustomEvent<UniProgressActiveendEventDetail>\n style UniCustomEvent<UniProgressActiveendEventDetail> color:#42b983\n click UniCustomEvent<UniProgressActiveendEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniProgressActiveendEventDetail\n\n\n###### UniProgressActiveendEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| curPercent | number | 是 | - | - | - |\n\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/progress/progress.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/progress/progress\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/progress/progress\n\n>Template\n```vue\n\r\n\r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n import { state, setEventCallbackNum } from '@/store/index.uts'\r\n import { ItemType } from '@/components/enum-data/enum-data'\r\n export default {\r\n data() {\r\n return {\r\n title: 'progress',\r\n pgList: [0, 0, 0, 0] as number[],\r\n curPercent: 0,\r\n showInfo: true,\r\n borderRadius: 0,\r\n fontSize: 16,\r\n strokeWidth: 3,\r\n backgroundColor: '#EBEBEB',\r\n\r\n // 组件属性 autotest\r\n active_boolean: false,\r\n show_info_boolean: false,\r\n duration_input: 30,\r\n percent_input: 0,\r\n stroke_width_input: 6,\r\n activeColor_input: \"#09BB07\",\r\n backgroundColor_input: \"#EBEBEB\",\r\n active_mode_enum: [{ \"value\": 0, \"name\": \"backwards\" }, { \"value\": 1, \"name\": \"forwards\" }] as ItemType[],\r\n active_mode_enum_current: 0\r\n }\r\n },\r\n methods: {\r\n // 自动化测试\r\n getEventCallbackNum() : number {\r\n return state.eventCallbackNum\r\n },\r\n // 自动化测试\r\n setEventCallbackNum(num : number) {\r\n setEventCallbackNum(num)\r\n },\r\n\r\n setProgress() {\r\n this.pgList = [20, 40, 60, 80] as number[]\r\n },\r\n clearProgress() {\r\n this.pgList = [0, 0, 0, 0] as number[]\r\n },\r\n activeend(e : UniProgressActiveendEvent) {\r\n // 自动化测试\r\n if ((e.target?.tagName ?? '').includes('PROGRESS')) {\r\n this.setEventCallbackNum(state.eventCallbackNum + 1)\r\n }\r\n if (e.type === 'activeend') {\r\n this.setEventCallbackNum(state.eventCallbackNum + 2)\r\n }\r\n this.curPercent = e.detail.curPercent\r\n },\r\n progress_touchstart() { console.log(\"手指触摸动作开始\") },\r\n progress_touchmove() { console.log(\"手指触摸后移动\") },\r\n progress_touchcancel() { console.log(\"手指触摸动作被打断,如来电提醒,弹窗\") },\r\n progress_touchend() { console.log(\"手指触摸动作结束\") },\r\n progress_tap() { console.log(\"手指触摸后马上离开\") },\r\n change_active_boolean(checked : boolean) { this.active_boolean = checked },\r\n change_show_info_boolean(checked : boolean) { this.show_info_boolean = checked },\r\n confirm_duration_input(value : number) { this.duration_input = value },\r\n confirm_percent_input(value : number) { this.percent_input = value },\r\n confirm_stroke_width_input(value : number) { this.stroke_width_input = value },\r\n confirm_activeColor_input(value : string) { this.activeColor_input = value },\r\n confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },\r\n radio_change_active_mode_enum(checked : number) { this.active_mode_enum_current = checked }\r\n }\r\n }\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.basic-content.progress)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/progress.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=progress&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=progress&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=progress&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=progress&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=progress&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=progress)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=progress&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"native-view":{"name":"## native-view","description":"> 组件类型:[UniNativeViewElement](/dom/uninativeviewelement.md) \n\n 自定义原生View组件","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| x | 4.31 | 4.31 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| @init | (event: [UniNativeViewInitEvent](#uninativeviewinitevent)) => void | - | | native-view初始化时回调,event.detail = { element: 'native-view元素实例对象'} |","event":"\n### 事件\n#### UniNativeViewInitEvent\nnative-view 组件 init事件event\n```mermaid\ngraph LR\n \nUniNativeViewInitEvent -- Extends --> UniCustomEvent<UniNativeViewInitEventDetail>\n style UniCustomEvent<UniNativeViewInitEventDetail> color:#42b983\n click UniCustomEvent<UniNativeViewInitEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniNativeViewInitEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniNativeViewInitEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| element | [UniNativeViewElement](/dom/uninativeviewelement.md) | 是 | - | - | - |\n| type | string | 是 | - | - | - |\n\n\n##### UniNativeViewInitEventDetail\n\n\n###### UniNativeViewInitEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| element | [UniNativeViewElement](/dom/uninativeviewelement.md) | 是 | - | - | - |\n\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/native-view/native-view.uvue) \n >\n> 该 API 不支持 Web,请运行 hello uni-app x 到 App 平台体验 \n\n::: preview\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/native-view/native-view\n```uvue\n\r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\n\n```\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.basic-content.native-view)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=native-view&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=native-view&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=native-view&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=native-view&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=native-view&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=native-view)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=native-view&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"button":{"name":"## button","description":"> 组件类型:UniButtonElement \n\n 按钮","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| disabled | boolean | false | | 是否禁用 |\n| hover-class | string([string.ClassString](/uts/data-type.md#ide-string)) | \"button-hover\" | | 指定按下去的样式类。当 hover-class=\"none\" 时,没有点击态效果 |\n| hover-start-time | number | 20 | | 按住后多久出现点击态,单位毫秒 |\n| hover-stay-time | number | 70 | | 手指松开后点击态保留时间,单位毫秒 |\n| size | string | \"default\" | | 按钮的大小 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| default | | 默认大小 |\n@| mini | | 小尺寸 |\n| type | string | \"default\" | | 按钮的样式类型 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| default | | 白色 |\n@| primary | | 蓝色 |\n@| warn | | 红色 |\n| plain | boolean | false | | 按钮是否镂空,背景色透明 |\n| loading | boolean | - | | 名称前是否带 loading 图标 |\n| form-type | string | - | | 用于 form 组件,点击分别会触发 form 组件的 submit/reset 事件 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| submit | | 提交表单 |\n@| reset | | 重置表单 |\n| open-type | string | - | | 开放能力 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| agreePrivacyAuthorization | | 用户同意隐私协议按钮。用户点击一次此按钮后,所有已声明过的隐私接口可以正常调用。 |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/button/button.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/button/button\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/button/button\n\n>Template\n```vue\n\r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n import { ItemType } from '@/components/enum-data/enum-data'\r\n export default {\r\n data() {\r\n return {\r\n plain_boolean: false,\r\n disabled_boolean: false,\r\n default_style: false,\r\n size_enum: [{ \"value\": 0, \"name\": \"default\" }, { \"value\": 1, \"name\": \"mini\" }] as ItemType[],\r\n size_enum_current: 0,\r\n type_enum: [{ \"value\": 0, \"name\": \"default\" }, { \"value\": 1, \"name\": \"primary\" }, { \"value\": 2, \"name\": \"warn\" }] as ItemType[],\r\n type_enum_current: 0,\r\n count: 0,\r\n text: ''\r\n }\r\n },\r\n onReady() {\r\n this.text = 'uni-app-x'\r\n },\r\n methods: {\r\n button_click() {\r\n console.log(\"组件被点击时触发\")\r\n this.count++\r\n },\r\n button_touchstart() { console.log(\"手指触摸动作开始\") },\r\n button_touchmove() { console.log(\"手指触摸后移动\") },\r\n button_touchcancel() { console.log(\"手指触摸动作被打断,如来电提醒,弹窗\") },\r\n button_touchend() { console.log(\"手指触摸动作结束\") },\r\n button_tap() { console.log(\"手指触摸后马上离开\") },\r\n button_longpress() { console.log(\"如果一个组件被绑定了 longpress 事件,那么当用户长按这个组件时,该事件将会被触发。\") },\r\n change_plain_boolean(checked : boolean) { this.plain_boolean = checked },\r\n change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },\r\n change_default_style(checked : boolean) { this.default_style = checked },\r\n radio_change_size_enum(checked : number) { this.size_enum_current = checked },\r\n radio_change_type_enum(checked : number) { this.type_enum_current = checked },\r\n confirm_text_input(value : string) { this.text = value },\r\n navigateToChild() {\r\n uni.navigateTo({\r\n url: 'buttonstatus',\r\n })\r\n },\r\n //用于自动化测试\r\n checkUniButtonElement() : boolean {\r\n const button = uni.getElementById(\"testButton\")\r\n if (button != null && button instanceof UniButtonElement) {\r\n return true\r\n }\r\n return false\r\n }\r\n }\r\n }\r\n\n```\n\n:::","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.button)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/button.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=button&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=button&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=button&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=button&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=button&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=button)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=button&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"checkbox":{"name":"## checkbox","description":"> 组件类型:UniCheckboxElement \n\n 多选项。在1组check-group中可选择多个","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| disabled | boolean | false | | 是否禁用 |\n| value | string | - | | checkbox 标识,选中时触发 checkbox-group 的 change 事件,并携带 checkbox 的 value |\n| checked | boolean | false | | 当前是否选中,可用来设置默认选中 |\n| backgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | | checkbox默认的背景颜色 |\n| borderColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#d1d1d1\" | | checkbox默认的边框颜色 |\n| activeBackgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | | checkbox选中时的背景颜色 |\n| activeBorderColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#d1d1d1\" | | checkbox选中时的边框颜色 |\n| foreColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | | checkbox的图标颜色,优先级大于color属性 |\n| ~~iconColor~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | | checkbox的图标颜色,优先级大于color属性 (使用foreColor替代) |\n| ~~color~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | | checkbox的颜色 (使用foreColor替代) |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/checkbox/checkbox.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/checkbox/checkbox\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/checkbox/checkbox\n\n>Template\n```vue\n\r\n\r\n\r\n \r\n uni-app-x\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n 默认样式 \r\n \r\n \r\n \r\n 选中\r\n \r\n {{ text }}\r\n 禁用\r\n \r\n {{ wrapText }}\r\n \r\n \r\n \r\n \r\n 不同颜色和尺寸的checkbox \r\n \r\n \r\n \r\n 选中\r\n \r\n 未选中\r\n \r\n \r\n \r\n\r\n \r\n \r\n 推荐展示样式 \r\n \r\n \r\n \r\n \r\n \r\n {{ item.name }}\r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n type ItemType = {\r\n value : string\r\n name : string\r\n checked : boolean\r\n }\r\n export default {\r\n data() {\r\n return {\r\n items: [\r\n {\r\n value: 'CHN',\r\n name: '中国',\r\n checked: true,\r\n },\r\n {\r\n value: 'USA',\r\n name: '美国',\r\n checked: false,\r\n },\r\n {\r\n value: 'BRA',\r\n name: '巴西',\r\n checked: false,\r\n },\r\n {\r\n value: 'JPN',\r\n name: '日本',\r\n checked: false,\r\n },\r\n {\r\n value: 'ENG',\r\n name: '英国',\r\n checked: false,\r\n },\r\n {\r\n value: 'FRA',\r\n name: '法国',\r\n checked: false,\r\n },\r\n ] as ItemType[],\r\n testEvent: false,\r\n text: '未选中',\r\n wrapText: 'uni-app x,终极跨平台方案\\nuts,大一统语言',\r\n value: [] as string[],\r\n disabled: true,\r\n checked: true,\r\n color: '#007aff',\r\n iconColor: '#211cfe',\r\n foreColor: '#ff0000',\r\n // 组件属性 autotest\r\n checked_boolean: false,\r\n disabled_boolean: false,\r\n color_input: \"#007aff\",\r\n backgroundColor_input: \"#ffffff\",\r\n borderColor_input: \"#d1d1d1\",\r\n activeBackgroundColor_input: \"#ffffff\",\r\n activeBorderColor_input: \"#d1d1d1\",\r\n iconColor_input: \"#007aff\",\r\n foreColor_input: '#ff0000'\r\n }\r\n },\r\n methods: {\r\n\r\n checkboxChange: function (e : UniCheckboxGroupChangeEvent) {\r\n // 自动化测试\r\n if ((e.target?.tagName ?? '') == 'CHECKBOX-GROUP' && e.type === 'change') {\r\n this.testEvent = true\r\n }\r\n\r\n const selectedNames : string[] = []\r\n this.items.forEach((item) => {\r\n if (e.detail.value.includes(item.value)) {\r\n selectedNames.push(item.name)\r\n }\r\n })\r\n uni.showToast({\r\n icon: 'none',\r\n title: '当前选中:' + selectedNames.join(','),\r\n })\r\n },\r\n testChange: function (e : UniCheckboxGroupChangeEvent) {\r\n this.value = e.detail.value\r\n },\r\n checkbox_click() { console.log(\"组件被点击时触发\") },\r\n checkbox_touchstart() { console.log(\"手指触摸动作开始\") },\r\n checkbox_touchmove() { console.log(\"手指触摸后移动\") },\r\n checkbox_touchcancel() { console.log(\"手指触摸动作被打断,如来电提醒,弹窗\") },\r\n checkbox_touchend() { console.log(\"手指触摸动作结束\") },\r\n checkbox_tap() { console.log(\"手指触摸后马上离开\") },\r\n checkbox_longpress() { console.log(\"如果一个组件被绑定了 longpress 事件,那么当用户长按这个组件时,该事件将会被触发。\") },\r\n change_checked_boolean(checked : boolean) { this.checked_boolean = checked },\r\n change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },\r\n confirm_color_input(value : string) { this.color_input = value },\r\n confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },\r\n confirm_borderColor_input(value : string) { this.borderColor_input = value },\r\n confirm_activeBackgroundColor_input(value : string) { this.activeBackgroundColor_input = value },\r\n confirm_activeBorderColor_input(value : string) { this.activeBorderColor_input = value },\r\n confirm_iconColor_input(value : string) { this.iconColor_input = value },\r\n confirm_foreColor_input(value : string) { this.foreColor_input = value }\r\n }\r\n }\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.checkbox.checkbox)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/checkbox.html#checkbox)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=checkbox&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=checkbox&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=checkbox&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=checkbox&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=checkbox&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=checkbox)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=checkbox&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"checkbox-group":{"name":"## checkbox-group","description":"> 组件类型:UniCheckboxGroupElement \n\n 多选框组","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | - | | 表单的控件名称,作为键值对的一部分与表单(form组件)一同提交 |\n| @change | (event: [UniCheckboxGroupChangeEvent](#unicheckboxgroupchangeevent)) => void | - | | checkbox-group中选中项发生改变是触发 change 事件,detail = {value:\\[选中的checkbox的value的数组] |","event":"\n### 事件\n#### UniCheckboxGroupChangeEvent\n\n```mermaid\ngraph LR\n \nUniCheckboxGroupChangeEvent -- Extends --> UniCustomEvent<UniCheckboxGroupChangeEventDetail>\n style UniCustomEvent<UniCheckboxGroupChangeEventDetail> color:#42b983\n click UniCustomEvent<UniCheckboxGroupChangeEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniCheckboxGroupChangeEventDetail\n\n\n###### UniCheckboxGroupChangeEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| value | Array\\ | 是 | - | - | - |\n\n","example":"","children":"### 子组件 @children-tags \n - [checkbox](checkbox.md)","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.checkbox.checkbox-group)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/checkbox.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=checkbox-group&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=checkbox-group&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=checkbox-group&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=checkbox-group&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=checkbox-group&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=checkbox-group)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=checkbox-group&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"form":{"name":"## form","description":"> 组件类型:UniFormElement \n\n 表单","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.97 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| disabled | boolean | - | | 是否禁用 |\n| @submit | (event: [UniFormSubmitEvent](#uniformsubmitevent)) => void | - | | 携带 form 中的数据触发 submit 事件,event.detail = {value : {'name': 'value'}} |\n| @reset | (event: [UniFormResetEvent](#uniformresetevent)) => void | - | | 表单重置时会触发 reset 事件 |","event":"\n### 事件\n#### UniFormSubmitEvent\n\n```mermaid\ngraph LR\n \nUniFormSubmitEvent -- Extends --> UniCustomEvent<UniFormSubmitEventDetail>\n style UniCustomEvent<UniFormSubmitEventDetail> color:#42b983\n click UniCustomEvent<UniFormSubmitEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniFormSubmitEventDetail\n\n\n###### UniFormSubmitEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| value | UTSJSONObject | 是 | - | - | - |\n\n\n#### UniFormResetEvent\n\n```mermaid\ngraph LR\n \nUniFormResetEvent -- Extends --> UniCustomEvent<UniFormResetEventDetail>\n style UniCustomEvent<UniFormResetEventDetail> color:#42b983\n click UniCustomEvent<UniFormResetEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/form/form.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/form/form\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/form/form\n\n>Template\n```vue\n\r\n \r\n \r\n \r\n \r\n \r\n 提交的表单数据\r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n nickname: '',\r\n gender: '0',\r\n age: 18,\r\n loves: ['0'],\r\n switch: true,\r\n comment: '',\r\n formData: {} as UTSJSONObject,\r\n // 仅测试\r\n testVerifySubmit: false,\r\n testVerifyReset: false,\r\n }\r\n },\r\n computed: {\r\n formDataText() : string {\r\n return JSON.stringify(this.formData)\r\n }\r\n },\r\n methods: {\r\n onFormSubmit: function (e : UniFormSubmitEvent) {\r\n this.formData = e.detail.value\r\n\r\n // 仅测试\r\n this.testVerifySubmit = (e.type == 'submit' && (e.target?.tagName ?? '') == \"FORM\")\r\n },\r\n onFormReset: function (e : UniFormResetEvent) {\r\n this.formData = {}\r\n\r\n // 仅测试\r\n this.testVerifyReset = (e.type == 'reset' && (e.target?.tagName ?? '') == \"FORM\")\r\n }\r\n }\r\n }\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.form)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/form.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=form&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=form&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=form&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=form&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=form&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=form)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=form&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"input":{"name":"## input","description":"> 组件类型:[UniInputElement](/dom/uniinputelement.md) \n\n 输入框","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | - | | 表单的控件名称,作为键值对的一部分与表单(form组件)一同提交 |\n| disabled | boolean | false | | 是否禁用 |\n| value | string | \"\" | | 输入框的初始内容 |\n| type | text \\| number \\| digit \\| tel | \"text\" | | input的类型 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| text | | 文本输入键盘 |\n@| number | | 数字输入键盘 |\n@| digit | | 带小数点数字输入键盘 |\n@| tel | | 电话输入键盘 |\n| password | boolean | false | | 是否是密码类型 |\n| placeholder | string | \"\" | | 输入框为空时占位符 |\n| placeholder-style | string | \"\" | | 指定 placeholder 的样式 |\n| placeholder-class | string([string.ClassString](/uts/data-type.md#ide-string)) | \"\" | | 指定 placeholder 的样式类,目前仅支持color,font-size和font-weight |\n| maxlength | number | \"不限制长度\" | | 最大输入长度,0和正数为合法值,非法值的时候不限制最大长度 |\n| cursor-spacing | number | 0 | | 指定光标与键盘的距离,单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 |\n| cursor-color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"\" | | 指定光标颜色 |\n| auto-focus | boolean | false | | 自动获取焦点,与`focus`属性对比,此属性只会首次生效。 |\n| focus | boolean | false | | 获取焦点 |\n| confirm-type | send \\| search \\| next \\| go \\| done | \"done\" | | 设置键盘右下角按钮的文字,仅在 type为text 时生效。 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| send | | 发送 |\n@| search | | 搜索 |\n@| next | | 下一个 |\n@| go | | 前往 |\n@| done | | 完成 |\n| confirm-hold | boolean | false | | 点击键盘右下角按钮时是否保持键盘不收起 |\n| cursor | number | 0 | | 指定focus时的光标位置 |\n| selection-start | number | -1 | | 光标起始位置,自动聚集时有效,需与selection-end搭配使用 |\n| selection-end | number | -1 | | 光标结束位置,自动聚集时有效,需与selection-satrt搭配使用 |\n| adjust-position | boolean | true | | 键盘弹起时,是否自动上推页面 |\n| hold-keyboard | boolean | false | | focus时,点击页面的时候不收起键盘 |\n| inputmode | none \\| text \\| decimal \\| numeric \\| tel \\| search \\| email \\| url | \"text\" | | 是一个枚举属性,它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。在符合条件的高版本webview里,uni-app的 web 和 app-vue 平台中可使用本属性。 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| none | | 无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用。 |\n@| text | | 使用用户本地区域设置的标准文本输入键盘。 |\n@| decimal | | 小数输入键盘,包含数字和分隔符(通常是“ . ”或者“ , ”),设备可能也可能不显示减号键。 |\n@| numeric | | 数字输入键盘,所需要的就是 0 到 9 的数字,设备可能也可能不显示减号键。 |\n@| tel | | 电话输入键盘,包含 0 到 9 的数字、星号(*)和井号(#)键。表单输入里面的电话输入通常应该使用 \\ 。 |\n@| search | | 为搜索输入优化的虚拟键盘,比如,返回键可能被重新标记为“搜索”,也可能还有其他的优化。 |\n@| email | | 为邮件地址输入优化的虚拟键盘,通常包含\"@\"符号和其他优化。表单里面的邮件地址输入应该使用 \\ 。 |\n@| url | | 为网址输入优化的虚拟键盘,比如,“/”键会更加明显、历史记录访问等。表单里面的网址输入通常应该使用 \\ 。 |\n| @input | (event: [UniInputEvent](#uniinputevent)) => void | - | | 当键盘输入时,触发input事件,event.detail = {value, cursor},处理函数可以直接 return 一个字符串,将替换输入框的内容。 |\n| @focus | (event: [UniInputFocusEvent](#uniinputfocusevent)) => void | - | | 输入框聚焦时触发,event.detail = { value, height },height 为键盘高度 |\n| @blur | (event: [UniInputBlurEvent](#uniinputblurevent)) => void | - | | 输入框失去焦点时触发,event.detail = {value: value} |\n| @keyboardheightchange | (event: [UniInputKeyboardHeightChangeEvent](#uniinputkeyboardheightchangeevent)) => void | - | | 键盘高度发生变化的时候触发此事件,event.detail = {height: height, duration: duration} |\n| @confirm | (event: [UniInputConfirmEvent](#uniinputconfirmevent)) => void | - | | 点击完成按钮时触发,event.detail = {value: value} |","event":"\n### 事件\n#### UniInputEvent\n\n```mermaid\ngraph LR\n \nUniInputEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | 输入框内容 |\n@| cursor | number | 是 | - | - | 光标的位置 |\n@| keyCode | number | 是 | - | - | 输入字符的Unicode值 |\n\n\n#### UniInputFocusEvent\n\n```mermaid\ngraph LR\n \nUniInputFocusEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputFocusEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputFocusEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| height | number | 是 | - | | 键盘高度 |\n@| value | string | 是 | - | - | 输入框内容 |\n\n\n#### UniInputBlurEvent\n\n```mermaid\ngraph LR\n \nUniInputBlurEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputBlurEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputBlurEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | 输入框内容 |\n@| cursor | number | 是 | - | - | 选择区域的起始位置 |\n\n\n#### UniInputKeyboardHeightChangeEvent\n\n```mermaid\ngraph LR\n \nUniInputKeyboardHeightChangeEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputKeyboardHeightChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputKeyboardHeightChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| height | number | 是 | - | - | 键盘高度 |\n@| duration | number | 是 | - | - | 持续时间 |\n\n\n#### UniInputConfirmEvent\n\n```mermaid\ngraph LR\n \nUniInputConfirmEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputConfirmEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputConfirmEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | 输入框内容 |\n\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/input/input.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/input/input\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/input/input\n\n>Template\n```vue\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n 设置输入框的初始内容\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n type取值(不同输入法表现可能不一致)\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n 密码输入框\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n 无value设置的密码输入框\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n 占位符样式\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n 设置禁用输入框\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n 设置最大输入长度\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n 设置光标与键盘的距离\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n 自动获取焦点\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n confirm-type取值(不同输入法表现可能不一致)\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n 点击键盘右下角按钮时保持键盘不收起\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n 设置输入框聚焦时光标的位置(点击生效)\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n 设置输入框聚焦时光标的起始位置和结束位置(点击生效)\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n 设置光标颜色为红色\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n 键盘弹起时,自动上推页面\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n 设置hold-keyboard\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n input事件\r\n {{\r\n inputEventDetail\r\n }}\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n focus事件和blur事件\r\n {{\r\n focusAndBlurEventDetail\r\n }}\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n confirm事件\r\n {{\r\n confirmEventDetail\r\n }}\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n keyboardheightchange事件\r\n {{ keyboardHeightChangeEventDetail }}\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n 带清除按钮的输入框\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n 可查看密码的输入框\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n 同时存在 v-model 和 value\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n 设置adjust-position\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n title: 'input',\r\n showClearIcon: false,\r\n inputClearValue: '',\r\n showPassword: true,\r\n cursor: -1,\r\n cursor_color: \"#3393E2\",\r\n selectionStart: -1,\r\n selectionEnd: -1,\r\n inputEventDetail: '',\r\n focusAndBlurEventDetail: '',\r\n confirmEventDetail: '',\r\n keyboardHeightChangeEventDetail: '',\r\n focus: true,\r\n inputPassword: true,\r\n inputTypeTel: \"tel\",\r\n inputPlaceHolderStyle: \"color:red\",\r\n inputPlaceHolderClass: \"uni-input-placeholder-class\" as string.ClassString,\r\n inputMaxLengthValue: \"\",\r\n onMaxLengthInputValue: \"\",\r\n inputMaxLengthFocus: false,\r\n inputPasswordValue: \"cipher\",\r\n inputFocusKeyBoardChangeValue: true,\r\n holdKeyboard: false,\r\n keyboardHeight: 0,\r\n focusedForKeyboardHeightChangeTest: false,\r\n demoValue: '123',\r\n adjustPosition: false\r\n }\r\n },\r\n methods: {\r\n inputFocusKeyBoardChange(e : UniInputKeyboardHeightChangeEvent) {\r\n this.inputFocusKeyBoardChangeValue = e.detail.height > 50\r\n },\r\n onMaxLengthInput(event : UniInputEvent) {\r\n this.onMaxLengthInputValue = event.detail.value\r\n },\r\n setCursor: function (cursor : number) {\r\n (this.$refs['input'] as UniInputElement).focus();\r\n this.cursor = cursor;\r\n },\r\n onCursorBlurChange() {\r\n this.cursor = 0\r\n },\r\n setSelection: function (selectionStart : number, selectionEnd : number) {\r\n (this.$refs['input2'] as UniInputElement).focus();\r\n this.selectionStart = selectionStart;\r\n this.selectionEnd = selectionEnd;\r\n },\r\n onSelectionBlurChange() {\r\n this.selectionEnd = 0;\r\n },\r\n clearInput: function (event : UniInputEvent) {\r\n this.inputClearValue = event.detail.value\r\n if (event.detail.value.length > 0) {\r\n this.showClearIcon = true\r\n } else {\r\n this.showClearIcon = false\r\n }\r\n },\r\n clearIcon: function () {\r\n this.inputClearValue = ''\r\n this.showClearIcon = false\r\n },\r\n changePassword: function () {\r\n this.showPassword = !this.showPassword\r\n },\r\n onInput: function (event : UniInputEvent) {\r\n console.log(\"键盘输入\", JSON.stringify(event.detail));\r\n this.inputEventDetail = JSON.stringify(event.detail)\r\n },\r\n onFocus: function (event : UniInputFocusEvent) {\r\n console.log(\"输入框聚焦\", JSON.stringify(event.detail));\r\n this.focusAndBlurEventDetail = JSON.stringify(event.detail);\r\n },\r\n onBlur: function (event : UniInputBlurEvent) {\r\n console.log(\"输入框失去焦点\", JSON.stringify(event.detail));\r\n this.focusAndBlurEventDetail = JSON.stringify(event.detail);\r\n },\r\n onConfirm: function (event : UniInputConfirmEvent) {\r\n console.log(\"点击完成按钮\", JSON.stringify(event.detail));\r\n this.confirmEventDetail = JSON.stringify(event.detail);\r\n },\r\n onKeyborardHeightChange: function (event : UniInputKeyboardHeightChangeEvent) {\r\n console.log(\"键盘高度发生变化\", JSON.stringify(event.detail));\r\n this.keyboardHeightChangeEventDetail = JSON.stringify(event.detail);\r\n this.keyboardHeight = event.detail.height;\r\n },\r\n test_check_input_value() : number {\r\n return this.onMaxLengthInputValue.length\r\n },\r\n changeCursorColor(event : UniSwitchChangeEvent) {\r\n const checked = event.detail.value;\r\n if (checked) {\r\n this.cursor_color = \"red\"\r\n } else {\r\n this.cursor_color = \"#3393E2\"\r\n }\r\n const input = uni.getElementById(\"uni-input-cursor-color\")\r\n input?.focus()\r\n },\r\n changeHoldKeyboard(event : UniSwitchChangeEvent) {\r\n const checked = event.detail.value;\r\n this.holdKeyboard = checked\r\n },\r\n changeAdjustPosition(event : UniSwitchChangeEvent) {\r\n const checked = event.detail.value;\r\n this.adjustPosition = checked\r\n }\r\n }\r\n }\r\n\n```\n\n:::","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.input)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/input.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=input&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=input&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=input&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=input&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=input&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=input)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=input&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"editor":{"name":"## editor","description":"富文本编辑器,可以对图片、文字进行编辑。","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| read-only | boolean | - | | 设置编辑器为只读。 |\n| placeholder | string | - | | 提示信息。 |\n| show-img-size | boolean | - | | 点击图片时显示图片大小控件。 |\n| show-img-toolbar | boolean | - | | 点击图片时显示工具栏控件。 |\n| show-img-resize | string | - | | 点击图片时显示修改尺寸控件。 |\n| @ready | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 编辑器初始化完成时触发 |\n| @focus | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 编辑器聚焦时触发,event.detail = {html, text, delta} |\n| @blur | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 编辑器失去焦点时触发,detail = {html, text, delta} |\n| @input | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 编辑器内容改变时触发,detail = {html, text, delta} |\n| @statuschange | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 通过 Context 方法改变编辑器内样式时触发,返回选区已设置的样式 |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/editor/editor.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/editor/editor\n\n>Template\n```vue\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n\r\n\r\n \r\n \r\n\r\n\r\n \r\n \r\n \r\n\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n type Context = {\r\n id ?: string;\r\n pageId ?: number;\r\n }\r\n\r\n export default {\r\n data() {\r\n return {\r\n readOnly: false,\r\n formats: {},\r\n editorCtx: {} as Context,\r\n // 自动化测试\r\n autoTest: false,\r\n undoTest: false,\r\n redoTest: false,\r\n removeFormatTest: false,\r\n insertImageTest: false,\r\n blurTest: false\r\n }\r\n },\r\n onLoad() {\r\n uni.loadFontFace({\r\n family: 'Pacifico',\r\n source: 'url(\"/static/font/Pacifico-Regular.ttf\")',\r\n success() {\r\n console.log('success load font')\r\n },\r\n fail() {\r\n console.log('fail load font load')\r\n }\r\n })\r\n },\r\n methods: {\r\n readOnlyChange() {\r\n this.readOnly = !this.readOnly\r\n },\r\n onEditorReady() {\r\n uni.createSelectorQuery().select('#editor').context((res) => {\r\n this.editorCtx = res.context\r\n }).exec()\r\n },\r\n // 自动化测试专用\r\n setContents(options) {\r\n this.editorCtx.setContents({\r\n delta: {\r\n ops: options\r\n },\r\n success: (res) => {\r\n console.log('setContents-success', res)\r\n },\r\n fail: (err) => {\r\n console.log(err)\r\n }\r\n })\r\n },\r\n blur() {\r\n this.editorCtx.blur({\r\n success: (res) => {\r\n console.log('编辑器失焦:', res)\r\n this.blurTest = true\r\n },\r\n fail: (err) => {\r\n console.log(err)\r\n }\r\n })\r\n },\r\n getCon() {\r\n this.editorCtx.getContents({\r\n success: (res) => {\r\n console.log('文本详情:', res)\r\n },\r\n fail: (err) => {\r\n console.log(err)\r\n }\r\n })\r\n },\r\n undo() {\r\n this.editorCtx.undo({\r\n success: (res) => {\r\n this.undoTest = true\r\n },\r\n fail: (err) => {\r\n this.undoTest = false\r\n }\r\n })\r\n },\r\n redo() {\r\n this.editorCtx.redo({\r\n success: (res) => {\r\n this.redoTest = true\r\n },\r\n fail: (err) => {\r\n this.redoTest = false\r\n }\r\n })\r\n },\r\n format(e) {\r\n let { name, value } = e.target.dataset\r\n if (!name) return\r\n // console.log('format', name, value)\r\n this.editorCtx.format(name, value)\r\n },\r\n onStatusChange(e) {\r\n const formats = e.detail\r\n this.formats = formats\r\n },\r\n insertDivider() {\r\n this.editorCtx.insertDivider({\r\n success: function () {\r\n console.log('insert divider success')\r\n }\r\n })\r\n },\r\n clear() {\r\n this.editorCtx.clear({\r\n success: function (res) {\r\n console.log(\"clear success\")\r\n }\r\n })\r\n },\r\n clearShowModal() {\r\n uni.showModal({\r\n title: '清空编辑器',\r\n content: '确定清空编辑器全部内容?',\r\n success: res => {\r\n if (res.confirm) {\r\n this.clear()\r\n }\r\n }\r\n })\r\n },\r\n removeFormat() {\r\n this.editorCtx.removeFormat({\r\n success: (res) => {\r\n console.log('removeFormat-success', res)\r\n this.removeFormatTest = true\r\n },\r\n fail: (err) => {\r\n this.removeFormatTest = false\r\n }\r\n })\r\n },\r\n insertDate() {\r\n const date = new Date()\r\n const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`\r\n this.editorCtx.insertText({\r\n text: formatDate\r\n })\r\n },\r\n insertImage(image) {\r\n this.editorCtx.insertImage({\r\n src: image,\r\n alt: '图像',\r\n success: () => {\r\n console.log('insert image success')\r\n this.insertImageTest = true\r\n }\r\n })\r\n },\r\n chooseInsertImage() {\r\n uni.chooseImage({\r\n count: 1,\r\n success: (res) => {\r\n this.insertImage(res.tempFilePaths[0])\r\n }\r\n })\r\n }\r\n }\r\n }\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.editor)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/editor.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=editor&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=editor&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=editor&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=editor&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=editor&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=editor)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=editor&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"label":{"name":"## label","description":"用来改进表单组件的可用性,使用for属性找到对应的id,或者将控件放在该标签下,当点击时,就会触发对应的控件","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| disabled | boolean | - | | 是否禁用 |\n| for | string | - | | 绑定控件的 id |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/label/label.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/label/label\n\n>Template\n```vue\n\r\n \r\n \r\n \r\n \r\n 表单组件在label内\r\n \r\n \r\n \r\n \r\n\r\n \r\n label用for标识表单组件\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n label内有多个时选中第一个\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n title: 'label',\r\n checkboxItems: [{\r\n name: 'USA',\r\n value: '美国'\r\n },\r\n {\r\n name: 'CHN',\r\n value: '中国',\r\n checked: 'true'\r\n }\r\n ],\r\n radioItems: [{\r\n name: 'USA',\r\n value: '美国'\r\n },\r\n {\r\n name: 'CHN',\r\n value: '中国',\r\n checked: 'true'\r\n }\r\n ],\r\n hidden: false,\r\n checkboxValue: [] as string[],\r\n radioValue: ''\r\n }\r\n },\r\n methods: {\r\n checkboxChange: function (e : UniCheckboxGroupChangeEvent) {\r\n console.log(e.detail.value)\r\n this.checkboxValue = e.detail.value\r\n },\r\n radioChange: function (e : UniRadioGroupChangeEvent) {\r\n console.log(e.detail.value)\r\n this.radioValue = e.detail.value\r\n }\r\n }\r\n }\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.label)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/label.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=label&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=label&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=label&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=label&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=label&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=label)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=label&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"picker":{"name":"## picker","description":"从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器。","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| disabled | boolean | - | | 是否禁用 |\n| mode | string | - | | 选择器类型 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| selector | - | 普通选择器 |\n@| multiSelector | - | 多列选择器 |\n@| time | - | 时间选择器 |\n@| date | - | 日期选择器 |\n@| region | - | 省市选择器 |\n| range | array | - | | mode为 selector 或 multiSelector 时,range 有效 |\n| range-key | string | - | | 当 range 是一个 Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 |\n| value | string | - | | mode为select或multiSelector时:value 的值表示选择了 range 中的第几个(下标从 0 开始);mode为time时:表示选中的时间,格式为\"hh:mm\";mode为date时:表示选中的日期,格式为\"YYYY-MM-DD\";mode为region时:
\t\t表示选中的省市区,默认选中每一列的第一个值。 |\n| start | string | - | | mode为time:表示有效时间范围的开始,字符串格式为\"hh:mm\";mode为date:表示有效日期范围的开始,字符串格式为\"YYYY-MM-DD\" |\n| end | string | - | | mode为time:表示有效时间范围的结束,字符串格式为\"hh:mm\";mode为date:表示有效日期范围的结束,字符串格式为\"YYYY-MM-DD\" |\n| fields | string | - | | 有效值 year,month,day,表示选择器的粒度 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| year | - | 选择器粒度为年 |\n@| month | - | 选择器粒度为月份 |\n@| day | - | 选择器粒度为天 |\n| custom-item | string | - | | 可为每一列的顶部添加一个自定义的项 |\n| @change | (event: [UniEvent](/component/common.md#unievent)) => void | - | | value 改变时触发 change 事件,event.detail = {value: value} |\n| @columnchange | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 某一列的值改变时触发 columnchange 事件,event.detail = {column: column, value: value},column 的值表示改变了第几列(下标从0开始),value 的值表示变更值的下标 |\n| @cancel | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 取消选择时触发 |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/picker/picker.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/picker/picker\n\n>Template\n```vue\n\r\n \r\n \r\n 普通选择器\r\n \r\n \r\n \r\n 当前选择\r\n \r\n \r\n \r\n {{array[index].name}}\r\n \r\n \r\n \r\n \r\n\r\n 多列选择器\r\n \r\n \r\n \r\n 当前选择\r\n \r\n \r\n \r\n \r\n {{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}\r\n \r\n \r\n \r\n \r\n \r\n\r\n 时间选择器\r\n \r\n \r\n \r\n 当前选择\r\n \r\n \r\n \r\n {{time}}\r\n \r\n \r\n \r\n \r\n \r\n 注:选择 09:01 ~ 21:01 之间的时间, 不在区间内不能选中\r\n \r\n\r\n 日期选择器\r\n \r\n \r\n \r\n 当前选择\r\n \r\n \r\n \r\n {{date}}\r\n \r\n \r\n \r\n \r\n \r\n 注:选择当前时间 ±10 年之间的时间, 不在区间内不能选中\r\n \r\n \r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n function getDate(type ?: string) : string {\r\n const date = new Date();\r\n\r\n let year : string | number = date.getFullYear();\r\n let month : string | number = date.getMonth() + 1;\r\n let day : string | number = date.getDate();\r\n\r\n if (type === 'start') {\r\n year = year - 10;\r\n } else if (type === 'end') {\r\n year = year + 10;\r\n }\r\n month = month > 9 ? month : '0' + month;;\r\n day = day > 9 ? day : '0' + day;\r\n\r\n return `${year}-${month}-${day}`;\r\n }\r\n export default {\r\n data() {\r\n return {\r\n title: 'picker',\r\n array: [{ name: '中国' }, { name: '美国' }, { name: '巴西' }, { name: '日本' }],\r\n index: 0,\r\n multiArray: [\r\n ['亚洲', '欧洲'],\r\n ['中国', '日本'],\r\n ['北京', '上海', '广州']\r\n ],\r\n multiIndex: [0, 0, 0],\r\n date: getDate(),\r\n startDate: getDate('start'),\r\n endDate: getDate('end'),\r\n time: '12:01'\r\n }\r\n },\r\n methods: {\r\n bindPickerChange: function (e) {\r\n console.log('picker发送选择改变,携带值为:' + e.detail.value)\r\n this.index = e.detail.value\r\n },\r\n bindMultiPickerColumnChange: function (e) {\r\n console.log('修改的列为:' + e.detail.column + ',值为:' + e.detail.value)\r\n this.multiIndex[e.detail.column] = e.detail.value\r\n switch (e.detail.column) {\r\n case 0: //拖动第1列\r\n switch (this.multiIndex[0]) {\r\n case 0:\r\n this.multiArray[1] = ['中国', '日本']\r\n this.multiArray[2] = ['北京', '上海', '广州']\r\n break\r\n case 1:\r\n this.multiArray[1] = ['英国', '法国']\r\n this.multiArray[2] = ['伦敦', '曼彻斯特']\r\n break\r\n }\r\n this.multiIndex.splice(1, 1, 0)\r\n this.multiIndex.splice(2, 1, 0)\r\n break\r\n case 1: //拖动第2列\r\n switch (this.multiIndex[0]) { //判断第一列是什么\r\n case 0:\r\n switch (this.multiIndex[1]) {\r\n case 0:\r\n this.multiArray[2] = ['北京', '上海', '广州']\r\n break\r\n case 1:\r\n this.multiArray[2] = ['东京', '北海道']\r\n break\r\n }\r\n break\r\n case 1:\r\n switch (this.multiIndex[1]) {\r\n case 0:\r\n this.multiArray[2] = ['伦敦', '曼彻斯特']\r\n break\r\n case 1:\r\n this.multiArray[2] = ['巴黎', '马赛']\r\n break\r\n }\r\n break\r\n }\r\n this.multiIndex.splice(2, 1, 0)\r\n break\r\n }\r\n this.$forceUpdate()\r\n },\r\n bindDateChange: function (e) {\r\n this.date = e.detail.value\r\n },\r\n bindTimeChange: function (e) {\r\n this.time = e.detail.value\r\n }\r\n }\r\n }\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.picker)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/picker.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=picker&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=picker&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=picker&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=picker&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=picker&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=picker)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=picker&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"picker-view-column":{"name":"## picker-view-column","description":"仅可放置于 picker-view 中,其子节点未继承 picker-view 的选中框的高度,需要自己设置高度并居中","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.picker-view.picker-view-column)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/picker-view.html#picker-view-column)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=picker-view-column&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=picker-view-column&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=picker-view-column&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=picker-view-column&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=picker-view-column&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=picker-view-column)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=picker-view-column&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"picker-view":{"name":"## picker-view","description":"> 组件类型:UniPickerViewElement \n\n 嵌入页面的滚动选择器","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| value | array\\ | - | | picker-view-column 选择的第几项 |\n| indicator-style | string([string.CSSString](/uts/data-type.md#ide-string)) | - | | 设置选择器中间选中框的样式 |\n| indicator-class | string([string.ClassString](/uts/data-type.md#ide-string)) | - | | 设置选择器中间选中框的类名 |\n| mask-style | string([string.CSSString](/uts/data-type.md#ide-string)) | - | | 设置蒙层的样式 |\n| mask-top-style | string([string.CSSString](/uts/data-type.md#ide-string)) | - | | 设置蒙层上半部分的样式 |\n| mask-bottom-style | string([string.CSSString](/uts/data-type.md#ide-string)) | - | | 设置蒙层下半部分的样式 |\n| mask-class | string([string.ClassString](/uts/data-type.md#ide-string)) | - | | 设置蒙层的类名 |\n| @change | (event: [UniPickerViewChangeEvent](#unipickerviewchangeevent)) => void | - | | 当滚动选择,value 改变时触发 change 事件,event.detail = {value: value};value为数组,表示 picker-view 内的 picker-view-column 当前选择的是第几项(下标从 0
\t\t开始) |","event":"\n### 事件\n#### UniPickerViewChangeEvent\n\n```mermaid\ngraph LR\n \nUniPickerViewChangeEvent -- Extends --> UniCustomEvent<UniPickerViewChangeEventDetail>\n style UniCustomEvent<UniPickerViewChangeEventDetail> color:#42b983\n click UniCustomEvent<UniPickerViewChangeEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniPickerViewChangeEventDetail\n\n\n###### UniPickerViewChangeEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| value | Array\\ | 是 | - | - | - |\n\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/picker-view/picker-view.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/picker-view/picker-view\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/picker-view/picker-view\n\n>Template\n```vue\n\r\n \r\n \r\n \r\n \r\n 日期:{{year}}年{{month}}月{{day}}日\r\n \r\n \r\n \r\n \r\n {{item}}年\r\n \r\n \r\n {{item}}月\r\n \r\n \r\n \r\n {{item}}日\r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n import { state, setEventCallbackNum } from '@/store/index.uts'\r\n export default {\r\n data() {\r\n const date = new Date()\r\n const _years : number[] = []\r\n const _year = date.getFullYear()\r\n const _months : number[] = []\r\n const _month : number = date.getMonth() + 1\r\n const _days : number[] = []\r\n const _day = date.getDate()\r\n for (let i = 2000; i <= _year; i++) {\r\n _years.push(i)\r\n }\r\n for (let i = 1; i <= 12; i++) {\r\n _months.push(i)\r\n }\r\n for (let i = 1; i <= 31; i++) {\r\n _days.push(i)\r\n }\r\n return {\r\n title: 'picker-view',\r\n years: _years as number[],\r\n year: _year as number,\r\n months: _months as number[],\r\n month: _month as number,\r\n days: _days as number[],\r\n day: _day as number,\r\n value: [_year - 2000, _month - 1, _day - 1] as number[],\r\n result: [] as number[],\r\n indicatorStyle: 'height: 50px;',\r\n // 自动化测试\r\n indicatorClass: '',\r\n maskStyle: '',\r\n maskClass: '',\r\n maskTopStyle: '',\r\n maskBottomStyle: ''\r\n }\r\n },\r\n methods: {\r\n // 自动化测试\r\n getEventCallbackNum() : number {\r\n return state.eventCallbackNum\r\n },\r\n // 自动化测试\r\n setEventCallbackNum(num : number) {\r\n setEventCallbackNum(num)\r\n },\r\n bindChange(e : UniPickerViewChangeEvent) {\r\n // 自动化测试\r\n console.log(e.target?.tagName, e.type);\r\n if ((e.target?.tagName ?? '').includes('PICKER-VIEW')) {\r\n this.setEventCallbackNum(state.eventCallbackNum + 1)\r\n }\r\n if (e.type === 'change') {\r\n this.setEventCallbackNum(state.eventCallbackNum + 2)\r\n }\r\n const val = e.detail.value\r\n this.result = val\r\n this.year = this.years[val[0]]\r\n this.month = this.months[val[1]]\r\n this.day = this.days[val[2]]\r\n },\r\n setValue() {\r\n this.value = [0, 0, 0] as number[]\r\n },\r\n setValue1() {\r\n this.value = [10, 10, 10] as number[]\r\n },\r\n }\r\n }\r\n\n```\n\n:::","children":"### 子组件 @children-tags \n - [picker-view-column](picker-view-column.md)","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.picker-view.picker-view)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/picker-view.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=picker-view&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=picker-view&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=picker-view&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=picker-view&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=picker-view&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=picker-view)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=picker-view&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"radio":{"name":"## radio","description":"> 组件类型:UniRadioElement \n\n 单选项。在1组radio-group中只能选中1个","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| disabled | boolean | false | | 是否禁用 |\n| value | string | - | | \\ 标识。当该radio 选中时,radio-group的 change 事件会携带radio的value |\n| checked | boolean | false | | \\ 当前是否选中 |\n| backgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | | radio默认的背景颜色 |\n| borderColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#d1d1d1\" | | radio默认的边框颜色 |\n| activeBackgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007AFF\" | | radio选中时的背景颜色,优先级大于color属性 |\n| activeBorderColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"\" | | radio选中时的边框颜色 |\n| foreColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | | radio的图标颜色 |\n| ~~iconColor~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | | radio的图标颜色 (使用foreColor替代) |\n| ~~color~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007AFF\" | | radio的颜色 (使用foreColor替代) |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/radio/radio.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/radio/radio\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/radio/radio\n\n>Template\n```vue\n\r\n\r\n\r\n \r\n \r\n uni-app-x\r\n \r\n \r\n\r\n \r\n \r\n \r\n 当前是否选中\" @change=\"change_checked_boolean\">\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n 默认样式 \r\n \r\n \r\n 选中\r\n \r\n {{\r\n text\r\n }}\r\n 禁用\r\n {{\r\n wrapText\r\n }}\r\n \r\n \r\n\r\n \r\n \r\n 不同颜色和尺寸的radio \r\n \r\n \r\n 选中\r\n \r\n 未选中\r\n \r\n \r\n\r\n \r\n \r\n 推荐展示样式 \r\n \r\n \r\n \r\n \r\n \r\n {{ item.name }}\r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n type ItemType = {\r\n value : string\r\n name : string\r\n }\r\n export default {\r\n data() {\r\n return {\r\n items: [\r\n {\r\n value: 'CHN',\r\n name: '中国',\r\n },\r\n {\r\n value: 'USA',\r\n name: '美国',\r\n },\r\n\r\n {\r\n value: 'BRA',\r\n name: '巴西',\r\n },\r\n {\r\n value: 'JPN',\r\n name: '日本',\r\n },\r\n {\r\n value: 'ENG',\r\n name: '英国',\r\n },\r\n {\r\n value: 'FRA',\r\n name: '法国',\r\n },\r\n ] as ItemType[],\r\n current: 0,\r\n eventTest: false,\r\n\r\n value: '',\r\n text: '未选中',\r\n wrapText: 'uni-app x,终极跨平台方案\\nuts,大一统语言',\r\n disabled: true,\r\n checked: true,\r\n color: '#007aff',\r\n // 组件属性 autotest\r\n checked_boolean: false,\r\n disabled_boolean: false,\r\n color_input: \"#007AFF\",\r\n backgroundColor_input: \"#ffffff\",\r\n borderColor_input: \"#d1d1d1\",\r\n activeBackgroundColor_input: \"#007AFF\",\r\n activeBorderColor_input: \"\",\r\n iconColor_input: \"#ffffff\"\r\n }\r\n },\r\n\r\n methods: {\r\n radioChange(e : UniRadioGroupChangeEvent) {\r\n\r\n // 自动化测试\r\n console.log('test: radio event detail', e.target?.tagName, e.type)\r\n if ((e.target?.tagName ?? '') == 'RADIO-GROUP' && e.type == 'change') {\r\n this.eventTest = true\r\n }\r\n\r\n const selected = this.items.find((item) : boolean => {\r\n return item.value == e.detail.value\r\n })\r\n uni.showToast({\r\n icon: 'none',\r\n title: '当前选中:' + selected?.name,\r\n })\r\n },\r\n testChange(e : UniRadioGroupChangeEvent) {\r\n\r\n this.value = e.detail.value\r\n },\r\n radio_click() { console.log(\"组件被点击时触发\") },\r\n radio_touchstart() { console.log(\"手指触摸动作开始\") },\r\n radio_touchmove() { console.log(\"手指触摸后移动\") },\r\n radio_touchcancel() { console.log(\"手指触摸动作被打断,如来电提醒,弹窗\") },\r\n radio_touchend() { console.log(\"手指触摸动作结束\") },\r\n radio_tap() { console.log(\"手指触摸后马上离开\") },\r\n radio_longpress() { console.log(\"如果一个组件被绑定了 longpress 事件,那么当用户长按这个组件时,该事件将会被触发。\") },\r\n change_checked_boolean(checked : boolean) { this.checked_boolean = checked },\r\n change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },\r\n confirm_color_input(value : string) { this.color_input = value },\r\n confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },\r\n confirm_borderColor_input(value : string) { this.borderColor_input = value },\r\n confirm_activeBackgroundColor_input(value : string) { this.activeBackgroundColor_input = value },\r\n confirm_activeBorderColor_input(value : string) { this.activeBorderColor_input = value },\r\n confirm_iconColor_input(value : string) { this.iconColor_input = value }\r\n }\r\n }\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.radio.radio)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/radio.html#radio)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=radio&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=radio&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=radio&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=radio&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=radio&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=radio)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=radio&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"radio-group":{"name":"## radio-group","description":"> 组件类型:UniRadioGroupElement \n\n 单选框组","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | - | | 表单的控件名称,作为键值对的一部分与表单(form组件)一同提交 |\n| @change | (event: [UniRadioGroupChangeEvent](#uniradiogroupchangeevent)) => void | - | | radio-group 中的选中项发生变化时触发 change 事件,event.detail = {value: 选中项radio的value} |","event":"\n### 事件\n#### UniRadioGroupChangeEvent\n\n```mermaid\ngraph LR\n \nUniRadioGroupChangeEvent -- Extends --> UniCustomEvent<UniRadioGroupChangeEventDetail>\n style UniCustomEvent<UniRadioGroupChangeEventDetail> color:#42b983\n click UniCustomEvent<UniRadioGroupChangeEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniRadioGroupChangeEventDetail\n\n\n###### UniRadioGroupChangeEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| value | string | 是 | - | - | - |\n\n","example":"","children":"### 子组件 @children-tags \n - [radio](radio.md)","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.radio.radio-group)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/radio.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=radio-group&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=radio-group&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=radio-group&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=radio-group&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=radio-group&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=radio-group)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=radio-group&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"slider":{"name":"## slider","description":"> 组件类型:UniSliderElement \n\n 滑动选择器","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | - | | 表单的控件名称,作为键值对的一部分与表单(form组件)一同提交 |\n| disabled | boolean | - | | 是否禁用 |\n| min | number | 0 | | slider 最小值 |\n| max | number | 100 | | slider 最大值 |\n| step | number | 1 | | slider 步长,取值必须大于 0,并且可被(max - min)整除 |\n| value | number | 0 | | radio当前取值 |\n| activeBackgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | | slider 滑块左侧已选择部分的线条颜色 |\n| backgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#e9e9e9\" | | radio背景条的颜色 |\n| block-size | number | 28 | | radio滑块的大小,取值范围为 12 - 28 |\n| foreColor | string([string.ColorString](/uts/data-type.md#ide-string)) | - | | slider 的滑块背景颜色 |\n| show-value | boolean | false | | 是否显示当前 value |\n| @change | (event: [UniSliderChangeEvent](#unisliderchangeevent)) => void | - | | 完成一次拖动后触发的事件,event.detail = {value: value} |\n| @changing | (event: [UniSliderChangeEvent](#unisliderchangeevent)) => void | - | | 拖动过程中触发的事件,event.detail = {value: value} |\n| ~~block-color~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | | 滑块颜色 (使用foreColor替代) |\n| ~~activeColor~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | | slider 滑块左侧已选择部分的线条颜色 |","event":"\n### 事件\n#### UniSliderChangeEvent\n\n```mermaid\ngraph LR\n \nUniSliderChangeEvent -- Extends --> UniCustomEvent<UniSliderChangeEventDetail>\n style UniCustomEvent<UniSliderChangeEventDetail> color:#42b983\n click UniCustomEvent<UniSliderChangeEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniSliderChangeEventDetail\n\n\n###### UniSliderChangeEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| value | number | 是 | - | - | - |\n\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/slider/slider.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/slider/slider\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/slider/slider\n\n>Template\n```vue\n\r\n\r\n\r\n \r\n uni-app-x\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n 显示当前value\r\n \r\n \r\n \r\n\r\n 设置步进:step=10跳动\r\n \r\n \r\n 0\r\n 100\r\n \r\n \r\n \r\n\r\n 浮点步进:step=0.01跳动\r\n \r\n \r\n \r\n\r\n 设置最小/最大值\r\n \r\n \r\n \r\n\r\n 不同颜色和大小的滑块\r\n \r\n \r\n \r\n 暗黑模式\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n sliderValue: 50,\r\n sliderBlockSize: 20,\r\n sliderBackgroundColor: \"#000000\",\r\n sliderActiveColor: \"#FFCC33\",\r\n sliderBlockColor: \"#8A6DE9\",\r\n // 组件属性 autotest\r\n show_value_boolean: false,\r\n disabled_boolean: false,\r\n min_input: 0,\r\n max_input: 100,\r\n step_input: 1,\r\n value_input: 0,\r\n activeColor_input: \"#007aff\",\r\n backgroundColor_input: \"#e9e9e9\",\r\n block_size_input: 28,\r\n block_color_input: \"#ffffff\",\r\n valueColor: \"#888888\",\r\n };\r\n },\r\n methods: {\r\n sliderChange(e : UniSliderChangeEvent) {\r\n console.log(\"value 发生变化:\" + e.detail.value);\r\n },\r\n slider_click() {\r\n console.log(\"组件被点击时触发\");\r\n },\r\n slider_touchstart() {\r\n console.log(\"手指触摸动作开始\");\r\n },\r\n slider_touchmove() {\r\n console.log(\"手指触摸后移动\");\r\n },\r\n slider_touchcancel() {\r\n console.log(\"手指触摸动作被打断,如来电提醒,弹窗\");\r\n },\r\n slider_touchend() {\r\n console.log(\"手指触摸动作结束\");\r\n },\r\n slider_tap() {\r\n console.log(\"手指触摸后马上离开\");\r\n },\r\n slider_longpress() {\r\n console.log(\r\n \"如果一个组件被绑定了 longpress 事件,那么当用户长按这个组件时,该事件将会被触发。\"\r\n );\r\n },\r\n slider_change() {\r\n console.log(\"完成一次拖动后触发的事件,event.detail = {value: value}\");\r\n },\r\n slider_changing() {\r\n console.log(\"拖动过程中触发的事件,event.detail = {value: value}\");\r\n },\r\n change_show_value_boolean(checked : boolean) {\r\n this.show_value_boolean = checked;\r\n },\r\n change_disabled_boolean(checked : boolean) {\r\n this.disabled_boolean = checked;\r\n },\r\n confirm_min_input(value : number) {\r\n this.min_input = value;\r\n },\r\n confirm_max_input(value : number) {\r\n this.max_input = value;\r\n },\r\n confirm_step_input(value : number) {\r\n this.step_input = value;\r\n },\r\n confirm_value_input(value : number) {\r\n this.value_input = value;\r\n },\r\n confirm_activeColor_input(value : string) {\r\n this.activeColor_input = value;\r\n },\r\n confirm_backgroundColor_input(value : string) {\r\n this.backgroundColor_input = value;\r\n },\r\n confirm_block_size_input(value : number) {\r\n this.block_size_input = value;\r\n },\r\n confirm_block_color_input(value : string) {\r\n this.block_color_input = value;\r\n },\r\n confirm_value_color_input(value : string) {\r\n this.valueColor = value;\r\n },\r\n },\r\n };\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.slider)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/slider.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=slider&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=slider&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=slider&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=slider&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=slider&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=slider)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=slider&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"switch":{"name":"## switch","description":"> 组件类型:UniSwitchElement \n\n 开关选择器","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | - | | 表单的控件名称,作为键值对的一部分与表单(form组件)一同提交 |\n| checked | boolean | - | | 是否选中 |\n| type | string | - | | 样式,有效值:switch, checkbox |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| switch | | - |\n@| checkbox | | - |\n| backgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | - | | switch 的关闭状态背景颜色 |\n| activeBackgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | - | | switch 的开启状态背景颜色 |\n| foreColor | string([string.ColorString](/uts/data-type.md#ide-string)) | - | | switch 的滑块背景颜色 |\n| activeForeColor | string([string.ColorString](/uts/data-type.md#ide-string)) | - | | switch 的开启状态下的滑块背景颜色 |\n| disabled | boolean | - | | 是否禁用 |\n| @change | (event: [UniSwitchChangeEvent](#uniswitchchangeevent)) => void | - | | checked 改变时触发 change 事件,event.detail={ value:checked} |\n| ~~color~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | - | | switch 的颜色,同 css 的 color (使用foreColor替代) |","event":"\n### 事件\n#### UniSwitchChangeEvent\n\n```mermaid\ngraph LR\n \nUniSwitchChangeEvent -- Extends --> UniCustomEvent<UniSwitchChangeEventDetail>\n style UniCustomEvent<UniSwitchChangeEventDetail> color:#42b983\n click UniCustomEvent<UniSwitchChangeEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniSwitchChangeEventDetail\n\n\n###### UniSwitchChangeEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| value | boolean | 是 | - | - | - |\n\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/switch/switch.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/switch/switch\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/switch/switch\n\n>Template\n```vue\n\r\n \r\n \r\n 默认样式\r\n \r\n \r\n \r\n \r\n 暗黑样式\r\n \r\n \r\n \r\n \r\n 禁用样式\r\n \r\n \r\n \r\n \r\n 不同颜色和尺寸的switch\r\n \r\n \r\n \r\n \r\n 推荐展示样式\r\n \r\n \r\n \r\n 开启中\r\n \r\n \r\n \r\n 关闭\r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n title: 'switch 开关',\r\n checked: true,\r\n color: '#FFCC33',\r\n clickCheckedValue: true,\r\n testVerifyEvent: false,\r\n }\r\n },\r\n methods: {\r\n switch1Change: function (e : UniSwitchChangeEvent) {\r\n this.clickCheckedValue = e.detail.value\r\n console.log('switch1 发生 change 事件,携带值为', e.detail.value)\r\n\r\n // 仅测试\r\n this.testVerifyEvent = (e.type == 'change' && (e.target?.tagName ?? '') == \"SWITCH\")\r\n },\r\n switch2Change: function (e : UniSwitchChangeEvent) {\r\n console.log('switch2 发生 change 事件,携带值为', e.detail.value)\r\n }\r\n }\r\n }\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.switch)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/switch.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=switch&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=switch&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=switch&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=switch&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=switch&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=switch)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=switch&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"textarea":{"name":"## textarea","description":"> 组件类型:[UniTextareaElement](/dom/unitextareaelement.md) \n\n 多行输入框","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | - | | 表单的控件名称,作为键值对的一部分与表单(form组件)一同提交 |\n| value | string | \"\" | | 输入框的初始内容 |\n| placeholder | string | \"\" | | 输入框为空时占位符 |\n| placeholder-style | string | \"\" | | 指定 placeholder 的样式,目前仅支持color,font-size和font-weight |\n| placeholder-class | string([string.ClassString](/uts/data-type.md#ide-string)) | \"\" | | 指定 placeholder 的样式类,目前仅支持color,font-size和font-weight |\n| maxlength | number | \"不限制长度\" | | 最大输入长度,0和正数为合法值,非法值的时候不限制最大长度 |\n| auto-focus | boolean | false | | 自动获取焦点,与`focus`属性对比,此属性只会首次生效。 |\n| focus | boolean | false | | 获取焦点 |\n| confirm-type | return \\| send \\| search \\| next \\| go \\| done | \"return\" | | 设置键盘右下角按钮的文字 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| return | | 换行 |\n@| send | | 发送 |\n@| search | | 搜索 |\n@| next | | 下一个 |\n@| go | | 前往 |\n@| done | | 完成 |\n| cursor | number | 0 | | 指定focus时的光标位置 |\n| confirm-hold | boolean | false | | 点击键盘右下角按钮时是否保持键盘不收起 |\n| auto-height | boolean | false | | 是否自动增高,设置auto-height时,style.height不生效 |\n| cursor-spacing | number | 0 | | 指定光标与键盘的距离,单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 |\n| cursor-color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"\" | | 指定光标颜色 |\n| selection-start | number | -1 | | 光标起始位置,自动聚集时有效,需与selection-end搭配使用 |\n| selection-end | number | -1 | | 光标结束位置,自动聚集时有效,需与selection-satrt搭配使用 |\n| adjust-position | boolean | true | | 键盘弹起时,是否自动上推页面 |\n| hold-keyboard | boolean | false | | focus时,点击页面的时候不收起键盘 |\n| @confirm | (event: [UniInputConfirmEvent](#uniinputconfirmevent)) => void | - | | 点击完成时, 触发 confirm 事件,event.detail = {value: value} |\n| @input | (event: [UniInputEvent](#uniinputevent)) => void | - | | 当键盘输入时,触发 input 事件,event.detail = {value, cursor}, @input 处理函数的返回值并不会反映到 textarea 上 |\n| @linechange | (event: [UniTextareaLineChangeEvent](#unitextarealinechangeevent)) => void | - | | 输入框行数变化时调用,event.detail = {height: 0, heightRpx: 0, lineCount: 0} |\n| @blur | (event: [UniTextareaBlurEvent](#unitextareablurevent)) => void | - | | 输入框失去焦点时触发,event.detail = {value, cursor} |\n| @keyboardheightchange | (event: [UniInputKeyboardHeightChangeEvent](#uniinputkeyboardheightchangeevent)) => void | - | | 键盘高度发生变化的时候触发此事件,event.detail = {height: height, duration: duration} |\n| @focus | (event: [UniTextareaFocusEvent](#unitextareafocusevent)) => void | - | | 输入框聚焦时触发,event.detail = { value, height },height 为键盘高度,在基础库 1.9.90 起支持 |","event":"\n### 事件\n#### UniInputConfirmEvent\n\n```mermaid\ngraph LR\n \nUniInputConfirmEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputConfirmEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputConfirmEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | 输入框内容 |\n\n\n#### UniInputEvent\n\n```mermaid\ngraph LR\n \nUniInputEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | 输入框内容 |\n@| cursor | number | 是 | - | - | 光标的位置 |\n@| keyCode | number | 是 | - | - | 输入字符的Unicode值 |\n\n\n#### UniTextareaLineChangeEvent\n\n```mermaid\ngraph LR\n \nUniTextareaLineChangeEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniTextareaLineChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniTextareaLineChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| lineCount | number | 是 | - | - | 行数 |\n@| heightRpx | number | 是 | - | - | textarea的高度 |\n@| height | number | 是 | - | - | textarea的高度 |\n\n\n#### UniTextareaBlurEvent\n\n```mermaid\ngraph LR\n \nUniTextareaBlurEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniTextareaBlurEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniTextareaBlurEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | 输入框内容 |\n@| cursor | number | 是 | - | - | 选择区域的起始位置 |\n\n\n#### UniInputKeyboardHeightChangeEvent\n\n```mermaid\ngraph LR\n \nUniInputKeyboardHeightChangeEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputKeyboardHeightChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputKeyboardHeightChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| height | number | 是 | - | - | 键盘高度 |\n@| duration | number | 是 | - | - | 持续时间 |\n\n\n#### UniTextareaFocusEvent\n\n```mermaid\ngraph LR\n \nUniTextareaFocusEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniTextareaFocusEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniTextareaFocusEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| height | number | 是 | - | | 键盘高度 |\n@| value | string | 是 | - | - | 输入框内容 |\n\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/textarea/textarea.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/textarea/textarea\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/textarea/textarea\n\n>Template\n```vue\n\r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n \r\n maxlength 输入最大长度为10\r\n \r\n \r\n \r\n \r\n\r\n \r\n cursor-spacing、placeholder-class、placeholder-style例子\r\n \r\n \r\n \r\n \r\n \r\n 设置输入框聚焦时光标的起始位置和结束位置(点击生效)\r\n \r\n \r\n \r\n \r\n\r\n \r\n 设置hold-keyboard\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n 同时存在 v-model 和 value\r\n \r\n \r\n \r\n \r\n\r\n \r\n 设置adjust-position\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n import { ItemType } from '@/components/enum-data/enum-data'\r\n export default {\r\n data() {\r\n return {\r\n adjust_position_boolean: false,\r\n show_confirm_bar_boolean: false,\r\n fixed_boolean: false,\r\n auto_height_boolean: false,\r\n confirm_hold_boolean: false,\r\n focus_boolean: true,\r\n auto_focus_boolean: false,\r\n default_value: \"1\\n2\\n3\\n4\\n5\\n6\",\r\n inputmode_enum: [{ \"value\": 1, \"name\": \"text\" }, { \"value\": 2, \"name\": \"decimal\" }, { \"value\": 3, \"name\": \"numeric\" }, { \"value\": 4, \"name\": \"tel\" }, { \"value\": 5, \"name\": \"search\" }, { \"value\": 6, \"name\": \"email\" }, { \"value\": 7, \"name\": \"url\" }, { \"value\": 0, \"name\": \"none\" }] as ItemType[],\r\n confirm_type_list: [{ \"value\": 0, \"name\": \"return\" }, { \"value\": 1, \"name\": \"done\" }, { \"value\": 2, \"name\": \"send\" }, { \"value\": 3, \"name\": \"search\" }, { \"value\": 4, \"name\": \"next\" }, { \"value\": 5, \"name\": \"go\" }] as ItemType[],\r\n cursor_color: \"#3393E2\",\r\n cursor: 0,\r\n inputmode_enum_current: 0,\r\n confirm_type_current: 0,\r\n placeholder_value: \"请输入\",\r\n defaultModel: '123',\r\n textareaMaxLengthValue: \"\",\r\n selectionStart: -1,\r\n selectionEnd: -1,\r\n hold_keyboard: false,\r\n adjust_position: false\r\n }\r\n },\r\n\r\n methods: {\r\n textarea_click() { console.log(\"组件被点击时触发\") },\r\n textarea_touchstart() { console.log(\"手指触摸动作开始\") },\r\n textarea_touchmove() { console.log(\"手指触摸后移动\") },\r\n textarea_touchcancel() { console.log(\"手指触摸动作被打断,如来电提醒,弹窗\") },\r\n textarea_touchend() { console.log(\"手指触摸动作结束\") },\r\n textarea_tap() { console.log(\"手指触摸后马上离开\") },\r\n textarea_longpress() { console.log(\"如果一个组件被绑定了 longpress 事件,那么当用户长按这个组件时,该事件将会被触发。\") },\r\n textarea_confirm() { console.log(\"点击完成时, 触发 confirm 事件,event.detail = {value: value}\") },\r\n textarea_input() { console.log(\"当键盘输入时,触发 input 事件,event.detail = {value, cursor}, @input 处理函数的返回值并不会反映到 textarea 上\") },\r\n textarea_linechange() { console.log(\"输入框行数变化时调用,event.detail = {height: 0, height: 0, lineCount: 0}\") },\r\n textarea_blur() { console.log(\"输入框失去焦点时触发,event.detail = {value, cursor}\") },\r\n textarea_keyboardheightchange() { console.log(\"键盘高度发生变化的时候触发此事件,event.detail = {height: height, duration: duration}\") },\r\n textarea_focus() { console.log(\"输入框聚焦时触发,event.detail = { value, height },height 为键盘高度\") },\r\n change_adjust_position_boolean(checked : boolean) { this.adjust_position_boolean = checked },\r\n change_show_confirm_bar_boolean(checked : boolean) { this.show_confirm_bar_boolean = checked },\r\n change_fixed_boolean(checked : boolean) { this.fixed_boolean = checked },\r\n change_auto_height_boolean(checked : boolean) { this.auto_height_boolean = checked },\r\n change_confirm_hold_boolean(checked : boolean) { this.confirm_hold_boolean = checked },\r\n change_focus_boolean(checked : boolean) { this.focus_boolean = checked },\r\n change_auto_focus_boolean(checked : boolean) { this.auto_focus_boolean = checked },\r\n change_cursor_color_boolean(checked : boolean) { if (checked) { this.cursor_color = \"transparent\" } else { this.cursor_color = \"#3393E2\" } },\r\n radio_change_inputmode_enum(checked : number) { this.inputmode_enum_current = checked },\r\n radio_change_confirm_type(checked : number) { this.confirm_type_current = checked },\r\n setSelection: function (selectionStart : number, selectionEnd : number) {\r\n uni.getElementById(\"textarea-instance-2\")?.focus()\r\n this.selectionStart = selectionStart;\r\n this.selectionEnd = selectionEnd;\r\n },\r\n onSelectionBlurChange() {\r\n this.selectionEnd = 0;\r\n },\r\n changeHoldKeyboard(event : UniSwitchChangeEvent) {\r\n const checked = event.detail.value;\r\n this.hold_keyboard = checked;\r\n },\r\n changeAdjustPosition(event : UniSwitchChangeEvent) {\r\n const checked = event.detail.value;\r\n this.adjust_position = checked;\r\n }\r\n }\r\n }\r\n\n```\n\n:::","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.textarea)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/textarea.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=textarea&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=textarea&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=textarea&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=textarea&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=textarea&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=textarea)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=textarea&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"navigator":{"name":"## navigator","description":"> 组件类型:UniNavigatorElement \n\n 页面链接","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| target | string | - | | 在哪个目标上发生跳转,默认当前应用 |\n| url | string([string.PageURIString](/uts/data-type.md#ide-string)) | - | | 当前应用内的跳转链接 |\n| open-type | string | \"navigate\" | | 跳转方式 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| navigate | | 对应 uni.navigateTo 或 navigateToMiniProgram 的功能 |\n@| redirect | | 对应 uni.redirectTo 的功能 |\n@| switchTab | | 对应 uni.switchTab 的功能 |\n@| reLaunch | | 对应 uni.reLaunch 的功能 |\n@| navigateBack | | 对应 uni.navigateBack 的功能 |\n| delta | number | - | | 当 open-type 为 navigateBack 时有效,表示回退的层数 |\n| app-id | string | - | - | 当target=\"miniProgram\"时有效,要打开的小程序 appId |\n| path | string | - | | 当target=\"miniProgram\"时有效,打开的页面路径,如果为空则打开首页 |\n| extra-data | object | - | - | 当target=\"miniProgram\"时有效,需要传递给目标应用的数据,目标应用可在 App.onLaunch(),App.onShow() 中获取到这份数据 |\n| version | string | - | - | 当target=\"miniProgram\"时有效,要打开的小程序版本,有效值 develop(开发版),trial(体验版),release(正式版),仅在当前小程序为开发版或体验版时此参数有效;如果当前小程序是体验版或正式版,则打开的小程序必定是正式版 |\n| animation-type | string | \"pop-in/out\" | | 当 open-type=\"navigateTo\" 或 open-type=\"navigateBack\" 时有效,窗口的显示/关闭的动画类型。 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| auto | - | 自动选择动画效果 |\n@| none | - | 无动画效果 |\n@| slide-in-right | - | 从右侧横向滑动效果 |\n@| slide-in-left | - | 左侧横向滑动效果 |\n@| slide-in-top | - | 从上侧竖向滑动效果 |\n@| slide-in-bottom | - | 从下侧竖向滑动效果 |\n@| fade-in | - | 从透明到不透明逐渐显示效果 |\n@| zoom-out | - | 从小到大逐渐放大显示效果 |\n@| zoom-fade-out | - | 从小到大逐渐放大并且从透明到不透明逐渐显示效果 |\n@| pop-in | - | 从右侧平移入栈动画效果 |\n@| slide-out-right | - | 横向向右侧滑出屏幕动画 |\n@| slide-out-left | - | 横向向左侧滑出屏幕动画 |\n@| slide-out-top | - | 竖向向上侧滑出屏幕动画 |\n@| slide-out-bottom | - | 竖向向下侧滑出屏幕动画 |\n@| fade-out | - | 从不透明到透明逐渐隐藏动画 |\n@| zoom-in | - | 从大逐渐缩小关闭动画 |\n@| zoom-fade-in | - | 从大逐渐缩小并且从不透明到透明逐渐隐藏关闭动画 |\n@| pop-out | - | 从右侧平移出栈动画效果 |\n| animation-duration | number | 300 | | 当 open-type=\"navigateTo\" 或 open-type=\"navigateBack\" 时有效,窗口的显示/关闭动画的持续时间。 |\n| hover-class | string | - | - | 指定按下去的样式类。当 hover-class=\"none\" 时,没有点击态效果 |\n| hover-stop-propagation | boolean | - | - | 指定是否阻止本节点的祖先节点出现点击态 |\n| hover-start-time | number | - | - | 按住后多久出现点击态,单位毫秒 |\n| hover-stay-time | number | - | - | 手指松开后点击态保留时间,单位毫秒 |\n| render-link | boolean | true | | 是否给 navigator 组件加一层 a 标签控制 ssr 渲染 |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/navigator/navigator.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/navigator/navigator\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/navigator/navigator\n\n>Template\n```vue\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n 两端对齐样式测试\r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n title: 'navigator'\r\n }\r\n }\r\n }\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.navigation.navigator)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/navigator.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=navigator&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=navigator&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=navigator&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=navigator&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=navigator&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=navigator)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=navigator&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"image":{"name":"## image","description":"> 组件类型:[UniImageElement](/dom/uniimageelement.md) \n\n 图片","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| src | string([string.ImageURIString](/uts/data-type.md#ide-string)) | - | | 图片资源地址 |\n| mode | string | \"scaleToFill\" | | 图片裁剪、缩放的模式 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| scaleToFill | | 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 |\n@| aspectFit | | 保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。 |\n@| aspectFill | | 保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取 |\n@| widthFix | | 宽度不变,高度自动变化,保持原图宽高比不变 |\n@| heightFix | | 高度不变,宽度自动变化,保持原图宽高比不变 |\n@| top | | 不缩放图片,只显示图片的顶部区域 |\n@| bottom | | 不缩放图片,只显示图片的底部区域 |\n@| center | | 不缩放图片,只显示图片的中间区域 |\n@| left | | 不缩放图片,只显示图片的左边区域 |\n@| right | | 不缩放图片,只显示图片的右边区域 |\n@| top left | | 不缩放图片,只显示图片的左上边区域 |\n@| top right | | 不缩放图片,只显示图片的右上边区域 |\n@| bottom left | | 不缩放图片,只显示图片的左下边区域 |\n@| bottom right | | 不缩放图片,只显示图片的右下边区域 |\n| lazy-load | boolean | false | | 图片懒加载。只针对page与scroll-view下的image有效。 安卓默认懒加载不支持修改 |\n| fade-show | boolean | false | | 图片显示动画效果 |\n| draggable | boolean | false | | 鼠标长按是否能拖动图片(仅H5平台) |\n| @error | (event: [UniImageErrorEvent](#uniimageerrorevent)) => void | - | | 图片加载错误时触发,event.detail = { errMsg } |\n| @load | (event: [UniImageLoadEvent](#uniimageloadevent)) => void | - | | 图片加载完成时触发,event.detail = { width: '图片宽度px', height: '图片高度px' } |","event":"\n### 事件\n#### UniImageErrorEvent\n\n```mermaid\ngraph LR\n \nUniImageErrorEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniImageErrorEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniImageErrorEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| errMsg | string | 是 | - | - | 错误信息 |\n\n\n#### UniImageLoadEvent\n\n```mermaid\ngraph LR\n \nUniImageLoadEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniImageLoadEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniImageLoadEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| width | number | 是 | - | - | 图片宽度 |\n@| height | number | 是 | - | - | 图片高度 |\n\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/image/image.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/image/image\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/image/image\n\n>Template\n```vue\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n title: 'image',\r\n imageSrc: \"/static/test-image/logo.png\" as string.ImageURIString,\r\n loadError: false,\r\n // 自动化测试\r\n autoTest: false,\r\n setCookieImage: \"\",\r\n verifyCookieImage: \"\",\r\n eventLoad: null as UTSJSONObject | null,\r\n eventError: null as UTSJSONObject | null\r\n }\r\n },\r\n methods: {\r\n error(event : ImageErrorEvent) {\r\n this.loadError = true\r\n console.log(event.type, event.detail);\r\n if (this.autoTest) {\r\n this.eventError = {\r\n \"tagName\": event.target?.tagName,\r\n \"type\": event.type,\r\n // \"errMsg\": event.detail.errMsg\r\n };\r\n }\r\n },\r\n load(event : ImageLoadEvent) {\r\n console.log(event.type, event.detail);\r\n if (this.autoTest) {\r\n this.eventLoad = {\r\n \"tagName\": event.target?.tagName,\r\n \"type\": event.type,\r\n \"width\": event.detail.width,\r\n \"height\": event.detail.height\r\n };\r\n }\r\n },\r\n imageFormat() {\r\n uni.navigateTo({\r\n url: '/pages/component/image/image-format'\r\n });\r\n },\r\n imageMode() {\r\n uni.navigateTo({\r\n url: '/pages/component/image/image-mode'\r\n });\r\n },\r\n imagePath() {\r\n uni.navigateTo({\r\n url: '/pages/component/image/image-path'\r\n });\r\n },\r\n imageLarge() {\r\n uni.navigateTo({\r\n url: '/pages/component/image/image-large'\r\n });\r\n }\r\n }\r\n }\r\n\n```\n\n:::","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.media.image)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/image.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=image&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=image&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=image&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=image&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=image&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=image)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=image&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"video":{"name":"## video","description":"> 组件类型:[UniVideoElement](/dom/univideoelement.md) \n\n 视频","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| loop | boolean | false | | 是否循环播放 |\n| src | string([string.VideoURIString](/uts/data-type.md#ide-string)) | - | | 视频资源地址 |\n| initial-time | number | 0 | | 指定视频初始播放位置 |\n| duration | number | - | | 指定视频长度 |\n| controls | boolean | true | | 是否显示默认播放控件(播放/暂停按钮、播放进度、时间) |\n| danmu-list | array | - | | 弹幕列表 |\n| danmu-btn | boolean | false | | 是否显示弹幕按钮,只在初始化时有效,不能动态变更 |\n| enable-danmu | boolean | false | | 是否展示弹幕,只在初始化时有效,不能动态变更 |\n| autoplay | boolean | false | | 是否自动播放 |\n| muted | boolean | false | | 是否静音播放 |\n| page-gesture | boolean | false | | 在非全屏模式下,是否开启亮度与音量调节手势 |\n| direction | number | - | | 设置全屏时视频的方向,不指定则根据宽高比自动判断。有效值为 0(正常竖向), 90(屏幕逆时针90度), -90(屏幕顺时针90度) |\n| show-progress | boolean | true | | 若不设置,宽度大于240时才会显示 |\n| show-fullscreen-btn | boolean | true | | 是否显示全屏按钮 |\n| show-play-btn | boolean | true | | 是否显示视频底部控制栏的播放按钮 |\n| show-center-play-btn | boolean | true | | 是否显示视频中间的播放按钮 |\n| show-loading | boolean | true | | 是否显示loading控件 |\n| enable-progress-gesture | boolean | true | | 是否开启控制进度的手势 |\n| object-fit | string | \"contain\" | | 当视频大小与 video 容器大小不一致时,视频的表现形式。 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| contain | | 包含 |\n@| fill | | 填充 |\n@| cover | | 覆盖 |\n| poster | string | - | | 视频封面的图片网络资源地址,如果 controls 属性值为 false 则设置 poster 无效 |\n| show-mute-btn | boolean | false | | 是否显示静音按钮 |\n| title | string | - | | 视频的标题,全屏时在顶部展示 |\n| play-btn-position | string | - | | 播放按钮的位置 |\n| enable-play-gesture | boolean | false | | 是否开启播放手势,即双击切换播放、暂停 |\n| auto-pause-if-navigate | boolean | - | | 当跳转到其它页面时,是否自动暂停本页面的视频 |\n| auto-pause-if-open-native | boolean | - | | 当跳转到其它小程序宿主原生页面时,是否自动暂停本页面的视频 |\n| vslide-gesture | boolean | false | | 在非全屏模式下,是否开启亮度与音量调节手势(同 page-gesture) |\n| vslide-gesture-in-fullscreen | boolean | true | | 在全屏模式下,是否开启亮度与音量调节手势 |\n| poster-for-crawler | string | - | | 用于给搜索等场景作为视频封面展示,建议使用无播放 icon 的视频封面图,只支持网络地址 |\n| codec | string | \"hardware\" | | 解码器选择 |\n| http-cache | boolean | false | | 是否对 http、https 视频源开启本地缓存 |\n| play-strategy | number | 0 | | 播放策略 |\n| is-live | boolean | - | | 是否为直播源 |\n| @loadedmetadata | (event: [UniVideoLoadedMetadataEvent](#univideoloadedmetadataevent)) => void | - | | 视频元数据加载完成时触发 |\n| @play | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 当开始/继续播放时触发 |\n| @pause | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 当暂停播放时触发 |\n| @ended | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 当播放到视频末尾时触发 |\n| @timeupdate | (event: [UniVideoTimeUpdateEvent](#univideotimeupdateevent)) => void | - | | 播放进度变化时触发,event.detail = { currentTime, duration }。触发频率 250ms 一次 |\n| @fullscreenchange | (event: [UniVideoFullScreenChangeEvent](#univideofullscreenchangeevent)) => void | - | | 当视频进入和退出全屏时触发,event.detail = { fullScreen, direction },direction取为 vertical 或 horizontal |\n| @waiting | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 视频出现缓冲时触发 |\n| @error | (event: [UniVideoErrorEvent](#univideoerrorevent)) => void | - | | 播放出错时触发 |\n| @progress | (event: [UniVideoProgressEvent](#univideoprogressevent)) => void | - | | 加载进度变化时触发,只支持一段加载。event.detail = { buffered },百分比 |\n| @fullscreenclick | (event: [UniVideoFullScreenClickEvent](#univideofullscreenclickevent)) => void | - | | 视频全屏播放时点击屏幕触发。event.detail = { screenX, screenY, screenWidth, screenHeight } |\n| @controlstoggle | (event: [UniVideoControlsToggleEvent](#univideocontrolstoggleevent)) => void | - | | 切换 controls 显示隐藏时触发。event.detail = { show } |","event":"\n### 事件\n#### UniVideoTimeUpdateEvent\ntimeupdate 事件
播放进度变化时触发\n\n##### UniVideoTimeUpdateEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniVideoTimeUpdateEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| currentTime | number | 是 | - | - | 当前进度 |\n@| duration | number | 是 | - | - | 总进度 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) | 否 | - | - | 触发事件的组件 |\n| currentTarget | [UniElement](/dom/unielement.md) | 否 | - | - | 当前组件 |\n| timeStamp | Long | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniVideoTimeUpdateEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | - | 阻止当前事件的默认行为 |\n\n#### UniVideoFullScreenChangeEvent\nfullscreenchange 事件
当视频进入和退出全屏是触发\n\n##### UniVideoFullScreenChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniVideoFullScreenChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| fullScreen | boolean | 是 | - | - | 是否全屏 |\n@| direction | string | 是 | - | - | 横竖屏,取值 vertical 或 horizontal |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) | 否 | - | - | 触发事件的组件 |\n| currentTarget | [UniElement](/dom/unielement.md) | 否 | - | - | 当前组件 |\n| timeStamp | Long | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniVideoFullScreenChangeEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | - | 阻止当前事件的默认行为 |\n\n#### UniVideoErrorEvent\nerror 事件
视频播放出错时触发\n\n##### UniVideoErrorEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **VideoError** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| errCode | number | 是 | - | - | 统一错误码
100001 网络错误
200001 内部错误
300001 SDK错误 |\n@@| 合法值 | 兼容性 | 描述 |\n@@| :- | :-: | :- |\n@@| 100001 | - | - |\n@@| 200001 | - | - |\n@@| 300001 | - | - |\n@| errSubject | string | 是 | - | - | 统一错误主题(模块)名称 |\n@| data | any | 否 | - | - | 错误信息中包含的数据 |\n@| cause | [Error](https://uniapp.dcloud.net.cn/tutorial/err-spec.html#unierror) | 否 | - | - | 源错误信息,可以包含多个错误,详见SourceError |\n@| errMsg | string | 是 | - | - | - |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) | 否 | - | - | 触发事件的组件 |\n| currentTarget | [UniElement](/dom/unielement.md) | 否 | - | - | 当前组件 |\n| timeStamp | Long | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniVideoErrorEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | - | 阻止当前事件的默认行为 |\n\n#### UniVideoProgressEvent\nprogress 事件
加载进度变化时触发\n\n##### UniVideoProgressEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniVideoProgressEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| buffered | number | 是 | - | - | 加载进度百分比 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) | 否 | - | - | 触发事件的组件 |\n| currentTarget | [UniElement](/dom/unielement.md) | 否 | - | - | 当前组件 |\n| timeStamp | Long | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniVideoProgressEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | - | 阻止当前事件的默认行为 |\n\n#### UniVideoFullScreenClickEvent\nfullscreenclick 事件
视频播放全屏播放时点击事件\n\n##### UniVideoFullScreenClickEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniVideoFullScreenClickEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| screenX | number | 是 | - | - | 点击点相对于屏幕左侧边缘的 X 轴坐标 |\n@| screenY | number | 是 | - | - | 点击点相对于屏幕顶部边缘的 Y 轴坐标 |\n@| screenWidth | number | 是 | - | - | 屏幕总宽度 |\n@| screenHeight | number | 是 | - | - | 屏幕总高度 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) | 否 | - | - | 触发事件的组件 |\n| currentTarget | [UniElement](/dom/unielement.md) | 否 | - | - | 当前组件 |\n| timeStamp | Long | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniVideoFullScreenClickEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | - | 阻止当前事件的默认行为 |\n\n#### UniVideoControlsToggleEvent\ncontrolstoggle 事件
切换播放控件显示隐藏时触发\n\n##### UniVideoControlsToggleEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniVideoControlsToggleEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| show | boolean | 是 | - | - | 是否显示 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) | 否 | - | - | 触发事件的组件 |\n| currentTarget | [UniElement](/dom/unielement.md) | 否 | - | - | 当前组件 |\n| timeStamp | Long | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniVideoControlsToggleEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | - | 阻止当前事件的默认行为 |\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/video/video.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/video/video\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/video/video\n\n>Template\n```vue\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n 子组件实现快进、快退、发送弹幕功能(全屏后显示)\r\n \r\n \r\n \r\n \r\n API示例\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n 属性示例\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n import { ItemType } from '@/components/enum-data/enum-data';\r\n // #ifdef APP-ANDROID\r\n import ViewGroup from 'android.view.ViewGroup';\r\n // #endif\r\n export default {\r\n onReady() {\r\n this.videoContext = uni.createVideoContext('video');\r\n // this.videoContext = uni.createVideoContext('video', this);\r\n },\r\n data() {\r\n return {\r\n videoContext: null as VideoContext | null,\r\n // 属性\r\n src: \"https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.mp4\",\r\n autoplay: false,\r\n loop: false,\r\n muted: false,\r\n initialTime: 0,\r\n duration: 0,\r\n controls: true,\r\n danmuList: [{\r\n text: '要显示的文本',\r\n color: '#FF0000',\r\n time: 3\r\n }, {\r\n text: '要显示的文本2',\r\n color: '#31ff23',\r\n time: 5\r\n }, {\r\n text: '要显示的文本3',\r\n color: '#f13ef8',\r\n time: 7\r\n }, {\r\n text: '要显示的文本4',\r\n color: '#4972f8',\r\n time: 9\r\n }, {\r\n text: '要显示的文本5',\r\n color: '#000000',\r\n time: 11\r\n }] as Array,\r\n danmuBtn: false,\r\n enableDanmu: true,\r\n pageGesture: false,\r\n direction: -1,\r\n directionItemTypes: [{ \"value\": 0, \"name\": \"0(正常竖向)\" }, { \"value\": 1, \"name\": \"90(屏幕逆时针90度)\" }, { \"value\": 2, \"name\": \"-90(屏幕顺时针90度)\" }] as ItemType[],\r\n directionItems: [0, 90, -90],\r\n showProgress: true,\r\n showFullscreenBtn: true,\r\n showPlayBtn: true,\r\n showCenterPlayBtn: true,\r\n showLoading: true,\r\n enableProgressGesture: true,\r\n objectFit: \"contain\",\r\n objectFitItemTypes: [{ \"value\": 0, \"name\": \"contain(包含)\" }, { \"value\": 1, \"name\": \"fill(填充)\" }, { \"value\": 2, \"name\": \"cover(覆盖)\" }] as ItemType[],\r\n objectFitItems: [\"contain\", \"fill\", \"cover\"],\r\n poster: \"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-android.png\",\r\n showMuteBtn: false,\r\n title: \"video-component\",\r\n enablePlayGesture: false,\r\n vslideGesture: false,\r\n vslideGestureInFullscreen: true,\r\n codec: \"hardware\",\r\n codecItemTypes: [{ \"value\": 0, \"name\": \"hardware(硬解码)\" }, { \"value\": 1, \"name\": \"software(软解码)\" }] as ItemType[],\r\n codecItems: [\"hardware\", \"software\"],\r\n httpCache: true,\r\n playStrategy: 0,\r\n playStrategyItemTypes: [{ \"value\": 0, \"name\": \"0(普通模式)\" }, { \"value\": 1, \"name\": \"1(平滑播放模式)\" }, { \"value\": 1, \"name\": \"2(M3U8优化模式)\" }] as ItemType[],\r\n playStrategyItems: [0, 1, 2],\r\n header: {\r\n 'User-Agent': 'User-Agent test',\r\n 'header': 'header test',\r\n 'cookie': 'cookie test'\r\n } as UTSJSONObject,\r\n // API\r\n pos: 0,\r\n requestFullScreenOptions: null as RequestFullScreenOptions | null,\r\n danmu: {\r\n text: '要显示的文本',\r\n color: '#FF0000'\r\n } as Danmu,\r\n rate: 1,\r\n rateItemTypes: [{ \"value\": 0, \"name\": \"0.5\" }, { \"value\": 1, \"name\": \"0.8\" }, { \"value\": 2, \"name\": \"1.0\" }, { \"value\": 3, \"name\": \"1.25\" }, { \"value\": 4, \"name\": \"1.5\" }] as ItemType[],\r\n rateItems: [0.5, 0.8, 1.0, 1.25, 1.5],\r\n subCompEnable: false,\r\n subCompShow: false,\r\n curPos: 0,\r\n endPos: 0,\r\n // 自动化测试\r\n autoTest: false,\r\n isPlaying: false,\r\n isPause: false,\r\n isError: false,\r\n eventPlay: null as UTSJSONObject | null,\r\n eventPause: null as UTSJSONObject | null,\r\n eventEnded: null as UTSJSONObject | null,\r\n eventTimeupdate: null as UTSJSONObject | null,\r\n eventFullscreenchange: null as UTSJSONObject | null,\r\n eventWaiting: null as UTSJSONObject | null,\r\n eventError: null as UTSJSONObject | null,\r\n eventProgress: null as UTSJSONObject | null,\r\n eventFullscreenclick: null as UTSJSONObject | null,\r\n eventControlstoggle: null as UTSJSONObject | null\r\n }\r\n },\r\n onLoad() {\r\n },\r\n methods: {\r\n // API\r\n play: function () {\r\n console.log(\"play\");\r\n this.videoContext?.play();\r\n },\r\n pause: function () {\r\n console.log(\"pause\");\r\n (uni.getElementById(\"video\") as UniVideoElement).pause(); //as写法测试。注意id不对时as会崩溃\r\n // this.videoContext?.pause();\r\n },\r\n seek: function (pos : number) {\r\n console.log(\"seek -> \" + pos);\r\n this.videoContext?.seek(pos);\r\n },\r\n onSeekInput: function (event : UniInputEvent) {\r\n this.pos = parseInt(event.detail.value);\r\n },\r\n requestFullScreen: function () {\r\n console.log(\"requestFullScreen -> \" + this.requestFullScreenOptions);\r\n this.videoContext?.requestFullScreen(this.requestFullScreenOptions);\r\n },\r\n exitFullScreen: function () {\r\n console.log(\"exitFullScreen\");\r\n this.videoContext?.exitFullScreen();\r\n },\r\n stop: function () {\r\n console.log(\"stop\");\r\n uni.getElementById(\"video\")?.stop(); //泛型写法测试\r\n // this.videoContext?.stop();\r\n },\r\n sendDanmu: function () {\r\n console.log(\"sendDanmu -> \" + this.danmu);\r\n this.videoContext?.sendDanmu(this.danmu);\r\n },\r\n onSendDanmuInput: function (event : UniInputEvent) {\r\n let json = JSON.parse(event.detail.value)\r\n if (json == null) return;\r\n this.danmu = json as Danmu;\r\n },\r\n playbackRate: function () {\r\n console.log(\"playbackRate -> \" + this.rate);\r\n this.videoContext?.playbackRate(this.rate);\r\n },\r\n onPlaybackRateChange: function (value : number) {\r\n this.rate = this.rateItems[value];\r\n },\r\n fastBackward: function () {\r\n let pos = this.curPos - 15;\r\n if (pos < 0) pos = 0;\r\n this.seek(pos);\r\n },\r\n fastForward: function () {\r\n let pos = this.curPos + 15;\r\n if (pos > this.endPos) pos = this.endPos;\r\n this.seek(pos);\r\n },\r\n onSendDanmuConfirm: function (event : UniInputConfirmEvent) {\r\n this.videoContext?.sendDanmu({\r\n text: event.detail.value,\r\n color: '#ff0000'\r\n } as Danmu);\r\n },\r\n onSendDanmuKeyboardHeightChange: function (event : UniInputKeyboardHeightChangeEvent) {\r\n const element = uni.getElementById('input-send-danmu') as UniElement;\r\n if (event.detail.height.toInt() == 0) {\r\n element.style.setProperty('bottom', '50px');\r\n } else {\r\n element.style.setProperty('bottom', event.detail.height + element.getBoundingClientRect().height);\r\n }\r\n },\r\n onSendDanmuBlur: function (_ : UniInputBlurEvent) {\r\n (uni.getElementById('input-send-danmu') as UniElement).style.setProperty('bottom', '50px');\r\n },\r\n // 属性\r\n onSrcComfirm: function (event : UniInputConfirmEvent) {\r\n let value = event.detail.value;\r\n if (value == '') return;\r\n this.src = value;\r\n console.log(\"src -> \" + this.src)\r\n },\r\n onAutoplayChange: function (value : boolean) {\r\n this.autoplay = value;\r\n console.log(\"autoplay -> \" + this.autoplay)\r\n },\r\n onLoopChange: function (value : boolean) {\r\n this.loop = value;\r\n console.log(\"loop -> \" + this.loop)\r\n },\r\n onMutedChange: function (value : boolean) {\r\n this.muted = value;\r\n console.log(\"muted -> \" + this.muted)\r\n },\r\n onInitialTimeComfirm: function (event : UniInputConfirmEvent) {\r\n let value = parseInt(event.detail.value)\r\n if (isNaN(value)) value = 0;\r\n this.initialTime = value;\r\n console.log(\"initialTime -> \" + this.initialTime)\r\n },\r\n onDurationComfirm: function (event : UniInputConfirmEvent) {\r\n let value = parseInt(event.detail.value)\r\n if (isNaN(value)) value = 0;\r\n this.duration = value;\r\n console.log(\"duration -> \" + this.duration)\r\n },\r\n onControlsChange: function (value : boolean) {\r\n this.controls = value;\r\n console.log(\"controls -> \" + this.controls)\r\n },\r\n onEnableDanmuChange: function (value : boolean) {\r\n this.enableDanmu = value;\r\n console.log(\"enableDanmu -> \" + this.enableDanmu)\r\n },\r\n onDanmuBtnChange: function (value : boolean) {\r\n this.danmuBtn = value;\r\n console.log(\"danmuBtn -> \" + this.danmuBtn)\r\n },\r\n onPageGestureChange: function (value : boolean) {\r\n this.pageGesture = value;\r\n console.log(\"pageGesture -> \" + this.pageGesture)\r\n },\r\n onRequestFullScreenDirectionChange: function (value : number) {\r\n let direction = this.directionItems[value];\r\n this.requestFullScreenOptions = {\r\n direction\r\n } as RequestFullScreenOptions;\r\n },\r\n onDirectionChange: function (value : number) {\r\n this.direction = this.directionItems[value];\r\n console.log(\"direction -> \" + this.direction)\r\n },\r\n onShowProgressChange: function (value : boolean) {\r\n this.showProgress = value;\r\n console.log(\"showProgress -> \" + this.showProgress)\r\n },\r\n onShowFullscreenBtnChange: function (value : boolean) {\r\n this.showFullscreenBtn = value;\r\n console.log(\"showFullscreenBtn -> \" + this.showFullscreenBtn)\r\n },\r\n onShowPlayBtnChange: function (value : boolean) {\r\n this.showPlayBtn = value;\r\n console.log(\"showPlayBtn -> \" + this.showPlayBtn)\r\n },\r\n onShowCenterPlayBtnChange: function (value : boolean) {\r\n this.showCenterPlayBtn = value;\r\n console.log(\"showCenterPlayBtn -> \" + this.showCenterPlayBtn)\r\n },\r\n onShowLoadingChange: function (value : boolean) {\r\n this.showLoading = value;\r\n console.log(\"showLoading -> \" + this.showLoading)\r\n },\r\n onEnableProgressGestureChange: function (value : boolean) {\r\n this.enableProgressGesture = value;\r\n console.log(\"enableProgressGesture -> \" + this.enableProgressGesture)\r\n },\r\n onObjectFitChange: function (value : number) {\r\n this.objectFit = this.objectFitItems[value];\r\n console.log(\"objectFit -> \" + this.objectFit)\r\n },\r\n onPosterComfirm: function (event : UniInputConfirmEvent) {\r\n let value = event.detail.value;\r\n if (value == '') return;\r\n this.poster = value;\r\n console.log(\"poster -> \" + this.poster)\r\n },\r\n onShowMuteBtnChange: function (value : boolean) {\r\n this.showMuteBtn = value;\r\n console.log(\"showMuteBtn -> \" + this.showMuteBtn)\r\n },\r\n onTitleComfirm: function (event : UniInputConfirmEvent) {\r\n let value = event.detail.value;\r\n if (value == '') return;\r\n this.title = value;\r\n console.log(\"title -> \" + this.title)\r\n },\r\n onEnablePlayGestureChange: function (value : boolean) {\r\n this.enablePlayGesture = value;\r\n console.log(\"enablePlayGesture -> \" + this.enablePlayGesture)\r\n },\r\n onVslideGestureChange: function (value : boolean) {\r\n this.vslideGesture = value;\r\n console.log(\"vslideGesture -> \" + this.vslideGesture)\r\n },\r\n onVslideGestureInFullscreenChange: function (value : boolean) {\r\n this.vslideGestureInFullscreen = value;\r\n console.log(\"vslideGestureInFullscreen -> \" + this.vslideGestureInFullscreen)\r\n },\r\n onCodecChange: function (value : number) {\r\n this.codec = this.codecItems[value];\r\n console.log(\"codec -> \" + this.codec)\r\n },\r\n onHttpCacheChange: function (value : boolean) {\r\n this.httpCache = value;\r\n console.log(\"httpCache -> \" + this.httpCache)\r\n },\r\n onPlayStrategyChange: function (value : number) {\r\n this.playStrategy = this.playStrategyItems[value];\r\n console.log(\"playStrategy -> \" + this.playStrategy)\r\n },\r\n onHeaderComfirm: function (event : UniInputConfirmEvent) {\r\n let json = JSON.parse(event.detail.value)\r\n if (json == null) return;\r\n this.header = json as UTSJSONObject;\r\n console.log(\"header -> \" + JSON.stringify(this.header))\r\n },\r\n onSubCompEnableChange: function (event : UniSwitchChangeEvent) {\r\n this.subCompEnable = event.detail.value;\r\n },\r\n // 事件\r\n onPlay: function (res : UniEvent) {\r\n console.log(res.type);\r\n this.isPlaying = true;\r\n this.isPause = false;\r\n if (this.autoTest) {\r\n this.eventPlay = {\r\n \"tagName\": res.target?.tagName,\r\n \"type\": res.type\r\n };\r\n }\r\n },\r\n onPause: function (res : UniEvent) {\r\n console.log(res.type);\r\n this.isPlaying = false;\r\n this.isPause = true;\r\n if (this.autoTest) {\r\n this.eventPause = {\r\n \"tagName\": res.target?.tagName,\r\n \"type\": res.type\r\n };\r\n }\r\n },\r\n onEnded: function (res : UniEvent) {\r\n console.log(res.type);\r\n if (this.autoTest) {\r\n this.eventEnded = {\r\n \"tagName\": res.target?.tagName,\r\n \"type\": res.type\r\n };\r\n }\r\n },\r\n onTimeUpdate: function (res : UniVideoTimeUpdateEvent) {\r\n console.log(res.type + \" -> \" + JSON.stringify(res.detail));\r\n this.curPos = res.detail.currentTime;\r\n this.endPos = res.detail.duration;\r\n if (this.autoTest) {\r\n this.eventTimeupdate = {\r\n \"tagName\": res.target?.tagName,\r\n \"type\": res.type,\r\n \"currentTime\": Math.trunc(res.detail.currentTime),\r\n \"duration\": Math.trunc(res.detail.duration)\r\n };\r\n }\r\n },\r\n onFullScreenChange: function (res : UniVideoFullScreenChangeEvent) {\r\n console.log(res.type + \" -> \" + JSON.stringify(res.detail));\r\n this.subCompShow = res.detail.fullScreen;\r\n if (this.autoTest) {\r\n this.eventFullscreenchange = {\r\n \"tagName\": res.target?.tagName,\r\n \"type\": res.type,\r\n \"fullScreen\": res.detail.fullScreen,\r\n \"direction\": res.detail.direction\r\n };\r\n }\r\n },\r\n onWaiting: function (res : UniEvent) {\r\n console.log(res.type);\r\n if (this.autoTest) {\r\n this.eventWaiting = {\r\n \"tagName\": res.target?.tagName,\r\n \"type\": res.type\r\n };\r\n }\r\n },\r\n onError: function (res : UniVideoErrorEvent) {\r\n console.log(res.type + \" -> \" + JSON.stringify(res.detail));\r\n this.isError = true;\r\n if (this.autoTest) {\r\n this.eventError = {\r\n \"tagName\": res.target?.tagName,\r\n \"type\": res.type,\r\n \"errCode\": res.detail.errCode\r\n };\r\n }\r\n },\r\n onProgress: function (res : UniVideoProgressEvent) {\r\n console.log(res.type + \" -> \" + JSON.stringify(res.detail));\r\n if (this.autoTest) {\r\n this.eventProgress = {\r\n \"tagName\": res.target?.tagName,\r\n \"type\": res.type,\r\n \"isBufferedValid\": res.detail.buffered >= 0\r\n };\r\n }\r\n },\r\n onFullScreenClick: function (res : UniVideoFullScreenClickEvent) {\r\n console.log(res.type + \" -> \" + JSON.stringify(res.detail));\r\n if (this.autoTest) {\r\n this.eventFullscreenclick = {\r\n \"tagName\": res.target?.tagName,\r\n \"type\": res.type,\r\n \"screenX\": Math.trunc(res.detail.screenX),\r\n \"screenY\": Math.trunc(res.detail.screenY),\r\n \"screenWidth\": Math.trunc(res.detail.screenWidth),\r\n \"screenHeight\": Math.trunc(res.detail.screenHeight)\r\n };\r\n }\r\n },\r\n onControlsToggle: function (res : UniVideoControlsToggleEvent) {\r\n console.log(res.type + \" -> \" + JSON.stringify(res.detail));\r\n if (this.autoTest) {\r\n this.eventControlstoggle = {\r\n \"tagName\": res.target?.tagName,\r\n \"type\": res.type,\r\n \"show\": res.detail.show\r\n };\r\n }\r\n },\r\n // 自动化测试\r\n downloadSource() {\r\n uni.downloadFile({\r\n url: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.mp4',\r\n success: (res) => {\r\n this.src = res.tempFilePath;\r\n },\r\n fail: (_) => {\r\n this.isError = true;\r\n }\r\n })\r\n },\r\n // #ifdef APP-ANDROID\r\n hasSubComponent() : boolean {\r\n const view = uni.getElementById('video')?.getAndroidView();\r\n return view == null ? false : view.getChildAt(0) instanceof ViewGroup;\r\n }\r\n // #endif\r\n }\r\n }\r\n\n```\n\n:::","children":"### 子组件 @children-tags \n 支持所有组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.media.video)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/video.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=video&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=video&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=video&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=video&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=video&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=video)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=video&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"animation-view":{"name":"## animation-view","description":"Lottie 动画\n> 本 Component 是 uni ext component,需下载插件:[animation-view](https://ext.dcloud.net.cn/plugin?name=uni-animation-view)\n","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| x | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| path | string | \"\" | | 动画资源地址,目前只支持绝对路径 |\n| loop | boolean | false | | 动画是否循环播放 |\n| autoplay | boolean | false | | 动画是否自动播放 |\n| action | string | \"stop\" | | 动画操作,可取值 play、pause、stop |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| play | | 播放 |\n@| pause | | 暂停 |\n@| stop | | 停止 |\n| hidden | boolean | false | | 是否隐藏动画 |\n| @ended | (event: [UniEvent](/component/common.md#unievent)) => void | - | | - |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.media.animation-view)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/animation-view.html)\n- [插件市场](https://ext.dcloud.net.cn/plugin?id=10674)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=animation-view&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=animation-view&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=animation-view&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=animation-view&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=animation-view&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=animation-view)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=animation-view&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"map":{"name":"## map","description":"地图","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 4.31 | 4.31 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| longitude | number | - | | 中心经度 |\n| latitude | number | - | | 中心纬度 |\n| scale | number | - | | 缩放级别,取值范围为5-18 |\n| markers | array | - | | 标记点 |\n| covers | array | - | | 即将移除,请使用 markers |\n| polyline | array | - | | 路线 |\n| circles | array | - | | 圆 |\n| controls | array | - | | 控件 |\n| include-points | array | - | | 缩放视野以包含所有给定的坐标点 |\n| show-location | boolean | - | | 显示带有方向的当前定位点 |\n| @markertap | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 点击标记点时触发 |\n| @callouttap | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 点击标记点对应的气泡时触发 |\n| @controltap | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 点击控件时触发 |\n| @regionchange | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 视野发生变化时触发 |\n| @updated | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 在地图渲染更新完成时触发 |\n| @tap | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 点击地图时触发 |\n| @anchorpointtap | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 点击定位标时触发 |\n| @poitap | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 点击地图poi点时触发 |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/map/map.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/map/map\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/map/map\n\n>Template\n```vue\n\r\n \r\n \r\n \r\n 注意:需要正确配置地图服务商的Key才能正常显示地图组件\r\n \r\n 属性示例\r\n \r\n \r\n \r\n\r\n\r\n \r\n \n \n \n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n 方法示例\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n\r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n type TypeJestResult = {\r\n translateMarkerMsg : string,\r\n animationEnd : boolean,\r\n centerPoints : LocationObject,\r\n southwest : LocationObject,\r\n northeast : LocationObject,\r\n moveToLocationMsg : string,\r\n scale : number\r\n }\r\n\r\n const testMarkers :Marker[]= [{\r\n id: 0,\r\n latitude: 39.989631,\r\n longitude: 116.481018,\r\n title: '方恒国际 阜通东大街6号',\r\n iconPath: '../../../static/location.png',\r\n rotate: 0,\r\n width: 20,\r\n height: 20,\r\n anchor: {\r\n x: 0.5,\r\n y: 1\r\n } ,\r\n callout: {\r\n content: '方恒国际 阜通东大街6号',\r\n color: '#00BFFF',\r\n fontSize: 10,\r\n borderRadius: 4,\r\n borderWidth: 1,\r\n borderColor: '#333300',\r\n bgColor: '#CCFF99',\r\n padding: 5,\r\n display: 'ALWAYS'\r\n } as MapMarkerCallout\r\n },\r\n {\r\n id: 1,\r\n latitude: 39.9086920000,\r\n longitude: 116.3974770000,\r\n title: '天安门',\r\n // zIndex: '1',\r\n iconPath: '../../../static/location.png',\r\n width: 40,\r\n height: 40,\r\n anchor: {\r\n x: 0.5,\r\n y: 1\r\n },\r\n callout: {\r\n content: '首都北京\\n天安门',\r\n color: '#00BFFF',\r\n fontSize: 12,\r\n borderRadius: 10,\r\n borderWidth: 2,\r\n borderColor: '#333300',\r\n bgColor: '#CCFF11',\r\n padding: 5,\r\n display: 'ALWAYS'\r\n } as MapMarkerCallout\r\n },\r\n {\r\n id: 2,\r\n latitude: 39.894793,\r\n longitude: 116.321592,\r\n title: '北京西站',\r\n iconPath: '../../../static/location.png',\r\n width: 40,\r\n height: 40,\r\n anchor: {\r\n x: 0.5,\r\n y: 1\r\n },\r\n callout: {\r\n content: '北京西站',\r\n color: '#ffffff',\r\n fontSize: 12,\r\n borderRadius: 10,\r\n borderWidth: 2,\r\n borderColor: '#333300',\r\n bgColor: '#ff5500',\r\n padding: 5,\r\n display: 'ALWAYS'\r\n } as MapMarkerCallout\r\n },\r\n {\r\n id: 3,\r\n latitude: 39.902344,\r\n longitude: 116.484822,\r\n title: '北京东站',\r\n iconPath: '../../../static/location.png',\r\n width: 20,\r\n height: 20,\r\n anchor: {\r\n x: 0.5,\r\n y: 1\r\n },\r\n callout: {\r\n content: '北京东站',\r\n color: '#ffffff',\r\n fontSize: 12,\r\n borderRadius: 10,\r\n borderWidth: 2,\r\n borderColor: '#333300',\r\n bgColor: '#ff5500',\r\n padding: 5,\r\n display: 'ALWAYS'\r\n } as MapMarkerCallout\r\n },\r\n {\r\n id: 4,\r\n latitude: 39.865011,\r\n longitude: 116.379007,\r\n title: '北京南站',\r\n iconPath: '../../../static/location.png',\r\n width: 40,\r\n height: 40,\r\n anchor: {\r\n x: 0.5,\r\n y: 1\r\n },\r\n callout: {\r\n content: '北京南站',\r\n color: '#ffffff',\r\n fontSize: 12,\r\n borderRadius: 10,\r\n borderWidth: 2,\r\n borderColor: '#333300',\r\n bgColor: '#00aa00',\r\n padding: 5,\r\n display: 'ALWAYS'\r\n } as MapMarkerCallout\r\n },\r\n ];\r\n\r\n\r\n const testPolyline: Polyline[] = [{\r\n points: [{\r\n latitude: 39.925539,\r\n longitude: 116.279037\r\n },\r\n {\r\n latitude: 39.925539,\r\n longitude: 116.520285\r\n }],\r\n color: '#FFCCFF',\r\n width: 7,\r\n dottedLine: true,\r\n arrowLine: true,\r\n borderColor: '#000000',\r\n borderWidth: 2\r\n },\r\n {\r\n points: [{\r\n latitude: 39.938698,\r\n longitude: 116.275177\r\n },\r\n {\r\n latitude: 39.966069,\r\n longitude: 116.289253\r\n },\r\n {\r\n latitude: 39.944226,\r\n longitude: 116.306076\r\n },\r\n {\r\n latitude: 39.966069,\r\n longitude: 116.322899\r\n },\r\n {\r\n latitude: 39.938698,\r\n longitude: 116.336975\r\n }],\r\n color: '#CCFFFF',\r\n width: 5,\r\n dottedLine: false,\r\n arrowLine: true,\r\n borderColor: '#CC0000',\r\n borderWidth: 3\r\n }\r\n ];\r\n\r\n const testPolygons : Polygon[] = [{\r\n points: [{\r\n latitude: 39.781892,\r\n longitude: 116.293413\r\n },\r\n {\r\n latitude: 39.787600,\r\n longitude: 116.391842\r\n },\r\n {\r\n latitude: 39.733187,\r\n longitude: 116.417932\r\n },\r\n {\r\n latitude: 39.704653,\r\n longitude: 116.338255\r\n }],\r\n fillColor: '#FFCCFF',\r\n strokeWidth: 3,\r\n strokeColor: '#CC99CC',\r\n zIndex: 11\r\n },\r\n {\r\n points: [{\r\n latitude: 39.887600,\r\n longitude: 116.518932\r\n },\r\n {\r\n latitude: 39.781892,\r\n longitude: 116.518932\r\n },\r\n {\r\n latitude: 39.781892,\r\n longitude: 116.428932\r\n },\r\n {\r\n latitude: 39.887600,\r\n longitude: 116.428932\r\n }\r\n ],\r\n fillColor: '#CCFFFF',\r\n strokeWidth: 5,\r\n strokeColor: '#CC0000',\r\n zIndex: 3\r\n }\r\n ];\r\n\r\n const testCircles: Circle[] = [{\r\n latitude: 39.996441,\r\n longitude: 116.411146,\r\n radius: 15000,\r\n strokeWidth: 5,\r\n color: '#CCFFFF',\r\n fillColor: '#CC0000'\r\n },\r\n {\r\n latitude: 40.096441,\r\n longitude: 116.511146,\r\n radius: 12000,\r\n strokeWidth: 3,\r\n color: '#CCFFFF',\r\n fillColor: '#FFCCFF'\r\n },\r\n {\r\n latitude: 39.896441,\r\n longitude: 116.311146,\r\n radius: 9000,\r\n strokeWidth: 1,\r\n color: '#CCFFFF',\r\n fillColor: '#CC0000'\r\n }\r\n ];\r\n\r\n const testIncludePoints :LocationObject[] = [{\r\n latitude: 39.989631,\r\n longitude: 116.481018,\r\n },\r\n {\r\n latitude: 39.9086920000,\r\n longitude: 116.3974770000,\r\n }\r\n ];\r\n\r\n\r\n const mapContext = ref(null as MapContext | null);\r\n const location = ref({ longitude: 116.39742, latitude: 39.909 } as LocationObject);\r\n const rotate = ref(0);\r\n const skew = ref(0);\r\n // 自动化测试\r\n const autoTest = ref(false);\r\n const updateAutoTest = (value : boolean) => {\r\n autoTest.value = value\r\n }\r\n\r\n\r\n const jestResult = reactive({\r\n translateMarkerMsg: \"\",\r\n animationEnd: false,\r\n centerPoints: {\r\n latitude: 0,\r\n longitude: 0\r\n },\r\n southwest: {\r\n latitude: 0,\r\n longitude: 0\r\n },\r\n northeast: {\r\n latitude: 0,\r\n longitude: 0\r\n },\r\n moveToLocationMsg: \"\",\r\n scale: 0,\r\n } as TypeJestResult);\r\n\r\n\r\n onReady(() => {\r\n mapContext.value = uni.createMapContext(\"map1\", getCurrentInstance()!.proxy!)\r\n });\r\n\r\n const scale = ref(13);\r\n const confirm_scale_input = (value : number) => {\r\n scale.value = value\r\n };\r\n\r\n const controls = ref([] as Control[]);\r\n const addControls = () => {\r\n controls.value = [{\r\n id: 1,\r\n position: {\r\n left: 5,\r\n top: 180,\r\n width: 30,\r\n height: 30\r\n } as ControlPosition,\r\n iconPath: '../../../static/uni.png',\r\n clickable: true\r\n } as Control]\n }\r\n\r\n const showLocation = ref(false);\r\n const change_show_location = (checked : boolean) => {\r\n showLocation.value = checked\r\n }\r\n\r\n const includePoints = ref([] as LocationObject[]);\r\n const includePoint = () => {\r\n includePoints.value = testIncludePoints;\r\n };\r\n\r\n\r\n let markers = ref([] as Marker[]);\r\n const addMarkers = () => {\r\n scale.value = 11\r\n const temp = JSON.parse(JSON.stringify(testMarkers))!\r\n markers.value = temp\r\n };\r\n\r\n const removeMarker = () => {\r\n // #ifdef APP\r\n mapContext.value?.removeMarkers({markerIds:[4]})\r\n // #endif\r\n // #ifdef WEB\r\n const index = markers.value.findIndex((marker: Marker):boolean=>{\r\n return marker.id == 4\r\n });\r\n if (index != -1) {\r\n delete markers.value[index].label;\r\n markers.value.splice(index, 1);\r\n } else {\r\n uni.showToast({\r\n title: '未找到该标记点',\r\n icon: 'none'\r\n });\r\n }\r\n // #endif\r\n };\r\n\n // #ifdef WEB\n const addMarkersLabel = () => {\r\n markers.value.forEach((marker, index) => {\r\n marker.label = {\r\n content: 'Hello Label' + (index + 1),\r\n color: '#aa00ff',\r\n fontSize: 12,\r\n x: 5,\r\n y: 0,\r\n borderColor: '#333300',\r\n borderWidth: 2,\r\n borderRadius: 20,\r\n bgColor: '#aaffff',\r\n padding: 10\r\n };\r\n });\r\n };\n // #endif\r\n\r\n\r\n const polyline = ref([] as Polyline[]);\r\n const addPolyline = () => {\r\n scale.value = 11;\n polyline.value = JSON.parse(JSON.stringify(testPolyline))!;\r\n };\r\n const removePolyline = () => {\r\n if (polyline.value.length > 1) {\r\n polyline.value = JSON.parse(JSON.stringify(testPolyline))!.splice(0, 1);\r\n }\r\n };\r\n\r\n\r\n const polygons = ref([] as Polygon[]);\r\n const addPolygons = () => {\r\n scale.value = 10;\r\n polygons.value = JSON.parse(JSON.stringify(testPolygons))!;\r\n };\r\n const removePolygon = () => {\r\n if (polygons.value.length > 1) {\r\n polygons.value = JSON.parse(JSON.stringify(testPolygons))!.splice(0, 1);\r\n }\r\n };\r\n\r\n\r\n const circles = ref([] as Circle[]);\r\n const addCircles = () => {\r\n scale.value = 10;\r\n circles.value = JSON.parse(JSON.stringify(testCircles))!;\r\n };\r\n const removeCircle = () => {\r\n if (circles.value.length > 1) {\r\n circles.value = JSON.parse(JSON.stringify(testCircles))!.slice(1);\r\n }\r\n };\r\n\r\n\r\n const showCompass = ref(true);\r\n const enable3D = ref(true);\r\n const enableOverlooking = ref(true);\r\n const enableZoom = ref(true);\r\n const enableScroll = ref(true);\r\n const enableRotate = ref(true);\r\n const enableSatellite = ref(false);\r\n const enableTraffic = ref(false);\r\n\r\n const enableThreeD = (e) => {\r\n enable3D.value = e.detail.value;\r\n }\r\n const changeShowCompass = (e) => {\r\n showCompass.value = e.detail.value;\r\n }\r\n const changeEnableOverlooking = (e) => {\r\n enableOverlooking.value = e.detail.value;\r\n };\r\n\r\n const changeEnableZoom = (e) => {\r\n enableZoom.value = e.detail.value;\r\n };\r\n\r\n const changeEnableScroll = (e) => {\r\n enableScroll.value = e.detail.value;\r\n };\r\n\r\n const changeEnableRotate = (e) => {\r\n enableRotate.value = e.detail.value;\r\n };\r\n\r\n const changeEnableSatellite = (e) => {\r\n enableSatellite.value = e.detail.value;\r\n };\r\n\r\n const changeEnableTraffic = (e) => {\r\n enableTraffic.value = e.detail.value;\r\n };\r\n\r\n\r\n const handleGetCenterLocation = () => {\r\n mapContext.value?.getCenterLocation({\r\n success: ret => {\r\n // console.log('getCenterLocation',ret);\r\n jestResult.centerPoints = ret;\r\n if (!autoTest.value) {\r\n uni.showModal({\r\n content: JSON.stringify(ret)\r\n });\r\n }\r\n }\r\n });\r\n };\r\n\r\n const handleGetRegion = () => {\r\n mapContext.value?.getRegion({\r\n success: ret => {\r\n // console.log('getRegion',JSON.stringify(ret));\r\n jestResult.southwest = ret.southwest;\r\n jestResult.northeast = ret.northeast\r\n if (!autoTest.value) {\r\n uni.showModal({\r\n content: JSON.stringify(ret)\r\n });\r\n }\r\n }\r\n });\r\n };\r\n\r\n\r\n const handleTranslateMarker = () => {\r\n mapContext.value?.translateMarker({\r\n markerId: 1,\r\n destination: {\r\n latitude: 39.989631,\r\n longitude: 116.481018\r\n },\n autoRotate: true,\r\n rotate: 10,\r\n duration: 2000,\n moveWithRotate: true,\r\n // #ifdef WEB\r\n animationEnd: () => {\r\n console.log('动画结束');\r\n jestResult.animationEnd = true;\r\n },\r\n // #endif\r\n success: ret => {\r\n console.log('handleTranslateMarker',JSON.stringify(ret));\n const result = ret as UTSJSONObject\r\n jestResult.translateMarkerMsg = result[\"errMsg\"] as string;\r\n },\r\n fail: error => {\r\n console.log(error)\r\n }\r\n });\r\n mapContext.value?.translateMarker({\r\n markerId: 2,\r\n destination: {\r\n latitude: 39.902344,\r\n longitude: 116.484822,\r\n },\r\n autoRotate: true,\r\n rotate: 0,\r\n duration: 2000,\r\n success: ret => {\r\n console.log('handleTranslateMarker', JSON.stringify(ret));\r\n },\r\n fail: error => {\r\n console.log(error)\r\n }\r\n });\r\n };\r\n\r\n\r\n const handleGetScale = () => {\r\n mapContext.value?.getScale({\r\n success: res => {\r\n // console.log('getScale',res);\r\n scale.value = res.scale\r\n jestResult.scale = res.scale\r\n if (!autoTest.value) {\r\n uni.showModal({\r\n content: '当前地图的缩放级别为:' + res.scale\r\n });\r\n }\r\n },\r\n fail: error => {\r\n console.log(error)\r\n },\r\n });\r\n };\r\n\r\n const handleMoveToLocation = () => {\r\n mapContext.value?.moveToLocation({\r\n latitude: 39.909,\r\n longitude: 116.39742,\r\n success: res => {\r\n console.log('moveToLocation',res);\n const result = res as UTSJSONObject\r\n jestResult.moveToLocationMsg = result[\"errMsg\"] as string;\n\r\n if (!autoTest.value) {\r\n uni.showModal({\r\n content: JSON.stringify(res)\r\n });\r\n }\r\n },\r\n fail: error => {\r\n console.log(error)\r\n }\r\n });\r\n };\r\n\r\n const maptap = (e : UniMapUpdatedEvent) => {\r\n // console.log('点击地图时触发',e)\r\n uni.showModal({\r\n content: JSON.stringify(e)\r\n });\r\n };\r\n\r\n const onmarkertap = (e : UniMapMarkerTapEvent) => {\r\n // console.log('点击标记点时触发',e)\r\n uni.showModal({\r\n content: JSON.stringify(e)\r\n });\r\n };\r\n\r\n const oncontroltap = (e : UniMapControlTapEvent) => {\r\n // console.log('点击控件时触发',e)\r\n uni.showModal({\r\n content: JSON.stringify(e)\r\n });\r\n };\r\n\r\n const oncallouttap = (e : UniEvent) => {\r\n // console.log('点击标记点对应的气泡时触发',e)\r\n uni.showModal({\r\n content: JSON.stringify(e)\r\n });\r\n };\r\n\r\n const onupdated = (e : UniMapUpdatedEvent) => {\r\n console.log('在地图渲染更新完成时触发', e)\r\n };\r\n\r\n const onregionchange = (e : UniMapRegionChangeEvent) => {\r\n console.log('视野发生变化时触发', e)\r\n };\r\n\r\n const onpoitap = (e : UniMapPoiTapEvent) => {\r\n // console.log('点击地图poi点时触发',e)\r\n uni.showModal({\r\n content: JSON.stringify(e)\r\n });\r\n };\r\n\r\n defineExpose({\r\n jestResult,\r\n autoTest,\r\n updateAutoTest,\r\n addControls,\r\n addMarkers,\n // #ifdef WEB\n addMarkersLabel,\n // #endif\r\n removeMarker,\r\n addPolyline,\r\n removePolyline,\r\n addPolygons,\r\n removePolygon,\r\n addCircles,\r\n removeCircle,\r\n includePoint,\r\n handleGetCenterLocation,\r\n handleGetRegion,\r\n handleTranslateMarker,\r\n handleMoveToLocation,\r\n handleGetScale\r\n })\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.map.map)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/map.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=map&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=map&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=map&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=map&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=map&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=map)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=map&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"canvas":{"name":"## canvas","description":"> 组件类型:[UniCanvasElement](/dom/unicanvaselement.md) \n\n 画布","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.21 | 4.25 | 4.25 |\n","attribute":"","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/canvas/canvas.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/canvas/canvas\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/canvas/canvas\n\n>Template\n```vue\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n testToBlobResult: {{testToBlobResult}}\r\n \r\n \r\n \r\n 0\">\r\n canvasToDataURL:\r\n {{dataBase64.slice(0,22)}}...\r\n \r\n \r\n \r\n \r\n \r\n CanvasContext API 演示\r\n \r\n \r\n \r\n\r\n \r\n 获取 CanvasContext 结果:\r\n {{testCanvasContext}}\r\n \r\n \r\n 测试 ToDataURL 结果:\r\n {{testToDataURLResult}}\r\n \r\n\r\n \r\n 测试 createImage 结果:\r\n {{testCreateImage}}\r\n \r\n\r\n \r\n 测试 createPath2D 结果:\r\n {{testCreatePath2D}}\r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n function hidpi(canvas : UniCanvasElement) {\r\n const context = canvas.getContext(\"2d\")!;\r\n const dpr = uni.getDeviceInfo().devicePixelRatio ?? 1;\r\n canvas.width = canvas.offsetWidth * dpr;\r\n canvas.height = canvas.offsetHeight * dpr;\r\n context.scale(dpr, dpr);\r\n }\r\n\r\n export default {\r\n data() {\r\n return {\r\n title: 'Context2D',\r\n canvas: null as UniCanvasElement | null,\r\n canvasContext: null as CanvasContext | null,\r\n renderingContext: null as CanvasRenderingContext2D | null,\r\n canvasWidth: 0,\r\n canvasHeight: 0,\r\n dataBase64: '',\r\n taskId: 0,\r\n lastTime: 0,\r\n frameCount: 0,\r\n // 仅测试\r\n testCanvasContext: false,\r\n testToBlobResult: false,\r\n testToDataURLResult: false,\r\n testCreateCanvasContextAsyncSuccess: false,\r\n testCreateImage: false,\r\n testCreatePath2D: false,\r\n testFrameCount: 0\r\n }\r\n },\r\n onReady() {\r\n // HBuilderX 4.25+\r\n // 异步调用方式, 跨平台写法\r\n uni.createCanvasContextAsync({\r\n id: 'canvas',\r\n component: this,\r\n success: (context : CanvasContext) => {\r\n this.canvasContext = context;\r\n this.renderingContext = context.getContext('2d')!;\r\n this.canvas = this.renderingContext!.canvas;\r\n\r\n hidpi(this.canvas!);\r\n this.canvasWidth = this.canvas!.width;\r\n this.canvasHeight = this.canvas!.height;\r\n\r\n // #ifdef WEB\r\n context.toBlob((blob : Blob) => {\r\n this.testToBlobResult = (blob.size > 0 && blob.type == 'image/jpeg')\r\n }, 'image/jpeg', 0.95)\r\n // #endif\r\n this.testToDataURLResult = context.toDataURL().startsWith('data:image/png;base64')\r\n this.testCanvasContext = true\r\n }\r\n })\r\n\r\n // 同步调用方式,仅支持 app/web\r\n // let canvas = uni.getElementById(\"canvas\") as UniCanvasElement\r\n // this.renderingContext = canvas.getContext(\"2d\")\r\n // hidpi(canvas);\r\n // this.canvas = canvas;\r\n // this.canvasWidth = canvas.width;\r\n // this.canvasHeight = canvas.height;\r\n },\r\n onUnload() {\r\n if (this.taskId > 0) {\r\n this.stopAnimationFrame()\r\n }\r\n },\r\n methods: {\r\n // #ifdef WEB\r\n canvasToBlob() {\r\n this.canvasContext!.toBlob((blob : Blob) => {\r\n this.testToBlobResult = (blob.size > 0 && blob.type == 'image/jpeg')\r\n }, 'image/jpeg', 0.95)\r\n },\r\n // #endif\r\n canvasToDataURL() {\r\n this.dataBase64 = this.canvasContext!.toDataURL()\r\n },\r\n onCreateImage() {\r\n this.renderingContext!.clearRect(0, 0, this.canvasWidth, this.canvasHeight)\r\n let image = this.canvasContext!.createImage();\r\n image.src = \"../../static/logo.png\"\r\n image.onload = () => {\r\n this.testCreateImage = true\r\n this.renderingContext?.drawImage(image, 0, 0, 100, 100);\r\n }\r\n },\r\n onCreatePath2D() {\r\n this.renderingContext!.clearRect(0, 0, this.canvasWidth, this.canvasHeight)\r\n const context = this.renderingContext!\r\n let path2D = this.canvasContext!.createPath2D()\r\n this.testCreatePath2D = true\r\n const amplitude = 64;\r\n const wavelength = 64;\r\n for (let i = 0; i < 5; i++) {\r\n const x1 = 0 + (i * wavelength);\r\n const y1 = 128;\r\n const x2 = x1 + wavelength / 4;\r\n const y2 = y1 - amplitude;\r\n const x3 = x1 + 3 * wavelength / 4;\r\n const y3 = y1 + amplitude;\r\n const x4 = x1 + wavelength;\r\n const y4 = y1;\r\n context.moveTo(x1, y1);\r\n path2D.bezierCurveTo(x2, y2, x3, y3, x4, y4);\r\n }\r\n context.stroke(path2D);\r\n },\r\n startAnimationFrame() {\r\n this.taskId = this.canvasContext!.requestAnimationFrame((timestamp : number) => {\r\n this.testFrameCount++\r\n this.updateFPS(timestamp)\r\n this.startAnimationFrame()\r\n })\r\n },\r\n stopAnimationFrame() {\r\n this.canvasContext!.cancelAnimationFrame(this.taskId)\r\n this.taskId = 0\r\n },\r\n updateFPS(timestamp : number) {\r\n this.frameCount++\r\n if (timestamp - this.lastTime >= 1000) {\r\n const timeOfFrame = (1000 / this.frameCount)\r\n this.renderingContext!.clearRect(0, 0, this.canvasWidth, this.canvasHeight)\r\n this.renderingContext!.fillText(`${this.frameCount} / ${timeOfFrame.toFixed(3)}ms`, 10, 18)\r\n this.frameCount = 0\r\n this.lastTime = timestamp\r\n }\r\n }\r\n }\r\n }\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.canvas.canvas)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/canvas.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=canvas&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=canvas&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=canvas&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=canvas&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=canvas&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=canvas)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=canvas&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"ad":{"name":"## ad","description":"广告","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| x | 4.31 | 4.31 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| adpid | string | - | | 广告位id,在uniAD官网申请广告位 |\n| @load | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 广告加载成功的回调 |\n| @close | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 广告关闭的回调 |\n| @error | (e:[UniAdErrorEvent](#uniaderrorevent)) => void | - | | 广告加载失败的回调 |","event":"\n### 事件\n#### UniAdErrorEvent\n\n\n##### UniAdErrorEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **IUniAdError** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| errCode | number | 是 | - | - | 错误码
- -5001 广告位标识adpid为空,请传入有效的adpid
- -5002 无效的广告位标识adpid,请使用正确的adpid
- -5003 广告位未开通广告,请在广告平台申请并确保已审核通过
- -5004 无广告模块,打包时请配置要使用的广告模块
- -5005 广告加载失败,请稍后重试
- -5006 广告已经展示过了,请重新加载
- -5007 广告不可用或已过期,请重新请求
- -5008 广告不可用或已过期,请重新请求
- -5009 广告类型不符,请检查后再试
- -5011 打包或开通的渠道,不支持此类型广告
- -5013 广告播放失败,请重新加载 |\n@| errSubject | string | 是 | - | - | 统一错误主题(模块)名称 |\n@| data | any | 否 | - | - | 错误信息中包含的数据 |\n@| cause | [Error](https://uniapp.dcloud.net.cn/tutorial/err-spec.html#unierror) | 否 | - | - | 源错误信息,可以包含多个错误,详见SourceError |\n@| errMsg | string | 是 | - | - | - |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) | 否 | - | - | 触发事件的组件 |\n| currentTarget | [UniElement](/dom/unielement.md) | 否 | - | - | 当前组件 |\n| timeStamp | Long | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniAdErrorEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | - | 阻止当前事件的默认行为 |\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/ad/ad.uvue) \n >\n> 该 API 不支持 Web,请运行 hello uni-app x 到 App 平台体验 \n\n::: preview\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/ad/ad\n```uvue\n\r\n \r\n \r\n \r\n 信息流广告加载失败,请退出当前页面重试。\n \r\n \r\n\r\n\r\n\r\n\r\n\n\n```\n:::","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.ad.ad)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/ad.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=ad&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=ad&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=ad&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=ad&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=ad&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=ad)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=ad&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"web-view":{"name":"## web-view","description":"> 组件类型:[UniWebViewElement](/dom/uniwebviewelement.md) \n\n 承载网页的容器","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| src | string([string.HTMLURIString](/uts/data-type.md#ide-string)) | - | | webview 指向网页的链接 |\n| allow | string | - | | 用于为 [iframe](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe) 指定其[特征策略](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/策略特征) |\n| sandbox | string | - | | 该属性对呈现在 [iframe](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe) 框架中的内容启用一些额外的限制条件。 |\n| fullscreen | boolean | - | | 是否铺满整个页面,默认值:`true`。 |\n| webview-styles | **WebViewStyles** | {\"progress\":{\"color\":\"#00FF00\"}} | | webview 网络地址页面加载进度条样式 |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| progress | [WebViewProgressStyles](#webviewprogressstyles-values) \\| boolean | 是 | false | - | 网络地址页面加载进度条样式,设置为 false 时表示不显示加载进度条。 |\n@\n| horizontalScrollBarAccess | boolean | true | | 设置是否显示横向滚动条 |\n| verticalScrollBarAccess | boolean | true | | 设置是否显示纵向滚动条 |\n| @message | (event: [UniWebViewMessageEvent](#uniwebviewmessageevent)) => void | - | | 网页向应用 postMessage 时触发。e.detail = { data } |\n| @error | (event: [UniWebViewErrorEvent](#uniwebviewerrorevent)) => void | - | | 网页加载错误时触发。e.detail = { errSubject, errCode, errMsg, url, fullUrl, src } |\n| @load | (event: [UniWebViewLoadEvent](#uniwebviewloadevent)) => void | - | | 网页加载完成后触发。e.detail = { url, src } |\n| @loading | (event: [UniWebViewLoadingEvent](#uniwebviewloadingevent)) => void | - | | 网页加载中触发。e.detail = { url, src } |\n| @download | (event: [UniWebViewDownloadEvent](#uniwebviewdownloadevent)) => void | - | | 点击网页中可下载链接时触发。e.detail = { url, userAgent, contentDisposition, mimetype, contentLength } |","event":"\n### 事件\n#### UniWebViewMessageEvent\n\n```mermaid\ngraph LR\n \nUniWebViewMessageEvent -- Extends --> UniCustomEvent<UniWebViewMessageEventDetail>\n style UniCustomEvent<UniWebViewMessageEventDetail> color:#42b983\n click UniCustomEvent<UniWebViewMessageEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniWebViewMessageEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| type | string | 是 | - | - | 事件类型,固定值message |\n\n\n##### UniWebViewMessageEventDetail\n\n\n###### UniWebViewMessageEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| data | UTSJSONObject[\\] | 是 | - | - | 消息包含的数据,4.13版本之前类型为Map\\ \\| null,4.13版本(含)之后类型为Array\\ |\n\n\n#### UniWebViewErrorEvent\n\n```mermaid\ngraph LR\n \nUniWebViewErrorEvent -- Extends --> UniCustomEvent<UniWebViewErrorEventDetail>\n style UniCustomEvent<UniWebViewErrorEventDetail> color:#42b983\n click UniCustomEvent<UniWebViewErrorEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniWebViewErrorEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| type | string | 是 | - | - | 事件类型,固定值error |\n\n\n##### UniWebViewErrorEventDetail\n\n\n###### UniWebViewErrorEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| errSubject | string | 是 | - | - | 统一错误主题(模块)名称,固定值uni-web-view |\n| errCode | number | 是 | - | - | 统一错误码
100001 ssl error
100002 page error
100003 http error |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| 100001 | - | - |\n@| 100002 | - | - |\n@| 100003 | - | - |\n| errMsg | string | 是 | - | - | 统一错误描述信息 |\n| url | string | 是 | - | - | 加载错误的网页链接,非完整链接,仅包含scheme://authority部分,4.13版本起支持 |\n| fullUrl | string | 是 | - | - | 加载错误的网页链接,完整链接,4.13版本起支持 |\n| src | string | 是 | - | - | 加载错误的网页链接,完整链接,4.13版本起支持 |\n\n\n#### UniWebViewLoadEvent\n\n```mermaid\ngraph LR\n \nUniWebViewLoadEvent -- Extends --> UniCustomEvent<UniWebViewLoadEventDetail>\n style UniCustomEvent<UniWebViewLoadEventDetail> color:#42b983\n click UniCustomEvent<UniWebViewLoadEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniWebViewLoadEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| type | string | 是 | - | - | 事件类型,固定值load |\n\n\n##### UniWebViewLoadEventDetail\n\n\n###### UniWebViewLoadEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| ~~url~~ | string | 是 | - | - | 加载完成的网页链接 |\n| src | string | 是 | - | - | 加载完成的网页链接,4.13版本起支持 |\n\n\n#### UniWebViewLoadingEvent\n\n```mermaid\ngraph LR\n \nUniWebViewLoadingEvent -- Extends --> UniCustomEvent<UniWebViewLoadingEventDetail>\n style UniCustomEvent<UniWebViewLoadingEventDetail> color:#42b983\n click UniCustomEvent<UniWebViewLoadingEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniWebViewLoadingEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| type | string | 是 | - | - | 事件类型,固定值loading |\n\n\n##### UniWebViewLoadingEventDetail\n\n\n###### UniWebViewLoadingEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| ~~url~~ | string | 是 | - | - | 加载中的网页链接 |\n| src | string | 是 | - | - | 加载中的网页链接,4.13版本起支持 |\n\n\n#### UniWebViewDownloadEvent\n\n```mermaid\ngraph LR\n \nUniWebViewDownloadEvent -- Extends --> UniCustomEvent<UniWebViewDownloadEventDetail>\n style UniCustomEvent<UniWebViewDownloadEventDetail> color:#42b983\n click UniCustomEvent<UniWebViewDownloadEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniWebViewDownloadEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| type | string | 是 | - | - | 事件类型,固定值download |\n\n\n##### UniWebViewDownloadEventDetail\n\n\n###### UniWebViewDownloadEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| url | string | 是 | - | - | 下载链接 |\n| userAgent | string | 是 | - | - | 用户代理 |\n| contentDisposition | string | 是 | - | - | 指示回复的内容该以何种形式展示,是以内联的形式(即网页或者页面的一部分),还是以附件的形式下载并保存到本地 |\n| mimetype | string | 是 | - | - | 媒体类型 |\n| contentLength | number | 是 | - | - | 文件大小 |\n\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/web-view/web-view.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/web-view/web-view\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/web-view/web-view\n\n>Template\n```vue\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n 显示横向滚动条\r\n \r\n \r\n \r\n 显示竖向滚动条\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n 前进、后退功能在Windows端需要打自定义基座,MAC端需要配置Xcode环境后进行真机运行或者打自定义基座\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n // #ifdef APP\r\n import { canWebViewGoBack, canWebViewGoForward, hasNativeView } from '@/uni_modules/uts-get-native-view';\r\n // #endif\r\n export default {\r\n data() {\r\n return {\r\n src: 'https://www.dcloud.io',\r\n webview_styles: {\r\n progress: {\r\n color: '#FF3333'\r\n }\r\n },\r\n webviewContext: null as WebviewContext | null,\r\n webviewElement: null as UniWebViewElement | null,\r\n loadError: false,\r\n horizontalScrollBarAccess: true,\r\n verticalScrollBarAccess: true,\r\n canGoBack: false,\r\n canGoForward: false,\r\n // 自动化测试\r\n autoTest: false,\r\n eventLoading: null as UTSJSONObject | null,\r\n eventLoad: null as UTSJSONObject | null,\r\n eventError: null as UTSJSONObject | null,\r\n eventTouchstart: null as UTSJSONObject | null,\r\n eventTap: null as UTSJSONObject | null,\r\n pointerEvents: 'auto'\r\n }\r\n },\r\n onReady() {\r\n // #ifdef APP\r\n // TODO web 实现createWebviewContext\r\n this.webviewContext = uni.createWebviewContext('web-view', this)\r\n this.webviewElement = uni.getElementById('web-view') as UniWebViewElement //推荐使用element,功能更丰富\r\n // console.log('url: ',this.webviewElement?.getAttribute(\"src\"));\r\n // this.webviewElement?.setAttribute(\"src\",\"https://ext.dcloud.net.cn/\")\r\n // #endif\r\n },\r\n methods: {\r\n getPackageName() : string {\r\n let packageName : string = \"\"\r\n\r\n // #ifdef APP-IOS\r\n const res = uni.getAppBaseInfo();\r\n packageName = res.bundleId\r\n // #endif\r\n\r\n return packageName\r\n },\r\n isProd() : boolean {\r\n if (this.getPackageName() == 'io.dcloud.hellouniappx') {\r\n return true\r\n }\r\n return false\r\n },\r\n back() {\r\n this.webviewContext?.back();\r\n },\r\n forward() {\r\n this.webviewContext?.forward();\r\n },\r\n reload() {\r\n this.webviewContext?.reload();\r\n // this.webviewElement?.reload();\r\n },\r\n stop() {\r\n this.webviewContext?.stop();\r\n },\r\n nativeToWeb() {\r\n this.webviewContext?.evalJS(\"alert('hello uni-app x')\");\r\n },\r\n message(event : UniWebViewMessageEvent) {\r\n console.log(JSON.stringify(event.detail));\r\n },\r\n error(event : UniWebViewErrorEvent) {\r\n this.loadError = true\r\n console.log(JSON.stringify(event.detail));\r\n if (this.autoTest) {\r\n this.eventError = {\r\n \"tagName\": event.target?.tagName,\r\n \"type\": event.type,\r\n \"errCode\": event.detail.errCode,\r\n \"errMsg\": event.detail.errMsg,\r\n \"url\": event.detail.url,\r\n \"fullUrl\": event.detail.fullUrl,\r\n \"src\": event.detail.src\r\n };\r\n }\r\n },\r\n loading(event : UniWebViewLoadingEvent) {\r\n console.log(JSON.stringify(event.detail));\r\n if (this.autoTest) {\r\n this.eventLoading = {\r\n \"tagName\": event.target?.tagName,\r\n \"type\": event.type,\r\n \"src\": event.detail.src\r\n };\r\n }\r\n },\r\n load(event : UniWebViewLoadEvent) {\r\n console.log(JSON.stringify(event.detail));\r\n // #ifdef APP\r\n this.canGoBack = canWebViewGoBack('web-view');\r\n this.canGoForward = canWebViewGoForward('web-view');\r\n // #endif\r\n if (this.autoTest) {\r\n this.eventLoad = {\r\n \"tagName\": event.target?.tagName,\r\n \"type\": event.type,\r\n \"src\": event.detail.src\r\n };\r\n }\r\n },\r\n download(event : UniWebViewDownloadEvent) {\r\n console.log(JSON.stringify(event.detail));\r\n uni.showModal({\r\n content: \"下载链接: \" + event.detail.url + \"\\n文件大小: \" + event.detail.contentLength / 1024 + \"KB\",\r\n showCancel: false\r\n });\r\n },\r\n confirm(event : UniInputConfirmEvent) {\r\n let url = event.detail.value;\r\n if (!url.startsWith('https://') && !url.startsWith('http://')) {\r\n url = 'https://' + url;\r\n }\r\n this.src = url;\r\n },\r\n changeHorizontalScrollBarAccess(event : UniSwitchChangeEvent) {\r\n this.horizontalScrollBarAccess = event.detail.value;\r\n },\r\n changeVerticalScrollBarAccess(event : UniSwitchChangeEvent) {\r\n this.verticalScrollBarAccess = event.detail.value;\r\n },\r\n // 自动化测试\r\n touchstart(event : UniTouchEvent) {\r\n if (this.autoTest) {\r\n this.eventTouchstart = {\r\n clientX: Math.ceil(event.touches[0].clientX),\r\n clientY: Math.ceil(event.touches[0].clientY)\r\n };\r\n }\r\n },\r\n tap(event : UniPointerEvent) {\r\n if (this.autoTest) {\r\n this.eventTap = {\r\n clientX: Math.ceil(event.clientX),\r\n clientY: Math.ceil(event.clientY)\r\n };\r\n }\r\n },\r\n getWindowInfo() : GetWindowInfoResult {\r\n return uni.getWindowInfo();\r\n },\r\n //自动化测试专用\r\n checkNativeWebView() : boolean {\r\n // #ifdef APP\r\n return hasNativeView('web-view')\r\n // #endif\r\n // #ifdef WEB\r\n return true\r\n // #endif\r\n }\r\n }\r\n }\r\n\n```\n\n:::","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.web-view.web-view)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/web-view.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=web-view&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=web-view&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=web-view&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=web-view&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=web-view&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=web-view)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=web-view&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"custom-tab-bar":{"name":"## custom-tab-bar","description":"自定义tabBar","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.24 | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| direction | string | - | | 选项的排列方向 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| horizontal | - | 选项的排列方向水平 |\n@| vertical | - | 选项的排列方向水平 |\n| show-icon | boolean | - | | 是否显示icon |\n| selected | number | - | | 选中的tabBar选项索引值 |\n| @onTabItemTap | (event: [OnTabItemTapOption](#ontabitemtapoption)) => void | - | | 点击自定义 tabBar 触发事件,detail = {index, pagePath, text} |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.page-meta.custom-tab-bar)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/custom-tab-bar.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=custom-tab-bar&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=custom-tab-bar&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=custom-tab-bar&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=custom-tab-bar&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=custom-tab-bar&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=custom-tab-bar)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=custom-tab-bar&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n"},"unicloud-db":{"name":"## unicloud-db","description":"> 组件类型:[UniCloudDBElement](#uniclouddbelement) \n\n 是一个数据库查询组件,它将clientDB的API封装为组件,进一步减少开发者使用所需的代码量。","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.93 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| id | string([string.IDString](/uts/data-type.md#ide-string)) | - | - | 唯一标识 |\n| v-slot:default | string | - | | {data, loading, hasMore, pagination, error} |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| data | - | 查询结果,类型为Array\\ |\n@| loading | - | 查询中的状态。可根据此状态,在template中通过v-if显示等待内容 |\n@| hasMore | - | 是否有更多数据。可根据此状态,在template中通过v-if显示没有更多数据了 |\n@| error | - | 查询错误。可根据此状态,在template中通过v-if显示等待内容 |\n@| pagination | - | 分页属性 |\n@@| 合法值 | 兼容性 | 描述 |\n@@| :- | :-: | :- |\n@@| current | - | 当前页号 |\n@@| size | - | 分页大小 |\n@@| count | - | 数据库的总数据量, 设置 :getcount=true 时有效 |\n| collection | string([string.DBCollectionString](/uts/data-type.md#ide-string)) | - | | 表名 |\n| field | string([string.DBFieldString](/uts/data-type.md#ide-string)) | - | | 查询字段,多个字段用 `,` 分割 |\n| where | string([string.JQLString](/uts/data-type.md#ide-string)) | - | | 查询条件 |\n| orderby | string | - | | 排序字段及正序倒叙设置 |\n| groupby | string | - | | 对数据进行分组 |\n| group-field | string | - | | 对数据进行分组统计 |\n| distinct | boolean | - | | 是否对数据查询结果中重复的记录进行去重 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| true | - | 去重 |\n@| false | - | 不去重 |\n| page-data | string | - | | add 多次查询的集合, replace 当前查询的集合 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| add | - | 多次查询的集合 |\n@| replace | - | 当前查询的集合 |\n| page-current | number | - | | 当前页 |\n| page-size | number | - | | 每页数据数量 |\n| getone | boolean | - | | 指定查询结果是否返回数组第一条数据,默认 false。在false情况下返回的是数组,即便只有一条结果,也需要\\[0]方式获取。在true下,直接返回结果数据,少一层数组 |\n| getcount | boolean | - | | 是否查询总数量 |\n| gettree | boolean | - | | 是否查询树状结构数据 |\n| startwith | string | - | | gettree的第一层级条件,此初始条件可以省略,不传startWith时默认从最顶级开始查询 |\n| limitlevel | number | - | | gettree查询返回的树的最大层级。超过设定层级的节点不会返回。默认10级,最大15,最小1 |\n| manual | boolean | - | | 是否手动加载数据,默认为 false,页面onLoad时自动联网加载数据 |\n| loadtime | string | - | | 加载数据时机,默认auto,可选值 auto\\|onready\\|manual |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| auto | - | 页面就绪后或属性变化后加载数据,默认为auto |\n@| onready | - | 页面就绪后不自动加载数据,属性变化后加载。适合在onLoad中接收上个页面的参数作为where条件时 |\n@| manual | - | 手动模式,不自动加载数据。如果涉及到分页,需要先手动修改当前页,在调用加载数据 |\n| @load | (data : Array\\, ended : boolean, pagination : [UTSJSONObject](/uts/buildin-object-api/utsjsonobject.md)) => void | - | | 成功回调。如联网返回结果后,想修改下数据再渲染界面,则在本方法里对data进行修改 |\n| @error | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 失败回调 |\n| ~~action~~ | string([string.ClientDBActionString](/uts/data-type.md#ide-string)) | - | | 云端执行数据库查询的前或后,触发某个action函数操作,进行预处理或后处理(推荐改用JQL触发器) |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/unicloud-db/unicloud-db.uvue) \n >\n> 该 API 不支持 Web,请运行 hello uni-app x 到 App 平台体验 \n```uvue\n\r\n \r\n \r\n 0\" ref=\"listView\" class=\"list\" :scroll-y=\"true\" @scrolltolower=\"loadMore()\">\r\n \r\n \r\n {{item}}\r\n \r\n \r\n ❌\r\n \r\n \r\n \r\n Loading...\r\n {{error.errMsg}}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\n\n```","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.unicloud.unicloud-db)\n- [unicloud-db组件教程](https://doc.dcloud.net.cn/uniCloud/unicloud-db.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=unicloud-db&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=unicloud-db&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=unicloud-db&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=unicloud-db&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=unicloud-db&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=unicloud-db)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=unicloud-db&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)\n","component_type":"### UniCloudDBElement\n\n#### UniCloudDBElement 的属性值\n| 名称 | 类型 | 必填 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| dataList | Array\\ | 是 | - | 已加载的数据 |\n#### UniCloudDBElement 的方法\n##### loadData(options?: UTSJSONObject \\| null): void @loaddata\n加载数据\n当 \\ 组件的 manual 属性设为 true 或者 loadtime 属性设置为 manual 时,不会在页面初始化时联网查询数据,此时需要通过本方法在需要的时候手动加载数据。\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| options | **UniCloudDBComponentLoadDataOptions** | 否 | - | - | 可选参数 |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| clear | boolean | 否 | false | - | 是否清空数据 |\n@| current | number | 否 | - | - | 当前第几页 |\n@| success | (res?: T) => void | 否 | - | - | 成功回调 |\n@| fail | (err?: any) => void | 否 | - | - | 失败回调 |\n@| complete | () => void | 否 | - | - | 完成回调 | \n\n\n###### loadData 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| - | - | - |\n\n\n##### loadMore(): void @loadmore\n加载更多数据\n在列表的加载下一页场景下,使用ref方式访问组件方法,加载更多数据,每加载成功一次,当前页 +1\n\n\n###### loadMore 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| - | - | - |\n\n\n##### add(value: UTSJSONObject, options?: UTSJSONObject \\| null): void @add\n新增数据\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| value | UTSJSONObject | 是 | - | - | 新增数据. |\n| options | **UniCloudDBComponentAddOptions** | 否 | - | - | 可选参数 |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| showToast | boolean | 否 | true | - | 是否显示 Toast |\n@| toastTitle | string | 否 | - | - | Toast 标题 |\n@| needLoading | boolean | 否 | true | - | 是否需要 Loading |\n@| loadingTitle | string | 否 | - | - | Loading 标题 |\n@| success | (res?: T) => void | 否 | - | - | 成功回调 |\n@| fail | (err?: any) => void | 否 | - | - | 失败回调 |\n@| complete | () => void | 否 | - | - | 完成回调 | \n\n\n###### add 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| - | - | - |\n\n\n##### remove(): void @remove\n移除数据\n\n\n###### remove 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| - | - | - |\n\n\n##### remove(): void @remove\n移除数据\n\n\n###### remove 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| - | - | - |\n\n\n##### update(id: string, value: UTSJSONObject, options?: UTSJSONObject \\| null): void @update\n更新数据\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| id | string | 是 | - | - | 数据库字段的唯一标识. |\n| value | UTSJSONObject | 是 | - | - | 需要修改的新数据. |\n| options | **UniCloudDBComponentUpdateOptions** | 否 | - | - | 可选参数 |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| showToast | boolean | 否 | true | - | 是否显示更新后 Toast |\n@| toastTitle | string | 否 | \"\" | - | 更新成功后 Toast 标题 |\n@| confirmTitle | string | 否 | - | - | 确认框标题 |\n@| confirmContent | string | 否 | - | - | 确认框内容 |\n@| needConfirm | boolean | 否 | true | - | 是否显示更新确认框 |\n@| needLoading | boolean | 否 | true | - | 是否需要 Loading |\n@| loadingTitle | string | 否 | - | - | Loading 标题 |\n@| success | (res?: T) => void | 否 | - | - | 成功回调 |\n@| fail | (err?: any) => void | 否 | - | - | 失败回调 |\n@| complete | () => void | 否 | - | - | 完成回调 | \n\n\n###### update 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| - | - | - |\n\n"}}
\ No newline at end of file
diff --git a/docs/.vuepress/utils/utsJson.json b/docs/.vuepress/utils/utsJson.json
index 1390c490bd40e83c7823600fb2416e9dba0ebdcb..60e449bb3a5009f2b3dd380ab7359aa0197b550b 100644
--- a/docs/.vuepress/utils/utsJson.json
+++ b/docs/.vuepress/utils/utsJson.json
@@ -1 +1 @@
-{"Global":{"tutorial":"\n### 参见\n[相关 Bug](https://issues.dcloud.net.cn/?mid=uts.globleMethods)","eval":{"name":"### eval(x)","description":"eval() 函数会将传入的字符串当做 JavaScript 代码进行执行。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| x | string | 是 | - | - | 一个表示 JavaScript 表达式、语句或一系列语句的字符串。表达式可以包含变量与已存在对象的属性。 | \n","returnValue":"**返回值** \n\n| 类型 |\n| :- |\n| any | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","tutorial":"\n**参见** \n\n [相关 Bug](https://issues.dcloud.net.cn/?mid=uts.globleMethods.eval)"},"parseInt":{"name":"### parseInt(string, radix?)","description":"parseInt(string, radix) 解析一个字符串并返回指定基数的十进制整数,radix 是 2-36 之间的整数,表示被解析字符串的基数。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| string | string | 是 | - | - | 要被解析的值。字符串开头的空白符将会被忽略。(注意:只接收字符串类型的参数,其他类型将编译报错。) |\n| radix | number | 否 | - | - | 从 2 到 36 的整数,表示进制的基数。例如指定 16 表示被解析值是十六进制数。如果超出这个范围,将返回 NaN。假如指定 0 或未指定,基数将会根据字符串的值进行推算。注意,推算的结果不会永远是默认值 10! | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| number | 从给定的字符串中解析出的一个整数,或者 NaN。当radix 小于 2 或大于 36,或第一个非空格字符不能转换为数字时返回 NAN。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 3.9 | 3.9 | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","tutorial":"\n**参见** \n\n [相关 Bug](https://issues.dcloud.net.cn/?mid=uts.globleMethods.parseInt)","test":"```uts\n console.log(parseInt(\"123.456\")) // 123;\n console.log(parseInt(\"123\")) // 123;\n console.log(parseInt(\"123\", 10)) // 123;\n console.log(parseInt(\" 123\", 10)) // 123;\n console.log(parseInt(\"077\")) // 77;\n console.log(parseInt(\"1.9\")) // 1;\n console.log(parseInt(\"ff\", 16)) // 255;\n console.log(parseInt(\"0xFF\", 0)) // 255;\n console.log(parseInt(\"0xFF\", 16)) // 255;\n console.log(parseInt(\"0xFF\")) // 255;\n console.log(parseInt(\"0xFF\", 10)) // 0;\n console.log(parseInt(\"0xF\", 16)) // 15;\n console.log(parseInt(\"F\", 16)) // 15;\n console.log(parseInt(\"021\", 8)) // 17;\n console.log(parseInt(\"015\", 10)) // 15;\n console.log(parseInt(\"15,123\", 10)) // 15;\n console.log(parseInt(\"FXX123.99\", 16)) // 15;\n console.log(parseInt(\"1111\", 2)) // 15;\n console.log(parseInt(\"15 * 3\", 10)) // 15;\n console.log(parseInt(\"15e2\", 10)) // 15;\n console.log(parseInt(\"15px\", 10)) // 15;\n console.log(parseInt(\"12\", 13)) // 15;\n console.log(parseInt(\"17\", 8)) // 15;\n console.log(isNaN(parseInt(\"a\"))) // true\n console.log(parseInt(\"a\", 16)) // 10\n console.log(isNaN(parseInt(\"345\", 2))) // true\n console.log(isNaN(parseInt(\"hello\"))) // true\n console.log(parseInt(\"6.022e23\")) // 6\n console.log(parseInt(\"9223372036854775807\")) // 9.223372036854778e+18\n console.log(parseInt(\"9223372036854775807000\")) // 9.223372036854777e+21\n console.log(parseInt(\"922337203685477580700099999999999999999999999999999999999999999999999999999999999999999\")) // 9.223372036854776e+86\n console.log(parseInt(\"50\") / 100) // 0.5;\n console.log(parseInt(\"500\") / 100) // 5;\n console.log(parseInt(\"3.0\")) // 3;\n console.log(parseInt(\"3.02\")) // 3;\n```"},"parseFloat":{"name":"### parseFloat(string)","description":"parseFloat() 函数解析一个参数(直接收字符串类型的参数,其他类型编译报错)并返回一个浮点数。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| string | string | 是 | - | - | 需要被解析成为浮点数的值。 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| number | 给定值被解析成浮点数。如果给定值不能被转换成数值,则会返回 NaN。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 3.9 | 3.9 | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","tutorial":"\n**参见** \n\n [相关 Bug](https://issues.dcloud.net.cn/?mid=uts.globleMethods.parseFloat)","test":"```uts\n console.log(parseFloat(\"11.20\")) // 11.2;\n console.log(parseFloat(\"3.14\")) // 3.14;\n console.log(parseFloat(\" 3.14 \")) // 3.14;\n console.log(parseFloat(\"314e-2\")) // 3.14;\n console.log(parseFloat(\"0.0314E+2\")) // 3.14;\n console.log(parseFloat(\"3.14some non-digit characters\")) // 3.14;\n console.log(parseFloat(\"100\") / 50) // 2;\n console.log(parseFloat(\"105\") / 50) // 2.1;\n \n console.log(parseFloat(\"3.0\")) // 3;\n console.log(parseFloat(\"3.02\").toString()) // \"3.02\";\n```"},"isNaN":{"name":"### isNaN(number)","description":"isNaN() 函数用来确定一个值是否为NaN 。注:isNaN函数内包含一些非常有趣的规则;你也可以使用 ECMAScript 2015 中定义的 Number.isNaN() 来判断。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| number | number | 是 | - | - | 要被检测的值。 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| boolean | 如果给定值为 NaN则返回值为true;否则为false。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 3.9 | 3.9 | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","tutorial":"\n**参见** \n\n [相关 Bug](https://issues.dcloud.net.cn/?mid=uts.globleMethods.isNaN)","test":"```uts\n console.log(parseInt(\"123.456\")) // 123;\n console.log(parseInt(\"123\")) // 123;\n console.log(parseInt(\"123\", 10)) // 123;\n console.log(parseInt(\" 123\", 10)) // 123;\n console.log(parseInt(\"077\")) // 77;\n console.log(parseInt(\"1.9\")) // 1;\n console.log(parseInt(\"ff\", 16)) // 255;\n console.log(parseInt(\"0xFF\", 0)) // 255;\n console.log(parseInt(\"0xFF\", 16)) // 255;\n console.log(parseInt(\"0xFF\")) // 255;\n console.log(parseInt(\"0xFF\", 10)) // 0;\n console.log(parseInt(\"0xF\", 16)) // 15;\n console.log(parseInt(\"F\", 16)) // 15;\n console.log(parseInt(\"021\", 8)) // 17;\n console.log(parseInt(\"015\", 10)) // 15;\n console.log(parseInt(\"15,123\", 10)) // 15;\n console.log(parseInt(\"FXX123.99\", 16)) // 15;\n console.log(parseInt(\"1111\", 2)) // 15;\n console.log(parseInt(\"15 * 3\", 10)) // 15;\n console.log(parseInt(\"15e2\", 10)) // 15;\n console.log(parseInt(\"15px\", 10)) // 15;\n console.log(parseInt(\"12\", 13)) // 15;\n console.log(parseInt(\"17\", 8)) // 15;\n console.log(isNaN(parseInt(\"a\"))) // true\n console.log(parseInt(\"a\", 16)) // 10\n console.log(isNaN(parseInt(\"345\", 2))) // true\n console.log(isNaN(parseInt(\"hello\"))) // true\n console.log(parseInt(\"6.022e23\")) // 6\n console.log(parseInt(\"9223372036854775807\")) // 9.223372036854778e+18\n console.log(parseInt(\"9223372036854775807000\")) // 9.223372036854777e+21\n console.log(parseInt(\"922337203685477580700099999999999999999999999999999999999999999999999999999999999999999\")) // 9.223372036854776e+86\n console.log(parseInt(\"50\") / 100) // 0.5;\n console.log(parseInt(\"500\") / 100) // 5;\n console.log(parseInt(\"3.0\")) // 3;\n console.log(parseInt(\"3.02\")) // 3;\n```"},"isFinite":{"name":"### isFinite(number)","description":"isFinite() 函数用来判断被传入的参数值是否为一个有限数值(finite number)。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| number | number | 是 | - | - | 要被检测的值。 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| boolean | 如果参数是 NaN,正无穷大或者负无穷大,会返回false,其他返回 true。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 3.9 | 3.9 | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","tutorial":"\n**参见** \n\n [相关 Bug](https://issues.dcloud.net.cn/?mid=uts.globleMethods.isFinite)"},"decodeURI":{"name":"### decodeURI(encodedURI)","description":"decodeURI() 函数能解码由encodeURI 创建或其他流程得到的统一资源标识符(URI)。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| encodedURI | string | 是 | - | - | 一个完整的编码过的 URI | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| string\\|null | 返回一个给定编码统一资源标识符 (URI) 的未编码版本的新字符串, 当 encodedURI 包含无效字符序列时,会返回null | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.91 | 4.11 | 3.91 | 3.91 | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","tutorial":"\n**参见** \n\n [相关 Bug](https://issues.dcloud.net.cn/?mid=uts.globleMethods.decodeURI)","test":"```uts\n console.log(decodeURI('%E4%BD%A0%E5%A5%BD')) // '你好'\n console.log(decodeURI(\"%E4%BD%A0%E5%A5%BD+22\")) // '你好+22'\n console.log(decodeURI(\"%E4%BD%A0;/=%E5%A5%BD+22\")) // '你;/=好+22'\n console.log(decodeURI(\"https://demo.dcloud.net.cn/mock/%E6%9C%80%E6%96%B0/12\")) // 'https://demo.dcloud.net.cn/mock/最新/12'\n```"},"decodeURIComponent":{"name":"### decodeURIComponent(encodedURIComponent)","description":"decodeURIComponent() 方法用于解码由 encodeURIComponent 方法或者其他类似方法编码的部分统一资源标识符(URI)。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| encodedURIComponent | string | 是 | - | - | 编码后的部分 URI | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| string\\|null | 一个解码后的统一资源标识符(URI)字符串,处理前的 URI 经过了给定格式的编码。当 encodedURI 包含无效字符序列时,会返回null. | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.91 | 4.11 | 3.91 | 3.91 | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","tutorial":"\n**参见** \n\n [相关 Bug](https://issues.dcloud.net.cn/?mid=uts.globleMethods.decodeURIComponent)","test":"```uts\n console.log(decodeURIComponent('%E4%BD%A0%E5%A5%BD')) // '你好'\n console.log(decodeURIComponent('%E4%BD%A0%E5%A5%BD%2B22')) // '你好+22'\n console.log(decodeURIComponent('%E4%BD%A0%3B%2F%3D%E5%A5%BD%2B22')) // '你;/=好+22'\n console.log(decodeURIComponent(\"https://demo.dcloud.net.cn/mock/%E6%9C%80%E6%96%B0/12\")) // 'https://demo.dcloud.net.cn/mock/最新/12'\n```"},"encodeURI":{"name":"### encodeURI(uri)","description":"encodeURI() 函数通过将特定字符的每个实例替换为一个、两个、三或四转义序列来对统一资源标识符 (URI) 进行编码 (该字符的 UTF-8 编码仅为四转义序列) 由两个 \"代理\" 字符组成)。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| uri | string | 是 | - | - | 一个完整的 URI。 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| string\\|null | 一个新字符串,表示提供的字符串编码为统一资源标识符 (URI)。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.91 | 4.11 | 3.91 | 3.91 | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","tutorial":"\n**参见** \n\n [相关 Bug](https://issues.dcloud.net.cn/?mid=uts.globleMethods.encodeURI)","test":"```uts\n console.log(encodeURI(\"你好\")) // '%E4%BD%A0%E5%A5%BD'\n console.log(encodeURI(\"你好+22\")) // '%E4%BD%A0%E5%A5%BD+22'\n console.log(encodeURI(\"你;/=好+22\")) // '%E4%BD%A0;/=%E5%A5%BD+22'\n console.log(encodeURI(\"https://demo.dcloud.net.cn/mock/最新/12\")) // 'https://demo.dcloud.net.cn/mock/%E6%9C%80%E6%96%B0/12'\n```"},"encodeURIComponent":{"name":"### encodeURIComponent(uriComponent)","description":"encodeURIComponent() 函数通过将特定字符的每个实例替换成代表字符的 UTF-8 编码的一个、两个、三个或四个转义序列来编码 URI(只有由两个“代理”字符组成的字符会被编码为四个转义序列)。与 encodeURI() 相比,此函数会编码更多的字符,包括 URI 语法的一部分。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| uriComponent | string | 是 | - | - | 要被检测的 string 值。 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| string\\|null | 原字串作为 URI 组成部分被被编码后的新字符串。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.91 | 4.11 | 3.91 | 3.91 | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","tutorial":"\n**参见** \n\n [相关 Bug](https://issues.dcloud.net.cn/?mid=uts.globleMethods.encodeURIComponent)","test":"```uts\n console.log(encodeURIComponent(\"你好\")) // '%E4%BD%A0%E5%A5%BD'\n console.log(encodeURIComponent(\"你好+22\")) // '%E4%BD%A0%E5%A5%BD%2B22'\n console.log(encodeURIComponent(\"你;/=好+22\")) // '%E4%BD%A0%3B%2F%3D%E5%A5%BD%2B22'\n console.log(encodeURIComponent(\"https://demo.dcloud.net.cn/mock/最新/12\")) // 'https%3A%2F%2Fdemo.dcloud.net.cn%2Fmock%2F%E6%9C%80%E6%96%B0%2F12'\n```"},"atob":{"name":"### atob(encodedData)","description":"atob() 函数会对经过 Base64 编码的字符串进行解码","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| encodedData | string | 是 | - | - | 一个包含 base64 编码数据的二进制字符串(即字符串中的每个字符都被视为一字节的二进制数据)。 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| string | 从 encodedData 解码出来的 ASCII 字符串 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| √ | 4.25 | x | 4.25 | x | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","tutorial":"\n**参见** \n\n [相关 Bug](https://issues.dcloud.net.cn/?mid=uts.globleMethods.atob)","test":"```uts\n // #ifdef APP-ANDROID\n console.log(atob(\"\")) // '';\n console.log(atob('aGVsbG8gd29ybGQ=')) // 'hello world';\n console.log(atob(\"QC0xMjM0NTY3ODkwcXdlcnR5dWlvcGFzZGZnaGprbHp4Y3Zibm0tUVdFUlRZVUlPUEFTREZHSEpLTFpYQ1ZCTk1ALTEyMzQ1Njc4OTBxd2VydHl1aW9wYXNkZmdoamtsenhjdmJubS1RV0VSVFlVSU9QQVNERkdISktMWlhDVkJOTUAtMTIzNDU2Nzg5MHF3ZXJ0eXVpb3Bhc2RmZ2hqa2x6eGN2Ym5tLVFXRVJUWVVJT1BBU0RGR0hKS0xaWENWQk5NQC0xMjM0NTY3ODkwcXdlcnR5dWlvcGFzZGZnaGprbHp4Y3Zibm0tUVdFUlRZVUlPUEFTREZHSEpLTFpYQ1ZCTk1ALTEyMzQ1Njc4OTBxd2VydHl1aW9wYXNkZmdoamtsenhjdmJubS1RV0VSVFlVSU9QQVNERkdISktMWlhDVkJOTQ==\")) // '@-1234567890qwertyuiopasdfghjklzxcvbnm-QWERTYUIOPASDFGHJKLZXCVBNM@-1234567890qwertyuiopasdfghjklzxcvbnm-QWERTYUIOPASDFGHJKLZXCVBNM@-1234567890qwertyuiopasdfghjklzxcvbnm-QWERTYUIOPASDFGHJKLZXCVBNM@-1234567890qwertyuiopasdfghjklzxcvbnm-QWERTYUIOPASDFGHJKLZXCVBNM@-1234567890qwertyuiopasdfghjklzxcvbnm-QWERTYUIOPASDFGHJKLZXCVBNM';\n // #endif\n```"},"btoa":{"name":"### btoa(stringToEncode)","description":"btoa() 方法可以将一个二进制字符串(例如,将字符串中的每一个字节都视为一个二进制数据字节)编码为 Base64 编码的 ASCII 字符串","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stringToEncode | string | 是 | - | - | 一个需要编码的二进制字符串 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| string | 一个包含 stringToEncode 的 Base64 表示的 ASCII 字符串。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| √ | 4.25 | x | 4.25 | x | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","tutorial":"\n**参见** \n\n [相关 Bug](https://issues.dcloud.net.cn/?mid=uts.globleMethods.btoa)","test":"```uts\n // #ifdef APP-ANDROID\n console.log(btoa(\"\")) // '';\n console.log(btoa(\"hello world\")) // 'aGVsbG8gd29ybGQ=';\n console.log(btoa(\"@-1234567890qwertyuiopasdfghjklzxcvbnm-QWERTYUIOPASDFGHJKLZXCVBNM@-1234567890qwertyuiopasdfghjklzxcvbnm-QWERTYUIOPASDFGHJKLZXCVBNM@-1234567890qwertyuiopasdfghjklzxcvbnm-QWERTYUIOPASDFGHJKLZXCVBNM@-1234567890qwertyuiopasdfghjklzxcvbnm-QWERTYUIOPASDFGHJKLZXCVBNM@-1234567890qwertyuiopasdfghjklzxcvbnm-QWERTYUIOPASDFGHJKLZXCVBNM\")) // 'QC0xMjM0NTY3ODkwcXdlcnR5dWlvcGFzZGZnaGprbHp4Y3Zibm0tUVdFUlRZVUlPUEFTREZHSEpLTFpYQ1ZCTk1ALTEyMzQ1Njc4OTBxd2VydHl1aW9wYXNkZmdoamtsenhjdmJubS1RV0VSVFlVSU9QQVNERkdISktMWlhDVkJOTUAtMTIzNDU2Nzg5MHF3ZXJ0eXVpb3Bhc2RmZ2hqa2x6eGN2Ym5tLVFXRVJUWVVJT1BBU0RGR0hKS0xaWENWQk5NQC0xMjM0NTY3ODkwcXdlcnR5dWlvcGFzZGZnaGprbHp4Y3Zibm0tUVdFUlRZVUlPUEFTREZHSEpLTFpYQ1ZCTk1ALTEyMzQ1Njc4OTBxd2VydHl1aW9wYXNkZmdoamtsenhjdmJubS1RV0VSVFlVSU9QQVNERkdISktMWlhDVkJOTQ==';\n // #endif\n```"},"requestAnimationFrame":{"name":"### requestAnimationFrame(callback)","description":"在下一次重绘之前,调用用户提供的回调函数","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| callback | RequestAnimationFrameCallback | 是 | - | - | - | \n","returnValue":"**返回值** \n\n| 类型 |\n| :- |\n| number | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 4.25 | 4.25 | x | x | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","tutorial":"\n**参见** \n\n [相关 Bug](https://issues.dcloud.net.cn/?mid=uts.globleMethods.requestAnimationFrame)"},"cancelAnimationFrame":{"name":"### cancelAnimationFrame(taskId)","description":"取消一个先前通过调用 requestAnimationFrame() 方法添加到计划中的动画帧请求","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| taskId | number | 是 | - | - | - | \n","returnValue":"**返回值** \n\n| 类型 |\n| :- |\n| void | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 4.25 | 4.25 | x | x | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","tutorial":"\n**参见** \n\n [相关 Bug](https://issues.dcloud.net.cn/?mid=uts.globleMethods.cancelAnimationFrame)"},"setInterval":{"name":"### setInterval(handler, timeout?, ...arguments)","description":"setInterval() 方法重复调用一个函数或执行一个代码片段,在每次调用之间具有固定的时间间隔。
它返回一个 interval ID,该 ID 唯一地标识时间间隔,因此你可以稍后通过调用 clearInterval() 来移除定时器。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| handler | string \\| Function | 是 | - | - | - |\n| timeout | number | 否 | - | - | - |\n| arguments | any[\\] | 是 | - | - | - | \n","returnValue":"**返回值** \n\n| 类型 |\n| :- |\n| number | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 3.9 | 3.9 | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","tutorial":"\n**参见** \n\n [相关 Bug](https://issues.dcloud.net.cn/?mid=uts.globleMethods.setInterval)","test":"```uts\n // #ifdef APP-ANDROID\n let aCount = 0\n let taskId = setInterval(function () {\n aCount += 1\n }, 0)\n setTimeout(function () {\n console.log(aCount)\n console.log(taskId)\n clearInterval(taskId)\n console.log(aCount > 10) // true;\n }, 200)\n // #endif\n```"},"setTimeout":{"name":"### setTimeout(handler, timeout?, ...arguments)","description":"全局的 setTimeout() 方法设置一个定时器,一旦定时器到期,就会执行一个函数或指定的代码片段。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| handler | string \\| Function | 是 | - | - | - |\n| timeout | number | 否 | - | - | - |\n| arguments | any[\\] | 是 | - | - | - | \n","returnValue":"**返回值** \n\n| 类型 |\n| :- |\n| number | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 3.9 | 3.9 | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","tutorial":"\n**参见** \n\n [相关 Bug](https://issues.dcloud.net.cn/?mid=uts.globleMethods.setTimeout)"},"clearInterval":{"name":"### clearInterval(id)","description":"clearInterval() 方法可取消先前通过 setInterval() 设置的重复定时任务。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| id | number \\| undefined | 是 | - | - | - | \n","returnValue":"**返回值** \n\n| 类型 |\n| :- |\n| void | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 3.9 | 3.9 | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","tutorial":"\n**参见** \n\n [相关 Bug](https://issues.dcloud.net.cn/?mid=uts.globleMethods.clearInterval)"},"clearTimeout":{"name":"### clearTimeout(id)","description":"clearTimeout() 方法取消了先前通过调用setTimeout()建立的定时器","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| id | number \\| undefined | 是 | - | - | - | \n","returnValue":"**返回值** \n\n| 类型 |\n| :- |\n| void | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 3.9 | 3.9 | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","tutorial":"\n**参见** \n\n [相关 Bug](https://issues.dcloud.net.cn/?mid=uts.globleMethods.clearTimeout)"}},"Timers":{"tutorial":"\n### 参见\n[相关 Bug](https://issues.dcloud.net.cn/?mid=uts.timerMethods)","eval":{"name":"### eval(x)","description":"eval() 函数会将传入的字符串当做 JavaScript 代码进行执行。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| x | string | 是 | - | - | 一个表示 JavaScript 表达式、语句或一系列语句的字符串。表达式可以包含变量与已存在对象的属性。 | \n","returnValue":"**返回值** \n\n| 类型 |\n| :- |\n| any | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","tutorial":"\n**参见** \n\n [相关 Bug](https://issues.dcloud.net.cn/?mid=uts.timerMethods.eval)"},"parseInt":{"name":"### parseInt(string, radix?)","description":"parseInt(string, radix) 解析一个字符串并返回指定基数的十进制整数,radix 是 2-36 之间的整数,表示被解析字符串的基数。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| string | string | 是 | - | - | 要被解析的值。字符串开头的空白符将会被忽略。(注意:只接收字符串类型的参数,其他类型将编译报错。) |\n| radix | number | 否 | - | - | 从 2 到 36 的整数,表示进制的基数。例如指定 16 表示被解析值是十六进制数。如果超出这个范围,将返回 NaN。假如指定 0 或未指定,基数将会根据字符串的值进行推算。注意,推算的结果不会永远是默认值 10! | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| number | 从给定的字符串中解析出的一个整数,或者 NaN。当radix 小于 2 或大于 36,或第一个非空格字符不能转换为数字时返回 NAN。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 3.9 | 3.9 | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","tutorial":"\n**参见** \n\n [相关 Bug](https://issues.dcloud.net.cn/?mid=uts.timerMethods.parseInt)"},"parseFloat":{"name":"### parseFloat(string)","description":"parseFloat() 函数解析一个参数(直接收字符串类型的参数,其他类型编译报错)并返回一个浮点数。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| string | string | 是 | - | - | 需要被解析成为浮点数的值。 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| number | 给定值被解析成浮点数。如果给定值不能被转换成数值,则会返回 NaN。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 3.9 | 3.9 | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","tutorial":"\n**参见** \n\n [相关 Bug](https://issues.dcloud.net.cn/?mid=uts.timerMethods.parseFloat)"},"isNaN":{"name":"### isNaN(number)","description":"isNaN() 函数用来确定一个值是否为NaN 。注:isNaN函数内包含一些非常有趣的规则;你也可以使用 ECMAScript 2015 中定义的 Number.isNaN() 来判断。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| number | number | 是 | - | - | 要被检测的值。 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| boolean | 如果给定值为 NaN则返回值为true;否则为false。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 3.9 | 3.9 | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","tutorial":"\n**参见** \n\n [相关 Bug](https://issues.dcloud.net.cn/?mid=uts.timerMethods.isNaN)"},"isFinite":{"name":"### isFinite(number)","description":"isFinite() 函数用来判断被传入的参数值是否为一个有限数值(finite number)。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| number | number | 是 | - | - | 要被检测的值。 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| boolean | 如果参数是 NaN,正无穷大或者负无穷大,会返回false,其他返回 true。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 3.9 | 3.9 | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","tutorial":"\n**参见** \n\n [相关 Bug](https://issues.dcloud.net.cn/?mid=uts.timerMethods.isFinite)"},"decodeURI":{"name":"### decodeURI(encodedURI)","description":"decodeURI() 函数能解码由encodeURI 创建或其他流程得到的统一资源标识符(URI)。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| encodedURI | string | 是 | - | - | 一个完整的编码过的 URI | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| string\\|null | 返回一个给定编码统一资源标识符 (URI) 的未编码版本的新字符串, 当 encodedURI 包含无效字符序列时,会返回null | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.91 | 4.11 | 3.91 | 3.91 | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","tutorial":"\n**参见** \n\n [相关 Bug](https://issues.dcloud.net.cn/?mid=uts.timerMethods.decodeURI)"},"decodeURIComponent":{"name":"### decodeURIComponent(encodedURIComponent)","description":"decodeURIComponent() 方法用于解码由 encodeURIComponent 方法或者其他类似方法编码的部分统一资源标识符(URI)。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| encodedURIComponent | string | 是 | - | - | 编码后的部分 URI | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| string\\|null | 一个解码后的统一资源标识符(URI)字符串,处理前的 URI 经过了给定格式的编码。当 encodedURI 包含无效字符序列时,会返回null. | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.91 | 4.11 | 3.91 | 3.91 | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","tutorial":"\n**参见** \n\n [相关 Bug](https://issues.dcloud.net.cn/?mid=uts.timerMethods.decodeURIComponent)"},"encodeURI":{"name":"### encodeURI(uri)","description":"encodeURI() 函数通过将特定字符的每个实例替换为一个、两个、三或四转义序列来对统一资源标识符 (URI) 进行编码 (该字符的 UTF-8 编码仅为四转义序列) 由两个 \"代理\" 字符组成)。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| uri | string | 是 | - | - | 一个完整的 URI。 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| string\\|null | 一个新字符串,表示提供的字符串编码为统一资源标识符 (URI)。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.91 | 4.11 | 3.91 | 3.91 | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","tutorial":"\n**参见** \n\n [相关 Bug](https://issues.dcloud.net.cn/?mid=uts.timerMethods.encodeURI)"},"encodeURIComponent":{"name":"### encodeURIComponent(uriComponent)","description":"encodeURIComponent() 函数通过将特定字符的每个实例替换成代表字符的 UTF-8 编码的一个、两个、三个或四个转义序列来编码 URI(只有由两个“代理”字符组成的字符会被编码为四个转义序列)。与 encodeURI() 相比,此函数会编码更多的字符,包括 URI 语法的一部分。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| uriComponent | string | 是 | - | - | 要被检测的 string 值。 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| string\\|null | 原字串作为 URI 组成部分被被编码后的新字符串。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.91 | 4.11 | 3.91 | 3.91 | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","tutorial":"\n**参见** \n\n [相关 Bug](https://issues.dcloud.net.cn/?mid=uts.timerMethods.encodeURIComponent)"},"atob":{"name":"### atob(encodedData)","description":"atob() 函数会对经过 Base64 编码的字符串进行解码","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| encodedData | string | 是 | - | - | 一个包含 base64 编码数据的二进制字符串(即字符串中的每个字符都被视为一字节的二进制数据)。 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| string | 从 encodedData 解码出来的 ASCII 字符串 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| √ | 4.25 | x | 4.25 | x | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","tutorial":"\n**参见** \n\n [相关 Bug](https://issues.dcloud.net.cn/?mid=uts.timerMethods.atob)"},"btoa":{"name":"### btoa(stringToEncode)","description":"btoa() 方法可以将一个二进制字符串(例如,将字符串中的每一个字节都视为一个二进制数据字节)编码为 Base64 编码的 ASCII 字符串","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stringToEncode | string | 是 | - | - | 一个需要编码的二进制字符串 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| string | 一个包含 stringToEncode 的 Base64 表示的 ASCII 字符串。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| √ | 4.25 | x | 4.25 | x | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","tutorial":"\n**参见** \n\n [相关 Bug](https://issues.dcloud.net.cn/?mid=uts.timerMethods.btoa)"},"requestAnimationFrame":{"name":"### requestAnimationFrame(callback)","description":"在下一次重绘之前,调用用户提供的回调函数","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| callback | RequestAnimationFrameCallback | 是 | - | - | - | \n","returnValue":"**返回值** \n\n| 类型 |\n| :- |\n| number | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 4.25 | 4.25 | x | x | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","tutorial":"\n**参见** \n\n [相关 Bug](https://issues.dcloud.net.cn/?mid=uts.timerMethods.requestAnimationFrame)"},"cancelAnimationFrame":{"name":"### cancelAnimationFrame(taskId)","description":"取消一个先前通过调用 requestAnimationFrame() 方法添加到计划中的动画帧请求","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| taskId | number | 是 | - | - | - | \n","returnValue":"**返回值** \n\n| 类型 |\n| :- |\n| void | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 4.25 | 4.25 | x | x | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","tutorial":"\n**参见** \n\n [相关 Bug](https://issues.dcloud.net.cn/?mid=uts.timerMethods.cancelAnimationFrame)"},"setInterval":{"name":"### setInterval(handler, timeout?, ...arguments)","description":"setInterval() 方法重复调用一个函数或执行一个代码片段,在每次调用之间具有固定的时间间隔。
它返回一个 interval ID,该 ID 唯一地标识时间间隔,因此你可以稍后通过调用 clearInterval() 来移除定时器。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| handler | string \\| Function | 是 | - | - | - |\n| timeout | number | 否 | - | - | - |\n| arguments | any[\\] | 是 | - | - | - | \n","returnValue":"**返回值** \n\n| 类型 |\n| :- |\n| number | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 3.9 | 3.9 | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","tutorial":"\n**参见** \n\n [相关 Bug](https://issues.dcloud.net.cn/?mid=uts.timerMethods.setInterval)"},"setTimeout":{"name":"### setTimeout(handler, timeout?, ...arguments)","description":"全局的 setTimeout() 方法设置一个定时器,一旦定时器到期,就会执行一个函数或指定的代码片段。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| handler | string \\| Function | 是 | - | - | - |\n| timeout | number | 否 | - | - | - |\n| arguments | any[\\] | 是 | - | - | - | \n","returnValue":"**返回值** \n\n| 类型 |\n| :- |\n| number | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 3.9 | 3.9 | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","tutorial":"\n**参见** \n\n [相关 Bug](https://issues.dcloud.net.cn/?mid=uts.timerMethods.setTimeout)"},"clearInterval":{"name":"### clearInterval(id)","description":"clearInterval() 方法可取消先前通过 setInterval() 设置的重复定时任务。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| id | number \\| undefined | 是 | - | - | - | \n","returnValue":"**返回值** \n\n| 类型 |\n| :- |\n| void | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 3.9 | 3.9 | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","tutorial":"\n**参见** \n\n [相关 Bug](https://issues.dcloud.net.cn/?mid=uts.timerMethods.clearInterval)"},"clearTimeout":{"name":"### clearTimeout(id)","description":"clearTimeout() 方法取消了先前通过调用setTimeout()建立的定时器","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| id | number \\| undefined | 是 | - | - | - | \n","returnValue":"**返回值** \n\n| 类型 |\n| :- |\n| void | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | 3.9 | 3.9 | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","tutorial":"\n**参见** \n\n [相关 Bug](https://issues.dcloud.net.cn/?mid=uts.timerMethods.clearTimeout)"}},"Number":{"tutorial":"\n### 参见\n[相关 Bug](https://issues.dcloud.net.cn/?mid=uts.buildInObject.Number)","MAX_VALUE":{"name":"### MAX_VALUE","description":"在 JavaScript 里所能表示的最大数值。无限接近于 1.79E+308。","param":"","returnValue":"","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"prop"},"MIN_VALUE":{"name":"### MIN_VALUE","description":"表示在 JavaScript 中所能表示的最小的正值。 无限接近于 5.00E-324。
","param":"","returnValue":"","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"prop"},"NaN":{"name":"### NaN","description":"表示“非数字”(Not-A-Number)。和 NaN 相同。
在相等比较中,NaN不等于任何值,包括它自己。要测试一个值是否等于NaN,使用isNaN函数。
","param":"","returnValue":"","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"prop"},"NEGATIVE_INFINITY":{"name":"### NEGATIVE_INFINITY","description":"表示负无穷大。
Number.NEGATIVE_INFINITY 的值和全局对象的 Infinity 属性的负值相同。
","param":"","returnValue":"","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"prop"},"POSITIVE_INFINITY":{"name":"### POSITIVE_INFINITY","description":"表示正无穷大。
Number.POSITIVE_INFINITY 的值同全局对象 Infinity 属性的值相同。
","param":"","returnValue":"","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"prop"},"toString":{"name":"### toString(radix?)","description":"返回指定 Number 对象的字符串表示形式。如果转换的基数大于 10,则会使用字母来表示大于 9 的数字,比如基数为 16 的情况,则使用 a 到 f 的字母来表示 10 到 15。如果基数没有指定,则使用 10。如果对象是负数,则会保留负号。即使 radix 是 2 时也是如此:返回的字符串包含一个负号(-)前缀和正数的二进制表示,不是 数值的二进制补码。进行数字到字符串的转换时,建议用小括号将要转换的目标括起来,防止出错。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| radix | number | 否 | - | - | 指定要用于数字到字符串的转换的基数 (从 2 到 36)。如果未指定 radix 参数,则默认值为 10。 | \n","returnValue":"**返回值** \n\n| 类型 |\n| :- |\n| string | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | √ | √ | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","test":"```uts\n console.log((10).toString())//10\n```"},"toFixed":{"name":"### toFixed(fractionDigits?)","description":"使用定点表示法来格式化一个数值。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| fractionDigits | number | 否 | - | - | 小数点后数字的个数;介于 0 到 20(包括)之间,实现环境可能支持更大范围。如果忽略该参数,则默认为 0。 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| string | 使用定点表示法表示给定数字的字符串。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | √ | √ | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","test":"```uts\n function financial(x : Number) : String {\n return x.toFixed(2);\n }\n console.log(financial(123.456));\n // expected output: \"123.46\"\n console.log(financial(0.004));\n // expected output: \"0.00\"\n```"},"toExponential":{"name":"### toExponential(fractionDigits?)","description":"以指数表示法返回该数值字符串表示形式。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| fractionDigits | number | 否 | - | - | 可选。一个整数,用来指定小数点后有几位数字。默认情况下用尽可能多的位数来显示数字。如果 fractionDigits 太小或太大将会抛出该错误。必须介于 0 和 20(包括 20)之间。 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| string | 一个用幂的形式 (科学记数法) 来表示Number 对象的字符串。小数点后以 fractionDigits 提供的值来四舍五入。如果 fractionDigits 参数被忽略了,小数点后的将尽可能用最多的位数来表示该数值。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method"},"toPrecision":{"name":"### toPrecision(precision?)","description":"以指定的精度返回该数值对象的字符串表示。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| precision | number | 否 | - | - | 一个用来指定有效数个数的整数。 必须介于 1 到 21 之间。 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| string | 以定点表示法或指数表示法表示的一个数值对象的字符串表示,四舍五入到 precision 参数指定的显示数字位数。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","test":"```uts\n console.log(123.456.toPrecision(4))//123.5\n```"},"valueOf":{"name":"### valueOf()","description":"返回一个被 Number 对象包装的原始值。","param":"","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| number | 表示指定 Number 对象的原始值的数字。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | √ | √ | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","test":"```uts\n console.log((10).valueOf()) //10\n```"},"toInt":{"name":"### toInt()","description":"返回一个Int 值","param":"","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| Int | 返回 number 对应的 Int 值。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| x | 3.9 | 4.11 | √ | √ | x |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","test":"```uts\n let a = 12\n console.log(a.toInt());\n // expected output: 12\n\n // Int最大值2147483647,溢出了\n let b = 2147483648\n // expected output: -2147483648\n```"},"toFloat":{"name":"### toFloat()","description":"返回一个Float 值","param":"","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| Float | 返回 number 对应的 Float 值。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| x | 3.9 | 4.11 | √ | √ | x |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method"},"toDouble":{"name":"### toDouble()","description":"返回一个 Double 值","param":"","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| Double | 返回 number 对应的 Double 值。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| x | 3.9 | 4.11 | √ | √ | x |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method"},"toInt64":{"name":"### toInt64()","description":"返回一个 Int64 值, app-iOS平台特有。","param":"","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| Int64 | 返回 number 对应的 Int64 值。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| x | x | 4.11 | x | 3.9 | x |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method"},"toInt32":{"name":"### toInt32()","description":"返回一个 Int32 值, app-iOS平台特有。","param":"","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| Int32 | 返回 number 对应的 Int32 值。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| x | x | 4.11 | x | 3.9 | x |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method"},"toInt16":{"name":"### toInt16()","description":"返回一个 Int16 值, app-iOS平台特有。","param":"","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| Int16 | 返回 number 对应的 Int16 值。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| x | x | 4.11 | x | 3.9 | x |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method"},"toInt8":{"name":"### toInt8()","description":"返回一个 Int8 值, app-iOS平台特有。","param":"","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| Int8 | 返回 number 对应的 Int8 值。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| x | x | 4.11 | x | 3.9 | x |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method"},"toUInt":{"name":"### toUInt()","description":"返回一个 UInt 值","param":"","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| UInt | 返回 number 对应的 UInt 值。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| x | 3.9 | 4.11 | √ | 3.9 | x |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method"},"toUInt64":{"name":"### toUInt64()","description":"返回一个 UInt64 值, app-iOS平台特有。","param":"","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| UInt64 | 返回 number 对应的 UInt64 值。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| x | x | 4.11 | x | 3.9 | x |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method"},"toUInt32":{"name":"### toUInt32()","description":"返回一个 UInt32 值, app-iOS平台特有。","param":"","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| UInt32 | 返回 number 对应的 UInt32 值。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| x | x | 4.11 | x | 3.9 | x |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method"},"toUInt16":{"name":"### toUInt16()","description":"返回一个 UInt16 值, app-iOS平台特有。","param":"","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| UInt16 | 返回 number 对应的 UInt16 值。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| x | x | 4.11 | x | 3.9 | x |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method"},"toUInt8":{"name":"### toUInt8()","description":"返回一个 UInt8 值, app-iOS平台特有。","param":"","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| UInt8 | 返回 number 对应的 UInt8 值。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| x | x | 4.11 | x | 3.9 | x |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method"},"toByte":{"name":"### toByte()","description":"将当前的Number数据转换为Byte表示,如果超出Byte最大值表示范围,会得到溢出后余数表示, app-andorid平台特有。","param":"","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| Byte | 返回 number 对应的 Byte 值。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| x | 3.9 | x | √ | x | x |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","test":"```uts\n let a = 12\n // #ifdef APP-ANDROID\n console.log(a.toByte());\n // #endif\n // expected output: 12\n```"},"toLong":{"name":"### toLong()","description":"将当前的Number数据转换为Long表示,如果超出Long最大值表示范围,会得到溢出后余数表示, app-andorid平台特有。","param":"","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| Long | 返回 number 对应的 Long 值。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| x | 3.9 | x | √ | x | x |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","test":"```uts\n let a = 12\n console.log(a.toLong());\n // expected output: 12\n```"},"toShort":{"name":"### toShort()","description":"将当前的Number数据转换为Short表示,如果超出Short最大值表示范围,会得到溢出后余数表示, app-andorid平台特有。","param":"","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| Short | 返回 number 对应的 Short 值。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| x | 3.9 | x | √ | x | x |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method"},"toUShort":{"name":"### toUShort()","description":"将当前的 Number 数据转换为 UShort 表示,如果超出 UShort 最大值表示范围,会得到溢出后余数表示, app-andorid平台特有。","param":"","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| UShort | 返回 number 对应的 UShort 值。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| x | 3.9 | x | √ | x | x |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method"},"toULong":{"name":"### toULong()","description":"将当前的 Number 数据转换为 ULong 表示,如果超出 ULong 最大值表示范围,会得到溢出后余数表示, app-andorid平台特有。","param":"","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| ULong | 返回 number 对应的 ULong 值。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| x | 3.9 | x | √ | x | x |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method"},"Constructor":{"name":"### Constructor(value?)","description":"创建一个 Number 对象。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| value | any | 否 | - | - | - | \n","returnValue":"**返回值** \n\n| 类型 |\n| :- |\n| Number | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method"},"from":{"name":"### from(value)","description":"通过 Int \\| Float \\| Double \\| Int64 \\| Int32 \\| Int16 \\| Int8 \\| UInt \\| UInt64 \\| UInt32 \\| UInt16 \\| UInt8 \\| Byte \\| Short \\| Long 类型创建一个 number","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| value | Int \\| Float \\| Double \\| Int64 \\| Int32 \\| Int16 \\| Int8 \\| UInt \\| UInt64 \\| UInt32 \\| UInt16 \\| UInt8 \\| Byte \\| Short \\| Long | 是 | - | - | 必填。一个 Swift 或者 Kotlin 专有数字类型的值。其中 Swift 平台 支持 Int, Float, Double, Int64, Int32, Int16, Int8, UInt, UInt64, UInt32, UInt16, UInt8。Kotlin 平台支持 Int, Float, Double, Byte, Short, Long | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| number | 返回 number | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| x | 3.9 | 4.11 | 3.9 | 3.9 | x |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","test":"```uts\n let a: Int = 12\n let b = Number.from(a)\n console.log(b);\n // expected output: 12\n```"}},"String":{"tutorial":"\n### 参见\n[相关 Bug](https://issues.dcloud.net.cn/?mid=uts.buildInObject.String)","length":{"name":"### length","description":"返回字符串的 UTF-16 码元长度。","param":"","returnValue":"","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | √ | √ | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"prop","test":"```uts\n const x = \"Mozilla\";\n const e = \"\";\n\n console.log(\"Mozilla is \" + `${x.length}` + \" code units long\");\n /* \"Mozilla is 7 code units long\" */\n\n console.log(\"The empty string is has a length of \" + `${e.length}`);\n /* \"The e string is has a length of 0\" */\n```"},"toString":{"name":"### toString()","description":"返回一个字符串,表示指定的字符串。","param":"","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| string | String 包装对象的字符串值。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method"},"charAt":{"name":"### charAt(pos)","description":"返回一个由给定索引处的单个 UTF-16 码元构成的新字符串。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| pos | number | 是 | - | - | 要返回的字符的索引,从零开始。 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| string | 返回一个字符串,该字符串表示指定 index 处的字符(恰好是一个 UTF-16 码元)。如果 index 超出了 0 – str.length - 1 的范围,charAt() 将返回一个空字符串。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | √ | √ | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","test":"```uts\n const anyString = \"Brave new world\";\n console.log(\"The character at index 0 is '\" + anyString.charAt(0) + \"'\");\n // The character at index 0 is 'B'\n console.log(\"The character at index 1 is '\" + anyString.charAt(1) + \"'\");\n // The character at index 1 is 'r'\n console.log(\"The character at index 2 is '\" + anyString.charAt(2) + \"'\");\n // The character at index 2 is 'a'\n console.log(\"The character at index 3 is '\" + anyString.charAt(3) + \"'\");\n // The character at index 3 is 'v'\n console.log(\"The character at index 4 is '\" + anyString.charAt(4) + \"'\");\n // The character at index 4 is 'e'\n console.log(\"The character at index 999 is '\" + anyString.charAt(999) + \"'\");\n // The character at index 999 is ''\n```"},"toWellFormed":{"name":"### toWellFormed()","description":"String 的 toWellFormed() 方法返回一个字符串,其中该字符串的所有单独代理项都被替换为 Unicode 替换字符 U+FFFD。","param":"","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| string | 新的字符串是原字符串的一个拷贝,其中所有的单独代理项被替换为 Unicode 替换字符 U+FFFD。如果 str 是格式正确的,仍然会返回一个新字符串(本质上是 str 的一个拷贝)。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| √ | 4.25 | x | 4.25 | x | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","test":"```uts\n let ret = \"ab\\uD800\".toWellFormed()\n console.log(ret) //\"ab\\uFFFD\"\n```"},"isWellFormed":{"name":"### isWellFormed()","description":"String 值的 isWellFormed() 方法返回一个表示该字符串是否包含单独代理项的布尔值。","param":"","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| string | 如果字符串不包含单独代理项,返回 true,否则返回 false。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| √ | 4.25 | x | 4.25 | x | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","test":"```uts\n let ret = \"ab\\uD800\".isWellFormed()\n console.log(ret) //false\n```"},"toCharArray":{"name":"### toCharArray()","description":"返回包含此字符串的字符的\\[kotlin.CharArray]","param":"","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| CharArray | 字符数组 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| x | 3.9 | x | √ | x | x |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method"},"charCodeAt":{"name":"### charCodeAt(index)","description":"返回 0 到 65535 之间的整数,表示给定索引处的 UTF-16 代码单元","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| index | number | 是 | - | - | 一个大于等于 0,小于字符串长度的整数。如果不是一个数值,则默认为 0。 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| number | 指定 index 处字符的 UTF-16 代码单元值的一个数字;如果 index 超出范围,charCodeAt() 返回 NaN。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | √ | √ | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","test":"```uts\n const sentence = 'The quick brown fox jumps over the lazy dog.';\n const index = 4;\n console.log(`The character code ${sentence.charCodeAt(index)} is equal to ${sentence.charAt(index)}`);\n // expected output: \"The character code 113 is equal to q\"\n```"},"concat":{"name":"### concat(...strings)","description":"将字符串参数连接到调用的字符串,并返回一个新的字符串。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| strings | string[\\] | 是 | - | - | T要连接到 str 的一个或多个字符串。 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| string | 一个包含所提供的多个字符串文本组合的新字符串。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | √ | √ | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","test":"```uts\n let hello = 'Hello, '\n let ret1 = hello.concat('Kevin', '. Have a nice day.')\n console.log(ret1)\n // Hello, Kevin. Have a nice day.\n```"},"indexOf":{"name":"### indexOf(searchString, position?)","description":"在字符串中搜索指定子字符串,并返回其第一次出现的位置索引。它可以接受一个可选的参数指定搜索的起始位置,如果找到了指定的子字符串,则返回的位置索引大于或等于指定的数字。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| searchString | string | 是 | - | - | 要搜索的子字符串。 |\n| position | number | 否 | - | - | 该方法返回指定子字符串在大于或等于 position 位置的第一次出现的索引,默认为 0。如果 position 大于调用字符串的长度,则该方法根本不搜索调用字符串。如果 position 小于零,该方法的行为就像 position 为 0 时一样。 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| number | 查找的字符串 searchValue 的第一次出现的索引,如果没有找到,则返回 -1。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | √ | √ | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","test":"```uts\n const paragraph = 'The quick brown fox jumps over the lazy dog. If the dog barked, was it really lazy?';\n const searchTerm = 'dog';\n const indexOfFirst = paragraph.indexOf(searchTerm);\n console.log(`The index of the first \"${searchTerm}\" from the beginning is ${indexOfFirst}`);\n // expected output: \"The index of the first \"dog\" from the beginning is 40\"\n\n console.log(`The index of the 2nd \"${searchTerm}\" is ${paragraph.indexOf(searchTerm, (indexOfFirst + 1))}`);\n // expected output: \"The index of the 2nd \"dog\" is 52\"\n```"},"lastIndexOf":{"name":"### lastIndexOf(searchString, position?)","description":"搜索该字符串并返回指定子字符串最后一次出现的索引。它可以接受一个可选的起始位置参数,并返回指定子字符串在小于或等于指定数字的索引中的最后一次出现的位置。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| searchString | string | 是 | - | - | 要搜索的子字符串。 |\n| position | number | 否 | - | - | 该方法返回指定子字符串在小于或等于 position 的位置中的最后一次出现的索引,默认为 +Infinity。如果 position 大于调用字符串的长度,则该方法将搜索整个字符串。如果 position 小于 0,则行为与 0 相同,即该方法只在索引 0 处查找指定的子字符串。 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| number | 如果找到了 searchString,则返回最后一次出现的索引,否则返回 -1。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | √ | √ | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","test":"```uts\n console.log('canal'.lastIndexOf('a'))//3\n```"},"localeCompare":{"name":"### localeCompare(that)","description":"返回一个数字,表示参考字符串在排序顺序中是在给定字符串之前、之后还是与之相同。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| that | string | 是 | - | - | 与 referenceStr 进行比较的字符串。 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| number | 返回一个数字表示 referenceStr 在排序中是否位于 compareString 的前面、后面或二者相同。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method"},"match":{"name":"### match(regexp)","description":"match() 方法检索字符串与正则表达式进行匹配的结果。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| regexp | string \\| RegExp | 是 | - | - | 一个正则表达式对象或者任何具有 Symbol.match 方法的对象。 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| RegExpMatchArray \\| null | 一个 Array,其内容取决于是否存在全局(g)标志,如果没有匹配,则返回 null。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | √ | √ | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","test":"```uts\n const str = 'The quick brown fox jumps over the lazy dog. It barked.';\n const result = str.match(new RegExp('[A-Z]', 'g'));\n console.log(result![0])//\"T\"\n```"},"replace":{"name":"### replace(searchValue, replaceValue)","description":"返回一个由替换值(replacement)替换部分或所有的模式(pattern)匹配项后的新字符串。模式可以是一个字符串或者一个正则表达式。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| searchValue | string \\| RegExp | 是 | - | - | RegExp: 一个RegExp 对象或者其字面量。该正则所匹配的内容会被第二个参数的返回值替换掉。string: 一个将被 newSubStr 替换的 字符串。其被视为一整个字符串,而不是一个正则表达式。仅第一个匹配项会被替换。 |\n| replaceValue | string | 是 | - | - | 用于替换掉第一个参数在原字符串中的匹配部分的字符串。 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| string | 一个部分或全部匹配由替代模式所取代的新的字符串。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | √ | √ | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","test":"```uts\n const p = 'The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?';\n let ret1 = p.replace('dog', 'monkey')\n\n console.log(ret1);\n // expected output: \"The quick brown fox jumps over the lazy monkey. If the dog reacted, was it really lazy?\"\n const regex = /Dog/i;\n let ret2 = p.replace(regex, 'ferret')\n console.log(ret2);\n // expected output: \"The quick brown fox jumps over the lazy ferret. If the dog reacted, was it really lazy?\"\n```"},"replace_1":{"name":"### replace(searchValue, replacer)","description":"返回一个由替换值(replacement)替换部分或所有的模式(pattern)匹配项后的新字符串。模式可以是一个字符串或者一个正则表达式,替换值是一个每次匹配都要调用的回调函数。如果pattern是字符串,则仅替换第一个匹配项。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| searchValue | string \\| RegExp | 是 | - | - | RegExp: 一个RegExp 对象或者其字面量。该正则所匹配的内容会被第二个参数的返回值替换掉。string: 一个将被 newSubStr 替换的 字符串。其被视为一整个字符串,而不是一个正则表达式。仅第一个匹配项会被替换。 |\n| replacer | (substring: string, args?: Array\\) => string | 是 | - | - | 一个用来创建新子字符串的函数,该函数的返回值将替换掉第一个参数匹配到的结果。在iOS中replacer的第二个参数是字符串数组而非可变参数。 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| string | 一个部分或全部匹配由替代模式所取代的新的字符串。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | √ | √ | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","test":"```uts\n // #ifdef APP-ANDROID\n // 不包含捕捉组的示例\n let a = \"The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?\"\n let b = a.replace(RegExp(\"fox\"), function (match : string, offset : number, string : string) : string {\n console.log(\"match\", match)\n console.log(\"offset\", offset)\n console.log(\"string\", string)\n return \"cat\"\n })\n console.log(\"b:\", b)\n \n // 包含一个捕获组的示例。注意,目前android仅支持最多五个捕获组\n let a1 = \"The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?\"\n let b1 = a1.replace(RegExp(\"(fox)\"), function (match : string, p1 : string, offset : number, string : string) : string {\n console.log(\"match\", match)\n console.log(\"p1\", p1)\n console.log(\"offset\", offset)\n console.log(\"string\", string)\n return \"cat\"\n })\n console.log(\"b1\", b1)\n // #endif\n\n```"},"search":{"name":"### search(regexp)","description":"search() 方法执行正则表达式和 String 对象之间的一个搜索匹配。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| regexp | string \\| RegExp | 是 | - | - | 一个正则表达式(regular expression)对象。 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| number | 如果匹配成功,则 search() 返回正则表达式在字符串中首次匹配项的索引;否则,返回 -1。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | √ | √ | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","test":"```uts\n const paragraph = 'The quick brown fox jumps over the lazy dog. If the dog barked, was it really lazy?';\n const regex = /[^\\w\\s]/g;\n // #ifdef APP-ANDROID\n console.log(paragraph.search(regex));\n // expected output: 43\n console.log(paragraph[paragraph.search(regex)]);\n // expected output: \".\"\n // #endif\n```"},"slice":{"name":"### slice(start?, end?)","description":"slice() 方法提取某个字符串的一部分,并返回一个新的字符串,且不会改动原字符串。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| start | number | 否 | - | - | 可选。从该索引(以 0 为基数)处开始提取原字符串中的字符。如果值为负数,会被当做 strLength + beginIndex 看待,这里的strLength 是字符串的长度(例如,如果 beginIndex 是 -3 则看作是:strLength - 3) |\n| end | number | 否 | - | - | 可选。在该索引(以 0 为基数)处结束提取字符串。如果省略该参数,slice() 会一直提取到字符串末尾。如果该参数为负数,则被看作是 strLength + endIndex,这里的 strLength 就是字符串的长度 (例如,如果 endIndex 是 -3,则是,strLength - 3)。 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| string | 返回一个从原字符串中提取出来的新字符串 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | √ | √ | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","test":"```uts\n const str = 'The quick brown fox jumps over the lazy dog.';\n let ret = str.slice(31)\n console.log(ret);\n // expected output: \"the lazy dog.\"\n console.log(str.slice(4, 19));\n // expected output: \"quick brown fox\"\n```"},"split":{"name":"### split(separator, limit?)","description":"split() 方法接受一个模式,通过搜索模式将字符串分割成一个有序的子串列表,将这些子串放入一个数组,并返回该数组。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| separator | string \\| RegExp | 是 | - | - | 描述每个分割应该发生在哪里的模式。 |\n| limit | number | 否 | - | - | 一个非负整数,指定数组中包含的子字符串的数量限制。当提供此参数时,split 方法会在指定 separator 每次出现时分割该字符串,但在已经有 limit 个元素时停止分割。任何剩余的文本都不会包含在数组中。 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| string[\\] | 在给定字符串中出现 separator 的每一个点上进行分割而成的字符串数组。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | √ | √ | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","test":"```uts\n const str = 'The quick brown fox jumps over the lazy dog.';\n const words = str.split(' ');\n let ret1 = words[3]\n console.log(ret1);\n // expected output: \"fox\"\n const chars = str.split('');\n console.log(chars[8]);\n // expected output: \"k\"\n```"},"substring":{"name":"### substring(start, end?)","description":"返回一个字符串在开始索引到结束索引之间的一个子集,或从开始索引直到字符串的末尾的一个子集。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| start | number | 是 | - | - | 要截取的第一个字符的索引,该索引位置的字符作为返回的字符串的首字母。 |\n| end | number | 否 | - | - | 可选。一个 0 到字符串长度之间的整数,以该数字为索引的字符不包含在截取的字符串内。 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| string | 包含给定字符串的指定部分的新字符串。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | √ | √ | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method"},"toLowerCase":{"name":"### toLowerCase()","description":"toLowerCase() 会将调用该方法的字符串值转为小写形式,并返回。","param":"","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| string | 一个新的字符串,表示转换为小写的调用字符串。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | √ | √ | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","test":"```uts\n const str1 = '中文简体 zh-CN || zh-Hans';\n const str2 = 'ALPHABET';\n console.log('str1'.toLowerCase());\n // 中文简体 zh-cn || zh-hans\n console.log(str2.toLowerCase());\n // \"alphabet\"\n```"},"toLocaleLowerCase":{"name":"### toLocaleLowerCase(locales?)","description":"根据任何指定区域语言环境设置的大小写映射,返回调用字符串被转换为小写的格式。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| locales | string \\| string[\\] | 否 | - | - | 可选。指明要转换成小写格式的特定语言区域。如果以一个数组 Array 形式给出多个 locales, 最合适的地区将被选出来应用。默认的 locale 是主机环境的当前区域 (locale) 设置。 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| string | 根据任何特定于语言环境的案例映射规则将被调用字串转换成小写格式的一个新字符串。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method"},"toUpperCase":{"name":"### toUpperCase()","description":"将调用该方法的字符串转为大写形式并返回(如果调用该方法的值不是字符串类型会被强制转换)。","param":"","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| string | 一个新的字符串,表示转换为大写的调用字符串。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | √ | √ | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","test":"```uts\n const sentence = 'The quick brown fox jumps over the lazy dog.';\n console.log(sentence.toUpperCase());\n // expected output: \"THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.\"\n```"},"toLocaleUpperCase":{"name":"### toLocaleUpperCase(locales?)","description":"根据本地主机语言环境把字符串转换为大写格式,并返回转换后的字符串。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| locales | string \\| string[\\] | 否 | - | - | locales参数指示要用于根据任何特定于语言环境的大小写映射转换为大写的语言环境。如果Array中给出了多个区域设置,则使用最佳可用区域设置。默认语言环境是主机环境的当前语言环境。 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| string | 根据任何特定于语言环境的大小写映射,表示转换为大写的调用字符串的新字符串。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method"},"trim":{"name":"### trim()","description":"从字符串的两端清除空格,返回一个新的字符串,而不修改原始字符串。此上下文中的空格是指所有的空白字符(空格、tab、不换行空格等)以及所有行终止符字符(如 LF、CR 等)。","param":"","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| string | 一个表示 str 去掉了开头和结尾的空白字符后的新字符串。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | √ | √ | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","test":"```uts\n let greeting = ' Hello world! ';\n let ret = greeting.trim()\n console.log(ret) //Hello world!\n```"},"substr":{"name":"### substr(from, length?)","description":"返回一个字符串中从指定位置开始到指定字符数的字符。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| from | number | 是 | - | - | 开始提取字符的位置。如果为负值,则被看作 strLength + start,其中 strLength 为字符串的长度(例如,如果 start 为 -3,则被看作 strLength + (-3))。 |\n| length | number | 否 | - | - | 可选。提取的字符数。 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| string | 返回一个字符串中从指定位置开始到指定字符数的字符。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","test":"```uts\n var str1 = \"Mozilla\";\n let ret = str1.substring(0, 3)\n console.log(ret)//\"Moz\"\n```"},"valueOf":{"name":"### valueOf()","description":"返回 String 对象的原始值","param":"","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| string | String 对象的原始值 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method"},"padStart":{"name":"### padStart(targetLength, padString?)","description":"用另一个字符串填充当前字符串(如果需要会重复填充),直到达到给定的长度。填充是从当前字符串的开头开始的。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| targetLength | number | 是 | - | - | 当前 str 填充后的长度。如果该值小于或等于 str.length,则会直接返回当前 str。 |\n| padString | string | 否 | - | - | 可选。用于填充当前 str 的字符串。如果 padString 太长,无法适应 targetLength,则会从末尾被截断。默认值为“ ”字符(U+0020)。 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| string | 在开头填充 padString 直到达到给定的 targetLength 所形成的 String。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | √ | √ | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","test":"```uts\n const str1 = '5';\n let ret = str1.padStart(2, '0')\n console.log(ret);\n // expected output: \"05\"\n```"},"padEnd":{"name":"### padEnd(targetLength, padString?)","description":"将当前字符串从末尾开始填充给定的字符串(如果需要会重复填充),直到达到给定的长度。填充是从当前字符串的末尾开始的。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| targetLength | number | 是 | - | - | 当前 str 填充后的长度。如果该值小于或等于 str.length,则会直接返回当前 str。 |\n| padString | string | 否 | - | - | 可选。用于填充当前 str 的字符串。如果 padString 太长,无法适应 targetLength,则会被截断。默认值为“ ”字符(U+0020)。 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| string | 在开头填充 padString 直到达到给定的 targetLength 所形成的 String。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | √ | √ | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","test":"```uts\n const str1 = 'Breaded Mushrooms';\n let ret1= str1.padEnd(25, '.')\n console.log(ret1);\n // expected output: \"Breaded Mushrooms........\"\n const str2 = '200';\n let ret2=str2.padEnd(5)\n console.log(ret2);\n // expected output: \"200 \"\n```"},"codePointAt":{"name":"### codePointAt(pos)","description":"返回一个小于 1114112 (0x110000) 的非负整数 Number,它是 UTF-16 编码的代码点的代码点值,该代码点始于将此对象转换为字符串而产生的字符串中位置 pos 处的字符串元素。
如果该位置没有元素,则结果未定义。
如果有效的 UTF-16 代理项对不是从 pos 开始,则结果是 pos 处的代码单元。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| pos | number | 是 | - | - | 这个字符串中需要转码的元素的位置。 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| number \\| null | 返回值是在字符串中的给定索引的编码单元体现的数字,如果在索引处没找到元素则返回 null。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method"},"includes":{"name":"### includes(searchString, position?)","description":"如果 searchString 作为此对象转换为 String 的结果的子字符串出现在大于或等于position的一个或多个位置,则返回 true;否则,返回 false。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| searchString | string | 是 | - | - | 要在 str 中搜索的字符串。不能是正则表达式。 |\n| position | number | 否 | - | - | 在字符串中开始搜索 searchString 的位置。(默认为 0。) | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| boolean | 如果在给定的字符串中找到了要搜索的字符串(包括 searchString 为空字符串的情况),则返回 true,否则返回 false。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | √ | √ | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","test":"```uts\n const sentence = 'The quick brown fox jumps over the lazy dog.';\n const word = 'fox';\n console.log(sentence.includes(word)) // true\n```"},"endsWith":{"name":"### endsWith(searchString, endPosition?)","description":"endsWith() 方法用于判断一个字符串是否以指定字符串结尾,如果是则返回 true,否则返回 false。该方法区分大小写。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| searchString | string | 是 | - | - | 要搜索的作为结尾的字符串,不能是正则表达式。所有非正则表达式的值都会被强制转换为字符串。 |\n| endPosition | number | 否 | - | - | 可选,预期找到 searchString 的末尾位置(即 searchString 最后一个字符的索引加 1)。默认为 str.length。 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| boolean | 如果被检索字符串的末尾出现了指定的字符串(包括 searchString 为空字符串的情况),则返回 true;否则返回 false。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | √ | √ | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","test":"```uts\n const str1 = 'Cats are the best!';\n console.log(str1.endsWith('best!'));\n // expected output: true\n console.log(str1.endsWith('best', 17));\n // expected output: true\n const str2 = 'Is this a question?';\n console.log(str2.endsWith('question'));\n // expected output: false\n```"},"normalize":{"name":"### normalize(form)","description":"normalize() 方法会按照指定的一种 Unicode 正规形式将当前字符串规范化。(如果该值不是字符串,则首先将其转换为一个字符串)。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| form | \"NFC\" \\| \"NFD\" \\| \"NFKC\" \\| \"NFKD\" | 是 | - | - | 四种 Unicode 正规形式(Unicode Normalization Form)\"NFC\"、\"NFD\"、\"NFKC\",或 \"NFKD\" 其中的一个,默认值为 \"NFC\"。 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| string | 含有给定字符串的 Unicode 规范化形式的字符串。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method"},"normalize_1":{"name":"### normalize(form?)","description":"normalize() 方法会按照指定的一种 Unicode 正规形式将当前字符串规范化。(如果该值不是字符串,则首先将其转换为一个字符串)。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| form | string | 否 | - | - | 四种 Unicode 正规形式(Unicode Normalization Form)\"NFC\"、\"NFD\"、\"NFKC\",或 \"NFKD\" 其中的一个,默认值为 \"NFC\"。 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| string | 含有给定字符串的 Unicode 规范化形式的字符串。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method"},"repeat":{"name":"### repeat(count)","description":"repeat() 构造并返回一个新字符串,该字符串包含被连接在一起的指定数量的字符串的副本。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| count | number | 是 | - | - | 介于 0 和 +Infinity 之间的整数。表示在新构造的字符串中重复了多少遍原字符串。 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| string | 包含指定字符串的指定数量副本的新字符串。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | √ | √ | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","test":"```uts\n \"abc\".repeat(0) // \"\"\n \"abc\".repeat(1) // \"abc\"\n \"abc\".repeat(2) // \"abcabc\"\n \"abc\".repeat(3.5) // \"abcabcabc\" 参数 count 将会被自动转换成整数。\n```"},"startsWith":{"name":"### startsWith(searchString, position?)","description":"startsWith() 方法用来判断当前字符串是否以另外一个给定的子字符串开头,并根据判断结果返回 true 或 false。这个方法区分大小写。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| searchString | string | 是 | - | - | 要搜索的子字符串。 |\n| position | number | 否 | - | - | 在 str 中搜索 searchString 的开始位置,默认值为 0。 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| boolean | 如果在字符串的开头找到了给定的字符则返回 true;否则返回 false。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 3.9 | 4.11 | √ | √ | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method","test":"```uts\n const str = 'hello world';\n console.log(str.startsWith('hello'))//true\n```"},"anchor":{"name":"### anchor(name)","description":"anchor() 方法创建一个 \\ HTML 锚元素,被用作超文本靶标(hypertext target)。","param":"**参数** \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| name | string | 是 | - | - | 一个字符串,表示被创建的标签的 name 属性。 | \n","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| string | 包含 \\ HTML 元素的一个字符串。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method"},"big":{"name":"### big()","description":"创建一个使字符串显示大号字体的\\标签。","param":"","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| string | 带有 \\标签的字符串。 | \n","compatibility":"**兼容性** \n\n| Web uni-app x | Android uni-app x | iOS uni-app x | Android uni-app | iOS uni-app | Web uni-app |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x | √ |\n\n**UTS 插件兼容性** \n| Android uni-app x UTS 插件 | Android uni-app UTS 插件 | iOS uni-app x UTS 插件 | iOS uni-app UTS 插件 |\n| :- | :- | :- | :- |\n| - | - | - | - |","itemType":"method"},"blink":{"name":"### blink()","description":"blink() 方法创建一个字符串,其在 \\ 中嵌入字符串,这使得字符串在旧版浏览器中闪烁。","param":"","returnValue":"**返回值** \n\n| 类型 | 描述 |\n| :- | :- |\n| string | 包含 \\