diff --git a/docs/.vuepress/utils/utsComJson.json b/docs/.vuepress/utils/utsComJson.json
index ca0b2e1228e3001851a4ebe368f8f002f92fc1f5..115bc12dbbc6081be0571e22f4057711e8bd9af7 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 | x | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| hover-class | string([string.ClassString](/uts/data-type.md#ide-string)) | \"none\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | 指定按下去的样式类。当 hover-class=\"none\" 时，没有点击态效果 |\n| hover-stop-propagation | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 指定是否阻止本节点的祖先节点出现点击态(祖先节点：指根节点到该节点路径上的所有节点都是这个节点的祖先节点) |\n| hover-start-time | number | 50 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 按住后多久出现点击态，单位毫秒 |\n| hover-stay-time | number | 400 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 手指松开后点击态保留时间，单位毫秒 |","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<template>\r\n  <page-head title=\"view\"></page-head>\r\n  <view class=\"main\" :hover-class=\"hover_class ? 'is-parent-hover' : 'none'\">\r\n    <view class=\"test-view\" :hover-class=\"hover_class ? 'is-hover' : 'none'\" :hover-stop-propagation=\"stop_propagation\"\r\n      :hover-start-time=\"start_time\" :hover-stay-time=\"stay_time\">\r\n    </view>\r\n  </view>\r\n  <scroll-view style=\"flex: 1\">\r\n    <view class=\"content\">\r\n      <boolean-data :defaultValue=\"false\" title=\"是否指定按下去的样式类\" @change=\"change_hover_class_boolean\"></boolean-data>\r\n      <boolean-data :defaultValue=\"false\" title=\"是否阻止本节点的祖先节点出现点击态\"\r\n        @change=\"change_stop_propagation_boolean\"></boolean-data>\r\n      <enum-data :items=\"start_time_enum\" title=\"按住后多久出现点击态\" @change=\"radio_change_start_time_enum\"></enum-data>\r\n      <enum-data :items=\"stay_time_enum\" title=\"手指松开后点击态保留时间\" @change=\"radio_change_stay_time_enum\"></enum-data>\r\n    </view>\r\n  </scroll-view>\r\n</template>\r\n\r\n\r\n<style>\r\n  .main {\r\n    padding: 5px 0;\r\n    flex-direction: row;\r\n    justify-content: center;\r\n  }\r\n\r\n  .test-view {\r\n    height: 200px;\r\n    width: 200px;\r\n    background-color: white;\r\n  }\r\n\r\n  .text {\r\n    color: #777;\r\n    font-size: 13px;\r\n  }\r\n\r\n  .is-hover {\r\n    background-color: #179b16;\r\n  }\r\n\r\n  .is-parent-hover {\r\n    background-color: #aa0000;\r\n  }\r\n</style>\r\n\n```\n\n>Script\n```uts\n\r\n  import { ItemType } from '@/components/enum-data/enum-data-types'\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 | x | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| type | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"4.11\",\"4.11\"]]}' /> | 渲染模式，可取值 nested |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| nested | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"4.11\",\"4.11\"]]}' /> | 嵌套模式。用于处理父子 scroll-view 间的嵌套滚动，子节点只能是 nested-scroll-header nested-scroll-body 组件或自定义 refresher |\n| direction | string | \"vertical\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"4.0\",\"4.11\"]]}' /> | 滚动方向，可取值 none、all、horizontal、vertical，默认值vertical |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"4.0\",\"4.11\"]]}' /> | 禁止滚动 |\n@| all | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 横向竖向都可滚动 app端不支持 |\n@| horizontal | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"4.0\",\"4.11\"]]}' /> | 横向滚动 |\n@| vertical | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"4.0\",\"4.11\"]]}' /> | 竖向滚动 |\n| associative-container | string | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"4.11\",\"4.11\"]]}' /> | 关联的滚动容器 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| nested-scroll-view | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"4.11\",\"4.11\"]]}' /> | 嵌套滚动 |\n| enable-back-to-top | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"4.11\"]]}' /> | iOS点击顶部状态栏滚动条返回顶部，只支持竖向 |\n| bounces | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"4.0\",\"4.11\"]]}' /> | 控制是否回弹效果 优先级高于rebound |\n| upper-threshold | number | 50 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 距顶部/左边多远时（单位px），触发 scrolltoupper 事件 |\n| lower-threshold | number | 50 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 距底部/右边多远时（单位px），触发 scrolltolower 事件 |\n| scroll-top | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 设置竖向滚动条位置 |\n| scroll-left | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 设置横向滚动条位置 |\n| scroll-into-view | string([string.IDString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素起始位置 |\n| scroll-with-animation | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 是否在设置滚动条位置时使用滚动动画，设置false没有滚动动画 |\n| refresher-enabled | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.11\",\"-\",\"3.9\",\"4.11\"]]}' /> | 开启下拉刷新，暂时不支持scroll-x = true横向刷新 |\n| refresher-threshold | number | 45 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.11\",\"-\",\"3.9\",\"4.11\"]]}' /> | 设置下拉刷新阈值 |\n| refresher-max-drag-distance | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.9\",\"4.11\"]]}' /> | 设置下拉最大拖拽距离（单位px），默认是下拉刷新控件高度的2.5倍 |\n| refresher-default-style | string | \"black\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.11\",\"-\",\"3.9\",\"4.11\"]]}' /> | 设置下拉刷新默认样式，支持设置 black \\| white \\| none， none 表示不使用默认样式 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| black | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"3.9\",\"4.11\"]]}' /> | 深颜色雪花样式 |\n@| white | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"3.9\",\"4.11\"]]}' /> | 浅白色雪花样式 |\n@| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.11\",\"-\",\"3.9\",\"4.11\"]]}' /> | 不使用默认样式 |\n| refresher-background | string([string.ColorString](/uts/data-type.md#ide-string)) | \"transparent\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.11\",\"-\",\"3.9\",\"4.11\"]]}' /> | 设置下拉刷新区域背景颜色，默认透明 |\n| refresher-triggered | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.11\",\"-\",\"3.9\",\"4.11\"]]}' /> | 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发 |\n| show-scrollbar | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 控制是否出现滚动条 |\n| custom-nested-scroll | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.9\",\"x\"]]}' /> | 子元素是否开启嵌套滚动 将滚动事件与父元素协商处理 |\n| nested-scroll-child | string([string.IDString](/uts/data-type.md#ide-string)) | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.97\",\"x\"]]}' /> | 嵌套滚动子元素的id属性，不支持ref，scroll-view惯性滚动时会让对应id元素视图进行滚动，子元素滚动时会触发scroll-view的nestedprescroll事件，嵌套子元素需要设置custom-nested-scroll = true |\n| @refresherpulling | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.11\",\"-\",\"3.9\",\"4.11\"]]}' /> | 下拉刷新控件被下拉 |\n| @refresherrefresh | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.11\",\"-\",\"3.9\",\"4.11\"]]}' /> | 下拉刷新被触发 |\n| @refresherrestore | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.11\",\"-\",\"3.9\",\"4.11\"]]}' /> | 下拉刷新被复位 |\n| @refresherabort | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.9\",\"4.11\"]]}' /> | 下拉刷新被中止 |\n| @scrolltoupper | (event: [UniScrollToUpperEvent](#uniscrolltoupperevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 滚动到顶部/左边，会触发 scrolltoupper 事件 |\n| @scrolltolower | (event: [UniScrollToLowerEvent](#uniscrolltolowerevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 滚动到底部/右边，会触发 scrolltolower 事件 |\n| @scroll | (event: [UniScrollEvent](#uniscrollevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |\n| @scrollend | (event: [UniScrollEvent](#uniscrollevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.9\",\"4.11\"]]}' /> | 滚动结束时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |\n| @startnestedscroll | (event: [UniStartNestedScrollEvent](#unistartnestedscrollevent)) => Boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.9\",\"x\"]]}' /> | 子元素开始滚动时触发, return true表示与子元素开启滚动协商 默认return false! event = {node} |\n| @nestedprescroll | (event: [UniNestedPreScrollEvent](#uninestedprescrollevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.9\",\"x\"]]}' /> | 子元素滚动时触发，可执行event.consumed(x,y)告知子元素deltaX、deltaY各消耗多少。子元素将执行差值后的deltaX、deltaY滚动距离。不执行consumed(x,y)则表示父元素不消耗deltaX、deltaY。event = {deltaX, deltaY} |\n| @stopnestedscroll | (event: [UniStopNestedScrollEvent](#unistopnestedscrollevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.9\",\"x\"]]}' /> | 子元素滚动结束或意外终止时触发 |\n| ~~rebound~~ | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"3.9\",\"x\"]]}' /> | 控制是否回弹效果。已废弃，请改用bounces |\n| ~~scroll-y~~ | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"x\"]]}' /> | 允许纵向滚动，不支持同时设置scroll-x属性为true，同时设置true时scroll-y生效。已废弃，请改用direction |\n| ~~scroll-x~~ | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"x\"]]}' /> | 允许横向滚动，不支持同时设置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 | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"3.99\",\"x\"]]}' /> | 是否由触摸行为发生的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 | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"3.99\",\"x\"]]}' /> | 是否由触摸行为发生的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<template>\r\n  <!-- #ifdef APP -->\r\n  <scroll-view class=\"page-scroll-view\">\r\n  <!-- #endif -->\r\n    <view>\r\n      <page-head title=\"scroll-view,区域滚动视图\"></page-head>\r\n      <view class=\"uni-padding-wrap uni-common-mt\">\r\n        <view class=\"uni-title uni-common-mt\">\r\n          <text class=\"uni-title-text\">Vertical Scroll</text>\r\n          <text class=\"uni-subtitle-text\">纵向滚动</text>\r\n        </view>\r\n        <view>\r\n          <scroll-view :scroll-top=\"scrollTop\" direction=\"vertical\" class=\"scroll-Y\" scroll-with-animation=\"true\"\r\n            @scrolltoupper=\"upper\" @scrolltolower=\"lower\" @scroll=\"scroll\" @scrollend=\"end\"\r\n            :show-scrollbar=\"showScrollbar\" id=\"verticalScrollView\">\r\n            <view class=\"scroll-view-item uni-bg-red\"><text class=\"text\">A</text></view>\r\n            <view class=\"scroll-view-item uni-bg-green\"><text class=\"text\">B</text></view>\r\n            <view class=\"scroll-view-item uni-bg-blue\"><text class=\"text\">C</text></view>\r\n          </scroll-view>\r\n        </view>\r\n        <view @tap=\"goTop\" class=\"uni-center uni-common-mt\">\r\n          <text class=\"uni-link\">点击这里返回顶部</text>\r\n        </view>\r\n\r\n        <view class=\"uni-title uni-common-mt\">\r\n          <text class=\"uni-title-text\">Horizontal Scroll</text>\r\n          <text class=\"uni-subtitle-text\">横向滚动</text>\r\n        </view>\r\n        <view>\r\n          <scroll-view class=\"scroll-view_H\" direction=\"horizontal\" @scroll=\"scroll\" @scrollend=\"end\"\r\n            :scroll-left=\"scrollLeft\" :show-scrollbar=\"showScrollbar\">\r\n            <view class=\"scroll-view-item_H uni-bg-red\"><text class=\"text\">A</text></view>\r\n            <view class=\"scroll-view-item_H uni-bg-green\"><text class=\"text\">B</text></view>\r\n            <view class=\"scroll-view-item_H uni-bg-blue\"><text class=\"text\">C</text></view>\r\n          </scroll-view>\r\n        </view>\r\n\r\n        <navigator url=\"/pages/component/scroll-view/scroll-view-props\" hover-class=\"none\">\r\n          <button type=\"primary\" class=\"button\">\r\n            非下拉刷新的属性示例\r\n          </button>\r\n        </navigator>\r\n        <view class=\"uni-common-pb\"></view>\r\n\r\n        <navigator url=\"/pages/component/scroll-view/scroll-view-refresher-props\" hover-class=\"none\">\r\n          <button type=\"primary\" class=\"button\">\r\n            下拉刷新的属性示例\r\n          </button>\r\n        </navigator>\r\n        <view class=\"uni-common-pb\"></view>\r\n        <navigator url=\"/pages/component/scroll-view/scroll-view-refresher\" hover-class=\"none\">\r\n          <button type=\"primary\" class=\"button\"> 默认下拉刷新示例 </button>\r\n        </navigator>\r\n        <view class=\"uni-common-pb\"></view>\r\n        <navigator url=\"/pages/component/scroll-view/scroll-view-custom-refresher-props\" hover-class=\"none\">\r\n          <button type=\"primary\" class=\"button\">\r\n            自定义下拉刷新示例\r\n          </button>\r\n        </navigator>\r\n        <view class=\"uni-common-pb\"></view>\r\n      </view>\r\n    </view>\r\n  <!-- #ifdef APP -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n\r\n<style>\r\n  .scroll-Y {\r\n    height: 150px;\r\n  }\r\n\r\n  .scroll-view_H {\r\n    width: 100%;\r\n    flex-direction: row;\r\n  }\r\n\r\n  .scroll-view-item {\r\n    height: 150px;\r\n    justify-content: center;\r\n    align-items: center;\r\n  }\r\n\r\n  .scroll-view-item_H {\r\n    width: 100%;\r\n    height: 150px;\r\n    justify-content: center;\r\n    align-items: center;\r\n  }\r\n\r\n  .text {\r\n    font-size: 18px;\r\n    color: #ffffff;\r\n  }\r\n\r\n  .button {\r\n    margin-top: 15px;\r\n  }\r\n</style>\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 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 该 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 | x | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| indicator-dots | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 是否显示面板指示点 |\n| indicator-color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"rgba(0, 0, 0, .3)\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 指示点颜色 |\n| indicator-active-color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#000000\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 当前选中的指示点颜色 |\n| active-class | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"x\",\"x\"]]}' /> | swiper-item 可见时的 class |\n| changing-class | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"x\",\"x\"]]}' /> | acceleration 设置为 {{true}} 时且处于滑动过程中，中间若干屏处于可见时的class |\n| acceleration | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"x\",\"x\"]]}' /> | 当开启时，会根据滑动速度，连续滑动多屏 |\n| disable-programmatic-animation | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"x\",\"x\"]]}' /> | 是否禁用代码变动触发 swiper 切换时使用动画。 |\n| disable-touch | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"3.9\",\"4.11\"]]}' /> | 是否禁止用户 touch 操作 |\n| touchable | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"x\",\"x\"]]}' /> | 是否监听用户的触摸事件 |\n| easing-function | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"x\",\"x\"]]}' /> | 指定 swiper 切换缓动动画类型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| default | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"x\",\"x\"]]}' /> | - |\n@| linear | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"x\",\"x\"]]}' /> | - |\n@| easeInCubic | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"x\",\"x\"]]}' /> | - |\n@| easeOutCubic | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"x\",\"x\"]]}' /> | - |\n@| easeInOutCubic | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"x\",\"x\"]]}' /> | - |\n| autoplay | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 是否自动切换 |\n| current | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 当前所在滑块的 index |\n| current-item-id | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 当前所在滑块的 item-id ，不能与 current 被同时指定 |\n| interval | number | 3000 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 自动切换时间间隔 |\n| duration | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 滑动动画时长 |\n| circular | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 是否采用衔接滑动 |\n| vertical | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 滑动方向是否为纵向 |\n| rebound | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"3.9\",\"4.11\"]]}' /> | 控制是否回弹效果 |\n| previous-margin | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"x\",\"x\"]]}' /> | 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值 |\n| next-margin | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"x\",\"x\"]]}' /> | 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 |\n| display-multiple-items | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"x\",\"x\"]]}' /> | 同时显示的滑块数量 |\n| skip-hidden-item-layout | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"x\",\"x\"]]}' /> | 是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息 |\n| @change | (event: [UniSwiperChangeEvent](#uniswiperchangeevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | current 改变时会触发 change 事件，event.detail = {current: current, source: source} |\n| @transition | (event: [UniSwiperTransitionEvent](#uniswipertransitionevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy} |\n| @animationfinish | (event: [UniSwiperAnimationFinishEvent](#uniswiperanimationfinishevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 动画结束时会触发 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 | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"x\",\"x\"]]}' /> | 切换结束的 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 | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"x\",\"x\"]]}' /> | 动画结束的 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<template>\r\n  <!-- #ifdef APP -->\r\n  <scroll-view class=\"page-scroll-view\">\r\n  <!-- #endif -->\r\n    <view>\r\n      <page-head title=\"swiper,可滑动视图\"></page-head>\r\n      <view class=\"uni-margin-wrap\">\r\n        <swiper id=\"swiper-view\" class=\"swiper\" :vertical=\"verticalSelect\" :indicator-dots=\"dotsSelect\" :autoplay=\"autoplaySelect\"\r\n          :rebound=\"reboundSelect\" :interval=\"intervalSelect\" :circular=\"circularSelect\"\r\n          :indicator-color=\"indicatorColor\" :indicator-active-color=\"indicatorColorActive\"\r\n          :disable-touch=\"disableTouchSelect\" :current=\"currentVal\" :current-item-id=\"currentItemIdVal\"\r\n          @change=\"swiperChange\" @transition=\"swiperTransition\" @animationfinish=\"swiperAnimationfinish\" @touchstart=\"swipertouchStart\">\r\n          <swiper-item item-id=\"A\">\r\n            <view class=\"swiper-item uni-bg-red\"><text class=\"swiper-item-Text\" @touchstart=\"viewtouchStart\">A</text></view>\r\n          </swiper-item>\r\n          <swiper-item item-id=\"B\">\r\n            <view class=\"swiper-item uni-bg-green\"><text class=\"swiper-item-Text\">B</text></view>\r\n          </swiper-item>\r\n          <swiper-item item-id=\"C\">\r\n            <view class=\"swiper-item uni-bg-blue\"><text class=\"swiper-item-Text\">C</text></view>\r\n          </swiper-item>\r\n        </swiper>\r\n      </view>\r\n      <view class=\"uni-list\">\r\n        <view class=\"uni-list-cell uni-list-cell-padding\">\r\n          <view class=\"uni-list-cell-db\">是否显示面板指示点</view>\r\n          <switch :checked=\"dotsSelect\" @change=\"dotsChange\" />\r\n        </view>\r\n        <view class=\"uni-list-cell uni-list-cell-padding\">\r\n          <view class=\"uni-list-cell-db\">是否自动切换</view>\r\n          <switch :checked=\"autoplaySelect\" @change=\"autoplayChange\" />\r\n        </view>\r\n        <view class=\"uni-list-cell uni-list-cell-padding\">\r\n          <view class=\"uni-list-cell-db\">是否循环</view>\r\n          <switch :checked=\"circularSelect\" @change=\"circularChange\" />\r\n        </view>\r\n        <view class=\"uni-list-cell uni-list-cell-padding\">\r\n          <view class=\"uni-list-cell-db\">是否显示rebound效果</view>\r\n          <switch :checked=\"reboundSelect\" @change=\"reboundSelectChange\" />\r\n        </view>\r\n        <view class=\"uni-title uni-list-cell-padding\">间隔时间(毫秒)</view>\r\n        <view class=\"uni-list-cell-padding\">\r\n          <slider @change=\"sliderChange\" :value=\"1000\" :min=\"500\" :max=\"5000\" :show-value=\"true\" />\r\n        </view>\r\n        <view class=\"uni-list-cell uni-list-cell-padding\">\r\n          <view class=\"uni-list-cell-db\">定制指示器颜色</view>\r\n          <switch :checked=\"indicatorColorSelect\" @change=\"indicatorColorChange\" />\r\n        </view>\r\n        <view class=\"uni-list-cell uni-list-cell-padding\">\r\n          <view class=\"uni-list-cell-db\">纵向</view>\r\n          <switch :checked=\"verticalSelect\" @change=\"verticalChange\" />\r\n        </view>\r\n        <view class=\"uni-list-cell uni-list-cell-padding\">\r\n          <view class=\"uni-list-cell-db\">指定current为最后一个元素</view>\r\n          <switch :checked=\"currentSelect\" @change=\"currentChange\" />\r\n        </view>\r\n        <view class=\"uni-list-cell uni-list-cell-padding\">\r\n          <view class=\"uni-list-cell-db\">指定current-item-id为最后一个元素</view>\r\n          <switch :checked=\"currentItemIdSelect\" @change=\"currentItemIdChange\" />\r\n        </view>\r\n        <view class=\"uni-list-cell uni-list-cell-padding\">\r\n          <view class=\"uni-list-cell-db\">禁止用户 touch 操作</view>\r\n          <switch :checked=\"disableTouchSelect\" @change=\"disableTouchChange\" />\r\n        </view>\r\n        <view class=\"uni-list-cell uni-list-cell-padding\">\r\n          <view class=\"uni-list-cell-db\">swiperTransition 是否打印</view>\r\n          <switch :checked=\"swiperTransitionSelect\" @change=\"swiperTransitionChange\" />\r\n        </view>\r\n        <view class=\"uni-list-cell uni-list-cell-padding\">\r\n          <view class=\"uni-list-cell-db\">swiperAnimationfinish 是否打印</view>\r\n          <switch :checked=\"swiperAnimationfinishSelect\" @change=\"swiperAnimationfinishChange\" />\r\n        </view>\r\n        <view class=\"uni-list-cell uni-list-cell-padding\">\r\n          <view class=\"uni-list-cell-db\">swiperChange 是否打印</view>\r\n          <switch :checked=\"swiperChangeSelect\" @change=\"swiperChangeChange\" />\r\n        </view>\r\n\r\n        <navigator url=\"/pages/component/swiper/swiper-list-view\">\r\n          <button type=\"primary\">\r\n            swiper 嵌套 list-view 测试\r\n          </button>\r\n        </navigator>\r\n\r\n      </view>\r\n    </view>\r\n  <!-- #ifdef APP -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n  .swiper {\r\n    height: 150px;\r\n  }\r\n\r\n  .swiper-item {\r\n    width: 100%;\r\n    height: 150px;\r\n  }\r\n\r\n  .swiper-item-Text {\r\n    width: 100%;\r\n    text-align: center;\r\n    line-height: 150px;\r\n  }\r\n</style>\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()\r\n      if(eleRect != null) {\r\n        this.swipeX = eleRect.width - 10\r\n        this.swipeY += eleRect.y + uni.getSystemInfoSync().safeArea.top + 44 + 35\r\n      }\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| 子组件 | 兼容性 |\n| :- | :- |\n| [swiper-item](swiper-item.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"-\",\"-\"]]}' /> |","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 | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| width | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 页面宽度（px 为单位） |\n| min-width | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 页面最小宽度（px 为单位） |\n| max-width | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 页面最大宽度（px 为单位） |\n| height | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 页面高度（px 为单位） |\n| min-height | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 页面最小高度（px 为单位） |\n| max-height | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 页面最大高度（px 为单位） |\n| orientation | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 屏幕方向（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 | 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 | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| direction | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | movable-view的移动方向，属性值有all、vertical、horizontal、none |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| all | - | - |\n@| vertical | - | - |\n@| horizontal | - | - |\n@| none | - | - |\n| inertia | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | movable-view 是否带有惯性。 |\n| out-of-bounds | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 超过可移动区域后，movable-view 是否还可以移动。 |\n| x | string \\\\| number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 定义 x 轴方向的偏移，如果 x 的值不在可移动范围内，会自动移动到可移动范围；改变 x 的值会触发动画。 |\n| y | string \\\\| number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 定义 y 轴方向的偏移，如果 y 的值不在可移动范围内，会自动移动到可移动范围；改变 y 的值会触发动画。 |\n| damping | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 阻尼系数，用于控制 x 或 y 改变时的动画和过界回弹的动画，值越大移动越快。 |\n| friction | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值 2。 |\n| disabled | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 是否禁用。 |\n| scale | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 是否支持双指缩放，默认缩放手势生效区域是在 movable-view 内。 |\n| scale-min | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 定义缩放倍数最小值，默认为 0.5。 |\n| scale-max | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 定义缩放倍数最大值，默认为 10。 |\n| scale-value | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 定义缩放倍数，取值范围为 0.5 - 10 |\n| animation | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 是否使用动画，默认为 true。 |\n| @change | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 拖动过程中触发的事件，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 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 缩放过程中触发的事件，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<template>\r\n  <view class=\"page-body\">\r\n    <page-head title=\"movable-view,可拖动视图\"></page-head>\r\n    <view class=\"uni-padding-wrap uni-common-mt\">\r\n      <view class=\"uni-title uni-common-mt\">\r\n        示例 1\r\n        <text>\\nmovable-view 区域小于 movable-area</text>\r\n      </view>\r\n      <movable-area>\r\n        <movable-view :x=\"x\" :y=\"y\" direction=\"all\" @change=\"onChange\">text</movable-view>\r\n      </movable-area>\r\n      <view @tap=\"tap\" class=\"uni-link uni-center uni-common-mt\">\r\n        点击这里移动至 (30px, 30px)\r\n      </view>\r\n      <view class=\"uni-title uni-common-mt\">\r\n        示例 2\r\n        <text>\\nmovable-view区域大于movable-area</text>\r\n      </view>\r\n      <movable-area>\r\n        <movable-view class=\"max\" direction=\"all\">text</movable-view>\r\n      </movable-area>\r\n      <view class=\"uni-title uni-common-mt\">\r\n        示例 3\r\n        <text>\\n只可以横向移动</text>\r\n      </view>\r\n      <movable-area>\r\n        <movable-view direction=\"horizontal\">text</movable-view>\r\n      </movable-area>\r\n      <view class=\"uni-title uni-common-mt\">\r\n        示例 4\r\n        <text>\\n只可以纵向移动</text>\r\n      </view>\r\n      <movable-area>\r\n        <movable-view direction=\"vertical\">text</movable-view>\r\n      </movable-area>\r\n      <view class=\"uni-title uni-common-mt\">\r\n        示例 5\r\n        <text>\\n可超出边界</text>\r\n      </view>\r\n      <movable-area>\r\n        <movable-view direction=\"all\" out-of-bounds>text</movable-view>\r\n      </movable-area>\r\n      <view class=\"uni-title uni-common-mt\">\r\n        示例 6\r\n        <text>\\n带有惯性</text>\r\n      </view>\r\n      <movable-area>\r\n        <movable-view direction=\"all\" inertia>text</movable-view>\r\n      </movable-area>\r\n      <view class=\"uni-title uni-common-mt\">\r\n        示例 7\r\n        <text>\\n可放缩</text>\r\n      </view>\r\n      <movable-area scale-area>\r\n        <movable-view direction=\"all\" @scale=\"onScale\" scale scale-min=\"0.5\" scale-max=\"4\"\r\n          :scale-value=\"scale\">text</movable-view>\r\n      </movable-area>\r\n      <view @tap=\"tap2\" class=\"uni-link uni-center uni-common-mt\" style=\"padding-bottom:80rpx;\">\r\n        点击这里放大3倍\r\n      </view>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n  movable-view {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    height: 150rpx;\r\n    width: 150rpx;\r\n    background-color: #007AFF;\r\n    color: #fff;\r\n  }\r\n\r\n  movable-area {\r\n    height: 300rpx;\r\n    width: 100%;\r\n    background-color: #D8D8D8;\r\n    overflow: hidden;\r\n  }\r\n\r\n  .max {\r\n    width: 500rpx;\r\n    height: 500rpx;\r\n  }\r\n</style>\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 | 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<template>\r\n  <view>\r\n    <page-head title=\"cover-view用于覆盖map、video等原生组件\"></page-head>\r\n    <view class=\"uni-padding-wrap uni-common-mb\">\r\n      <text class=\"uni-subtitle-text\">注意：Web和App需正确配置地图SDK的Key才能正常显示地图组件</text>\r\n    </view>\r\n    <view class=\"cover-content\">\r\n      <map :latitude=\"latitude\" :longitude=\"longitude\"></map>\r\n      <cover-view class=\"cover-view\">简单的cover-view</cover-view>\r\n      <cover-image class=\"cover-image\" src=\"/static/uni.png\"></cover-image>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n  map {\r\n    width: 100%;\r\n    height: 600px;\r\n  }\r\n\r\n  .cover-content {\r\n    position: relative;\r\n  }\r\n\r\n  .cover-view {\r\n    position: absolute;\r\n    left: 5px;\r\n    top: 5px;\r\n    width: 375rpx;\r\n    text-align: center;\r\n    background-color: #DDDDDD;\r\n  }\r\n\r\n  .cover-image {\r\n    position: absolute;\r\n    left: 0;\r\n    top: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    margin: auto;\r\n    width: 96px;\r\n    height: 96px;\r\n  }\r\n\r\n  .tips {\r\n    font-size: 12px;\r\n    margin-top: 15px;\r\n    opacity: .8;\r\n  }\r\n</style>\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 | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| v-for | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| v-if | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| v-show | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| src | string([string.ImageURIString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 图标路径，支持临时路径、网络地址（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 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.25\"]]}' /> | 对应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 吸顶布局容器 <br/><br/> 注意：暂时仅支持作为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\\<number> | [0,0,0,0\\] | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.02\",\"-\",\"3.98\",\"4.11\"]]}' /> | 长度为 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<template>\r\n  <list-view :scroll-y=\"true\" class=\"page\" rebound=\"false\" show-scrollbar=false :scroll-top=\"scroll_top_input\"\r\n    :refresher-enabled=\"refresher_enabled_boolean\" :refresher-triggered=\"refresher_triggered_boolean\"\r\n    @refresherrefresh=\"list_view_refresherrefresh\">\r\n    <list-item type=1>\r\n      <swiper indicator-dots=\"true\" circular=\"true\" style=\"height: 240px;\">\r\n        <swiper-item v-for=\"i in 3\" :item-id=\"i + ''\">\r\n          <image src=\"/static/shuijiao.jpg\" style=\"height: 240px; width: 100%;\"></image>\r\n          <text style=\"position: absolute;\">{{i}}</text>\r\n        </swiper-item>\r\n      </swiper>\r\n    </list-item>\r\n    <list-item class=\"content-item\" type=2>\r\n      <text class=\"text\">向上滑动页面，体验sticky-header吸顶效果。</text>\r\n    </list-item>\r\n    <sticky-header>\r\n      <scroll-view style=\"background-color: #f5f5f5; flex-direction: row;\" direction=\"horizontal\"\r\n        :show-scrollbar=\"false\">\r\n        <view style=\"align-self: flex-start; flex-direction: row;\">\r\n          <text ref=\"swipertab\" class=\"sift-item\" v-for=\"(name,index) in sift_item\" @click=\"clickTH(index)\">\r\n            {{name}}\r\n          </text>\r\n        </view>\r\n      </scroll-view>\r\n    </sticky-header>\r\n\r\n    <list-item v-for=\"(item,index) in list_item\" :key=\"index\" class=\"content-item\" type=3>\r\n      <text class=\"text\">{{item}}</text>\r\n    </list-item>\r\n  </list-view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n  .page {\r\n    flex: 1;\r\n    background-color: #f5f5f5;\r\n  }\r\n\r\n  .content-item {\r\n    padding: 15px;\r\n    margin-bottom: 10px;\r\n    background-color: #fff;\r\n  }\r\n\r\n  .text {\r\n    font-size: 14px;\r\n    color: #666;\r\n    line-height: 20px;\r\n  }\r\n\r\n  .sift-item {\r\n    color: #555;\r\n    font-size: 16px;\r\n    padding: 12px 15px;\r\n  }\r\n</style>\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<string>,\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<string> = []\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 吸顶布局容器 <br/><br/> 注意：暂时仅支持作为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 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.98\",\"4.11\"]]}' /> | sticky-section元素重叠时是否继续上推 |\n| padding | array\\<number> | [0,0,0,0\\] | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.02\",\"-\",\"3.98\",\"4.11\"]]}' /> | 长度为 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<template>\r\n  <page-head title=\"sticky-section\"></page-head>\r\n  <list-view id=\"list-view\" ref=\"list-view\" show-scrollbar=false class=\"page\" :scroll-into-view=\"scrollIntoView\"\r\n    @scroll=\"onScroll\" @scrollend=\"onScrollEnd\" bounces=\"false\">\r\n    <list-item style=\"padding: 10px; margin: 5px 0;align-items: center;\" :type=20>\r\n      <button @click=\"gotoStickyHeader('C')\" size=\"mini\">跳转到id为C的sticky-header位置上</button>\r\n    </list-item>\r\n    <list-item style=\"padding: 10px; margin: 5px 0;align-items: center;\" :type=20>\r\n      <button @click=\"appendSectionItem(0)\" size=\"mini\">第一组 section 新增5条内容</button>\r\n    </list-item>\r\n    <list-item style=\"padding: 10px; margin: 5px 0;align-items: center;\" :type=20>\r\n      <button @click=\"deleteSection()\" size=\"mini\">删除第一组 section</button>\r\n    </list-item>\r\n    <sticky-section v-for=\"(section) in sectionArray\" :key=\"section.name\" :padding=\"sectionPadding\"\r\n      :push-pinned-header=\"true\">\r\n      <sticky-header :id=\"section.name\">\r\n        <text class=\"sticky-header-text\">{{section.name}}</text>\r\n      </sticky-header>\r\n      <list-item v-for=\"(list) in section.list\" :key=\"list.text\" :name=\"list.text\" class=\"content-item\" :type=10>\r\n        <text class=\"text\">{{list.text}}</text>\r\n      </list-item>\r\n    </sticky-section>\r\n    <list-item style=\"padding: 10px; margin: 5px 0;align-items: center;\" :type=30>\r\n      <!-- <text style=\"color: #aaa\">到底了</text> -->\r\n      <button @click=\"toTop\" size=\"mini\">回到顶部</button>\r\n    </list-item>\r\n  </list-view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n  .page {\r\n    flex: 1;\r\n    background-color: #f5f5f5;\r\n  }\r\n\r\n  .sticky-header-text {\r\n    font-size: 16px;\r\n    padding: 8px;\r\n    color: #959595;\r\n    background-color: #f5f5f5;\r\n  }\r\n\r\n  .content-item {\r\n    padding: 15px;\r\n    margin-bottom: 10px;\r\n    background-color: #fff;\r\n  }\r\n</style>\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<number>,\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\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"4.0\",\"4.11\"]]}' /> | 滚动方向，可取值 none、horizontal、vertical，默认值vertical。注：iOS 平台仅支持vertical |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.02\",\"-\",\"4.0\",\"4.11\"]]}' /> | 禁止滚动 |\n@| horizontal | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"4.0\",\"x\"]]}' /> | 横向滚动 |\n@| vertical | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.02\",\"-\",\"4.0\",\"4.11\"]]}' /> | 竖向滚动 |\n| associative-container | string | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"4.11\",\"4.11\"]]}' /> | 关联的滚动容器 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| nested-scroll-view | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"4.11\",\"4.11\"]]}' /> | 嵌套滚动 |\n| bounces | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"4.0\",\"4.11\"]]}' /> | 控制是否回弹效果 优先级高于rebound |\n| upper-threshold | number | 50 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.02\",\"-\",\"3.9\",\"4.11\"]]}' /> | 距顶部/左边多远时（单位px），触发 scrolltoupper 事件 |\n| lower-threshold | number | 50 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.02\",\"-\",\"3.9\",\"4.11\"]]}' /> | 距底部/右边多远时（单位px），触发 scrolltolower 事件 |\n| scroll-top | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.02\",\"-\",\"3.9\",\"4.11\"]]}' /> | 设置竖向滚动条位置 |\n| scroll-left | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.9\",\"4.11\"]]}' /> | 设置横向滚动条位置 |\n| show-scrollbar | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.02\",\"-\",\"3.9\",\"4.11\"]]}' /> | 控制是否出现滚动条 |\n| scroll-into-view | string([string.IDString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.9\",\"4.11\"]]}' /> | 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素起始位置 |\n| scroll-with-animation | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.02\",\"-\",\"3.9\",\"4.11\"]]}' /> | 是否在设置滚动条位置时使用滚动动画，设置false没有滚动动画 |\n| refresher-enabled | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.11\",\"-\",\"3.9\",\"4.11\"]]}' /> | 开启下拉刷新，暂时不支持scroll-x = true横向刷新 |\n| refresher-threshold | number | 45 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.11\",\"-\",\"3.9\",\"4.11\"]]}' /> | 设置下拉刷新阈值, 仅 refresher-default-style = 'none' 自定义样式下生效 |\n| refresher-max-drag-distance | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.9\",\"4.11\"]]}' /> | 设置下拉最大拖拽距离（单位px），默认是下拉刷新控件高度的2.5倍 |\n| refresher-default-style | string | \"black\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.11\",\"-\",\"3.9\",\"4.11\"]]}' /> | 设置下拉刷新默认样式，支持设置 black \\| white \\| none， none 表示不使用默认样式 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| black | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"3.9\",\"4.11\"]]}' /> | 深颜色雪花样式 |\n@| white | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"3.9\",\"4.11\"]]}' /> | 浅白色雪花样式 |\n@| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.11\",\"-\",\"3.93\",\"4.11\"]]}' /> | 不使用默认样式 |\n| refresher-background | string([string.ColorString](/uts/data-type.md#ide-string)) | \"transparent\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.11\",\"-\",\"3.9\",\"4.11\"]]}' /> | 设置下拉刷新区域背景颜色，默认透明 |\n| refresher-triggered | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.11\",\"-\",\"3.9\",\"4.11\"]]}' /> | 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发 |\n| enable-back-to-top | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"4.11\"]]}' /> | iOS点击顶部状态栏滚动条返回顶部，只支持竖向 |\n| custom-nested-scroll | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.9\",\"4.11\"]]}' /> | 子元素是否开启嵌套滚动 将滚动事件与父元素协商处理 |\n| @refresherpulling | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.11\",\"-\",\"3.9\",\"4.11\"]]}' /> | 下拉刷新控件被下拉 |\n| @refresherrefresh | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.11\",\"-\",\"3.9\",\"4.11\"]]}' /> | 下拉刷新被触发 |\n| @refresherrestore | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.11\",\"-\",\"3.9\",\"4.11\"]]}' /> | 下拉刷新被复位 |\n| @refresherabort | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.11\",\"-\",\"3.9\",\"4.11\"]]}' /> | 下拉刷新被中止 |\n| @scrolltoupper | (event: [UniScrollToUpperEvent](#uniscrolltoupperevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.02\",\"-\",\"3.9\",\"4.11\"]]}' /> | 滚动到顶部/左边，会触发 scrolltoupper 事件 |\n| @scrolltolower | (event: [UniScrollToLowerEvent](#uniscrolltolowerevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.02\",\"-\",\"3.9\",\"4.11\"]]}' /> | 滚动到底部/右边，会触发 scrolltolower 事件 |\n| @scroll | (event: [UniScrollEvent](#uniscrollevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.02\",\"-\",\"3.9\",\"4.11\"]]}' /> | 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |\n| @scrollend | (event: [UniScrollEvent](#uniscrollevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.9\",\"4.11\"]]}' /> | 滚动结束时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |\n| ~~rebound~~ | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.9\",\"4.11\"]]}' /> | 控制是否回弹效果。已废弃，请改用bounces |\n| ~~scroll-y~~ | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.9\",\"4.11\"]]}' /> | 允许纵向滚动，不支持同时设置scroll-x属性为true，同时设置true时scroll-y生效。已废弃，请改用direction |\n| ~~scroll-x~~ | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.9\",\"x\"]]}' /> | 允许横向滚动，不支持同时设置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<template>\r\n  <view class=\"main\">\r\n    <list-view :direction=\"scroll_direction\" :rebound=\"bounces_boolean\" :upper-threshold=\"upper_threshold_input\"\r\n      :lower-threshold=\"lower_threshold_input\" :scroll-top=\"scroll_top_input\" :scroll-left=\"scroll_left_input\"\r\n      :show-scrollbar=\"show_scrollbar_boolean\" :scroll-into-view=\"scrollIntoView\"\r\n      :scroll-with-animation=\"scroll_with_animation_boolean\" :refresher-enabled=\"refresher_enabled_boolean\"\r\n      :refresher-background=\"refresher_background_input\" :refresher-triggered=\"refresher_triggered_boolean\"\r\n      :refresher-default-style=\"refresher_default_style_input\" @click=\"list_view_click\"\r\n      @touchstart=\"list_view_touchstart\" @touchmove=\"list_view_touchmove\" @touchcancel=\"list_view_touchcancel\"\r\n      @touchend=\"list_view_touchend\" @tap=\"list_view_tap\" @longpress=\"list_view_longpress\"\r\n      @refresherpulling=\"list_view_refresherpulling\" @refresherrefresh=\"list_view_refresherrefresh\"\r\n      @refresherrestore=\"list_view_refresherrestore\" @refresherabort=\"list_view_refresherabort\"\r\n      @scrolltoupper=\"list_view_scrolltoupper\" ref=\"listview\" @scrolltolower=\"list_view_scrolltolower\"\r\n      @scroll=\"list_view_scroll\" @scrollend=\"list_view_scrollend\" style=\"width:100%;\" id=\"listview\">\r\n      <list-item v-for=\"key in scrollData\" :key=\"key\" :id=\"key\" @click=\"list_item_click\"\r\n        @touchstart=\"list_item_touchstart\" @touchmove=\"list_item_touchmove\" @touchcancel=\"list_item_touchcancel\"\r\n        @touchend=\"list_item_touchend\" @tap=\"list_item_tap\" @longpress=\"list_item_longpress\" class=\"list-item\">\r\n        <text>{{key}}</text>\r\n      </list-item>\r\n      <!-- #ifdef APP -->\r\n      <list-item slot=\"refresher\" class=\"refresh-box\">\r\n        <text class=\"tip-text\">{{text[state]}}</text>\r\n      </list-item>\r\n      <!-- #endif -->\r\n    </list-view>\r\n  </view>\r\n\r\n  <scroll-view style=\"flex:1\" direction=\"vertical\">\r\n    <view class=\"content\">\r\n      <!-- #ifdef APP -->\r\n      <boolean-data :defaultValue=\"false\" title=\"设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发\"\r\n        @change=\"change_refresher_triggered_boolean\"></boolean-data>\r\n      <boolean-data :defaultValue=\"false\" title=\"开启下拉刷新\" @change=\"change_refresher_enabled_boolean\"></boolean-data>\r\n      <boolean-data :defaultValue=\"false\" title=\"开启自定义样式\" @change=\"change_refresher_style_boolean\"></boolean-data>\r\n      <!-- #endif -->\r\n      <boolean-data :defaultValue=\"false\" title=\"是否在设置滚动条位置时使用滚动动画，设置false没有滚动动画\"\r\n        @change=\"change_scroll_with_animation_boolean\"></boolean-data>\r\n      <boolean-data :defaultValue=\"false\" title=\"控制是否出现滚动条\" @change=\"change_show_scrollbar_boolean\"></boolean-data>\r\n      <!-- #ifdef APP -->\r\n      <boolean-data :defaultValue=\"true\" title=\"控制是否回弹效果\" @change=\"change_bounces_boolean\"></boolean-data>\r\n      <!-- #endif -->\r\n      <boolean-data :defaultValue=\"true\" title=\"允许纵向滚动\" @change=\"change_scroll_y_boolean\"></boolean-data>\r\n      <!-- #ifdef APP -->\r\n      <boolean-data :defaultValue=\"false\" title=\"允许横向滚动\" @change=\"change_scroll_x_boolean\"></boolean-data>\r\n      <!-- #endif -->\r\n      <input-data defaultValue=\"50\" title=\"距顶部/左边多远时（单位px），触发 scrolltoupper 事件\" type=\"number\"\r\n        @confirm=\"confirm_upper_threshold_input\"></input-data>\r\n      <input-data defaultValue=\"50\" title=\"距底部/右边多远时（单位px），触发 scrolltolower 事件\" type=\"number\"\r\n        @confirm=\"confirm_lower_threshold_input\"></input-data>\r\n      <input-data defaultValue=\"0\" title=\"设置竖向滚动条位置\" type=\"number\" @confirm=\"confirm_scroll_top_input\"></input-data>\r\n      <!-- #ifdef APP -->\r\n      <input-data defaultValue=\"0\" title=\"设置横向滚动条位置\" type=\"number\" @confirm=\"confirm_scroll_left_input\"></input-data>\r\n      <input-data defaultValue=\"#FFF\" title=\"设置下拉刷新区域背景颜色\" type=\"text\"\r\n        @confirm=\"confirm_refresher_background_input\"></input-data>\r\n      <enum-data :items=\"size_enum\" title=\"通过id位置跳转\" @change=\"item_change_size_enum\"></enum-data>\r\n      <navigator url=\"/pages/component/list-view/list-view-refresh\">\r\n        <button type=\"primary\" class=\"button\">\r\n          list-view 下拉刷新\r\n        </button>\r\n      </navigator>\r\n      <!-- #endif -->\r\n      <navigator url=\"/pages/component/list-view/list-view-multiplex\">\r\n        <button type=\"primary\" class=\"button\">\r\n          list-view 对list-item复用测试\r\n        </button>\r\n      </navigator>\r\n      <navigator url=\"/pages/component/list-view/list-view-multiplex-input\">\r\n        <button type=\"primary\" class=\"button\">\r\n          list-view 复用测试（item中嵌入input）\r\n        </button>\r\n      </navigator>\r\n      <navigator url=\"/pages/component/list-view/list-view-multiplex-video\">\r\n        <button type=\"primary\" class=\"button\">\r\n          list-view 复用测试（item中嵌入video）\r\n        </button>\r\n      </navigator>\r\n      <navigator url=\"/pages/component/list-view/list-view-children-in-slot\">\r\n        <button type=\"primary\" class=\"button\">\r\n          list-view 测试插槽中子组件增删\r\n        </button>\r\n      </navigator>\r\n    </view>\r\n  </scroll-view>\r\n</template>\r\n\r\n<style>\r\n  .main {\r\n    max-height: 250px;\r\n    padding: 5px 0;\r\n    border-bottom: 1px solid rgba(0, 0, 0, .06);\r\n    flex-direction: row;\r\n    justify-content: center;\r\n  }\r\n\r\n  .main .list-item {\r\n    width: 100%;\r\n    height: 250px;\r\n    border: 1px solid #666;\r\n    background-color: #66ccff;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n\r\n  .tip-text {\r\n    color: #888;\r\n    font-size: 12px;\r\n  }\r\n\r\n  .refresh-box {\r\n    justify-content: center;\r\n    align-items: center;\r\n    flex-direction: row;\r\n    height: 45px;\r\n    width: 100%;\r\n  }\r\n\r\n  .button {\r\n    margin-top: 15px;\r\n  }\r\n</style>\r\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-types'\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<string>,\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<string> = []\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| 子组件 | 兼容性 |\n| :- | :- |\n| [list-item](list-item.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"-\",\"-\"]]}' /> |\n| [sticky-header](sticky-header.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"-\",\"-\"]]}' /> |\n| [sticky-section](sticky-section.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"-\",\"-\"]]}' /> |","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 的节点，仅支持作为 \\<scroll-view type='nested'> 嵌套模式的直接子节点。不支持复数子节点，渲染时会取其第一个子节点来渲染","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<template>\r\n  <scroll-view style=\"flex:1\" type=\"nested\" direction=\"vertical\">\r\n    <nested-scroll-header>\r\n      <view class=\"scroll-header-tiem1\">\r\n        <text>会渲染的nested-scroll-header</text>\r\n      </view>\r\n      <view class=\"scroll-header-tiem1\">\r\n        <text>不会渲染nested-scroll-header，因为 nested-scroll-header 只会渲染第一个子节点</text>\r\n      </view>\r\n    </nested-scroll-header>\r\n    <nested-scroll-header>\r\n      <swiper ref=\"header\" indicator-dots=\"true\" circular=\"true\">\r\n        <swiper-item v-for=\"i in 3\" :item-id=\"i\">\r\n          <view class=\"scroll-header-tiem2\">\r\n            <text>如果存在多个头部节点，那么就使用多个 nested-scroll-header 来将其包裹</text>\r\n          </view>\r\n        </swiper-item>\r\n      </swiper>\r\n    </nested-scroll-header>\r\n    <nested-scroll-body>\r\n      <scroll-view style=\"flex:1\" associative-container=\"nested-scroll-view\">\r\n        <view v-for=\"key in scrollData\">\r\n          <view class=\"scroll-item\">\r\n            <text class=\"scroll-item-title\">{{key}}</text>\r\n          </view>\r\n        </view>\r\n      </scroll-view>\r\n    </nested-scroll-body>\r\n  </scroll-view>\r\n</template>\r\n\r\n<script>\r\n  export default {\r\n    data() {\r\n      return {\r\n        scrollData: [] as Array<string>,\r\n      }\r\n    },\r\n    onLoad() {\r\n      let lists : Array<string> = []\r\n      for (let i = 0; i < 30; i++) {\r\n        lists.push(\"item---\" + i)\r\n      }\r\n      this.scrollData = lists\r\n    },\r\n    methods: {\r\n    }\r\n  }\r\n</script>\r\n\r\n<style>\r\n  .scroll-item {\r\n    margin-left: 6px;\r\n    margin-right: 6px;\r\n    margin-top: 6px;\r\n    background-color: #fff;\r\n    border-radius: 4px;\r\n  }\r\n\r\n  .scroll-item-title {\r\n    width: 100%;\r\n    height: 60px;\r\n    line-height: 60px;\r\n    text-align: center;\r\n    color: #555;\r\n  }\r\n\r\n  .scroll-header-tiem1 {\r\n    height: 200px;\r\n    background-color: #66ccff;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n\r\n  .scroll-header-tiem2 {\r\n    height: 100px;\r\n    background-color: #89ff8d;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n</style>\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 的父节点，仅支持作为 \\<scroll-view type='nested'> 嵌套模式的直接子节点。不支持复数子节点，渲染时会取其第一个子节点来渲染","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<template>\r\n  <scroll-view style=\"flex:1\" type=\"nested\" direction=\"vertical\" refresher-enabled=\"true\" refresher-default-style=\"none\"\r\n    bounces=\"false\" :refresher-triggered=\"refresherTriggered\" @refresherpulling=\"onRefresherpulling\"\r\n    @refresherrefresh=\"onRefresherrefresh\" @refresherrestore=\"onRefreshrestore\">\r\n    <nested-scroll-header>\r\n      <swiper ref=\"header\" indicator-dots=\"true\" circular=\"true\">\r\n        <swiper-item v-for=\"i in 3\" :item-id=\"i\">\r\n          <image src=\"/static/shuijiao.jpg\" style=\"width:100% ;height: 240px;\"></image>\r\n        </swiper-item>\r\n      </swiper>\r\n    </nested-scroll-header>\r\n    <nested-scroll-body>\r\n      <view style=\"flex:1\">\r\n        <view style=\"flex-direction: row;\">\r\n          <text style=\"padding: 12px 15px;\">nested-scroll-body</text>\r\n        </view>\r\n        <!-- 嵌套滚动仅可能关闭bounces效果 会影响嵌套滚动不连贯 -->\r\n        <list-view bounces=\"false\" id=\"body-list\" :scroll-top=\"scrollTop\" style=\"flex:1\"\r\n          associative-container=\"nested-scroll-view\">\r\n          <list-item v-for=\"key in scrollData\">\r\n            <view class=\"scroll-item\">\r\n              <text class=\"scroll-item-title\">{{key}}</text>\r\n            </view>\r\n          </list-item>\r\n        </list-view>\r\n      </view>\r\n      <text>不会渲染，因为 nested-scroll-body 只会渲染第一个子节点</text>\r\n    </nested-scroll-body>\r\n    <!-- 支持自定义样式下拉刷新slot组件 -->\r\n    <refresh-box slot=\"refresher\" :state=\"state\"></refresh-box>\r\n  </scroll-view>\r\n</template>\r\n\r\n<script>\r\n  import refreshBox from '../../template/custom-refresher/refresh-box/refresh-box.uvue';\r\n  export default {\r\n    components: { refreshBox },\r\n    data() {\r\n      return {\r\n        scrollData: [] as Array<string>,\r\n        scrollTop: 0,\r\n        refresherTriggered: false,\r\n        pullingDistance: 0,\r\n        resetting: false\r\n      }\r\n    },\r\n    computed: {\r\n      state() : number {\r\n        if (this.resetting) {\r\n          return 3;\r\n        }\r\n        if (this.refresherTriggered) {\r\n          return 2\r\n        }\r\n        if (this.pullingDistance > 45) {\r\n          return 1\r\n        } else {\r\n          return 0;\r\n        }\r\n      }\r\n    },\r\n    onLoad() {\r\n      let lists : Array<string> = []\r\n      for (let i = 0; i < 30; i++) {\r\n        lists.push(\"item---\" + i)\r\n      }\r\n      this.scrollData = lists\r\n    },\r\n    methods: {\r\n      onRefresherpulling(e : RefresherEvent) {\r\n        this.pullingDistance = e.detail.dy;\r\n      },\r\n      onRefresherrefresh() {\r\n        this.refresherTriggered = true\r\n        setTimeout(() => {\r\n          this.refresherTriggered = false\r\n          this.resetting = true;\r\n        }, 1500)\r\n      },\r\n      onRefreshrestore() {\r\n        this.pullingDistance = 0\r\n        this.resetting = false;\r\n      },\r\n      //自动化测试使用\r\n      testBodyScrollBy(y : number) {\r\n        this.scrollTop = y\r\n      }\r\n    }\r\n  }\r\n</script>\r\n\r\n<style>\r\n  .scroll-item {\r\n    margin-left: 6px;\r\n    margin-right: 6px;\r\n    margin-top: 6px;\r\n    background-color: #fff;\r\n    border-radius: 4px;\r\n  }\r\n\r\n  .scroll-item-title {\r\n    width: 100%;\r\n    height: 60px;\r\n    line-height: 60px;\r\n    text-align: center;\r\n    color: #555;\r\n  }\r\n\r\n  .scroll-header-tiem {\r\n    height: 200px;\r\n    background-color: #66ccff;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n</style>\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 | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| type | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 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 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | icon的大小，单位px |\n| color | string([string.ColorString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 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 | x | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| selectable | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 文本是否可选 |\n| space | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 显示连续空格 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| ensp | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 中文字符空格一半大小 |\n@| emsp | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 中文字符空格大小 |\n@| nbsp | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 根据字体设置的空格大小 |\n| decode | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 是否解码 (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<template>\r\n  <!-- #ifdef APP -->\r\n  <scroll-view style=\"flex: 1\">\r\n  <!-- #endif -->\r\n    <page-head :title=\"title\"></page-head>\r\n    <view class=\"uni-padding-wrap uni-common-mt\">\r\n      <view class=\"text-box\">\r\n        <text class=\"text\">{{ text }}</text>\r\n      </view>\r\n      <view class=\"uni-btn-v\">\r\n        <button class=\"uni-btn\" type=\"primary\" :disabled=\"!canAdd\" @click=\"add\">\r\n          add line\r\n        </button>\r\n        <button class=\"uni-btn\" type=\"warn\" :disabled=\"!canRemove\" @click=\"remove\">\r\n          remove line\r\n        </button>\r\n        <button class=\"uni-btn\" type=\"primary\" @click=\"textProps\">\r\n          更多属性示例\r\n        </button>\r\n      </view>\r\n    </view>\r\n  <!-- #ifdef APP -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n  .text-box {\r\n    margin-bottom: 20px;\r\n    padding: 20px 0;\r\n    display: flex;\r\n    min-height: 150px;\r\n    background-color: #ffffff;\r\n    justify-content: center;\r\n    align-items: center;\r\n  }\r\n\r\n  .text {\r\n    font-size: 15px;\r\n    color: #353535;\r\n    line-height: 27px;\r\n    text-align: center;\r\n  }\r\n</style>\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| 子组件 | 兼容性 |\n| :- | :- |\n| [text](text.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"-\",\"-\"]]}' /> |","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 | x | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| nodes | array \\\\| string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 节点列表 \\| HTML String |\n| selectable | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 文本是否可选 |\n| @itemclick | (event: [UniRichTextItemClickEvent](#unirichtextitemclickevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 拦截点击事件（只支持 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 | 否 | - | - | \\<img/>图片链接 |\n@| href | string | 否 | - | - | \\<a/>超链接 |\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<template>\r\n  <view>\r\n    <page-head title=\"rich-text\"></page-head>\r\n    <view class=\"uni-padding-wrap uni-common-mt\">\r\n      <view class=\"uni-btn-v\">\r\n        <navigator url=\"/pages/component/rich-text/rich-text-tags\">\r\n          <button type=\"primary\">rich-text渲染单个HTML标签示例</button>\r\n        </navigator>\r\n      </view>\r\n      <view class=\"uni-btn-v\">\r\n        <navigator url=\"/pages/component/rich-text/rich-text-complex\">\r\n          <button type=\"primary\">rich-text渲染复杂HTML示例</button>\r\n        </navigator>\r\n      </view>\r\n      <view class=\"uni-title\">\r\n        <button type=\"default\" @click=\"changeText\">修改文本内容</button>\r\n      </view>\r\n      <view class=\"text-box\" id=\"rich-text-parent\" @click=\"richTextParentClick\">\r\n        <rich-text id=\"richtext\" style=\"border: 1px; border-style: solid; border-color: red;\" :selectable=\"true\"\r\n          :nodes=\"text\"></rich-text>\r\n        <view>\r\n          <text>rich-text-parent</text>\r\n          <text id='rich-text-str'>{{richTextStr}}</text>\r\n        </view>\r\n      </view>\r\n      <view class=\"uni-title\">\r\n        <text class=\"uni-subtitle-text\">selectable</text>\r\n      </view>\n      <view class=\"text-box2\">\n        <rich-text style=\"height: 80px;\" :selectable=\"true\"\n          :nodes=\"text\"></rich-text>\n      </view>\r\n    </view>\r\n  </view>\r\n  <rich-text v-if=\"autoTest\" id=\"test-rich-text\" :nodes=\"testNodes\" :selectable=\"true\" @itemclick=\"itemClickForTest\" style=\"position: fixed;width: 100px;height: 100px;\"></rich-text>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n  .text-box {\r\n    padding: 20px 0;\r\n    background-color: white;\r\n  }\n\n  .text-box2 {\n    top: 20px;\n    background-color: white;\n  }\n\r\n</style>\r\n\n```\n\n>Script\n```uts\n\r\n  export default {\r\n    data() {\r\n      return {\r\n        text: \"<span>hello uni-app x!</span><br/><span>uni-app x，终极跨平台方案</span>\",\r\n        richTextHeight: 0,\r\n        richTextElement: null as UniElement | null,\r\n        // 自动化测试\r\n        autoTest: false,\r\n        testNodes: '<img src=\"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png\"></img>',\r\n        isItemClickTrigger: false,\r\n        richTextStr: false\r\n      }\r\n    },\r\n    onReady() {\r\n      this.richTextElement = uni.getElementById('richtext') as UniElement\r\n      setTimeout(() => {\r\n        this.updateRichTextHeight()\r\n      }, 2500)\r\n    },\r\n    methods: {\r\n      changeText() {\r\n        if (this.text === \"<span>hello uni-app x!</span><br/><span>uni-app x，终极跨平台方案</span>\") {\r\n          this.text = \"<h1>hello uni-app x!</h1><br/><h2>uni-app x，终极跨平台方案</h2>\"\r\n        } else {\r\n          this.text = \"<span>hello uni-app x!</span><br/><span>uni-app x，终极跨平台方案</span>\"\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      },\r\n      // 自动化测试\r\n      itemClickForTest(_ : RichTextItemClickEvent) {\r\n        this.isItemClickTrigger = true;\r\n      },\r\n      getBoundingClientRectForTest() : DOMRect {\r\n        return uni.getElementById('test-rich-text')?.getBoundingClientRect()!;\r\n      },\r\n      getWindowInfoForTest() : GetWindowInfoResult {\r\n        return uni.getWindowInfo();\r\n      },\r\n      richTextParentClick() {\r\n        this.richTextStr = true;\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.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 | x | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| duration | number | 30 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | 进度增加1%所需毫秒数 |\n| percent | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | 百分比0~100 |\n| show-info | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | 在进度条右侧显示百分比 |\n| border-radius | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"3.9\",\"4.11\"]]}' /> | 圆角大小 |\n| font-size | number | 16 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"3.9\",\"4.11\"]]}' /> | 右侧百分比字体大小 |\n| stroke-width | number | 6 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | 进度条线的宽度，单位px |\n| activeColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#09BB07\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | 已选择的进度条的颜色 |\n| backgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#EBEBEB\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | 未选择的进度条的颜色 |\n| active | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | 进度条从左往右的动画 |\n| active-mode | string | \"backwards\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | backwards: 动画从头播；forwards：动画从上次结束点接着播 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| backwards | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | 动画从头播 |\n@| forwards | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | 动画从上次结束点接着播 |\n| @activeend | (event: [UniProgressActiveendEvent](#uniprogressactiveendevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"3.9\",\"4.11\"]]}' /> | 动画完成事件 |","event":"\n### 事件\n#### UniProgressActiveendEvent\n\n```mermaid\ngraph LR\n  \nUniProgressActiveendEvent -- Extends --> UniCustomEvent&ltUniProgressActiveendEventDetail&gt\n  style UniCustomEvent&ltUniProgressActiveendEventDetail&gt color:#42b983\n  click UniCustomEvent&ltUniProgressActiveendEventDetail&gt \"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<template>\r\n  <view class=\"main\">\r\n    <progress :duration=\"duration_input\" :percent=\"percent_input\" :show-info=\"show_info_boolean\"\r\n      :stroke-width=\"stroke_width_input\" :activeColor=\"activeColor_input\" :backgroundColor=\"backgroundColor_input\"\r\n      :active=\"active_boolean\" :active-mode=\"active_mode_enum[active_mode_enum_current].name\"\r\n      @touchstart=\"progress_touchstart\" @touchmove=\"progress_touchmove\" @touchcancel=\"progress_touchcancel\"\r\n      @touchend=\"progress_touchend\" @tap=\"progress_tap\" style=\"width: 80%\">\r\n      <text>uni-app-x</text>\r\n    </progress>\r\n  </view>\r\n\r\n  <scroll-view style=\"flex: 1\">\r\n    <view class=\"content\">\r\n      <page-head title=\"组件属性\"></page-head>\r\n      <boolean-data :defaultValue=\"false\" title=\"进度条从左往右的动画\" @change=\"change_active_boolean\"></boolean-data>\r\n      <boolean-data :defaultValue=\"false\" title=\"在进度条右侧显示百分比\" @change=\"change_show_info_boolean\"></boolean-data>\r\n      <input-data defaultValue=\"30\" title=\"进度增加1%所需毫秒数\" type=\"number\" @confirm=\"confirm_duration_input\"></input-data>\r\n      <input-data defaultValue=\"0\" title=\"百分比0~100\" type=\"number\" @confirm=\"confirm_percent_input\"></input-data>\r\n      <input-data defaultValue=\"6\" title=\"进度条线的宽度，单位px\" type=\"number\"\r\n        @confirm=\"confirm_stroke_width_input\"></input-data>\r\n      <input-data defaultValue=\"#09BB07\" title=\"已选择的进度条的颜色\" type=\"text\"\r\n        @confirm=\"confirm_activeColor_input\"></input-data>\r\n      <input-data defaultValue=\"#EBEBEB\" title=\"未选择的进度条的颜色\" type=\"text\"\r\n        @confirm=\"confirm_backgroundColor_input\"></input-data>\r\n      <enum-data :items=\"active_mode_enum\" title=\"backwards: 动画从头播；forwards：动画从上次结束点接着播\"\r\n        @change=\"radio_change_active_mode_enum\"></enum-data>\r\n    </view>\r\n\r\n    <view>\r\n      <page-head title=\"默认及使用\"></page-head>\r\n      <view class=\"uni-padding-wrap uni-common-mt\">\r\n        <view class=\"progress-box\">\r\n          <progress :percent=\"pgList[0]\" :active=\"true\" :border-radius=\"borderRadius\" :show-info=\"showInfo\"\r\n            :font-size=\"fontSize\" :stroke-width=\"strokeWidth\" :background-color=\"backgroundColor\" class=\"progress p\"\r\n            @activeend=\"activeend\" />\r\n        </view>\r\n        <view class=\"progress-box\">\r\n          <progress :percent=\"pgList[1]\" :stroke-width=\"3\" class=\"progress p1\" />\r\n        </view>\r\n        <view class=\"progress-box\">\r\n          <progress :percent=\"pgList[2]\" :stroke-width=\"3\" class=\"progress p2\" />\r\n        </view>\r\n        <view class=\"progress-box\">\r\n          <progress :percent=\"pgList[3]\" activeColor=\"#10AEFF\" :stroke-width=\"3\" class=\"progress p3\" />\r\n        </view>\r\n        <view class=\"progress-control\">\r\n          <button type=\"primary\" @click=\"setProgress\" class=\"button\">\r\n            设置进度\r\n          </button>\r\n          <button type=\"warn\" @click=\"clearProgress\" class=\"button\">\r\n            清除进度\r\n          </button>\r\n        </view>\r\n      </view>\r\n    </view>\r\n  </scroll-view>\r\n</template>\r\n\r\n<style>\r\n  .main {\r\n    max-height: 250px;\r\n    padding: 5px 0;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.06);\r\n    flex-direction: row;\r\n    justify-content: center;\r\n  }\r\n\r\n  .main .list-item {\r\n    width: 100%;\r\n    height: 100px;\r\n    border: 1px solid #666;\r\n  }\r\n\r\n  .progress-box {\r\n    height: 25px;\r\n    margin-bottom: 30px;\r\n  }\r\n\r\n  .button {\r\n    margin-top: 10px;\r\n  }\r\n</style>\r\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-types'\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 | x | 4.31 | 4.31 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| @init | (event: [UniNativeViewInitEvent](#uninativeviewinitevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"4.31\",\"4.31\"]]}' /> | native-view初始化时回调，event.detail = { element: 'native-view元素实例对象'} |","event":"\n### 事件\n#### UniNativeViewInitEvent\nnative-view 组件 init事件event\n```mermaid\ngraph LR\n  \nUniNativeViewInitEvent -- Extends --> UniCustomEvent&ltUniNativeViewInitEventDetail&gt\n  style UniCustomEvent&ltUniNativeViewInitEventDetail&gt color:#42b983\n  click UniCustomEvent&ltUniNativeViewInitEventDetail&gt \"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#### native-view\n展示使用 native-view 封装的原生view的UTS插件-标准模式组件\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<template>\r\n  <view>\n    <text class=\"tips\">说明：如果本地无 uts 插件编译环境请提交打包自定义基座查看效果</text>\r\n    <!-- native-button 通过 native-view 绑定原生button 实现的UTS插件-标准模式组件 -->\r\n    <native-button class=\"native-button\" style=\"width: 200px; height: 100px;\" :text=\"buttonText\" @buttonTap=\"ontap\"\r\n      @load=\"onload\"></native-button>\r\n    <!-- native-time-picker 通过 native-view 绑定原生time-picker 实现的UTS插件-标准模式组件 -->\r\n    <native-time-picker class=\"native-time-picker\" :hour=2 :minute=3 @changed=\"onChanged\"></native-time-picker>\r\n  </view>\r\n</template>\r\n\r\n<script>\r\n  export default {\r\n    data() {\r\n      return {\r\n        title: 'Hello',\r\n        buttonText: \"native-button\",\r\n        isLoad: false,\r\n        clickCount: 0\r\n      }\r\n    },\r\n    onLoad() {\r\n\r\n    },\r\n    methods: {\r\n      ontap(e : UniNativeViewEvent) {\r\n        uni.showToast({\r\n          title: \"按钮被点击了\"\r\n        })\r\n        this.clickCount ++\r\n        this.buttonText = \"native-button\"+this.clickCount\r\n      },\r\n      onload() {\r\n        //标记已初始化 用于自动化测试\r\n        this.isLoad = true\r\n      },\r\n      onChanged(e : UniNativeViewEvent) {\r\n        console.log(\"onchanged-----\", e.detail)\r\n      }\r\n    }\r\n  }\r\n</script>\r\n\r\n<style>\n\n  .tips {\n    font-size: 14px;\n    color: #BEBEBE;\n    margin: 25px auto 25px auto;\n    text-align: center;\n  }\n\r\n  .native-button {\r\n    height: 100px;\r\n    width: 100px;\r\n    margin: 25px auto 25px auto;\r\n  }\r\n\r\n  .native-time-picker {\r\n    margin: 10px auto 25px auto;\r\n    border-style: solid;\r\n    border-radius: 5px;\r\n  }\r\n</style>\n\n```\n:::\n#### native-button\n通过 native-view 绑定原生 button 实现的UTS插件-标准模式组件\n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//uni_modules/native-button/components/native-button/native-button.uvue) \n>\n> 该 API 不支持 Web，请运行 hello uni-app x 到 App 平台体验 \n```uvue\n<template>\r\n\t<native-view @init=\"onviewinit\" @customClick=\"ontap\"></native-view>\r\n</template>\r\n<script setup lang=\"uts\">\r\n\timport { NativeButton } from \"@/uni_modules/native-button\";\r\n\tlet button : NativeButton | null = null\r\n\r\n\t//声明属性\r\n\tconst props = defineProps<{ text : string }>()\r\n\r\n\t//声明事件\r\n\tconst emit = defineEmits<{\r\n\t\t(e : \"load\") : void\r\n\t\t(e : \"buttonTap\", event : UniNativeViewEvent) : void\r\n\t}>()\r\n\r\n\t//声明方法\r\n\tfunction updateText(value : string) {\r\n\t\tbutton?.updateText(value)\r\n\t}\r\n\r\n\t//监听属性变化\r\n\twatchEffect(() => {\r\n\t\tconst text = props.text\r\n\t\tupdateText(text)\r\n\t})\r\n\r\n\t//native-view初始化时触发此方法\r\n\tfunction onviewinit(e : UniNativeViewInitEvent) {\r\n\t\t//获取UniNativeViewElement 传递给NativeButton对象\r\n\t\tbutton = new NativeButton(e.detail.element);\r\n\t\tupdateText(props.text)\r\n\t\temit(\"load\")\r\n\t}\r\n\r\n\tfunction ontap(e : UniNativeViewEvent) {\r\n\t\temit(\"buttonTap\", e)\r\n\t}\r\n\r\n\tfunction onUnmounted() {\r\n\t\t// iOS平台需要主动释放 uts 实例\r\n\t\tbutton?.destroy()\r\n\t}\r\n</script>\r\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 | x | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| disabled | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | 是否禁用 |\n| hover-class | string([string.ClassString](/uts/data-type.md#ide-string)) | \"button-hover\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | 指定按下去的样式类。当 hover-class=\"none\" 时，没有点击态效果 |\n| hover-stop-propagation | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 指定是否阻止本节点的祖先节点出现点击态 |\n| hover-start-time | number | 20 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | 按住后多久出现点击态，单位毫秒 |\n| hover-stay-time | number | 70 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | 手指松开后点击态保留时间，单位毫秒 |\n| size | string | \"default\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | 按钮的大小 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| default | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | 默认大小 |\n@| mini | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | 小尺寸 |\n| type | string | \"default\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | 按钮的样式类型 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| default | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | 白色 |\n@| primary | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | 蓝色 |\n@| warn | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | 红色 |\n| plain | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | 按钮是否镂空，背景色透明 |\n| loading | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]]}' /> | 名称前是否带 loading 图标 |\n| form-type | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | 用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| submit | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | 提交表单 |\n@| reset | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | 重置表单 |\n| open-type | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"4.31\",\"4.31\"]]}' /> | 开放能力 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| agreePrivacyAuthorization | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"4.31\",\"4.31\"]]}' /> | 用户同意隐私协议按钮。用户点击一次此按钮后，所有已声明过的隐私接口可以正常调用。 |\n@| feedback | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 打开“意见反馈”页面，用户可提交反馈内容并上传日志 |\n@| share | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 触发用户转发 |\n@| getUserInfo | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 获取用户信息，可以从@getuserinfo回调中获取到用户信息 |\n@| contact | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 打开客服会话，如果用户在会话中点击消息卡片后返回应用，可以从 @contact 回调中获得具体信息 |\n@| getPhoneNumber | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 获取用户手机号，可以从@getphonenumber回调中获取到用户信息 |\n@| launchApp | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 打开APP，可以通过app-parameter属性设定向APP传的参数 |\n@| openSetting | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 打开授权设置页 |\n@| chooseAvatar | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 获取用户头像，可以从@chooseavatar回调中获取到头像信息 |\n@| getAuthorize | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 支持小程序授权 |\n@| lifestyle | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 关注生活号 |\n@| contactShare | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 分享到通讯录好友 |\n@| openGroupProfile | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 呼起QQ群资料卡页面，可以通过group-id属性设定需要打开的群资料卡的群号，同时manifest.json中必须配置groupIdList |\n@| openGuildProfile | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 呼起频道页面，可以通过guild-id属性设定需要打开的频道ID |\n@| openPublicProfile | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 打开公众号资料卡，可以通过public-id属性设定需要打开的公众号资料卡的号码，同时manifest.json中必须配置publicIdList |\n@| shareMessageToFriend | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 在自定义开放数据域组件中,向指定好友发起分享据 |\n@| addFriend | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 添加好友，对方需要通过该小程序进行授权，允许被加好友后才能调用成功用户授权 |\n@| addColorSign | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 添加彩签，点击后添加状态有用户提示，无回调 |\n@| addGroupApp | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 添加群应用（只有管理员或群主有权操作），添加后给button绑定@addgroupapp事件接收回调数据 |\n@| addToFavorites | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 收藏当前页面，点击按钮后会触发Page.onAddToFavorites方法 |\n@| chooseAddress | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 选择用户收货地址，可以从@chooseaddress回调中获取到用户选择的地址信息 |\n@| chooseInvoiceTitle | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 选择用户发票抬头，可以从@chooseinvoicetitle回调中获取到用户选择发票抬头信息 |\n@| login | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 登录，可以从@login回调中确认是否登录成功 |\n@| subscribe | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 订阅类模板消息，需要用户授权才可发送 |\n@| favorite | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 触发用户收藏 |\n@| watchLater | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 触发用户稍后再看 |\n@| openProfile | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 触发打开用户主页 |\n| lang | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。 |\n| session-from | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 会话来源 |\n| send-message-title | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 会话内消息卡片标题 |\n| send-message-path | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 会话内消息卡片点击跳转应用路径 |\n| send-message-img | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 会话内消息卡片图片 |\n| show-message-card | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 显示会话内消息卡片 |\n| app-parameter | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 打开 APP 时，向 APP 传递的参数 |\n| group-id | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 打开群资料卡时，传递的群号 |\n| guild-id | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 打开频道页面时，传递的频道号 |\n| public-id | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 打开公众号资料卡时，传递的号码 |\n| @getuserinfo | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与uni.getUserInfo返回的一致 |\n| @contact | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 客服消息回调 |\n| @getphonenumber | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 获取用户手机号回调 |\n| @error | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"x\",\"x\"]]}' /> | 当使用开放能力时，发生错误的回调 |\n| @opensetting | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 在打开授权设置页后回调 |\n| @launchapp | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 打开 APP 成功的回调 |\n| @chooseavatar | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 获取用户头像回调 |\n| @chooseaddress | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 调起用户编辑并选择收货地址的回调 |\n| @chooseinvoicetitle | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"x\",\"x\"]]}' /> | 用户选择发票抬头的回调 |\n| @addgroupapp | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]]}' /> | 添加群应用的回调 |\n| @subscribe | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"x\",\"x\"]]}' /> | 订阅消息授权回调 |\n| @login | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"x\",\"x\"]]}' /> | 登录回调 |","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<template>\r\n  <view class=\"main\">\r\n    <button id=\"testButton\" :disabled=\"disabled_boolean\" :size=\"size_enum[size_enum_current].name\"\r\n      :type=\"type_enum[type_enum_current].name\" :plain=\"plain_boolean\" @click=\"button_click\"\r\n      @touchstart=\"button_touchstart\" @touchmove=\"button_touchmove\" @touchcancel=\"button_touchcancel\"\r\n      @touchend=\"button_touchend\" @tap=\"button_tap\" @longpress=\"button_longpress\" class=\"btn\"\r\n      :class=\"default_style ? (disabled_boolean ? 'custom-btn-disable' : 'custom-btn') : ''\"\r\n      :hover-class=\"default_style ? 'is-hover' : 'button-hover'\">\r\n      {{ text }}\r\n    </button>\r\n  </view>\r\n  <scroll-view style=\"flex: 1\">\r\n    <view class=\"content\">\r\n      <boolean-data :defaultValue=\"false\" title=\"按钮是否镂空，背景色透明\" @change=\"change_plain_boolean\"></boolean-data>\r\n      <boolean-data :defaultValue=\"false\" title=\"是否禁用\" @change=\"change_disabled_boolean\"></boolean-data>\r\n      <boolean-data :defaultValue=\"false\" title=\"修改默认样式和点击效果(高优先)\" @change=\"change_default_style\"></boolean-data>\r\n      <enum-data :items=\"size_enum\" title=\"按钮的大小\" @change=\"radio_change_size_enum\"></enum-data>\r\n      <enum-data :items=\"type_enum\" title=\"按钮的类型\" @change=\"radio_change_type_enum\"></enum-data>\r\n      <input-data :defaultValue=\"text\" title=\"按钮的文案\" type=\"text\" @confirm=\"confirm_text_input\"></input-data>\r\n      <view style=\"height: 10px;\"></view>\n      <button @click=\"navigateToChild\">更多示例</button>\n      <view style=\"height: 10px;\"></view>\r\n      <!-- #ifdef APP -->\r\n      <button @click=\"openPrivacyDialog\">open-type实现App隐私政策弹框</button>\r\n      <view style=\"height: 10px;\"></view>\r\n      <!-- #endif -->\r\n    </view>\r\n  </scroll-view>\r\n</template>\r\n\r\n<style>\r\n  .main {\r\n    padding: 5px 0;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.06);\r\n    flex-direction: row;\r\n    justify-content: center;\r\n  }\r\n\r\n  .main .list-item {\r\n    width: 100%;\r\n    height: 100px;\r\n    border: 1px solid #666;\r\n  }\r\n\r\n  .custom-btn {\r\n    color: #ffffff;\r\n    background-color: #1AAD19;\r\n    border-color: #1AAD19;\r\n  }\r\n\r\n  .custom-btn-disable {\r\n    color: rgba(255, 255, 255, 0.7);\r\n    background-color: rgba(26, 173, 25, 0.7);\r\n    border-color: rgba(26, 173, 25, 0.7);\r\n  }\r\n\r\n  .is-hover {\r\n    color: rgba(255, 255, 255, 0.6);\r\n    background-color: #179b16;\r\n    border-color: #179b16;\r\n  }\r\n\r\n  .button-hover {\r\n    color: rgba(0, 0, 0, 0.6);\r\n    background-color: #dedede;\r\n  }\r\n</style>\r\n\n```\n\n>Script\n```uts\n\r\n  import { ItemType } from '@/components/enum-data/enum-data-types'\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      },\n      openPrivacyDialog() {\n        uni.openDialogPage({\n          url: '/pages/component/button/privacy',\n        })\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 | x | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| disabled | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | 是否禁用 |\n| value | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | checkbox 标识，选中时触发 checkbox-group 的 change 事件，并携带 checkbox 的 value |\n| checked | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | 当前是否选中，可用来设置默认选中 |\n| backgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | checkbox默认的背景颜色 |\n| borderColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#d1d1d1\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | checkbox默认的边框颜色 |\n| activeBackgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | checkbox选中时的背景颜色 |\n| activeBorderColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#d1d1d1\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | checkbox选中时的边框颜色 |\n| foreColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.18\",\"-\",\"4.18\",\"4.18\"]]}' /> | checkbox的图标颜色，优先级大于color属性 |\n| ~~iconColor~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | checkbox的图标颜色，优先级大于color属性 (使用foreColor替代) |\n| ~~color~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | 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<template>\r\n  <view class=\"main\">\r\n    <checkbox :disabled=\"disabled_boolean\" :checked=\"checked_boolean\" :color=\"color_input\" :iconColor=\"iconColor_input\"\r\n      :foreColor=\"foreColor_input\" :backgroundColor=\"backgroundColor_input\" :borderColor=\"borderColor_input\"\r\n      :activeBackgroundColor=\"activeBackgroundColor_input\" :activeBorderColor=\"activeBorderColor_input\"\r\n      @click=\"checkbox_click\" @touchstart=\"checkbox_touchstart\" @touchmove=\"checkbox_touchmove\"\r\n      @touchcancel=\"checkbox_touchcancel\" @touchend=\"checkbox_touchend\" @tap=\"checkbox_tap\"\r\n      @longpress=\"checkbox_longpress\"><text>uni-app-x</text></checkbox>\r\n  </view>\r\n\r\n  <scroll-view style=\"flex: 1\">\r\n    <view class=\"content\">\r\n      <page-head title=\"组件属性\"></page-head>\r\n      <boolean-data :defaultValue=\"false\" title=\"当前是否选中，可用来设置默认选中\" @change=\"change_checked_boolean\"></boolean-data>\r\n      <boolean-data :defaultValue=\"false\" title=\"是否禁用\" @change=\"change_disabled_boolean\"></boolean-data>\r\n      <input-data defaultValue=\"#007aff\" title=\"checkbox的颜色\" type=\"text\" @confirm=\"confirm_color_input\"></input-data>\r\n      <input-data defaultValue=\"#ffffff\" title=\"checkbox默认的背景颜色\" type=\"text\"\r\n        @confirm=\"confirm_backgroundColor_input\"></input-data>\r\n      <input-data defaultValue=\"#d1d1d1\" title=\"checkbox默认的边框颜色\" type=\"text\"\r\n        @confirm=\"confirm_borderColor_input\"></input-data>\r\n      <input-data defaultValue=\"#ffffff\" title=\"checkbox选中时的背景颜色\" type=\"text\"\r\n        @confirm=\"confirm_activeBackgroundColor_input\"></input-data>\r\n      <input-data defaultValue=\"#d1d1d1\" title=\"checkbox选中时的边框颜色\" type=\"text\"\r\n        @confirm=\"confirm_activeBorderColor_input\"></input-data>\r\n      <input-data defaultValue=\"#007aff\" title=\"iconColor: checkbox的图标颜色，优先级大于color属性\" type=\"text\"\r\n        @confirm=\"confirm_iconColor_input\"></input-data>\r\n      <input-data defaultValue=\"#ff0000\" title=\"foreColor: checkbox的图标颜色，优先级大于color属性\" type=\"text\"\r\n        @confirm=\"confirm_foreColor_input\"></input-data>\r\n    </view>\r\n\r\n    <view>\r\n      <page-head title=\"默认及使用\"></page-head>\r\n      <view class=\"uni-padding-wrap uni-common-mt\">\r\n        <view class=\"uni-title uni-common-mt\">\r\n          <text class=\"uni-title-text\"> 默认样式 </text>\r\n        </view>\r\n        <view>\r\n          <checkbox-group class=\"uni-flex uni-row checkbox-group\" @change=\"testChange\" style=\"flex-wrap: wrap\">\r\n            <checkbox value=\"cb\" :checked=\"checked\" :color=\"color\" :iconColor=\"iconColor\" :foreColor=\"foreColor\"\r\n              style=\"margin-right: 15px\" class=\"checkbox cb\">选中\r\n            </checkbox>\r\n            <checkbox value=\"cb1\" style=\"margin-right: 15px\" class=\"checkbox cb1\">{{ text }}</checkbox>\r\n            <checkbox value=\"cb2\" :disabled=\"disabled\" class=\"checkbox cb2\">禁用</checkbox>\r\n            <checkbox value=\"cb3\" style=\"margin-top: 10px\" class=\"checkbox cb3\">\r\n              {{ wrapText }}\r\n            </checkbox>\r\n          </checkbox-group>\r\n        </view>\r\n        <view class=\"uni-title uni-common-mt\">\r\n          <text class=\"uni-title-text\"> 不同颜色和尺寸的checkbox </text>\r\n        </view>\r\n        <view>\r\n          <checkbox-group class=\"uni-flex uni-row checkbox-group\">\r\n            <checkbox value=\"cb1\" :checked=\"true\" color=\"#FFCC33\" style=\"transform: scale(0.7); margin-right: 15px\"\r\n              class=\"checkbox\">选中\r\n            </checkbox>\r\n            <checkbox value=\"cb\" color=\"#FFCC33\" style=\"transform: scale(0.7)\" class=\"checkbox\">未选中</checkbox>\r\n          </checkbox-group>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"uni-padding-wrap\">\r\n        <view class=\"uni-title uni-common-mt\">\r\n          <text class=\"uni-title-text\"> 推荐展示样式 </text>\r\n        </view>\r\n      </view>\r\n      <view class=\"uni-list uni-common-pl\">\r\n        <checkbox-group @change=\"checkboxChange\" class=\"checkbox-group\" id=\"trigger-change\">\r\n          <checkbox class=\"uni-list-cell uni-list-cell-pd checkbox\" v-for=\"(item, index) in items\" :key=\"item.value\"\r\n            :value=\"item.value\" :checked=\"item.checked\" :class=\"[\r\n              index < items.length - 1 ? 'uni-list-cell-line' : '',\r\n              'checkbox-item-' + index,\r\n            ]\">\r\n            {{ item.name }}\r\n          </checkbox>\r\n        </checkbox-group>\r\n      </view>\r\n    </view>\r\n  </scroll-view>\r\n</template>\r\n\r\n<style>\r\n  .main {\r\n    max-height: 250px;\r\n    padding: 5px 0;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.06);\r\n    flex-direction: row;\r\n    justify-content: center;\r\n  }\r\n\r\n  .main .list-item {\r\n    width: 100%;\r\n    height: 100px;\r\n    border: 1px solid #666;\r\n  }\r\n\r\n  .uni-list-cell {\r\n    justify-content: flex-start;\r\n  }\r\n</style>\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 | x | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| name | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| @change | (event: [UniCheckboxGroupChangeEvent](#unicheckboxgroupchangeevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | checkbox-group中选中项发生改变是触发 change 事件，detail = {value:\\[选中的checkbox的value的数组] |","event":"\n### 事件\n#### UniCheckboxGroupChangeEvent\n\n```mermaid\ngraph LR\n  \nUniCheckboxGroupChangeEvent -- Extends --> UniCustomEvent&ltUniCheckboxGroupChangeEventDetail&gt\n  style UniCustomEvent&ltUniCheckboxGroupChangeEventDetail&gt color:#42b983\n  click UniCustomEvent&ltUniCheckboxGroupChangeEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniCheckboxGroupChangeEventDetail\n\n\n###### UniCheckboxGroupChangeEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- |  :-: | :- |\n| value | Array\\<string\\> | 是 | - | - | - |\n\n","example":"","children":"### 子组件 @children-tags\n| 子组件 | 兼容性 |\n| :- | :- |\n| [checkbox](checkbox.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"-\",\"-\"]]}' /> |","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 | x | 3.97 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| disabled | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.97\",\"4.11\"]]}' /> | 是否禁用 |\n| report-submit | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 是否返回 formId 用于发送模板消息 |\n| @submit | (event: [UniFormSubmitEvent](#uniformsubmitevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.97\",\"4.11\"]]}' /> | 携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'}} |\n| @reset | (event: [UniFormResetEvent](#uniformresetevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.97\",\"4.11\"]]}' /> | 表单重置时会触发 reset 事件 |","event":"\n### 事件\n#### UniFormSubmitEvent\n\n```mermaid\ngraph LR\n  \nUniFormSubmitEvent -- Extends --> UniCustomEvent&ltUniFormSubmitEventDetail&gt\n  style UniCustomEvent&ltUniFormSubmitEventDetail&gt color:#42b983\n  click UniCustomEvent&ltUniFormSubmitEventDetail&gt \"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&ltUniFormResetEventDetail&gt\n  style UniCustomEvent&ltUniFormResetEventDetail&gt color:#42b983\n  click UniCustomEvent&ltUniFormResetEventDetail&gt \"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<template>\r\n  <!-- #ifdef APP -->\r\n  <scroll-view class=\"scroll-view\">\r\n  <!-- #endif -->\r\n    <view class=\"page\">\r\n      <form @submit=\"onFormSubmit\" @reset=\"onFormReset\">\r\n        <view class=\"uni-form-item\">\r\n          <view class=\"title\">姓名</view>\r\n          <input class=\"uni-input\" name=\"nickname\" :value=\"nickname\" placeholder=\"请输入姓名\" maxlength=\"-1\" />\r\n        </view>\r\n        <view class=\"uni-form-item\">\r\n          <view class=\"title\">性别</view>\r\n          <radio-group name=\"gender\" class=\"flex-row\">\r\n            <view class=\"group-item\">\r\n              <radio value=\"0\" :checked=\"gender=='0'\" /><text>男</text>\r\n            </view>\r\n            <view class=\"group-item\">\r\n              <radio value=\"1\" :checked=\"gender=='1'\" /><text>女</text>\r\n            </view>\r\n          </radio-group>\r\n        </view>\r\n        <view class=\"uni-form-item\">\r\n          <view class=\"title\">爱好</view>\r\n          <checkbox-group name=\"loves\" class=\"flex-row\">\r\n            <view class=\"group-item\">\r\n              <checkbox value=\"0\" :checked=\"loves.indexOf('0')>-1\" /><text>读书</text>\r\n            </view>\r\n            <view class=\"group-item\">\r\n              <checkbox value=\"1\" :checked=\"loves.indexOf('1')>-1\" /><text>写字</text>\r\n            </view>\r\n          </checkbox-group>\r\n        </view>\r\n        <view class=\"uni-form-item\">\r\n          <view class=\"title\">年龄</view>\r\n          <slider name=\"age\" :value=\"age\" :show-value=\"true\"></slider>\r\n        </view>\r\n        <view class=\"uni-form-item\">\r\n          <view class=\"title\">保留选项</view>\r\n          <view>\r\n            <switch name=\"switch\" :checked=\"switch\" />\r\n          </view>\r\n        </view>\r\n        <view class=\"uni-form-item\">\r\n          <view class=\"title\">备注</view>\r\n          <textarea name=\"comment\" :value=\"comment\" placeholder=\"请输入备注\" style=\"background: #FFF;\" />\r\n          <!-- <textarea class=\"uni-input\" name=\"comment\" :value=\"comment\" placeholder=\"这个class的写法，导致iOS和Android产生了高度差异\"/> -->\r\n        </view>\r\n        <view class=\"uni-btn-v flex-row\">\r\n          <button class=\"btn btn-submit\" form-type=\"submit\" type=\"primary\">Submit</button>\r\n          <button class=\"btn btn-reset\" type=\"default\" form-type=\"reset\">Reset</button>\r\n        </view>\r\n      </form>\r\n      <view class=\"result\">提交的表单数据</view>\r\n      <textarea class=\"textarea\" :value=\"formDataText\" :maxlength=\"-1\" :auto-height=\"true\"></textarea>\r\n    </view>\r\n  <!-- #ifdef APP -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n  .scroll-view {\r\n    flex: 1;\r\n  }\r\n\r\n  .page {\r\n    padding: 15px;\r\n  }\r\n\r\n  .flex-row {\r\n    flex-direction: row;\r\n  }\r\n\r\n  .uni-form-item {\r\n    padding: 15px 0;\r\n  }\r\n\r\n  .title {\r\n    margin-bottom: 10px;\r\n  }\r\n\r\n  .group-item {\r\n    flex-direction: row;\r\n    margin-right: 20px;\r\n  }\r\n\r\n  .btn {\r\n    flex: 1;\r\n  }\r\n\r\n  .btn-submit {\r\n    margin-right: 5px;\r\n  }\r\n\r\n  .btn-reset {\r\n    margin-left: 5px;\r\n  }\r\n\r\n  .result {\r\n    margin-top: 30px;\r\n  }\r\n\r\n  .textarea {\r\n    margin-top: 5px;\r\n    padding: 5px;\r\n    background-color: #fff;\r\n  }\r\n</style>\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 | x | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| name | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| disabled | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 是否禁用 |\n| value | string | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 输入框的初始内容 |\n| type | text \\| number \\| idcard \\| digit \\| tel \\| safe-password \\| nickname | \"text\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | input的类型 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| text | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 文本输入键盘 |\n@| number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 数字输入键盘 |\n@| idcard | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 身份证输入键盘 |\n@| digit | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 带小数点数字输入键盘 |\n@| tel | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.9\",\"4.11\"]]}' /> | 电话输入键盘 |\n@| safe-password | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 密码安全输入键盘 |\n@| nickname | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 昵称输入键盘 |\n| password | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 是否是密码类型 |\n| placeholder | string | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 输入框为空时占位符 |\n| placeholder-style | string | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 指定 placeholder 的样式，目前仅支持color,font-size和font-weight |\n| placeholder-class | string([string.ClassString](/uts/data-type.md#ide-string)) | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 指定 placeholder 的样式类，目前仅支持color,font-size和font-weight |\n| maxlength | number | \"不限制长度\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 最大输入长度，0和正数为合法值，非法值的时候不限制最大长度 |\n| cursor-spacing | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.9\",\"4.11\"]]}' /> | 指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 |\n| cursor-color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.99\",\"4.11\"]]}' /> | 指定光标颜色 |\n| auto-focus | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 自动获取焦点，与`focus`属性对比，此属性只会首次生效。 |\n| focus | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 获取焦点 |\n| confirm-type | send \\| search \\| next \\| go \\| done | \"done\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 设置键盘右下角按钮的文字，仅在 type为text 时生效。 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| send | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 发送 |\n@| search | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 搜索 |\n@| next | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 下一个 |\n@| go | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 前往 |\n@| done | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 完成 |\n| always-embed | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) |\n| confirm-hold | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 点击键盘右下角按钮时是否保持键盘不收起 |\n| cursor | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 指定focus时的光标位置 |\n| selection-start | number | -1 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 光标起始位置，自动聚集时有效，需与selection-end搭配使用 |\n| selection-end | number | -1 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 光标结束位置，自动聚集时有效，需与selection-satrt搭配使用 |\n| adjust-position | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.9\",\"4.11\"]]}' /> | 键盘弹起时，是否自动上推页面 |\n| text-content-type | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 文本区域的语义，根据类型自动填充 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| oneTimeCode | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 一次性验证码 |\n| hold-keyboard | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"4.0\",\"4.11\"]]}' /> | focus时，点击页面的时候不收起键盘 |\n| safe-password-cert-path | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 安全键盘加密公钥的路径，只支持包内路径 |\n| safe-password-length | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 安全键盘输入密码长度 |\n| safe-password-time-stamp | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 安全键盘加密时间戳 |\n| safe-password-nonce | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 安全键盘加密盐值 |\n| safe-password-salt | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 安全键盘计算 hash 盐值，若指定custom-hash 则无效 |\n| safe-password-custom-hash | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 安全键盘计算 hash 的算法表达式 |\n| random-number | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 当 type 为 number, digit, idcard 数字键盘是否随机排列 |\n| controlled | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 是否为受控组件。为 true 时，value 内容会完全受 setData 控制 |\n| always-system | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 是否强制使用系统键盘和 Web-view 创建的 input 元素。为 true 时，confirm-type、confirm-hold 可能失效 |\n| inputmode | none \\| text \\| decimal \\| numeric \\| tel \\| search \\| email \\| url | \"text\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。在符合条件的高版本webview里，uni-app的 web 和 app-vue 平台中可使用本属性。 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用。 |\n@| text | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 使用用户本地区域设置的标准文本输入键盘。 |\n@| decimal | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 小数输入键盘，包含数字和分隔符（通常是“ . ”或者“ , ”），设备可能也可能不显示减号键。 |\n@| numeric | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 数字输入键盘，所需要的就是 0 到 9 的数字，设备可能也可能不显示减号键。 |\n@| tel | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 电话输入键盘，包含 0 到 9 的数字、星号（*）和井号（#）键。表单输入里面的电话输入通常应该使用 \\<input type=\"tel\"\\> 。 |\n@| search | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 为搜索输入优化的虚拟键盘，比如，返回键可能被重新标记为“搜索”，也可能还有其他的优化。 |\n@| email | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 为邮件地址输入优化的虚拟键盘，通常包含\"@\"符号和其他优化。表单里面的邮件地址输入应该使用 \\<input type=\"email\"\\> 。 |\n@| url | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 为网址输入优化的虚拟键盘，比如，“/”键会更加明显、历史记录访问等。表单里面的网址输入通常应该使用 \\<input type=\"url\"\\> 。 |\n| @input | (event: [UniInputEvent](#uniinputevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 当键盘输入时，触发input事件，event.detail = {value, cursor}，处理函数可以直接 return 一个字符串，将替换输入框的内容。 |\n| @focus | (event: [UniInputFocusEvent](#uniinputfocusevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度 |\n| @blur | (event: [UniInputBlurEvent](#uniinputblurevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 输入框失去焦点时触发，event.detail = {value: value} |\n| @keyboardheightchange | (event: [UniInputKeyboardHeightChangeEvent](#uniinputkeyboardheightchangeevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.9\",\"4.11\"]]}' /> | 键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration} |\n| @confirm | (event: [UniInputConfirmEvent](#uniinputconfirmevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 点击完成按钮时触发，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 | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.9\",\"4.11\"]]}' /> | 键盘高度 |\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<template>\r\n  <!-- #ifdef APP -->\r\n  <scroll-view style=\"flex: 1\">\r\n  <!-- #endif -->\r\n    <page-head :title=\"title\"></page-head>\r\n    <view class=\"uni-common-mt uni-padding-wrap\">\r\n      <view>\r\n        <view class=\"uni-title\">\r\n          <text class=\"uni-title-text\">设置输入框的初始内容</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input id=\"uni-input-default\" class=\"uni-input\" value=\"hello uni-app x\" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\">\r\n          <text class=\"uni-title-text\">type取值（不同输入法表现可能不一致）</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input id=\"uni-input-type-text\" class=\"uni-input\" type=\"text\" placeholder=\"文本输入键盘\" />\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input id=\"uni-input-type-number\" class=\"uni-input\" type=\"number\" placeholder=\"数字输入键盘\" />\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input id=\"uni-input-type-digit\" class=\"uni-input\" type=\"digit\" placeholder=\"带小数点的数字输入键盘\" />\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input id=\"uni-input-type-tel\" class=\"uni-input\" :type=\"inputTypeTel\" placeholder=\"电话输入键盘\" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\">\r\n          <text class=\"uni-title-text\">密码输入框</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input id=\"uni-input-password\" class=\"uni-input\" :password=\"inputPassword\" :value=\"inputPasswordValue\" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\">\r\n          <text class=\"uni-title-text\">无value设置的密码输入框</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input class=\"uni-input\" :password=\"true\" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\">\r\n          <text class=\"uni-title-text\">占位符样式</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input id=\"uni-input-placeholder1\" class=\"uni-input\" :placeholder-style=\"inputPlaceHolderStyle\"\r\n            placeholder=\"占位符文字颜色为红色\" />\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input id=\"uni-input-placeholder2\" class=\"uni-input\" :placeholder-class=\"inputPlaceHolderClass\"\r\n            placeholder=\"占位符字体大小为10px\" />\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input class=\"uni-input\" :placeholder-style=\"inputPlaceHolderStyle\"\r\n            value=\"不设置placeholder只设置placeholder-style\" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\">\r\n          <text class=\"uni-title-text\">设置禁用输入框</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input id=\"uni-input-disable\" class=\"uni-input\" :disabled=\"true\" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\">\r\n          <text class=\"uni-title-text\">设置最大输入长度</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input id=\"uni-input-maxlength\" class=\"uni-input\" :maxlength=\"10\" placeholder=\"最大输入长度为10\"\r\n            :value=\"inputMaxLengthValue\" @input=\"onMaxLengthInput\" :focus=\"inputMaxLengthFocus\" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\">\r\n          <text class=\"uni-title-text\">设置光标与键盘的距离</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input class=\"uni-input\" :cursor-spacing=\"1000\" placeholder=\"光标与键盘的距离为1000px\" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\">\r\n          <text class=\"uni-title-text\">自动获取焦点</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input id=\"uni-input-focus\" class=\"uni-input\" :focus=\"focus\"\r\n            @keyboardheightchange=\"inputFocusKeyBoardChange\" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\">\r\n          <text class=\"uni-title-text\">confirm-type取值（不同输入法表现可能不一致）</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input id=\"uni-input-confirm-send\" class=\"uni-input\" confirmType=\"send\" placeholder=\"键盘右下角按钮显示为发送\" />\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input id=\"uni-input-confirm-search\" class=\"uni-input\" confirmType=\"search\" placeholder=\"键盘右下角按钮显示为搜索\" />\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input id=\"uni-input-confirm-next\" class=\"uni-input\" confirmType=\"next\" placeholder=\"键盘右下角按钮显示为下一个\" />\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input id=\"uni-input-confirm-go\" class=\"uni-input\" confirmType=\"go\" placeholder=\"键盘右下角按钮显示为前往\" />\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input id=\"uni-input-confirm-done\" class=\"uni-input\" confirmType=\"done\" placeholder=\"键盘右下角按钮显示为完成\" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\">\r\n          <text class=\"uni-title-text\">点击键盘右下角按钮时保持键盘不收起</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input class=\"uni-input\" :confirm-hold=\"true\" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\" @click=\"setCursor(4)\">\r\n          <text class=\"uni-title-text\">设置输入框聚焦时光标的位置（点这里）</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input ref=\"input\" class=\"uni-input\" value=\"0123456789\" :focus=\"cursorInputFocus\" :cursor=\"cursor\" @blur=\"onCursorBlurChange\" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\" @click=\"setSelection(0, 4)\">\r\n          <text class=\"uni-title-text\">设置输入框聚焦时光标的起始位置和结束位置（点这里）</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input ref=\"input2\" class=\"uni-input\" value=\"0123456789\" :selection-start=\"selectionStart\"\r\n            :selection-end=\"selectionEnd\" :focus=\"selectionInputFocus\" @blur=\"onSelectionBlurChange\" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\" style=\"flex-direction: row; align-items: center\">\r\n          <text class=\"uni-title-text\">设置光标颜色为红色</text>\r\n          <switch style=\"margin-left: 10px\" @change=\"changeCursorColor\" :checked=\"cursor_color == 'red'\"></switch>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input id=\"uni-input-cursor-color\" class=\"uni-input\" :cursor-color=\"cursor_color\" :focus=\"cursorColorInputFocus\" @blur=\"cursorColorInputBlur\" value=\"光标颜色\" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\">\r\n          <text class=\"uni-title-text\">键盘弹起时，自动上推页面</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input class=\"uni-input\" :adjust-position=\"true\" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\" style=\"flex-direction: row; align-items: center\">\r\n          <text class=\"uni-title-text\">设置hold-keyboard</text>\r\n          <switch style=\"margin-left: 10px\" @change=\"changeHoldKeyboard\" :checked=\"holdKeyboard\"></switch>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input class=\"uni-input\" :hold-keyboard=\"holdKeyboard\" value=\"hold keyboard \" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\">\r\n          <text class=\"uni-title-text\">input事件</text>\r\n          <text class=\"uni-subtitle-text\" v-if=\"inputEventDetail\">{{\r\n            inputEventDetail\r\n          }}</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input class=\"uni-input\" @input=\"onInput\" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\">\r\n          <text class=\"uni-title-text\">focus事件和blur事件</text>\r\n          <text class=\"uni-subtitle-text\" v-if=\"focusAndBlurEventDetail\">{{\r\n            focusAndBlurEventDetail\r\n          }}</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input class=\"uni-input\" @focus=\"onFocus\" @blur=\"onBlur\" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\">\r\n          <text class=\"uni-title-text\">confirm事件</text>\r\n          <text class=\"uni-subtitle-text\" v-if=\"confirmEventDetail\">{{\r\n            confirmEventDetail\r\n          }}</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input class=\"uni-input\" @confirm=\"onConfirm\" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\">\r\n          <text class=\"uni-title-text\">keyboardheightchange事件</text>\r\n          <text class=\"uni-subtitle-text\"\r\n            v-if=\"keyboardHeightChangeEventDetail\">{{ keyboardHeightChangeEventDetail }}</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input class=\"uni-input\" @keyboardheightchange=\"onKeyborardHeightChange\"\r\n            :focus=\"focusedForKeyboardHeightChangeTest\" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\">\r\n          <text class=\"uni-title-text\">带清除按钮的输入框</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input class=\"uni-input\" placeholder=\"带清除按钮的输入框\" :value=\"inputClearValue\" @input=\"clearInput\" />\r\n          <image class=\"uni-icon\" src=\"/static/icons/clear.png\" v-if=\"showClearIcon\" @click=\"clearIcon\">\r\n          </image>\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\">\r\n          <text class=\"uni-title-text\">可查看密码的输入框</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input class=\"uni-input\" placeholder=\"请输入密码\" :password=\"showPassword\" />\r\n          <image class=\"uni-icon\" :src=\"\r\n              !showPassword\r\n                ? '/static/icons/eye-active.png'\r\n                : '/static/icons/eye.png'\r\n            \" @click=\"changePassword\"></image>\r\n        </view>\r\n      </view>\n      <view>\n        <view class=\"uni-title\">\n          <text class=\"uni-title-text\">同时存在 v-model 和 value</text>\n        </view>\n        <view class=\"input-wrapper\">\n          <input id=\"both-model-value\" class=\"uni-input\" v-model=\"demoValue\" value=\"456\" />\n        </view>\n      </view>\n\r\n      <view>\r\n        <view class=\"uni-title\" style=\"flex-direction: row; align-items: center\">\r\n          <text class=\"uni-title-text\">设置adjust-position</text>\r\n          <switch style=\"margin-left: 10px\" @change=\"changeAdjustPosition\" :checked=\"adjustPosition\"></switch>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input class=\"uni-input\" :adjust-position=\"adjustPosition\" />\r\n        </view>\r\n      </view>\n\n      <view>\n        <view class=\"uni-title\">\n          <text class=\"uni-title-text\">输入内容的同步更新UI</text>\n        </view>\n        <text>{{syncDisplayValue}}</text>\n        <view class=\"input-wrapper\">\n          <input class=\"uni-input\" v-model=\"syncDisplayValue\"/>\n        </view>\n      </view>\n\r\n    </view>\r\n  <!-- #ifdef APP -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n\r\n<style scoped>\r\n  .input-wrapper {\r\n    display: flex;\r\n    padding: 8px 13px;\r\n    margin: 5px 0;\r\n    flex-direction: row;\r\n    flex-wrap: nowrap;\r\n    background-color: #ffffff;\r\n  }\r\n\r\n  .uni-input {\r\n    height: 28px;\r\n    font-size: 15px;\r\n    padding: 0px;\r\n    flex: 1;\r\n    background-color: #ffffff;\r\n  }\r\n\r\n  .uni-icon {\r\n    width: 24px;\r\n    height: 24px;\r\n  }\r\n\r\n  .uni-input-placeholder-class {\r\n    font-size: 10px;\r\n  }\r\n</style>\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,\n        cursorInputFocus: false,\r\n        cursor_color: \"#3393E2\",\r\n        cursorColorInputFocus: false,\r\n        selectionStart: -1,\r\n        selectionEnd: -1,\r\n        selectionInputFocus: false,\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,\n        syncDisplayValue: ''\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();\n        this.cursorInputFocus = true\r\n        this.cursor = cursor;\r\n      },\r\n      onCursorBlurChange() {\r\n        this.cursor = 0\n        this.cursorInputFocus = false\r\n      },\r\n      setSelection: function (selectionStart : number, selectionEnd : number) {\r\n        // (this.$refs['input2'] as UniInputElement).focus();\n        this.selectionInputFocus = true\r\n        this.selectionStart = selectionStart;\r\n        this.selectionEnd = selectionEnd;\r\n      },\r\n      onSelectionBlurChange() {\r\n        this.selectionEnd = 0;\n        this.selectionInputFocus = false\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<UniInputElement>(\"uni-input-cursor-color\")\r\n        // input?.focus()\n        this.cursorColorInputFocus = true\r\n      },\n      cursorColorInputBlur(event : UniInputBlurEvent) {\n        this.cursorColorInputFocus = false\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 | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| read-only | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 设置编辑器为只读。 |\n| placeholder | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 提示信息。 |\n| show-img-size | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 点击图片时显示图片大小控件。 |\n| show-img-toolbar | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 点击图片时显示工具栏控件。 |\n| show-img-resize | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 点击图片时显示修改尺寸控件。 |\n| @ready | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 编辑器初始化完成时触发 |\n| @focus | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 编辑器聚焦时触发，event.detail = {html, text, delta} |\n| @blur | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 编辑器失去焦点时触发，detail = {html, text, delta} |\n| @input | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 编辑器内容改变时触发，detail = {html, text, delta} |\n| @statuschange | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 通过 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<template>\r\n  <view class=\"container\">\r\n    <view class=\"page-body\">\r\n      <view class='wrapper'>\r\n        <view class='toolbar' @tap=\"format\">\r\n          <view :class=\"formats.bold ? 'ql-active' : ''\" class=\"iconfont icon-zitijiacu\" data-name=\"bold\"></view>\r\n          <view :class=\"formats.italic ? 'ql-active' : ''\" class=\"iconfont icon-zitixieti\" data-name=\"italic\"></view>\r\n          <view :class=\"formats.underline ? 'ql-active' : ''\" class=\"iconfont icon-zitixiahuaxian\"\r\n            data-name=\"underline\"></view>\r\n          <view :class=\"formats.strike ? 'ql-active' : ''\" class=\"iconfont icon-zitishanchuxian\" data-name=\"strike\">\r\n          </view>\r\n\r\n          <view :class=\"formats.align === 'left' ? 'ql-active' : ''\" class=\"iconfont icon-zuoduiqi\" data-name=\"align\"\r\n            data-value=\"left\"></view>\r\n\r\n          <view :class=\"formats.align === 'center' ? 'ql-active' : ''\" class=\"iconfont icon-juzhongduiqi\"\r\n            data-name=\"align\" data-value=\"center\"></view>\r\n          <view :class=\"formats.align === 'right' ? 'ql-active' : ''\" class=\"iconfont icon-youduiqi\" data-name=\"align\"\r\n            data-value=\"right\"></view>\r\n          <view :class=\"formats.align === 'justify' ? 'ql-active' : ''\" class=\"iconfont icon-zuoyouduiqi\"\r\n            data-name=\"align\" data-value=\"justify\"></view>\r\n\r\n          <view :class=\"formats.lineHeight ? 'ql-active' : ''\" class=\"iconfont icon-line-height\" data-name=\"lineHeight\"\r\n            data-value=\"2\"></view>\r\n          <view :class=\"formats.letterSpacing ? 'ql-active' : ''\" class=\"iconfont icon-Character-Spacing\"\r\n            data-name=\"letterSpacing\" data-value=\"2em\"></view>\r\n          <view :class=\"formats.marginTop ? 'ql-active' : ''\" class=\"iconfont icon-722bianjiqi_duanqianju\"\r\n            data-name=\"marginTop\" data-value=\"20px\"></view>\r\n          <view :class=\"formats.marginBottom ? 'ql-active' : ''\" class=\"iconfont icon-723bianjiqi_duanhouju\"\r\n            data-name=\"marginBottom\" data-value=\"20px\"></view>\r\n\r\n          <view :class=\"formats.fontFamily ? 'ql-active' : ''\" class=\"iconfont icon-font\" data-name=\"fontFamily\"\r\n            data-value=\"Pacifico\"></view>\r\n          <view :class=\"formats.fontSize === '24px' ? 'ql-active' : ''\" class=\"iconfont icon-fontsize\"\r\n            data-name=\"fontSize\" data-value=\"24px\"></view>\r\n          <view :class=\"formats.color === '#0000ff' ? 'ql-active' : ''\" class=\"iconfont icon-text_color\"\r\n            data-name=\"color\" data-value=\"#0000ff\"></view>\r\n          <view :class=\"formats.backgroundColor === '#00ff00' ? 'ql-active' : ''\" class=\"iconfont icon-fontbgcolor\"\r\n            data-name=\"backgroundColor\" data-value=\"#00ff00\"></view>\r\n\r\n          <view class=\"iconfont icon--checklist\" data-name=\"list\" data-value=\"check\"></view>\r\n          <view :class=\"formats.list === 'ordered' ? 'ql-active' : ''\" class=\"iconfont icon-youxupailie\"\r\n            data-name=\"list\" data-value=\"ordered\"></view>\r\n          <view :class=\"formats.list === 'bullet' ? 'ql-active' : ''\" class=\"iconfont icon-wuxupailie\" data-name=\"list\"\r\n            data-value=\"bullet\"></view>\r\n\r\n\r\n          <view class=\"iconfont icon-outdent\" data-name=\"indent\" data-value=\"-1\"></view>\r\n          <view class=\"iconfont icon-indent\" data-name=\"indent\" data-value=\"+1\"></view>\r\n\r\n\r\n          <view :class=\"formats.header === 1 ? 'ql-active' : ''\" class=\"iconfont icon-format-header-1\"\r\n            data-name=\"header\" :data-value=\"1\"></view>\r\n          <view :class=\"formats.script === 'sub' ? 'ql-active' : ''\" class=\"iconfont icon-zitixiabiao\"\r\n            data-name=\"script\" data-value=\"sub\"></view>\r\n          <view :class=\"formats.script === 'super' ? 'ql-active' : ''\" class=\"iconfont icon-zitishangbiao\"\r\n            data-name=\"script\" data-value=\"super\"></view>\r\n\r\n          <view :class=\"formats.direction === 'rtl' ? 'ql-active' : ''\" class=\"iconfont icon-direction-rtl\"\r\n            data-name=\"direction\" data-value=\"rtl\"></view>\r\n\r\n          <view class=\"iconfont icon-date\" @tap=\"insertDate\"></view>\r\n          <view class=\"iconfont icon-fengexian\" @tap=\"insertDivider\"></view>\r\n          <view class=\"iconfont icon-charutupian\" @tap=\"chooseInsertImage\"></view>\r\n          <view class=\"iconfont icon-clearedformat\" @tap=\"removeFormat\"></view>\r\n          <view class=\"iconfont icon-undo\" @tap=\"undo\"></view>\r\n          <view class=\"iconfont icon-redo\" @tap=\"redo\"></view>\r\n          <view class=\"iconfont icon-shanchu\" @tap=\"clearShowModal\"></view>\r\n        </view>\r\n\r\n        <view class=\"editor-wrapper\">\r\n          <editor id=\"editor\" class=\"ql-container\" placeholder=\"开始输入...\" show-img-size show-img-toolbar show-img-resize\r\n            @statuschange=\"onStatusChange\" :read-only=\"readOnly\" @ready=\"onEditorReady\">\r\n          </editor>\r\n        </view>\r\n        <view>\r\n          <button @tap=\"getCon\">控制台打印文本内容</button>\r\n        </view>\r\n      </view>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n  @import \"./editor-icon.css\";\r\n\r\n  .page-body {\r\n    height: calc(100vh - var(--window-top) - var(--status-bar-height));\r\n  }\r\n\r\n  .wrapper {\r\n    height: 100%;\r\n  }\r\n\r\n  .editor-wrapper {\r\n    height: calc(100vh - var(--window-top) - var(--status-bar-height) - 140px - 46px);\r\n    background: #fff;\r\n  }\r\n\r\n  .iconfont {\r\n    display: inline-block;\r\n    width: 30px;\r\n    height: 30px;\r\n    cursor: pointer;\r\n    font-size: 20px;\r\n    margin: 0px 6px;\r\n    align-content: center;\r\n  }\r\n\r\n  .toolbar {\r\n    box-sizing: border-box;\r\n    border-bottom: 0;\r\n    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;\r\n    flex-direction: row;\r\n    flex-wrap: wrap;\r\n    height: 140px;\r\n    padding-left: 10px;\r\n  }\r\n\r\n  .ql-container {\r\n    box-sizing: border-box;\r\n    padding: 12px 15px;\r\n    width: 100%;\r\n    min-height: 30vh;\r\n    height: 100%;\r\n    font-size: 16px;\r\n    line-height: 1.5;\r\n  }\r\n\r\n  .ql-active {\r\n    color: #06c;\r\n  }\r\n</style>\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 | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| disabled | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 是否禁用 |\n| for | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 绑定控件的 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<template>\r\n  <view>\r\n    <page-head :title=\"title\"></page-head>\r\n    <view class=\"uni-common-mt\">\r\n      <view class=\"uni-form-item uni-column\">\r\n        <view class=\"title\">表单组件在label内</view>\r\n        <checkbox-group class=\"uni-list\" @change=\"checkboxChange\">\r\n          <label class=\"uni-list-cell uni-list-cell-pd checkboxItemsTest\" v-for=\"item in checkboxItems\"\r\n            :key=\"item.name\">\r\n            <view>\r\n              <checkbox :value=\"item.name\" :checked=\"item.checked\"></checkbox>\r\n            </view>\r\n            <view>{{item.value}}</view>\r\n          </label>\r\n        </checkbox-group>\r\n      </view>\r\n\r\n      <view class=\"uni-form-item uni-column\">\r\n        <view class=\"title\">label用for标识表单组件</view>\r\n        <radio-group class=\"uni-list\" @change=\"radioChange\">\r\n          <view class=\"uni-list-cell uni-list-cell-pd\" v-for=\"(item,index) in radioItems\" :key=\"index\">\r\n            <view>\r\n              <radio :id=\"item.name\" :value=\"item.name\" :checked=\"item.checked\"></radio>\r\n            </view>\r\n            <label class=\"label-2-text\" :for=\"item.name\">\r\n              <text>{{item.value}}</text>\r\n            </label>\r\n          </view>\r\n        </radio-group>\r\n      </view>\r\n\r\n      <view class=\"uni-form-item uni-column\">\r\n        <view class=\"title\">label内有多个时选中第一个</view>\r\n        <checkbox-group class=\"uni-list\" @change=\"checkboxChange\">\r\n          <label class=\"label-3\">\r\n            <view class=\"uni-list-cell uni-list-cell-pd\">\r\n              <checkbox>选项一</checkbox>\r\n            </view>\r\n            <view class=\"uni-list-cell uni-list-cell-pd\">\r\n              <checkbox>选项二</checkbox>\r\n            </view>\r\n            <view class=\"uni-link uni-center\" style=\"margin:20rpx 0;\">点击该label下的文字默认选中第一个checkbox</view>\r\n          </label>\r\n        </checkbox-group>\r\n      </view>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n\r\n<style>\r\n  .uni-list-cell {\r\n    justify-content: flex-start\r\n  }\r\n\r\n  .uni-list .label-3 {\r\n    padding: 0;\r\n  }\r\n\r\n  .label-2-text {\r\n    flex: 1;\r\n  }\r\n\r\n  .uni-form-item {\r\n    display: flex;\r\n    width: 100%;\r\n    padding: 10rpx 0;\r\n  }\r\n\r\n  .uni-form-item .title {\r\n    padding: 10rpx 25rpx;\r\n  }\r\n\r\n  radio-group {\r\n    padding: 0 20rpx;\r\n  }\r\n\r\n  checkbox-group label {\r\n    margin: 0 20rpx;\r\n  }\r\n</style>\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 | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| disabled | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"x\"]]}' /> | 是否禁用 |\n| mode | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"x\"]]}' /> | 选择器类型 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| selector | - | 普通选择器 |\n@| multiSelector | - | 多列选择器 |\n@| time | - | 时间选择器 |\n@| date | - | 日期选择器 |\n@| region | - | 省市选择器 |\n| range | array | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"x\"]]}' /> | mode为 selector 或 multiSelector 时，range 有效 |\n| range-key | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"x\"]]}' /> | 当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 |\n| value | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"x\"]]}' /> | mode为select或multiSelector时：value 的值表示选择了 range 中的第几个（下标从 0 开始）；mode为time时：表示选中的时间，格式为\"hh:mm\"；mode为date时：表示选中的日期，格式为\"YYYY-MM-DD\"；mode为region时：<br/>\t\t表示选中的省市区，默认选中每一列的第一个值。 |\n| start | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"x\"]]}' /> | mode为time：表示有效时间范围的开始，字符串格式为\"hh:mm\"；mode为date：表示有效日期范围的开始，字符串格式为\"YYYY-MM-DD\" |\n| end | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"x\"]]}' /> | mode为time：表示有效时间范围的结束，字符串格式为\"hh:mm\"；mode为date：表示有效日期范围的结束，字符串格式为\"YYYY-MM-DD\" |\n| fields | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"x\"]]}' /> | 有效值 year,month,day，表示选择器的粒度 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| year | - | 选择器粒度为年 |\n@| month | - | 选择器粒度为月份 |\n@| day | - | 选择器粒度为天 |\n| custom-item | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"x\"]]}' /> | 可为每一列的顶部添加一个自定义的项 |\n| @change | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"x\"]]}' /> | value 改变时触发 change 事件，event.detail = {value: value} |\n| @columnchange | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"x\"]]}' /> | 某一列的值改变时触发 columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改变了第几列（下标从0开始），value 的值表示变更值的下标 |\n| @cancel | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"x\"]]}' /> | 取消选择时触发 |","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<template>\r\n  <view>\r\n    <page-head :title=\"title\"></page-head>\r\n    <view class=\"uni-title uni-common-pl\">普通选择器</view>\r\n    <view class=\"uni-list\">\r\n      <view class=\"uni-list-cell\">\r\n        <view class=\"uni-list-cell-left\">\r\n          当前选择\r\n        </view>\r\n        <view class=\"uni-list-cell-db\">\r\n          <picker class=\"picker\" @change=\"bindPickerChange\" :value=\"index\" :range=\"array\" range-key=\"name\">\r\n            <view class=\"uni-input pickerValue\">{{array[index].name}}</view>\r\n          </picker>\r\n        </view>\r\n      </view>\r\n    </view>\r\n\r\n    <view class=\"uni-title uni-common-pl\">多列选择器</view>\r\n    <view class=\"uni-list\">\r\n      <view class=\"uni-list-cell\">\r\n        <view class=\"uni-list-cell-left\">\r\n          当前选择\r\n        </view>\r\n        <view class=\"uni-list-cell-db\">\r\n          <picker class=\"pickerMulti\" mode=\"multiSelector\" @columnchange=\"bindMultiPickerColumnChange\"\r\n            :value=\"multiIndex\" :range=\"multiArray\">\r\n            <view class=\"uni-input pickerMultiValue\">\r\n              {{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}\r\n            </view>\r\n          </picker>\r\n        </view>\r\n      </view>\r\n    </view>\r\n\r\n    <view class=\"uni-title uni-common-pl\">时间选择器</view>\r\n    <view class=\"uni-list\">\r\n      <view class=\"uni-list-cell\">\r\n        <view class=\"uni-list-cell-left\">\r\n          当前选择\r\n        </view>\r\n        <view class=\"uni-list-cell-db\">\r\n          <picker class=\"pickerTime\" mode=\"time\" :value=\"time\" start=\"09:01\" end=\"21:01\" @change=\"bindTimeChange\">\r\n            <view class=\"uni-input\">{{time}}</view>\r\n          </picker>\r\n        </view>\r\n      </view>\r\n    </view>\r\n    <view class=\"uni-picker-tips\">\r\n      注：选择 09:01 ~ 21:01 之间的时间, 不在区间内不能选中\r\n    </view>\r\n\r\n    <view class=\"uni-title uni-common-pl\">日期选择器</view>\r\n    <view class=\"uni-list\">\r\n      <view class=\"uni-list-cell\">\r\n        <view class=\"uni-list-cell-left\">\r\n          当前选择\r\n        </view>\r\n        <view class=\"uni-list-cell-db\">\r\n          <picker class=\"pickerDate\" mode=\"date\" :value=\"date\" :start=\"startDate\" :end=\"endDate\"\r\n            @change=\"bindDateChange\">\r\n            <view class=\"uni-input\">{{date}}</view>\r\n          </picker>\r\n        </view>\r\n      </view>\r\n    </view>\r\n    <view class=\"uni-picker-tips\">\r\n      注：选择当前时间 ±10 年之间的时间, 不在区间内不能选中\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n\r\n<style>\r\n  .uni-picker-tips {\r\n    font-size: 12px;\r\n    color: #666;\r\n    margin-bottom: 15px;\r\n    padding: 0 15px;\r\n  }\r\n</style>\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 | x | 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 | x | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| value | array\\<number> | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | picker-view-column 选择的第几项 |\n| indicator-style | string([string.CSSString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | 设置选择器中间选中框的样式 |\n| indicator-class | string([string.ClassString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]]}' /> | 设置选择器中间选中框的类名 |\n| mask-style | string([string.CSSString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 设置蒙层的样式 |\n| mask-top-style | string([string.CSSString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"3.9\",\"4.11\"]]}' /> | 设置蒙层上半部分的样式 |\n| mask-bottom-style | string([string.CSSString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"3.9\",\"4.11\"]]}' /> | 设置蒙层下半部分的样式 |\n| mask-class | string([string.ClassString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]]}' /> | 设置蒙层的类名 |\n| @change | (event: [UniPickerViewChangeEvent](#unipickerviewchangeevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | 当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0<br/>\t\t开始） |","event":"\n### 事件\n#### UniPickerViewChangeEvent\n\n```mermaid\ngraph LR\n  \nUniPickerViewChangeEvent -- Extends --> UniCustomEvent&ltUniPickerViewChangeEventDetail&gt\n  style UniCustomEvent&ltUniPickerViewChangeEventDetail&gt color:#42b983\n  click UniCustomEvent&ltUniPickerViewChangeEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniPickerViewChangeEventDetail\n\n\n###### UniPickerViewChangeEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- |  :-: | :- |\n| value | Array\\<number\\> | 是 | - | - | - |\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<template>\r\n  <view>\r\n    <page-head :title=\"title\"></page-head>\r\n    <view class=\"uni-padding-wrap\">\r\n      <view class=\"uni-title\">\r\n        日期：{{year}}年{{month}}月{{day}}日\r\n      </view>\r\n    </view>\r\n    <picker-view class=\"picker-view\" :value=\"value\" @change=\"bindChange\" :indicator-style=\"indicatorStyle\"\r\n      :indicator-class=\"indicatorClass\" :mask-style=\"maskStyle\" :mask-class=\"maskClass\" :mask-top-style=\"maskTopStyle\"\r\n      :mask-bottom-style=\"maskBottomStyle\">\r\n      <picker-view-column class=\"picker-view-column\">\r\n        <view class=\"item\" v-for=\"(item,index) in years\" :key=\"index\"><text class=\"text\">{{item}}年</text></view>\r\n      </picker-view-column>\r\n      <picker-view-column class=\"picker-view-column\">\r\n        <view class=\"item\" v-for=\"(item,index) in months\" :key=\"index\"><text class=\"text\">{{item}}月</text>\r\n        </view>\r\n      </picker-view-column>\r\n      <picker-view-column class=\"picker-view-column\">\r\n        <view class=\"item\" v-for=\"(item,index) in days\" :key=\"index\"><text class=\"text\">{{item}}日</text></view>\r\n      </picker-view-column>\r\n    </picker-view>\r\n  </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n  .picker-view {\r\n    width: 100%;\r\n    height: 320px;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  .item {\r\n    height: 50px;\r\n  }\r\n\r\n  .text {\r\n    line-height: 50px;\r\n    text-align: center;\r\n  }\r\n\r\n  /* 自动化测试 */\r\n  .indicator-test {\r\n    height: 50px;\r\n    border: #0055ff solid 1px;\r\n    background: rgba(0, 170, 0, 0.4);\r\n  }\r\n\r\n  .mask-test {\r\n    background-image: linear-gradient(to bottom, #d8e5ff, rgba(216, 229, 255, 0));\r\n  }\r\n</style>\r\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      // 20180112 HBuilderX内测开始 :)\r\n      const _years : number[] = []\r\n      const _year = 2018\r\n      const _months : number[] = []\r\n      const _month : number = 1\r\n      const _days : number[] = []\r\n      const _day = 12\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        // 自动化测试 触发事件元素、type 类型\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, 1, 30] 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| 子组件 | 兼容性 |\n| :- | :- |\n| [picker-view-column](picker-view-column.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"-\",\"-\"]]}' /> |","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 | x | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| disabled | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | 是否禁用 |\n| value | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | \\<radio/> 标识。当该radio 选中时，radio-group的 change 事件会携带radio的value |\n| checked | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | \\<radio/> 当前是否选中 |\n| backgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | radio默认的背景颜色 |\n| borderColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#d1d1d1\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | radio默认的边框颜色 |\n| activeBackgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007AFF\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | radio选中时的背景颜色，优先级大于color属性 |\n| activeBorderColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | radio选中时的边框颜色 |\n| foreColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.18\",\"-\",\"4.18\",\"4.18\"]]}' /> | radio的图标颜色 |\n| ~~iconColor~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | radio的图标颜色 (使用foreColor替代) |\n| ~~color~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007AFF\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | 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<template>\r\n  <view class=\"main\">\r\n    <radio :disabled=\"disabled_boolean\" :checked=\"checked_boolean\" :color=\"color_input\"\r\n      :backgroundColor=\"backgroundColor_input\" :borderColor=\"borderColor_input\"\r\n      :activeBackgroundColor=\"activeBackgroundColor_input\" :activeBorderColor=\"activeBorderColor_input\"\r\n      :iconColor=\"iconColor_input\" @click=\"radio_click\" @touchstart=\"radio_touchstart\" @touchmove=\"radio_touchmove\"\r\n      @touchcancel=\"radio_touchcancel\" @touchend=\"radio_touchend\" @tap=\"radio_tap\" @longpress=\"radio_longpress\">\r\n      <text>uni-app-x</text>\r\n    </radio>\r\n  </view>\r\n\r\n  <scroll-view style=\"flex: 1\">\r\n    <view class=\"content\">\r\n      <page-head title=\"组件属性\"></page-head>\r\n      <boolean-data :defaultValue=\"false\" title=\"<radio/> 当前是否选中\" @change=\"change_checked_boolean\"></boolean-data>\r\n      <boolean-data :defaultValue=\"false\" title=\"是否禁用\" @change=\"change_disabled_boolean\"></boolean-data>\r\n      <input-data defaultValue=\"#007AFF\" title=\"radio的颜色\" type=\"text\" @confirm=\"confirm_color_input\"></input-data>\r\n      <input-data defaultValue=\"#ffffff\" title=\"radio默认的背景颜色\" type=\"text\"\r\n        @confirm=\"confirm_backgroundColor_input\"></input-data>\r\n      <input-data defaultValue=\"#d1d1d1\" title=\"radio默认的边框颜色\" type=\"text\"\r\n        @confirm=\"confirm_borderColor_input\"></input-data>\r\n      <input-data defaultValue=\"#007AFF\" title=\"radio选中时的背景颜色，优先级大于color属性\" type=\"text\"\r\n        @confirm=\"confirm_activeBackgroundColor_input\"></input-data>\r\n      <input-data defaultValue=\"\" title=\"radio选中时的边框颜色\" type=\"text\"\r\n        @confirm=\"confirm_activeBorderColor_input\"></input-data>\r\n      <input-data defaultValue=\"#ffffff\" title=\"radio的图标颜色\" type=\"text\" @confirm=\"confirm_iconColor_input\"></input-data>\r\n    </view>\r\n\r\n    <view>\r\n      <page-head title=\"默认及使用\"></page-head>\r\n      <view class=\"uni-padding-wrap\">\r\n        <view class=\"uni-title uni-common-mt\">\r\n          <text class=\"uni-title-text\"> 默认样式 </text>\r\n        </view>\r\n        <radio-group class=\"uni-flex uni-row radio-group\" @change=\"testChange\" style=\"flex-wrap: wrap\">\r\n          <radio id=\"trigger-change\" value=\"r\" :checked=\"checked\" :color=\"color\" style=\"margin-right: 15px\"\r\n            class=\"radio r\">选中\r\n          </radio>\r\n          <radio value=\"r1\" style=\"margin-right: 15px\" class=\"radio r1\">{{\r\n            text\r\n          }}</radio>\r\n          <radio value=\"r2\" :disabled=\"disabled\" class=\"radio r2\">禁用</radio>\r\n          <radio value=\"r3\" class=\"radio r3\" style=\"margin-top: 10px\">{{\r\n            wrapText\r\n          }}</radio>\r\n        </radio-group>\r\n      </view>\r\n\r\n      <view class=\"uni-padding-wrap\">\r\n        <view class=\"uni-title uni-common-mt\">\r\n          <text class=\"uni-title-text\"> 不同颜色和尺寸的radio </text>\r\n        </view>\r\n        <radio-group class=\"uni-flex uni-row radio-group\">\r\n          <radio value=\"r1\" :checked=\"true\" color=\"#FFCC33\" style=\"transform: scale(0.7); margin-right: 15px\"\r\n            class=\"radio\">选中\r\n          </radio>\r\n          <radio value=\"r2\" color=\"#FFCC33\" style=\"transform: scale(0.7)\" class=\"radio\">未选中</radio>\r\n        </radio-group>\r\n      </view>\r\n\r\n      <view class=\"uni-padding-wrap\">\r\n        <view class=\"uni-title uni-common-mt\">\r\n          <text class=\"uni-title-text\"> 推荐展示样式 </text>\r\n        </view>\r\n      </view>\r\n      <view class=\"uni-list uni-common-pl\">\r\n        <radio-group @change=\"radioChange\" class=\"radio-group\">\r\n          <radio class=\"uni-list-cell uni-list-cell-pd radio recommand\" v-for=\"(item, index) in items\" :key=\"item.value\"\r\n            :class=\"index < items.length - 1 ? 'uni-list-cell-line' : ''\" :value=\"item.value\"\r\n            :checked=\"index === current\">\r\n            {{ item.name }}\r\n          </radio>\r\n        </radio-group>\r\n      </view>\r\n    </view>\r\n  </scroll-view>\r\n</template>\r\n\r\n<style>\r\n  .main {\r\n    max-height: 250px;\r\n    padding: 5px 0;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.06);\r\n    flex-direction: row;\r\n    justify-content: center;\r\n  }\r\n\r\n  .main .list-item {\r\n    width: 100%;\r\n    height: 100px;\r\n    border: 1px solid #666;\r\n  }\r\n\r\n  .uni-list-cell {\r\n    justify-content: flex-start;\r\n  }\r\n</style>\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 | x | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| name | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| @change | (event: [UniRadioGroupChangeEvent](#uniradiogroupchangeevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\"]]}' /> | radio-group 中的选中项发生变化时触发 change 事件，event.detail = {value: 选中项radio的value} |","event":"\n### 事件\n#### UniRadioGroupChangeEvent\n\n```mermaid\ngraph LR\n  \nUniRadioGroupChangeEvent -- Extends --> UniCustomEvent&ltUniRadioGroupChangeEventDetail&gt\n  style UniCustomEvent&ltUniRadioGroupChangeEventDetail&gt color:#42b983\n  click UniCustomEvent&ltUniRadioGroupChangeEventDetail&gt \"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| 子组件 | 兼容性 |\n| :- | :- |\n| [radio](radio.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"-\",\"-\"]]}' /> |","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 | x | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| name | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| disabled | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 是否禁用 |\n| min | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | slider 最小值 |\n| max | number | 100 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | slider 最大值 |\n| step | number | 1 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | slider 步长，取值必须大于 0，并且可被(max - min)整除 |\n| value | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | radio当前取值 |\n| activeBackgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.18\",\"-\",\"4.18\",\"4.18\"]]}' /> | slider 滑块左侧已选择部分的线条颜色 |\n| backgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#e9e9e9\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | radio背景条的颜色 |\n| block-size | number | 28 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | radio滑块的大小，取值范围为 12 - 28 |\n| foreColor | string([string.ColorString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.18\",\"-\",\"4.18\",\"4.18\"]]}' /> | slider 的滑块背景颜色 |\n| show-value | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 是否显示当前 value |\n| @change | (event: [UniSliderChangeEvent](#unisliderchangeevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 完成一次拖动后触发的事件，event.detail = {value: value} |\n| @changing | (event: [UniSliderChangeEvent](#unisliderchangeevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 拖动过程中触发的事件，event.detail = {value: value} |\n| ~~block-color~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 滑块颜色 (使用foreColor替代) |\n| ~~activeColor~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | slider 滑块左侧已选择部分的线条颜色 |","event":"\n### 事件\n#### UniSliderChangeEvent\n\n```mermaid\ngraph LR\n  \nUniSliderChangeEvent -- Extends --> UniCustomEvent&ltUniSliderChangeEventDetail&gt\n  style UniCustomEvent&ltUniSliderChangeEventDetail&gt color:#42b983\n  click UniCustomEvent&ltUniSliderChangeEventDetail&gt \"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<template>\r\n  <view class=\"main\">\r\n    <slider :disabled=\"disabled_boolean\" :min=\"min_input\" :max=\"max_input\" :step=\"step_input\" :value=\"value_input\"\r\n      :activeColor=\"activeColor_input\" :backgroundColor=\"backgroundColor_input\" :block-size=\"block_size_input\"\r\n      :block-color=\"block_color_input\" :show-value=\"show_value_boolean\" :valueColor=\"valueColor\" @click=\"slider_click\"\r\n      @touchstart=\"slider_touchstart\" @touchmove=\"slider_touchmove\" @touchcancel=\"slider_touchcancel\"\r\n      @touchend=\"slider_touchend\" @tap=\"slider_tap\" @longpress=\"slider_longpress\" @change=\"slider_change\"\r\n      @changing=\"slider_changing\" style=\"width: 90%\"><text>uni-app-x</text></slider>\r\n  </view>\r\n\r\n  <scroll-view style=\"flex: 1\">\r\n    <view class=\"content\">\r\n      <page-head title=\"组件属性\"></page-head>\r\n      <boolean-data :defaultValue=\"false\" title=\"是否显示当前 value\" @change=\"change_show_value_boolean\"></boolean-data>\r\n      <boolean-data :defaultValue=\"false\" title=\"是否禁用\" @change=\"change_disabled_boolean\"></boolean-data>\r\n      <input-data defaultValue=\"0\" title=\"最小值(min)\" type=\"number\" @confirm=\"confirm_min_input\"></input-data>\r\n      <input-data defaultValue=\"100\" title=\"最大值(max)\" type=\"number\" @confirm=\"confirm_max_input\"></input-data>\r\n      <input-data defaultValue=\"1\" title=\"步长(step)，取值必须大于 0，并且可被(max - min)整除\" type=\"number\"\r\n        @confirm=\"confirm_step_input\"></input-data>\r\n      <input-data defaultValue=\"0\" title=\"当前取值(value)\" type=\"number\" @confirm=\"confirm_value_input\"></input-data>\r\n      <input-data defaultValue=\"#007aff\" title=\"滑块左侧已选择部分的线条颜色(active-color)\" type=\"text\"\r\n        @confirm=\"confirm_activeColor_input\"></input-data>\r\n      <input-data defaultValue=\"#e9e9e9\" title=\"背景条的颜色(background-color)\" type=\"text\"\r\n        @confirm=\"confirm_backgroundColor_input\"></input-data>\r\n      <input-data defaultValue=\"28\" title=\"滑块的大小(block-size)，取值范围为 12 - 28\" type=\"number\"\r\n        @confirm=\"confirm_block_size_input\"></input-data>\r\n      <input-data defaultValue=\"#ffffff\" title=\"滑块颜色(block-color)\" type=\"text\"\r\n        @confirm=\"confirm_block_color_input\"></input-data>\r\n      <input-data defaultValue=\"#888888\" title=\"Value颜色(value-color)\" type=\"text\"\r\n        @confirm=\"confirm_value_color_input\"></input-data>\r\n    </view>\r\n\r\n    <view class=\"uni-padding-wrap\">\r\n      <page-head title=\"默认及使用\"></page-head>\r\n      <view class=\"uni-title\">显示当前value</view>\r\n      <view>\r\n        <slider @change=\"sliderChange\" :value=\"50\" :show-value=\"true\" />\r\n      </view>\r\n\r\n      <view class=\"uni-title\">设置步进:step=10跳动</view>\r\n      <view>\r\n        <view class=\"uni-row\">\r\n          <text>0</text>\r\n          <text class=\"m-l-a\">100</text>\r\n        </view>\r\n        <slider @change=\"sliderChange\" :value=\"60\" :step=\"10\" />\r\n      </view>\r\n\r\n      <view class=\"uni-title\">浮点步进:step=0.01跳动</view>\r\n      <view>\r\n        <slider :value=\"0.5\" :min=\"0\" :max=\"1\" :step=\"0.01\" :show-value=\"true\" />\r\n      </view>\r\n\r\n      <view class=\"uni-title\">设置最小/最大值</view>\r\n      <view>\r\n        <slider @change=\"sliderChange\" :value=\"100\" :min=\"50\" :max=\"200\" :show-value=\"true\" />\r\n      </view>\r\n\r\n      <view class=\"uni-title\">不同颜色和大小的滑块</view>\r\n      <view>\r\n        <slider id=\"slider-custom-color-and-size\" @change=\"sliderChange\" :value=\"sliderValue\"\r\n          :backgroundColor=\"sliderBackgroundColor\" :activeColor=\"sliderActiveColor\"\r\n          :activeBackgroundColor=\"sliderActiveColor\" :blockColor=\"sliderBlockColor\" :foreColor=\"sliderBlockColor\"\r\n          :block-size=\"sliderBlockSize\" />\r\n      </view>\r\n      <view class=\"uni-title\">暗黑模式</view>\r\n      <view>\r\n        <slider :show-value=\"true\" backgroundColor=\"rgba(32,32,32,0.5)\" valueColor=\"#555\" />\r\n      </view>\r\n\r\n      <navigator url=\"./slider-in-swiper\">\r\n        <button>slider in swiper</button>\r\n      </navigator>\r\n    </view>\r\n  </scroll-view>\r\n</template>\r\n\r\n<style>\r\n  .main {\r\n    padding: 5px 0;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.06);\r\n    flex-direction: row;\r\n    justify-content: center;\r\n  }\r\n\r\n  .main .list-item {\r\n    width: 100%;\r\n    height: 100px;\r\n    border: 1px solid #666;\r\n  }\r\n\r\n  .m-l-a {\r\n    margin-left: auto;\r\n  }\r\n</style>\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 | x | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| name | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| checked | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 是否选中 |\n| type | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 样式，有效值：switch, checkbox |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| switch | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n@| checkbox | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| backgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.18\",\"-\",\"4.18\",\"4.18\"]]}' /> | switch 的关闭状态背景颜色 |\n| activeBackgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.18\",\"-\",\"4.18\",\"4.18\"]]}' /> | switch 的开启状态背景颜色 |\n| foreColor | string([string.ColorString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.18\",\"-\",\"4.18\",\"4.18\"]]}' /> | switch 的滑块背景颜色 |\n| activeForeColor | string([string.ColorString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.18\",\"-\",\"4.18\",\"4.18\"]]}' /> | switch 的开启状态下的滑块背景颜色 |\n| disabled | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 是否禁用 |\n| @change | (event: [UniSwitchChangeEvent](#uniswitchchangeevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | checked 改变时触发 change 事件，event.detail={ value:checked} |\n| ~~color~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | switch 的颜色，同 css 的 color (使用foreColor替代) |","event":"\n### 事件\n#### UniSwitchChangeEvent\n\n```mermaid\ngraph LR\n  \nUniSwitchChangeEvent -- Extends --> UniCustomEvent&ltUniSwitchChangeEventDetail&gt\n  style UniCustomEvent&ltUniSwitchChangeEventDetail&gt color:#42b983\n  click UniCustomEvent&ltUniSwitchChangeEventDetail&gt \"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<template>\r\n  <view>\r\n    <view class=\"uni-padding-wrap uni-common-mt\">\r\n      <view class=\"uni-title\">默认样式</view>\r\n      <view class=\"flex-row\">\r\n        <switch class=\"switch-checked\" :checked=\"checked\" @change=\"switch1Change\" />\r\n        <switch @change=\"switch2Change\" />\r\n      </view>\r\n      <view class=\"uni-title\">暗黑样式</view>\r\n      <view class=\"flex-row\">\r\n        <switch id=\"darkChecked\" background-color=\"#1f1f1f\" activeBackgroundColor=\"#007aff\" foreColor=\"#f0f0f0\"\r\n          activeForeColor=\"#ffffff\" :checked=\"checked\" />\r\n        <switch id=\"dark\" background-color=\"#1f1f1f\" activeBackgroundColor=\"#007aff\" foreColor=\"#f0f0f0\"\r\n          activeForeColor=\"#ffffff\" />\r\n      </view>\r\n      <view class=\"uni-title\">禁用样式</view>\r\n      <view class=\"flex-row\">\r\n        <switch class=\"switch-checked\" :checked=\"checked\" :disabled=\"true\" />\r\n        <switch :disabled=\"true\" />\r\n      </view>\r\n      <view class=\"uni-title\">不同颜色和尺寸的switch</view>\r\n      <view class=\"flex-row\">\r\n        <switch class=\"switch-color-checked\" :color=\"color\" style=\"transform:scale(0.7)\" :checked=\"true\" />\r\n        <switch class=\"switch-color\" :color=\"color\" style=\"transform:scale(0.7)\" />\r\n      </view>\r\n      <view class=\"uni-title\">推荐展示样式</view>\r\n    </view>\r\n    <view class=\"uni-list\">\r\n      <view class=\"uni-list-cell uni-list-cell-padding\">\r\n        <view class=\"uni-list-cell-db\">开启中</view>\r\n        <switch :checked=\"true\" />\r\n      </view>\r\n      <view class=\"uni-list-cell uni-list-cell-padding\">\r\n        <view class=\"uni-list-cell-db\">关闭</view>\r\n        <switch />\r\n      </view>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n  .flex-row {\r\n    flex-direction: row;\r\n  }\r\n</style>\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 | x | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| name | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| value | string | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 输入框的初始内容 |\n| placeholder | string | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 输入框为空时占位符 |\n| placeholder-style | string | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 指定 placeholder 的样式，目前仅支持color,font-size和font-weight |\n| placeholder-class | string([string.ClassString](/uts/data-type.md#ide-string)) | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 指定 placeholder 的样式类，目前仅支持color,font-size和font-weight |\n| maxlength | number | \"不限制长度\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 最大输入长度，0和正数为合法值，非法值的时候不限制最大长度 |\n| auto-focus | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 自动获取焦点，与`focus`属性对比，此属性只会首次生效。 |\n| focus | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 获取焦点 |\n| confirm-type | return \\| send \\| search \\| next \\| go \\| done | \"return\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.15\"]]}' /> | 设置键盘右下角按钮的文字 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| return | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.15\"]]}' /> | 换行 |\n@| send | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"4.15\"]]}' /> | 发送 |\n@| search | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"4.15\"]]}' /> | 搜索 |\n@| next | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"4.15\"]]}' /> | 下一个 |\n@| go | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"4.15\"]]}' /> | 前往 |\n@| done | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"4.15\"]]}' /> | 完成 |\n| cursor | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 指定focus时的光标位置 |\n| confirm-hold | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 点击键盘右下角按钮时是否保持键盘不收起 |\n| auto-height | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 是否自动增高，设置auto-height时，style.height不生效 |\n| fixed | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true |\n| cursor-spacing | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.9\",\"4.11\"]]}' /> | 指定光标与键盘的距离，单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 |\n| cursor-color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"3.99\",\"4.11\"]]}' /> | 指定光标颜色 |\n| show-confirm-bar | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 是否显示键盘上方带有”完成“按钮那一栏 |\n| selection-start | number | -1 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 光标起始位置，自动聚集时有效，需与selection-end搭配使用 |\n| selection-end | number | -1 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 光标结束位置，自动聚集时有效，需与selection-satrt搭配使用 |\n| adjust-position | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.9\",\"4.11\"]]}' /> | 键盘弹起时，是否自动上推页面 |\n| inputmode | none \\| text \\| decimal \\| numeric \\| tel \\| search \\| email \\| url | \"text\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"x\",\"x\"]]}' /> | 是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。在符合条件的高版本webview里，uni-app的 web 和 app-vue 平台中可使用本属性。 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"x\",\"x\"]]}' /> | 无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用。 |\n@| text | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"x\",\"x\"]]}' /> | 使用用户本地区域设置的标准文本输入键盘。 |\n@| decimal | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"x\",\"x\"]]}' /> | 小数输入键盘，包含数字和分隔符（通常是“ . ”或者“ , ”），设备可能也可能不显示减号键。 |\n@| numeric | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"x\",\"x\"]]}' /> | 数字输入键盘，所需要的就是 0 到 9 的数字，设备可能也可能不显示减号键。 |\n@| tel | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"x\",\"x\"]]}' /> | 电话输入键盘，包含 0 到 9 的数字、星号（*）和井号（#）键。表单输入里面的电话输入通常应该使用 \\<input type=\"tel\"\\> 。 |\n@| search | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"x\",\"x\"]]}' /> | 为搜索输入优化的虚拟键盘，比如，返回键可能被重新标记为“搜索”，也可能还有其他的优化。 |\n@| email | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"x\",\"x\"]]}' /> | 为邮件地址输入优化的虚拟键盘，通常包含\"@\"符号和其他优化。表单里面的邮件地址输入应该使用 \\<input type=\"email\"\\> 。 |\n@| url | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"x\",\"x\"]]}' /> | 为网址输入优化的虚拟键盘，比如，“/”键会更加明显、历史记录访问等。表单里面的网址输入通常应该使用 \\<input type=\"url\"\\> 。 |\n| hold-keyboard | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"4.0\",\"4.11\"]]}' /> | focus时，点击页面的时候不收起键盘 |\n| @confirm | (event: [UniInputConfirmEvent](#uniinputconfirmevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 点击完成时， 触发 confirm 事件，event.detail = {value: value} |\n| @input | (event: [UniInputEvent](#uniinputevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 当键盘输入时，触发 input 事件，event.detail = {value, cursor}， @input 处理函数的返回值并不会反映到 textarea 上 |\n| @linechange | (event: [UniTextareaLineChangeEvent](#unitextarealinechangeevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0} |\n| @blur | (event: [UniTextareaBlurEvent](#unitextareablurevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 输入框失去焦点时触发，event.detail = {value, cursor} |\n| @keyboardheightchange | (event: [UniInputKeyboardHeightChangeEvent](#uniinputkeyboardheightchangeevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.9\",\"4.11\"]]}' /> | 键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration} |\n| @focus | (event: [UniTextareaFocusEvent](#unitextareafocusevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 输入框聚焦时触发，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 | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.9\",\"4.11\"]]}' /> | 键盘高度 |\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<template>\r\n  <!-- #ifdef APP -->\r\n  <scroll-view style=\"flex: 1\">\r\n  <!-- #endif -->\r\n    <view class=\"main\">\r\n      <textarea :value=\"default_value\" class=\"uni-textarea\" :auto-focus=\"true\" :focus=\"focus_boolean\"\r\n        :confirm-hold=\"confirm_hold_boolean\" :auto-height=\"auto_height_boolean\" :fixed=\"fixed_boolean\"\r\n        :show-confirm-bar=\"show_confirm_bar_boolean\" :adjust-position=\"adjust_position_boolean\"\r\n        :cursor-color=\"cursor_color\" :cursor=\"cursor\" :placeholder=\"placeholder_value\"\r\n        :inputmode=\"inputmode_enum[inputmode_enum_current].name\"\r\n        :confirm-type=\"confirm_type_list[confirm_type_current].name\" @click=\"textarea_click\"\r\n        @touchstart=\"textarea_touchstart\" @touchmove=\"textarea_touchmove\" @touchcancel=\"textarea_touchcancel\"\r\n        @touchend=\"textarea_touchend\" @tap=\"textarea_tap\" @longpress=\"textarea_longpress\" @confirm=\"textarea_confirm\"\r\n        @input=\"textarea_input\" @linechange=\"textarea_linechange\" @blur=\"textarea_blur\"\r\n        @keyboardheightchange=\"textarea_keyboardheightchange\" @focus=\"textarea_focus\"\r\n        style=\"padding: 10px; border: 1px solid #666;height: 200px\" />\r\n    </view>\r\n    <view class=\"content\">\r\n      <boolean-data :defaultValue=\"false\" title=\"键盘弹起时，是否自动上推页面（限非 Web 平台）\"\r\n        @change=\"change_adjust_position_boolean\"></boolean-data>\r\n      <boolean-data :defaultValue=\"false\" title=\"是否自动增高，设置auto-height时，style.height不生效\"\r\n        @change=\"change_auto_height_boolean\"></boolean-data>\r\n      <boolean-data :defaultValue=\"focus_boolean\" title=\"获取焦点\" @change=\"change_focus_boolean\"></boolean-data>\r\n      <boolean-data :defaultValue=\"true\" title=\"首次自动获取焦点\" @change=\"change_auto_focus_boolean\"></boolean-data>\r\n      <boolean-data :defaultValue=\"false\" title=\"改变光标颜色为透明\" @change=\"change_cursor_color_boolean\"></boolean-data>\r\n      <enum-data :items=\"confirm_type_list\" title=\"confirm-type，设置键盘右下角按钮。（Android仅支持return）\"\r\n        @change=\"radio_change_confirm_type\"></enum-data>\r\n      <boolean-data :defaultValue=\"false\" title=\"点击软键盘右下角按钮时是否保持键盘不收起(confirm-type为return时必然不收起)\"\r\n        @change=\"change_confirm_hold_boolean\"></boolean-data>\r\n      <enum-data :items=\"inputmode_enum\" title=\"input-mode，控制软键盘类型。（仅限 Web 平台符合条件的高版本浏览器或webview）。\"\r\n        @change=\"radio_change_inputmode_enum\"></enum-data>\r\n      <boolean-data :defaultValue=\"false\" title=\"是否显示键盘上方带有“完成”按钮那一栏（仅限小程序平台）\"\r\n        @change=\"change_show_confirm_bar_boolean\"></boolean-data>\r\n      <boolean-data :defaultValue=\"false\" title=\"如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true（仅限小程序平台）\"\r\n        @change=\"change_fixed_boolean\"></boolean-data>\r\n\r\n\r\n      <view class=\"title-wrap\">\r\n        <view>maxlength 输入最大长度为10</view>\r\n      </view>\r\n      <view class=\"textarea-wrap\">\r\n        <textarea id=\"textarea-instance-maxlength\" class=\"textarea-instance\" :value=\"textareaMaxLengthValue\"\r\n          :maxlength=\"10\" />\r\n      </view>\r\n\r\n      <view class=\"title-wrap\">\r\n        <view>cursor-spacing、placeholder-class、placeholder-style例子</view>\r\n      </view>\r\n      <view class=\"textarea-wrap\">\r\n        <textarea id=\"textarea-height-exception\" class=\"textarea-instance\" placeholder=\"底部textarea测试键盘遮挡\"\r\n          placeholder-class=\"placeholder\" placeholder-style=\"background-color:red\" :cursor-spacing=\"300\" />\r\n      </view>\r\n      <view class=\"title-wrap\">\r\n        <view @click=\"setSelection(2, 5)\">设置输入框聚焦时光标的起始位置和结束位置（点击生效）</view>\r\n      </view>\r\n      <view class=\"textarea-wrap\">\r\n        <textarea id=\"textarea-instance-2\" class=\"textarea-instance\" value=\"Hello UniApp X Textarea TestCase\"\r\n          :selection-start=\"selectionStart\" :selection-end=\"selectionEnd\" @blur=\"onSelectionBlurChange\" />\r\n      </view>\r\n\r\n      <view class=\"title-wrap\">\r\n        <view>设置hold-keyboard</view>\r\n        <switch style=\"margin-left: 10px;\" @change=\"changeHoldKeyboard\" :checked=\"hold_keyboard\"></switch>\r\n      </view>\r\n      <view class=\"textarea-wrap\">\r\n        <textarea class=\"textarea-instance\" :hold-keyboard=\"hold_keyboard\" />\r\n      </view>\r\n      <view class=\"title-wrap\">\r\n        <view>同时存在 v-model 和 value</view>\r\n      </view>\r\n      <view class=\"textarea-wrap\">\r\n          <textarea id=\"both-model-value\" class=\"textarea-instance\" v-model='defaultModel' value='456'></textarea>\r\n      </view>\r\n\r\n      <view class=\"title-wrap\">\r\n        <view>设置adjust-position</view>\r\n        <switch style=\"margin-left: 10px;\" @change=\"changeAdjustPosition\" :checked=\"adjust_position\"></switch>\r\n      </view>\r\n      <view class=\"textarea-wrap\">\r\n        <textarea class=\"textarea-instance\" :adjust-position=\"adjust_position\" />\r\n      </view>\r\n    </view>\r\n  <!-- #ifdef APP -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<style>\r\n  .main {\r\n    min-height: 100px;\r\n    padding: 5px 0;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.06);\r\n    flex-direction: row;\r\n    justify-content: center;\r\n  }\r\n\r\n  .main .list-item {\r\n    width: 100%;\r\n    height: 100px;\r\n    border: 1px solid #666;\r\n  }\r\n\r\n  .textarea-wrap {\r\n    flex-direction: row;\r\n    justify-content: center;\r\n  }\r\n\r\n  .title-wrap {\r\n    flex-direction: row;\r\n    align-items: center;\r\n    margin-left: 10px;\r\n  }\r\n\r\n  .textarea-instance {\r\n    flex: 1;\r\n    border: 1 solid #666;\r\n    margin: 10px;\r\n  }\r\n\r\n  .placeholder {\r\n    background-color: yellow;\r\n  }\r\n</style>\r\n\n```\n\n>Script\n```uts\n\r\n  import { ItemType } from '@/components/enum-data/enum-data-types'\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,\n        jest_result: 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() {\n        console.log(\"当键盘输入时，触发 input 事件，event.detail = {value, cursor}， @input 处理函数的返回值并不会反映到 textarea 上\")\n        this.jest_result = true\n      },\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 | x | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| target | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 在哪个目标上发生跳转，默认当前应用 |\n| url | string([string.PageURIString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 当前应用内的跳转链接 |\n| open-type | string | \"navigate\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 跳转方式 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| navigate | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 对应 uni.navigateTo 或 navigateToMiniProgram 的功能 |\n@| redirect | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 对应 uni.redirectTo 的功能 |\n@| switchTab | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 对应 uni.switchTab 的功能 |\n@| reLaunch | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 对应 uni.reLaunch 的功能 |\n@| navigateBack | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 对应 uni.navigateBack 的功能 |\n| delta | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 当 open-type 为 navigateBack 时有效，表示回退的层数 |\n| app-id | string | - | - | 当target=\"miniProgram\"时有效，要打开的小程序 appId |\n| path | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"x\"]]}' /> | 当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\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"4.18\",\"4.11\"]]}' /> | 当 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 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 当 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 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 是否给 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<template>\r\n  <page-head :title=\"title\"></page-head>\r\n  <view class=\"uni-padding-wrap uni-common-mt\">\r\n    <navigator id=\"navigate\" class=\"navigator\" url=\"navigate?title=navigate\">\r\n      <button type=\"default\">跳转到新页面</button>\r\n    </navigator>\r\n    <navigator id=\"redirect\" class=\"navigator\" url=\"redirect?title=redirect\" open-type=\"redirect\">\r\n      <button type=\"default\">在当前页打开redirect</button>\r\n    </navigator>\r\n    <navigator id=\"switchTab\" class=\"navigator\" url=\"/pages/tabBar/template\" open-type=\"switchTab\">\r\n      <button type=\"default\">切换到模板选项卡switchTab</button>\r\n    </navigator>\r\n    <navigator id=\"reLaunch\" class=\"navigator\" url=\"/pages/tabBar/component\" open-type=\"reLaunch\">\r\n      <button type=\"default\">关闭所有页面回首页reLaunch</button>\r\n    </navigator>\r\n    <navigator id=\"reLaunch\" class=\"navigator\" open-type=\"navigateBack\">\r\n      <button type=\"default\">返回上一页navigateBack</button>\r\n    </navigator>\r\n    <!-- <navigator id=\"reLaunch\" class=\"navigator\" open-type=\"exit\">\r\n      <button type=\"default\">退出应用（仅Android和小程序生效）</button>\r\n    </navigator> -->\r\n    <navigator id=\"navigateToErrorPage\" class=\"navigator\" url=\"/pages/error-page/error-page\">\r\n      <button type=\"default\"> 打开不存在的页面 </button>\r\n    </navigator>\r\n    <navigator id=\"navigateToErrorPage\" class=\"navigator\">\r\n      <button type=\"default\"> 未指定URL的跳转 </button>\r\n    </navigator>\r\n    <navigator style=\"flex-direction: row;justify-content: space-between;\">\r\n      <text>两端对齐样式测试</text>\r\n      <view style=\"width: 20px;height: 20px; background-color: aqua;\"></view>\r\n    </navigator>\r\n  </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n  .navigator {\r\n    margin-bottom: 15px;\r\n  }\r\n</style>\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 | x | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| src | string([string.ImageURIString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 图片资源地址 |\n| mode | string | \"scaleToFill\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 图片裁剪、缩放的模式 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| scaleToFill | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 |\n@| aspectFit | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 |\n@| aspectFill | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取 |\n@| widthFix | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 宽度不变，高度自动变化，保持原图宽高比不变 |\n@| heightFix | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 高度不变，宽度自动变化，保持原图宽高比不变 |\n@| top | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 不缩放图片，只显示图片的顶部区域 |\n@| bottom | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 不缩放图片，只显示图片的底部区域 |\n@| center | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 不缩放图片，只显示图片的中间区域 |\n@| left | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 不缩放图片，只显示图片的左边区域 |\n@| right | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 不缩放图片，只显示图片的右边区域 |\n@| top left | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 不缩放图片，只显示图片的左上边区域 |\n@| top right | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 不缩放图片，只显示图片的右上边区域 |\n@| bottom left | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 不缩放图片，只显示图片的左下边区域 |\n@| bottom right | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 不缩放图片，只显示图片的右下边区域 |\n| lazy-load | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"4.11\"]]}' /> | 图片懒加载。只针对page与scroll-view下的image有效。 安卓默认懒加载不支持修改 |\n| fade-show | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.9\",\"x\"]]}' /> | 图片显示动画效果 |\n| webp | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 是否支持 webP 格式 |\n| show-menu-by-longpress | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 开启长按图片显示识别小程序码菜单 |\n| draggable | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 鼠标长按是否能拖动图片(仅H5平台) |\n| @error | (event: [UniImageErrorEvent](#uniimageerrorevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 图片加载错误时触发，event.detail = { errMsg } |\n| @load | (event: [UniImageLoadEvent](#uniimageloadevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 图片加载完成时触发，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<template>\r\n  <view style=\"flex: 1;\">\r\n    <page-head :title=\"title\"></page-head>\r\n    <view class=\"uni-padding-wrap uni-common-mt\">\r\n      <view class=\"uni-center\" style=\"background:#FFFFFF;\">\r\n        <image class=\"image\" :fade-show=\"true\" mode=\"widthFix\" :src=\"imageSrc\" @error=\"error\" @load=\"load\"></image>\r\n      </view>\r\n      <view class=\"uni-btn-v\">\r\n        <button type=\"primary\" @tap=\"imageFormat\">图片格式示例</button>\r\n      </view>\r\n      <view class=\"uni-btn-v\">\r\n        <button type=\"primary\" @tap=\"imageMode\">图片缩放模式示例</button>\r\n      </view>\r\n      <view class=\"uni-btn-v\">\r\n        <button type=\"primary\" @tap=\"imagePath\">图片路径示例</button>\r\n      </view>\r\n      <view class=\"uni-btn-v\">\r\n        <button type=\"primary\" @tap=\"imageLarge\">大图示例</button>\r\n      </view>\r\n    </view>\r\n    <view v-if=\"autoTest\">\r\n      <image :src=\"setCookieImage\"></image>\r\n      <image :src=\"verifyCookieImage\" @error=\"error\"></image>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n<style>\r\n  .image {\r\n    margin: 20px auto;\r\n    width: 100px;\r\n  }\r\n</style>\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 | x | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| loop | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 是否循环播放 |\n| src | string([string.VideoURIString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 视频资源地址 |\n| initial-time | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 指定视频初始播放位置 |\n| duration | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 指定视频长度 |\n| controls | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 是否显示默认播放控件（播放/暂停按钮、播放进度、时间） |\n| danmu-list | array | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 弹幕列表 |\n| danmu-btn | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 是否显示弹幕按钮，只在初始化时有效，不能动态变更 |\n| enable-danmu | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 是否展示弹幕，只在初始化时有效，不能动态变更 |\n| autoplay | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 是否自动播放 |\n| muted | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 是否静音播放 |\n| page-gesture | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 在非全屏模式下，是否开启亮度与音量调节手势 |\n| direction | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 设置全屏时视频的方向，不指定则根据宽高比自动判断。有效值为 0（正常竖向）, 90（屏幕逆时针90度）, -90（屏幕顺时针90度） |\n| show-progress | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 若不设置，宽度大于240时才会显示 |\n| show-fullscreen-btn | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 是否显示全屏按钮 |\n| show-play-btn | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 是否显示视频底部控制栏的播放按钮 |\n| show-center-play-btn | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 是否显示视频中间的播放按钮 |\n| show-loading | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 是否显示loading控件 |\n| enable-progress-gesture | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 是否开启控制进度的手势 |\n| object-fit | string | \"contain\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 当视频大小与 video 容器大小不一致时，视频的表现形式。 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| contain | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 包含 |\n@| fill | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 填充 |\n@| cover | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 覆盖 |\n| poster | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效 |\n| show-mute-btn | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 是否显示静音按钮 |\n| title | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 视频的标题，全屏时在顶部展示 |\n| play-btn-position | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 播放按钮的位置 |\n| enable-play-gesture | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 是否开启播放手势，即双击切换播放、暂停 |\n| auto-pause-if-navigate | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 当跳转到其它页面时，是否自动暂停本页面的视频 |\n| auto-pause-if-open-native | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 当跳转到其它小程序宿主原生页面时，是否自动暂停本页面的视频 |\n| vslide-gesture | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 在非全屏模式下，是否开启亮度与音量调节手势（同 page-gesture） |\n| vslide-gesture-in-fullscreen | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 在全屏模式下，是否开启亮度与音量调节手势 |\n| ad-unit-id | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 视频前贴广告单元ID |\n| poster-for-crawler | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 用于给搜索等场景作为视频封面展示，建议使用无播放 icon 的视频封面图，只支持网络地址 |\n| codec | string | \"hardware\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.9\",\"4.11\"]]}' /> | 解码器选择 |\n| http-cache | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.9\",\"4.11\"]]}' /> | 是否对 http、https 视频源开启本地缓存 |\n| play-strategy | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 播放策略 |\n| is-live | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 是否为直播源 |\n| @loadedmetadata | (event: [UniVideoLoadedMetadataEvent](#univideoloadedmetadataevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 视频元数据加载完成时触发 |\n| @play | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 当开始/继续播放时触发 |\n| @pause | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 当暂停播放时触发 |\n| @ended | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 当播放到视频末尾时触发 |\n| @timeupdate | (event: [UniVideoTimeUpdateEvent](#univideotimeupdateevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 播放进度变化时触发，event.detail = { currentTime, duration }。触发频率 250ms 一次 |\n| @fullscreenchange | (event: [UniVideoFullScreenChangeEvent](#univideofullscreenchangeevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 当视频进入和退出全屏时触发，event.detail = { fullScreen, direction }，direction取为 vertical 或 horizontal |\n| @waiting | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 视频出现缓冲时触发 |\n| @error | (event: [UniVideoErrorEvent](#univideoerrorevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 播放出错时触发 |\n| @progress | (event: [UniVideoProgressEvent](#univideoprogressevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 加载进度变化时触发，只支持一段加载。event.detail = { buffered }，百分比 |\n| @fullscreenclick | (event: [UniVideoFullScreenClickEvent](#univideofullscreenclickevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 视频全屏播放时点击屏幕触发。event.detail = { screenX, screenY, screenWidth, screenHeight } |\n| @controlstoggle | (event: [UniVideoControlsToggleEvent](#univideocontrolstoggleevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 切换 controls 显示隐藏时触发。event.detail = { show } |","event":"\n### 事件\n#### UniVideoTimeUpdateEvent\ntimeupdate 事件<br/>播放进度变化时触发\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 事件<br/>当视频进入和退出全屏是触发\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 事件<br/>视频播放出错时触发\n\n##### UniVideoErrorEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- |  :-: | :- |\n| detail | **VideoError** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- |  :-: | :- |\n@| errCode | number | 是 | - | - | 统一错误码<br/>100001 网络错误<br/>200001 内部错误<br/>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 事件<br/>加载进度变化时触发\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 事件<br/>视频播放全屏播放时点击事件\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 事件<br/>切换播放控件显示隐藏时触发\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<template>\r\n  <view class=\"uni-flex-item\">\r\n    <video class=\"video\" ref=\"video\" id=\"video\" :header=\"header\" :src=src :autoplay=\"autoplay\" :loop=\"loop\"\r\n      :muted=\"muted\" :initial-time=\"initialTime\" :duration=\"duration\" :controls=\"controls\" :danmu-btn=\"danmuBtn\"\r\n      :enable-danmu=\"enableDanmu\" :page-gesture=\"pageGesture\" :direction=\"direction\" :show-progress=\"showProgress\"\r\n      :show-fullscreen-btn=\"showFullscreenBtn\" :show-play-btn=\"showPlayBtn\" :show-center-play-btn=\"showCenterPlayBtn\"\r\n      :show-loading=\"showLoading\" :enable-progress-gesture=\"enableProgressGesture\" :object-fit=\"objectFit\"\r\n      :poster=\"poster\" :show-mute-btn=\"showMuteBtn\" :title=\"title\" :enable-play-gesture=\"enablePlayGesture\"\r\n      :vslide-gesture=\"vslideGesture\" :vslide-gesture-in-fullscreen=\"vslideGestureInFullscreen\" :codec=\"codec\"\r\n      :http-cache=\"httpCache\" :play-strategy=\"playStrategy\" :danmu-list=\"danmuList\" @play=\"onPlay\" @pause=\"onPause\"\r\n      @ended=\"onEnded\" @timeupdate=\"onTimeUpdate\" @waiting=\"onWaiting\" @error=\"onError\" @progress=\"onProgress\"\r\n      @fullscreenclick=\"onFullScreenClick\" @controlstoggle=\"onControlsToggle\" @fullscreenchange=\"onFullScreenChange\">\r\n      <!-- #ifdef APP -->\r\n      <image v-if=\"subCompEnable && subCompShow\" class=\"img-fast-backward\"\r\n        src=\"../../../static/test-video/fast-backward.png\" @tap=\"fastBackward\"></image>\r\n      <image v-if=\"subCompEnable && subCompShow\" class=\"img-fast-forward\"\r\n        src=\"../../../static/test-video/fast-forward.png\" @tap=\"fastForward\"></image>\r\n      <input id=\"input-send-danmu\" class=\"input-send-danmu\" v-if=\"subCompEnable && subCompShow\" placeholder=\"请输入弹幕内容\"\r\n        placeholder-style=\"color: white;\" confirm-type=\"send\" @confirm=\"onSendDanmuConfirm\"\r\n        @keyboardheightchange=\"onSendDanmuKeyboardHeightChange\" @blur=\"onSendDanmuBlur\"></input>\r\n      <!-- #endif -->\r\n    </video>\r\n    <scroll-view class=\"uni-padding-wrap uni-common-mt uni-flex-item\">\r\n      <view class=\"uni-btn-v\">\r\n        <navigator url=\"/pages/component/video/video-format\">\r\n          <button type=\"primary\" @click=\"pause\">视频格式示例</button>\r\n        </navigator>\r\n      </view>\r\n      <!-- #ifdef APP -->\r\n      <view class=\"uni-flex uni-btn-v\" style=\"justify-content: space-between;align-items: center;\">\r\n        <text class=\"uni-title\" style=\"width: 80%;\">子组件实现快进、快退、发送弹幕功能（全屏后显示）</text>\r\n        <switch :checked=\"subCompEnable\" @change=\"onSubCompEnableChange\" />\r\n      </view>\r\n      <!-- #endif -->\r\n      <view class=\"uni-title\">\r\n        <text class=\"uni-title-text\">API示例</text>\r\n      </View>\r\n      <view class=\"uni-btn-v\">\r\n        <button type=\"primary\" @click=\"play\">播放</button>\r\n      </view>\r\n      <view class=\"uni-btn-v\">\r\n        <button type=\"primary\" @click=\"pause\">暂停</button>\r\n      </view>\r\n      <view class=\"uni-btn-v\">\r\n        <input class=\"input\" placeholder=\"输入要跳转的位置,单位s\" type=\"number\" @input=\"onSeekInput\"></input>\r\n        <button type=\"primary\" @click=\"seek(this.pos)\">跳转到指定位置</button>\r\n      </view>\r\n      <view class=\"uni-btn-v\">\r\n        <enum-data title=\"选择进入全屏时的视频方向\" :items=\"directionItemTypes\"\r\n          @change=\"onRequestFullScreenDirectionChange\"></enum-data>\r\n        <button type=\"primary\" @click=\"requestFullScreen\">进入全屏</button>\r\n      </view>\r\n      <view class=\"uni-btn-v\">\r\n        <button type=\"primary\" @click=\"exitFullScreen\">退出全屏</button>\r\n      </view>\r\n      <view class=\"uni-btn-v\">\r\n        <button type=\"primary\" @click=\"stop\">停止</button>\r\n      </view>\r\n      <view class=\"uni-btn-v\">\r\n        <input class=\"input\" placeholder=\"输入弹幕\" value=\"{ 'text': '要显示的文本', 'color': '#FF0000' }\" type=\"string\"\r\n          @input=\"onSendDanmuInput\"></input>\r\n        <button type=\"primary\" :disabled=\"!enableDanmu\" @click=\"sendDanmu\">发送弹幕</button>\r\n      </view>\r\n      <view class=\"uni-btn-v\">\r\n        <enum-data title=\"选择倍速\" :items=\"rateItemTypes\" @change=\"onPlaybackRateChange\"></enum-data>\r\n        <button type=\"primary\" @click=\"playbackRate\">设置倍速</button>\r\n      </view>\r\n      <view class=\"uni-title\">\r\n        <text class=\"uni-title-text\">属性示例</text>\r\n      </view>\r\n      <input class=\"input margin-10\" type=\"string\" placeholder=\"设置播放资源\" @confirm=\"onSrcComfirm\"></input>\r\n      <input class=\"input margin-10\" type=\"number\" placeholder=\"设置初始播放位置（播放前设置有效）\"\r\n        @confirm=\"onInitialTimeComfirm\"></input>\r\n      <input class=\"input margin-10\" type=\"number\" placeholder=\"设置视频时长（播放前设置有效）\" @confirm=\"onDurationComfirm\"></input>\r\n      <input class=\"input margin-10\" type=\"string\" placeholder=\"设置视频封面\" @confirm=\"onPosterComfirm\"></input>\r\n      <input class=\"input margin-10\" type=\"string\" placeholder=\"设置视频标题（仅限非 Web 平台）\" @confirm=\"onTitleComfirm\"></input>\r\n      <input class=\"input margin-10\" type=\"string\" placeholder=\"设置header(json格式)\" @confirm=\"onHeaderComfirm\"></input>\r\n      <boolean-data title=\"设置是否展示弹幕（播放前设置有效）\" :defaultValue=\"enableDanmu\" @change=\"onEnableDanmuChange\"></boolean-data>\r\n      <boolean-data title=\"设置是否自动播放（播放前设置有效）\" :defaultValue=\"autoplay\" @change=\"onAutoplayChange\"></boolean-data>\r\n      <boolean-data title=\"设置是否循环播放（播放完成后生效）\" :defaultValue=\"loop\" @change=\"onLoopChange\"></boolean-data>\r\n      <boolean-data title=\"设置是否静音播放\" :defaultValue=\"muted\" @change=\"onMutedChange\"></boolean-data>\r\n      <boolean-data title=\"设置是否显示默认播放控件\" :defaultValue=\"controls\" @change=\"onControlsChange\"></boolean-data>\r\n      <boolean-data title=\"设置是否显示弹幕按钮\" :defaultValue=\"danmuBtn\" @change=\"onDanmuBtnChange\"></boolean-data>\r\n      <boolean-data title=\"设置是否显示进度条\" :defaultValue=\"showProgress\" @change=\"onShowProgressChange\"></boolean-data>\r\n      <boolean-data title=\"设置是否显示全屏按钮\" :defaultValue=\"showFullscreenBtn\"\r\n        @change=\"onShowFullscreenBtnChange\"></boolean-data>\r\n      <boolean-data title=\"设置是否显示视频底部控制栏的播放按钮\" :defaultValue=\"showPlayBtn\" @change=\"onShowPlayBtnChange\"></boolean-data>\r\n      <boolean-data title=\"设置是否显示静音按钮（仅限非 Web 平台）\" :defaultValue=\"showMuteBtn\"\r\n        @change=\"onShowMuteBtnChange\"></boolean-data>\r\n      <enum-data title=\"设置全屏时视频的方向\" :items=\"directionItemTypes\" @change=\"onDirectionChange\"></enum-data>\r\n      <boolean-data title=\"设置是否显示视频中间的播放按钮\" :defaultValue=\"showCenterPlayBtn\"\r\n        @change=\"onShowCenterPlayBtnChange\"></boolean-data>\r\n      <boolean-data title=\"设置是否显示loading控件\" :defaultValue=\"showLoading\" @change=\"onShowLoadingChange\"></boolean-data>\r\n      <boolean-data title=\"设置是否开启控制进度的手势\" :defaultValue=\"enableProgressGesture\"\r\n        @change=\"onEnableProgressGestureChange\"></boolean-data>\r\n      <boolean-data title=\"设置是否开启播放手势（仅限非 Web 平台）\" :defaultValue=\"enablePlayGesture\"\r\n        @change=\"onEnablePlayGestureChange\"></boolean-data>\r\n      <!-- #ifndef WEB -->\r\n      <boolean-data title=\"非全屏模式下，设置是否开启亮度与音量调节手势\" :defaultValue=\"pageGesture\"\r\n        @change=\"onPageGestureChange\"></boolean-data>\r\n      <!-- #endif -->\r\n      <boolean-data title=\"非全屏模式下，设置是否开启亮度与音量调节手势（仅限非 Web 平台）\" :defaultValue=\"vslideGesture\"\r\n        @change=\"onVslideGestureChange\"></boolean-data>\r\n      <boolean-data title=\"全屏模式下，设置是否开启亮度与音量调节手势（仅限非 Web 平台）\" :defaultValue=\"vslideGestureInFullscreen\"\r\n        @change=\"onVslideGestureInFullscreenChange\"></boolean-data>\r\n      <boolean-data title=\"设置是否对http、https视频源开启本地缓存（仅 App 平台，播放前设置有效）\" :defaultValue=\"httpCache\"\r\n        @change=\"onHttpCacheChange\"></boolean-data>\r\n      <enum-data title=\"设置视频大小与video容器大小不一致时，视频的表现形式\" :items=\"objectFitItemTypes\"\r\n        @change=\"onObjectFitChange\"></enum-data>\r\n      <enum-data title=\"设置解码器（仅 App 平台，播放前设置有效）\" :items=\"codecItemTypes\" @change=\"onCodecChange\"></enum-data>\r\n      <enum-data title=\"设置播放策略（仅 App 平台，播放前设置有效）\" :items=\"playStrategyItemTypes\"\r\n        @change=\"onPlayStrategyChange\"></enum-data>\r\n    </scroll-view>\r\n  </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n  .video {\r\n    width: 100%;\r\n    height: 200px;\r\n  }\r\n\r\n  .input {\r\n    height: 40px;\r\n    background: #FFF;\r\n    padding: 8px 13px;\r\n  }\r\n\r\n  .margin-10 {\r\n    margin: 10px;\r\n  }\r\n\r\n  .img-fast-backward {\r\n    width: 40px;\r\n    height: 40px;\r\n    top: 50%;\r\n    left: 12%;\r\n    transform: translate(-50%, -50%);\r\n    position: absolute;\r\n  }\r\n\r\n  .img-fast-forward {\r\n    width: 40px;\r\n    height: 40px;\r\n    top: 50%;\r\n    right: 12%;\r\n    transform: translate(50%, -50%);\r\n    position: absolute;\r\n  }\r\n\r\n  .input-send-danmu {\r\n    height: 40px;\r\n    padding: 8px 13px;\r\n    margin: 0 var(--status-bar-height);\r\n    bottom: 50px;\r\n    position: absolute;\r\n    background-color: rgba(0, 0, 0, 0.5);\r\n    color: #FFF;\r\n  }\r\n</style>\r\n\n```\n\n>Script\n```uts\n\r\n  import { ItemType } from '@/components/enum-data/enum-data-types';\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<Danmu>,\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<UniVideoElement>(\"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<Danmu>(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<ViewGroup>();\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 | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.9\",\"4.11\"]]}' /> | 动画资源地址，目前只支持绝对路径 |\n| loop | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.9\",\"4.11\"]]}' /> | 动画是否循环播放 |\n| autoplay | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.9\",\"4.11\"]]}' /> | 动画是否自动播放 |\n| action | string | \"stop\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.9\",\"4.11\"]]}' /> | 动画操作，可取值 play、pause、stop |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| play | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.9\",\"4.11\"]]}' /> | 播放 |\n@| pause | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.9\",\"4.11\"]]}' /> | 暂停 |\n@| stop | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.9\",\"4.11\"]]}' /> | 停止 |\n| hidden | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.9\",\"4.11\"]]}' /> | 是否隐藏动画 |\n| @ended | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.9\",\"4.11\"]]}' /> | - |","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"},"live-player":{"name":"## live-player","description":"实时音视频播放","compatibility":"\n### 兼容性\n| Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| x | - | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| src | string([string.UniLivePlayerURIString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 音视频地址。目前仅支持 flv, rtmp 格式 |\n| mode | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | live（直播），RTC（实时通话） |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| RTC | - | - |\n@| live | - | - |\n| autoplay | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 自动播放 |\n| muted | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 是否静音 |\n| orientation | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 画面方向，可选值有 vertical，horizontal |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| vertical | - | - |\n@| horizontal | - | - |\n| object-fit | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 填充模式，可选值有 contain，fillCrop |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| contain | - | - |\n@| fillCrop | - | - |\n| background-mute | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 进入后台时是否静音 |\n| min-cache | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 最小缓冲区，单位s |\n| max-cache | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 最大缓冲区，单位s |\n| @statechange | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 播放状态变化事件，detail = {code} |\n| @fullscreenchange | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 全屏变化事件，detail = {direction, fullScreen} |\n| @netstatus | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 网络状态通知，detail = {info} |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.media.live.live-player)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/live-player.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=live-player&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=live-player&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=live-player&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=live-player&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=live-player&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=live-player)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=live-player&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"},"live-pusher":{"name":"## live-pusher","description":"实时音视频录制","compatibility":"\n### 兼容性\n| Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| x | - | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| url | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 推流地址。目前仅支持 flv, rtmp 格式 |\n| mode | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | SD（标清）, HD（高清）, FHD（超清）, RTC（实时通话） |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| RTC | - | - |\n@| SD | - | - |\n@| HD | - | - |\n@| FHD | - | - |\n| autopush | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 自动推流 |\n| muted | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 是否静音 |\n| enable-camera | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 开启摄像头 |\n| auto-focus | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 自动获取焦点 |\n| orientation | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 画面方向，可选值有 vertical，horizontal |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| vertical | - | - |\n@| horizontal | - | - |\n| beauty | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 美颜 |\n| aspect | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 美白 |\n| min-bitrate | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 最小码率 |\n| max-bitrate | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 最大码率 |\n| waiting-image | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 进入后台时推流的等待画面 |\n| waiting-image-md5 | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 等待画面资源的MD5值 |\n| background-mute | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 进入后台时是否静音 |\n| @statechange | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 播放状态变化事件，detail = {code} |\n| @error | Any | - | - | - |\n| @netstatus | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | 网络状态通知，detail = {info} |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.media.live.live-pusher)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/live-pusher.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=live-pusher&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=live-pusher&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=live-pusher&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=live-pusher&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=live-pusher&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=live-pusher)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=live-pusher&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 | x | 4.31 | 4.31 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| longitude | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"4.31\",\"4.31\"]]}' /> | 中心经度 |\n| latitude | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"4.31\",\"4.31\"]]}' /> | 中心纬度 |\n| scale | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"4.31\",\"4.31\"]]}' /> | 缩放级别，web端取值范围为5-18 , app端取值范围为3-20 |\n| min-scale | number | 3 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"4.31\",\"4.31\"]]}' /> | 最小缩放级别 |\n| max-scale | number | 20 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"4.31\",\"4.31\"]]}' /> | 最大缩放级别 |\n| layer-style | string | \"1\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"4.31\",\"4.31\"]]}' /> | 个性化地图（如实现地图暗黑模式） |\n| markers | array | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"4.31\",\"4.31\"]]}' /> | 标记点 |\n| covers | array | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 即将移除，请使用 markers |\n| polyline | array | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"4.31\",\"4.31\"]]}' /> | 路线 |\n| polygons | array | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"4.31\",\"4.31\"]]}' /> | 多边形 |\n| circles | array | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"4.31\",\"4.31\"]]}' /> | 圆 |\n| controls | array | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"4.31\",\"4.31\"]]}' /> | 控件 |\n| include-points | array | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"4.31\",\"4.31\"]]}' /> | 缩放视野以包含所有给定的坐标点 |\n| show-location | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"4.31\",\"4.31\"]]}' /> | 显示带有方向的当前定位点 |\n| enable-3D | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"4.31\",\"4.31\"]]}' /> | 是否显示3D楼块 |\n| show-compass | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"4.31\",\"4.31\"]]}' /> | 是否显示指南针 |\n| enable-zoom | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"4.31\",\"4.31\"]]}' /> | 是否支持缩放 |\n| enable-scroll | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"4.31\",\"4.31\"]]}' /> | 是否支持拖动 |\n| enable-rotate | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"4.31\",\"4.31\"]]}' /> | 是否支持旋转 |\n| rotate | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"4.31\",\"4.31\"]]}' /> | 旋转角度(范围0-360)地图正北和设备 y 轴角度的夹角 |\n| skew | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"4.31\",\"4.31\"]]}' /> | 倾斜角度，范围 0 ~ 40 , 关于 z 轴的倾角 |\n| enable-overlooking | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"4.31\",\"4.31\"]]}' /> | 是否开启俯视（是否开启手势修改倾斜角度） |\n| enable-satellite | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"4.31\",\"4.31\"]]}' /> | 是否开启卫星图 |\n| enable-traffic | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"4.31\",\"4.31\"]]}' /> | 是否开启实时路况 |\n| enable-poi | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"4.31\",\"4.31\"]]}' /> | 是否展示 POI 点 |\n| enable-building | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"4.31\",\"4.31\"]]}' /> | 是否展示建筑物 |\n| enable-indoorMap | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"4.31\",\"4.31\"]]}' /> | 是否展示室内地图 |\n| @markertap | (event: [UniMapMarkerTapEvent](#unimapmarkertapevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"4.31\",\"4.31\"]]}' /> | 点击标记点时触发 |\n| @callouttap | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 点击标记点对应的气泡时触发 |\n| @controltap | (event: [UniMapControlTapEvent](#unimapcontroltapevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"4.31\",\"4.31\"]]}' /> | 点击控件时触发 |\n| @regionchange | (event: [UniMapRegionChangeEvent](#unimapregionchangeevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"4.31\",\"4.31\"]]}' /> | 视野发生变化时触发 |\n| @updated | (event: [UniMapUpdatedEvent](#unimapupdatedevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"4.31\",\"4.31\"]]}' /> | 在地图渲染更新完成时触发 |\n| @tap | (event: [UniMapTapEvent](#unimaptapevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"4.31\",\"4.31\"]]}' /> | 点击地图时触发 |\n| @anchorpointtap | (event: [UniMapAnchorPointTapEvent](#unimapanchorpointtapevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"4.31\",\"4.31\"]]}' /> | 点击定位标时触发 |\n| @poitap | (event: [UniMapPoiTapEvent](#unimappoitapevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"4.31\",\"4.31\"]]}' /> | 点击地图poi点时触发 |\n| ~~theme~~ | string | \"normal\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"4.31\",\"4.31\"]]}' /> | 主题（satellite 或 normal） |","event":"\n### 事件\n#### UniMapMarkerTapEvent\n\n```mermaid\ngraph LR\n  \nUniMapMarkerTapEvent -- Extends --> UniCustomEvent&ltUniMapMarkerTapEventDetail&gt\n  style UniCustomEvent&ltUniMapMarkerTapEventDetail&gt color:#42b983\n  click UniCustomEvent&ltUniMapMarkerTapEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniMapMarkerTapEventDetail\n\n\n###### UniMapMarkerTapEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- |  :-: | :- |\n| markerId | number | 否 | - | - |  |\n\n\n#### UniMapControlTapEvent\n\n```mermaid\ngraph LR\n  \nUniMapControlTapEvent -- Extends --> UniCustomEvent&ltUniMapControlTapEventDetail&gt\n  style UniCustomEvent&ltUniMapControlTapEventDetail&gt color:#42b983\n  click UniCustomEvent&ltUniMapControlTapEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniMapControlTapEventDetail\n\n\n###### UniMapControlTapEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- |  :-: | :- |\n| controlId | number | 否 | - | - |  |\n\n\n#### UniMapRegionChangeEvent\n\n```mermaid\ngraph LR\n  \nUniMapRegionChangeEvent -- Extends --> UniCustomEvent&lt&gt\n  style UniCustomEvent&lt&gt color:#42b983\n  click UniCustomEvent&lt&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniMapRegionChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- |  :-: | :- |\n| causedBy | string | 否 | - | - |  |\n\n\n#### UniMapUpdatedEvent\n\n```mermaid\ngraph LR\n  \nUniMapUpdatedEvent -- Extends --> UniCustomEvent&ltUniMapUpdatedEventDetail&gt\n  style UniCustomEvent&ltUniMapUpdatedEventDetail&gt color:#42b983\n  click UniCustomEvent&ltUniMapUpdatedEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n#### UniMapTapEvent\n\n```mermaid\ngraph LR\n  \nUniMapTapEvent -- Extends --> UniCustomEvent&ltUniMapTapEventDetail&gt\n  style UniCustomEvent&ltUniMapTapEventDetail&gt color:#42b983\n  click UniCustomEvent&ltUniMapTapEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniMapTapEventDetail\n\n\n###### UniMapTapEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- |  :-: | :- |\n| latitude | number | 否 | - | - |  |\n| longitude | number | 否 | - | - |  |\n\n\n#### UniMapAnchorPointTapEvent\n\n```mermaid\ngraph LR\n  \nUniMapAnchorPointTapEvent -- Extends --> UniCustomEvent&ltUniMapAnchorPointTapEventDetail&gt\n  style UniCustomEvent&ltUniMapAnchorPointTapEventDetail&gt color:#42b983\n  click UniCustomEvent&ltUniMapAnchorPointTapEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniMapAnchorPointTapEventDetail\n\n\n###### UniMapAnchorPointTapEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- |  :-: | :- |\n| latitude | number | 否 | - | - |  |\n| longitude | number | 否 | - | - |  |\n\n\n#### UniMapPoiTapEvent\n\n```mermaid\ngraph LR\n  \nUniMapPoiTapEvent -- Extends --> UniCustomEvent&ltUniMapPoiTapEventDetail&gt\n  style UniCustomEvent&ltUniMapPoiTapEventDetail&gt color:#42b983\n  click UniCustomEvent&ltUniMapPoiTapEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniMapPoiTapEventDetail\n\n\n###### UniMapPoiTapEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- |  :-: | :- |\n| latitude | number | 否 | - | - |  |\n| longitude | number | 否 | - | - |  |\n| name | string | 否 | - | - |  |\n\n","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<template>\r\n  <view class=\"content\">\r\n    <map class=\"map\" id=\"map1\" ref=\"map1\" :longitude=\"location.longitude\" :latitude=\"location.latitude\" :scale=\"scale\"\r\n      :markers=\"markers\" :include-points=\"includePoints\" :polyline=\"polyline\" :polygons=\"polygons\" :circles=\"circles\"\r\n      :controls=\"controls\" :show-location=\"showLocation\" :enable-3D=\"enable3D\" :rotate=\"rotate\" :skew=\"skew\"\r\n      :show-compass=\"showCompass\" :enable-overlooking=\"enableOverlooking\" :enable-zoom=\"enableZoom\"\r\n      :enable-scroll=\"enableScroll\" :enable-rotate=\"enableRotate\" :enable-satellite=\"enableSatellite\"\r\n      :enable-traffic=\"enableTraffic\" @markertap=\"onmarkertap\" @callouttap=\"oncallouttap\" @controltap=\"oncontroltap\"\r\n      @regionchange=\"onregionchange\" @tap=\"maptap\" @updated=\"onupdated\" @poitap=\"onpoitap\"></map>\r\n    <scroll-view class=\"scrollview\" scroll-y=\"true\">\r\n      <view class=\"tips\">注意：需要正确配置地图服务商的Key才能正常显示地图组件</view>\r\n      <view class=\"uni-title\">\r\n        <text class=\"uni-title-text\">属性示例</text>\r\n      </View>\r\n      <input-data defaultValue=\"13\" title=\"scale: 缩放级别，取值范围为5-18\" type=\"number\"\r\n        @confirm=\"confirm_scale_input\"></input-data>\r\n      <boolean-data :defaultValue=\"showLocation\" title=\"开启显示带有方向的当前定位点\" @change=\"change_show_location\"></boolean-data>\r\n      <boolean-data :default-value=\"enable3D\" :disabled=\"enableSatellite\" title=\"3D效果(放大缩放级别才能看到建筑物3D效果)\" @change=\"change_enable_3d\"></boolean-data>\n      <boolean-data :default-value=\"showCompass\" title=\"显示指南针\" @change=\"change_show_campass\"></boolean-data>\n      <boolean-data :default-value=\"enableOverlooking\" title=\"俯视支持\" @change=\"change_enable_overlooking\"></boolean-data>\n      <boolean-data :default-value=\"enableRotate\" title=\"旋转支持\" @change=\"change_enable_rotate\"></boolean-data>\n      <boolean-data :default-value=\"enableZoom\" title=\"缩放支持\" @change=\"change_enable_zoom\"></boolean-data>\n      <boolean-data :default-value=\"enableScroll\" title=\"拖动支持\" @change=\"change_enable_scroll\"></boolean-data>\n      <boolean-data :default-value=\"enableSatellite\" title=\"卫星图\" @change=\"change_enable_satellite\"></boolean-data>\n      <boolean-data :default-value=\"enableTraffic\" title=\"实时路况\" @change=\"change_enable_traffic\"></boolean-data>\r\n\r\n      <button class=\"button\" @click=\"addControls\">控件</button>\r\n      <button class=\"button\" @click=\"addMarkers\">添加标记点</button>\n      <!-- #ifdef WEB -->\n      <button class=\"button\" @click=\"addMarkersLabel\">为标记点旁边增加标签</button>\n      <!-- #endif -->\r\n      <button class=\"button\" @click=\"removeMarker\">移除ID为4的标记点和标签</button>\r\n      <button class=\"button\" @click=\"addPolyline\">添加路线</button>\r\n      <button class=\"button\" @click=\"removePolyline\">移除一条路线</button>\r\n      <button class=\"button\" @click=\"addPolygons\">添加多边形</button>\r\n      <button class=\"button\" @click=\"removePolygon\">移除一个多边形</button>\r\n      <button class=\"button\" @click=\"addCircles\">添加圆</button>\r\n      <button class=\"button\" @click=\"removeCircle\">移除一个圆</button>\r\n      <button class=\"button\" @click=\"includePoint\">缩放视野以包含所有给定的坐标点</button>\r\n      <view class=\"uni-title\">\r\n        <text class=\"uni-title-text\">方法示例</text>\r\n      </View>\r\n      <button class=\"button\" @click=\"handleGetCenterLocation\">获取当前地图中心的经纬度</button>\r\n      <button class=\"button\" @click=\"handleGetRegion\">获取当前地图的视野范围</button>\r\n      <button class=\"button\" @click=\"handleTranslateMarker\">平移marker</button>\r\n      <button class=\"button\" @click=\"handleMoveToLocation\">将地图中心移动到指定坐标</button>\n      <button class=\"button\" @click=\"handleMoveToMyLocation\">将地图中心移动到当前位置</button>\r\n      <button class=\"button\" @click=\"handleGetScale\">获取当前地图的缩放级别</button>\r\n\r\n    </scroll-view>\r\n  </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n  .content {\r\n    flex: 1;\r\n  }\r\n\r\n  .map {\r\n    width: 100%;\r\n    height: 300px;\r\n    background-color: #f0f0f0;\r\n  }\r\n\r\n  .scrollview {\r\n    flex: 1;\r\n    padding: 10px;\r\n  }\r\n\r\n  .list-item {\r\n    flex-direction: row;\r\n    flex-wrap: nowrap;\r\n    align-items: center;\r\n    padding: 5px 0px;\r\n  }\r\n\r\n  .list-text {\r\n    flex: 1;\r\n  }\r\n\r\n  .button {\r\n    margin-top: 5px;\r\n    margin-bottom: 5px;\r\n  }\r\n\r\n  .tips {\r\n    font-size: 12px;\r\n    margin-top: 15px;\r\n    opacity: .8;\r\n  }\r\n</style>\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);\n  const enable3D = ref(false);\n  const showCompass = ref(false);\n  const enableOverlooking = ref(false);\n  const enableRotate = ref(false);\n  const enableZoom = ref(true);\n  const enableScroll = ref(true);\n  const enableSatellite = ref(false);\n  const enableTraffic = ref(false);\r\n  const change_show_location = (checked : boolean) => {\r\n    showLocation.value = checked\r\n  }\n\n  const change_enable_3d = (checked : boolean) => {\n    enable3D.value = checked\n  }\n\n  const change_show_campass = (checked : boolean) => {\n    showCompass.value = checked\n  }\n\n  const change_enable_overlooking = (checked : boolean) => {\n    enableOverlooking.value = checked\n  }\n\n  const change_enable_rotate = (checked : boolean) => {\n    enableRotate.value = checked\n  }\n\n  const change_enable_zoom = (checked : boolean) => {\n    enableZoom.value = checked\n  }\n\n  const change_enable_scroll = (checked : boolean) => {\n    enableScroll.value = checked\n  }\n\n  const change_enable_satellite = (checked : boolean) => {\n    enableSatellite.value = checked\n  }\n\n  const change_enable_traffic = (checked : boolean) => {\n    enableTraffic.value = checked\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<Marker[]>(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<Polyline[]>(JSON.stringify(testPolyline))!;\r\n  };\r\n  const removePolyline = () => {\r\n    if (polyline.value.length > 1) {\r\n      polyline.value = JSON.parse<Polyline[]>(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<Polygon[]>(JSON.stringify(testPolygons))!;\r\n  };\r\n  const removePolygon = () => {\r\n    if (polygons.value.length > 1) {\r\n      polygons.value = JSON.parse<Polygon[]>(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<Circle[]>(JSON.stringify(testCircles))!;\r\n  };\r\n  const removeCircle = () => {\r\n    if (circles.value.length > 1) {\r\n      circles.value = JSON.parse<Circle[]>(JSON.stringify(testCircles))!.slice(1);\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  };\n\n  const handleMoveToMyLocation = () => {\n    mapContext.value?.moveToLocation({\n      success: res => {\n        uni.showModal({\n          content: '地图中心已经移动到当前位置'\n        })\n      },\n      fail: error => {\n        console.log(error);\n      }\n    })\n  }\r\n\r\n  const maptap = (e : UniMapTapEvent) => {\r\n    // console.log('点击地图时触发',e)\r\n    uni.showModal({\r\n      content: JSON.stringify(e.detail)\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.detail)\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.detail)\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.detail)\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.detail)\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":"### 子组件 @children-tags\n不可以嵌套组件","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 | x | 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<template>\r\n  <view class=\"page\" id=\"page-canvas\">\r\n    <canvas id=\"canvas\" class=\"canvas-element\"></canvas>\r\n    <scroll-view class=\"scroll-view\">\r\n      <!-- #ifdef WEB -->\r\n      <button class=\"canvas-drawing-button\" @click=\"canvasToBlob\">canvasToBlob</button>\r\n      <view>\r\n        <text>testToBlobResult: {{testToBlobResult}}</text>\r\n      </view>\r\n      <!-- #endif -->\r\n      <button class=\"canvas-drawing-button\" id=\"toDataURL\" @click=\"canvasToDataURL\">canvasToDataURL</button>\r\n      <view class=\"text-group\" v-if=\"dataBase64.length>0\">\r\n        <text>canvasToDataURL:</text>\r\n        <text>{{dataBase64.slice(0,22)}}...</text>\r\n      </view>\r\n      <button @click=\"onCreateImage\">createImage</button>\r\n      <button @click=\"onCreatePath2D\">createPath2D</button>\n      <button @click=\"startAnimationFrame\">requestAnimationFrame</button>\n      <button @click=\"stopAnimationFrame\">cancelAnimationFrame</button>\r\n      <view style=\"padding: 8px 10px;\">CanvasContext API 演示</view>\r\n      <navigator url=\"./canvas-context\">\r\n        <button>CanvasContext API</button>\r\n      </navigator>\r\n\r\n      <view class=\"text-group\">\r\n        <text>获取 CanvasContext 结果：</text>\r\n        <text id=\"testCanvasContext\">{{testCanvasContext}}</text>\r\n      </view>\r\n      <view class=\"text-group\">\r\n        <text>测试 ToDataURL 结果：</text>\r\n        <text id=\"testToDataURLResult\">{{testToDataURLResult}}</text>\r\n      </view>\r\n\r\n      <view class=\"text-group\">\r\n        <text>测试 createImage 结果：</text>\r\n        <text id=\"testCreateImage\">{{testCreateImage}}</text>\r\n      </view>\r\n\r\n      <view class=\"text-group\">\r\n        <text>测试 createPath2D 结果：</text>\r\n        <text id=\"testCreatePath2D\">{{testCreatePath2D}}</text>\r\n      </view>\r\n    </scroll-view>\r\n  </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n  .page {\r\n    flex: 1;\r\n    height: 100%;\r\n    overflow: hidden;\r\n  }\r\n\r\n  .scroll-view {\r\n    flex: 1;\r\n  }\r\n\r\n  .canvas-element {\r\n    width: 100%;\r\n    height: 250px;\r\n    background-color: #ffffff;\r\n  }\r\n\r\n  .btn-to-image {\r\n    margin: 10px;\r\n  }\r\n\r\n  .text-group {\r\n    display: flex;\r\n    flex-flow: row nowrap;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    padding: 8px 10px;\r\n  }\r\n</style>\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.getWindowInfo().pixelRatio ?? 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":"### 子组件 @children-tags\n不可以嵌套组件","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 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"4.31\",\"4.31\"]]}' /> | 广告位id，在uniAD官网申请广告位 |\n| @load | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"4.31\",\"4.31\"]]}' /> | 广告加载成功的回调 |\n| @close | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"4.31\",\"4.31\"]]}' /> | 广告关闭的回调 |\n| @error | (e:[UniAdErrorEvent](#uniaderrorevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"4.31\",\"4.31\"]]}' /> | 广告加载失败的回调 |","event":"\n### 事件\n#### UniAdErrorEvent\n\n\n##### UniAdErrorEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- |  :-: | :- |\n| detail | **IUniAdError** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- |  :-: | :- |\n@| errCode | number | 是 | - | - | 错误码<br/>- -5001 广告位标识adpid为空，请传入有效的adpid<br/>- -5002 无效的广告位标识adpid，请使用正确的adpid<br/>- -5003 广告位未开通广告，请在广告平台申请并确保已审核通过<br/>- -5004 无广告模块，打包时请配置要使用的广告模块<br/>- -5005 广告加载失败，请稍后重试<br/>- -5006 广告已经展示过了，请重新加载<br/>- -5007 广告不可用或已过期，请重新请求<br/>- -5008 广告不可用或已过期，请重新请求<br/>- -5009 广告类型不符，请检查后再试<br/>- -5011 打包或开通的渠道，不支持此类型广告<br/>- -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<template>\r\n  <view>\r\n    <page-head title=\"信息流广告\"></page-head>\n    <!-- #ifndef MP -->\n    <ad adpid=\"1111111111\" style=\"width: 100%;\" @load=\"loadFun\" @error=\"errorFun\"></ad>\n    <!-- #endif -->\n    <!-- #ifdef MP -->\n    <view class=\"uni-center\">微信小程序平台暂不支持测试广告位，需要开通uni-ad后可测试</view>\n    <!-- #endif -->\r\n    <view v-if=\"tips\" class=\"uni-center\">信息流广告加载失败，请退出当前页面重试。</view>\n    <button @click=\"pushList\">列表-信息流</button>\r\n  </view>\r\n</template>\r\n\r\n<script>\r\n  export default {\r\n    data() {\r\n      return {\r\n        tips: false\r\n      }\r\n    },\r\n    methods: {\n      pushList(){\n        uni.navigateTo({\n        \turl: '/pages/component/ad/list-view-ad',\n        })\n      },\r\n      loadFun() {\r\n        uni.showToast({\r\n          position: \"bottom\",\r\n          title: \"信息流广告加载成功\"\r\n        })\r\n      },\r\n      errorFun() {\r\n        this.tips = true;\r\n      }\r\n    }\r\n  }\r\n</script>\r\n\r\n<style>\r\n\r\n</style>\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 | x | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| src | string([string.HTMLURIString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | webview 指向网页的链接 |\n| allow | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 用于为 [iframe](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe) 指定其[特征策略](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/策略特征) |\n| sandbox | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 该属性对呈现在 [iframe](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe) 框架中的内容启用一些额外的限制条件。 |\n| fullscreen | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 是否铺满整个页面，默认值：`true`。 |\n| webview-styles | **WebViewStyles** | {\"progress\":{\"color\":\"#00FF00\"}} | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.9\",\"4.11\"]]}' /> | webview 网络地址页面加载进度条样式 |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- |  :-: | :- |\n@| progress | [WebViewProgressStyles](#webviewprogressstyles-values) \\\\| boolean | 是 | false | - | 网络地址页面加载进度条样式，设置为 false 时表示不显示加载进度条。 |\n@\n| horizontalScrollBarAccess | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"4.11\",\"4.13\"]]}' /> | 设置是否显示横向滚动条 |\n| verticalScrollBarAccess | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"4.11\",\"4.13\"]]}' /> | 设置是否显示纵向滚动条 |\n| @message | (event: [UniWebViewMessageEvent](#uniwebviewmessageevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.9\",\"4.11\"]]}' /> | 网页向应用 postMessage 时触发。e.detail = { data } |\n| @error | (event: [UniWebViewErrorEvent](#uniwebviewerrorevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"3.9\",\"4.11\"]]}' /> | 网页加载错误时触发。e.detail = { errSubject, errCode, errMsg, url, fullUrl, src } |\n| @load | (event: [UniWebViewLoadEvent](#uniwebviewloadevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"4.0\",\"4.11\"]]}' /> | 网页加载完成后触发。e.detail = { url, src } |\n| @loading | (event: [UniWebViewLoadingEvent](#uniwebviewloadingevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.9\",\"4.11\"]]}' /> | 网页加载中触发。e.detail = { url, src } |\n| @download | (event: [UniWebViewDownloadEvent](#uniwebviewdownloadevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"3.9\",\"4.11\"]]}' /> | 点击网页中可下载链接时触发。e.detail = { url, userAgent, contentDisposition, mimetype, contentLength } |","event":"\n### 事件\n#### UniWebViewMessageEvent\n\n```mermaid\ngraph LR\n  \nUniWebViewMessageEvent -- Extends --> UniCustomEvent&ltUniWebViewMessageEventDetail&gt\n  style UniCustomEvent&ltUniWebViewMessageEventDetail&gt color:#42b983\n  click UniCustomEvent&ltUniWebViewMessageEventDetail&gt \"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\\<string, any \\| null> \\| null，4.13版本（含）之后类型为Array\\<UTSJSONObject> |\n\n\n#### UniWebViewErrorEvent\n\n```mermaid\ngraph LR\n  \nUniWebViewErrorEvent -- Extends --> UniCustomEvent&ltUniWebViewErrorEventDetail&gt\n  style UniCustomEvent&ltUniWebViewErrorEventDetail&gt color:#42b983\n  click UniCustomEvent&ltUniWebViewErrorEventDetail&gt \"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 | 是 | - | - | 统一错误码<br/>100001 ssl error<br/>100002 page error<br/>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&ltUniWebViewLoadEventDetail&gt\n  style UniCustomEvent&ltUniWebViewLoadEventDetail&gt color:#42b983\n  click UniCustomEvent&ltUniWebViewLoadEventDetail&gt \"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&ltUniWebViewLoadingEventDetail&gt\n  style UniCustomEvent&ltUniWebViewLoadingEventDetail&gt color:#42b983\n  click UniCustomEvent&ltUniWebViewLoadingEventDetail&gt \"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&ltUniWebViewDownloadEventDetail&gt\n  style UniCustomEvent&ltUniWebViewDownloadEventDetail&gt color:#42b983\n  click UniCustomEvent&ltUniWebViewDownloadEventDetail&gt \"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<template>\r\n  <scroll-view class=\"uni-flex-item\">\r\n    <web-view id=\"web-view\" class=\"uni-flex-item\" :style=\"{ 'pointer-events': pointerEvents }\" :src=\"src\"\r\n      :webview-styles=\"webview_styles\" :horizontalScrollBarAccess=\"horizontalScrollBarAccess\"\r\n      :verticalScrollBarAccess=\"verticalScrollBarAccess\" @message=\"message\" @error=\"error\" @loading=\"loading\"\r\n      @load=\"load\" @download=\"download\" @touchstart=\"touchstart\" @tap=\"tap\">\r\n    </web-view>\r\n    <!-- #ifdef APP -->\r\n    <view class=\"uni-padding-wrap uni-common-mt\">\r\n      <view class=\"uni-btn-v\">\r\n        <input class=\"uni-input\" confirmType=\"go\" placeholder=\"输入网址跳转\" @confirm=\"confirm\" maxlength=\"-1\" />\r\n      </view>\r\n      <view class=\"uni-row uni-btn-v\">\r\n        <button class=\"uni-flex-item\" type=\"primary\" :disabled=\"!canGoBack\" @click=\"back\">后退</button>\r\n        <button class=\"margin-left-5 uni-flex-item\" type=\"primary\" :disabled=\"!canGoForward\"\r\n          @click=\"forward\">前进</button>\r\n      </view>\r\n      <view class=\"uni-row uni-btn-v\">\r\n        <button class=\"uni-flex-item\" type=\"primary\" @click=\"reload\">重新加载</button>\r\n        <button class=\"margin-left-5 uni-flex-item\" type=\"primary\" @click=\"stop\">停止加载</button>\r\n      </view>\r\n      <view class=\"uni-btn-v\">\r\n        <button type=\"primary\" @click=\"nativeToWeb\">原生和Web通信</button>\r\n      </view>\r\n      <!-- #ifdef APP-ANDROID -->\r\n      <view class=\"uni-row uni-btn-v\">\r\n        <view class=\"uni-row uni-flex-item align-items-center\">\r\n          <text>显示横向滚动条</text>\r\n          <switch :checked=\"true\" @change=\"changeHorizontalScrollBarAccess\"></switch>\r\n        </view>\r\n        <view class=\"uni-row uni-flex-item align-items-center\">\r\n          <text>显示竖向滚动条</text>\r\n          <switch :checked=\"true\" @change=\"changeVerticalScrollBarAccess\"></switch>\r\n        </view>\r\n      </view>\r\n      <!-- #endif -->\r\n      <!-- #ifdef APP-IOS -->\r\n      <view class=\"uni-row uni-btn-v\" v-if=\"isProd() === false\">\r\n        <view class=\"uni-row uni-flex-item align-items-center\">\r\n          <text>前进、后退功能在Windows端需要打自定义基座，MAC端需要配置Xcode环境后进行真机运行或者打自定义基座</text>\r\n        </view>\r\n      </view>\r\n      <!-- #endif -->\r\n    </view>\r\n    <!-- #endif -->\r\n  </scroll-view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n  .margin-left-5 {\r\n    margin-left: 5px;\r\n  }\r\n\r\n  .align-items-center {\r\n    align-items: center;\r\n  }\r\n</style>\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        pointerEvents: 'auto',\r\n        isTouchEnable: false\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.isTouchEnable = event.touches[0].clientX > 0 && event.touches[0].clientY > 0;\r\n        }\r\n      },\r\n      tap(event : UniPointerEvent) {\r\n        if (this.autoTest) {\r\n          this.isTouchEnable = event.clientX > 0 && event.clientY > 0;\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 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 选项的排列方向 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| horizontal | - | 选项的排列方向水平 |\n@| vertical | - | 选项的排列方向水平 |\n| show-icon | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 是否显示icon |\n| selected | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 选中的tabBar选项索引值 |\n| @onTabItemTap | (event: [OnTabItemTapOption](#ontabitemtapoption)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 点击自定义 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 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.93\",\"4.11\"]]}' /> | {data, loading, hasMore, pagination, error} |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| data | - | 查询结果，类型为Array\\<UTSJSONObject> |\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)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.93\",\"4.11\"]]}' /> | 表名 |\n| field | string([string.DBFieldString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.93\",\"4.11\"]]}' /> | 查询字段，多个字段用 `,` 分割 |\n| where | string([string.JQLString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.93\",\"4.11\"]]}' /> | 查询条件 |\n| orderby | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.93\",\"4.11\"]]}' /> | 排序字段及正序倒叙设置 |\n| groupby | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.93\",\"4.11\"]]}' /> | 对数据进行分组 |\n| group-field | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.93\",\"4.11\"]]}' /> | 对数据进行分组统计 |\n| distinct | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.93\",\"4.11\"]]}' /> | 是否对数据查询结果中重复的记录进行去重 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| true | - | 去重 |\n@| false | - | 不去重 |\n| page-data | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.93\",\"4.11\"]]}' /> | add 多次查询的集合, replace 当前查询的集合 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| add | - | 多次查询的集合 |\n@| replace | - | 当前查询的集合 |\n| page-current | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.93\",\"4.11\"]]}' /> | 当前页 |\n| page-size | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.93\",\"4.11\"]]}' /> | 每页数据数量 |\n| getone | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 指定查询结果是否返回数组第一条数据，默认 false。在false情况下返回的是数组，即便只有一条结果，也需要\\[0]方式获取。在true下，直接返回结果数据，少一层数组 |\n| getcount | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.93\",\"4.11\"]]}' /> | 是否查询总数量 |\n| gettree | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.93\",\"4.11\"]]}' /> | 是否查询树状结构数据 |\n| startwith | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.93\",\"4.11\"]]}' /> | gettree的第一层级条件，此初始条件可以省略，不传startWith时默认从最顶级开始查询 |\n| limitlevel | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.93\",\"4.11\"]]}' /> | gettree查询返回的树的最大层级。超过设定层级的节点不会返回。默认10级，最大15，最小1 |\n| manual | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.93\",\"4.11\"]]}' /> | 是否手动加载数据，默认为 false，页面onLoad时自动联网加载数据 |\n| loadtime | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.93\",\"4.11\"]]}' /> | 加载数据时机，默认auto，可选值 auto\\|onready\\|manual |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| auto | - | 页面就绪后或属性变化后加载数据，默认为auto |\n@| onready | - | 页面就绪后不自动加载数据，属性变化后加载。适合在onLoad中接收上个页面的参数作为where条件时 |\n@| manual | - | 手动模式，不自动加载数据。如果涉及到分页，需要先手动修改当前页，在调用加载数据 |\n| @load | (data : Array\\<UTSJSONObject>, ended : boolean, pagination : [UTSJSONObject](/uts/buildin-object-api/utsjsonobject.md)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.93\",\"4.11\"]]}' /> | 成功回调。如联网返回结果后，想修改下数据再渲染界面，则在本方法里对data进行修改 |\n| @error | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.93\",\"4.11\"]]}' /> | 失败回调 |\n| ~~action~~ | string([string.ClientDBActionString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 云端执行数据库查询的前或后，触发某个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<template>\r\n  <view class=\"content\">\r\n    <unicloud-db ref=\"udb\" v-slot:default=\"{data, pagination, loading, error}\" :collection=\"collection\" :getcount=\"true\"\r\n      loadtime=\"manual\">\r\n      <list-view v-if=\"data.length>0\" ref=\"listView\" class=\"list\" :scroll-y=\"true\" @scrolltolower=\"loadMore()\">\r\n        <list-item class=\"list-item\" v-for=\"(item, _) in data\">\r\n          <view class=\"list-item-fill\">\r\n            <text>{{item}}</text>\r\n          </view>\r\n          <view>\r\n            <text class=\"list-item-remove\" @click=\"remove(item.getString('_id')!)\">❌</text>\r\n          </view>\r\n        </list-item>\r\n      </list-view>\r\n      <text class=\"loading\" v-if=\"loading\">Loading...</text>\r\n      <view v-if=\"error!=null\">{{error.errMsg}}</view>\r\n      <view class=\"pagination\" v-if=\"data.length>0\">\r\n        <text class=\"pagination-item\">{{data.length}} / {{pagination.count}}</text>\r\n      </view>\r\n    </unicloud-db>\r\n    <view class=\"btn-group\">\r\n      <button class=\"btn\" @click=\"add()\">Add</button>\r\n      <button class=\"btn\" @click=\"get()\">Get</button>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n<script>\r\n  const db = uniCloud.databaseForJQL()\r\n\r\n  export default {\r\n    data() {\r\n      return {\r\n        collection: 'unicloud-db-test',\r\n        collectionList: [\r\n          db.collection('book').where('name == \"水浒传\"').getTemp(),\r\n        ] as UTSJSONObject[],\r\n        uniCloudElement: null as UniCloudDBElement | null,\r\n        isTesting: false,\r\n        addResult: {},\r\n        updateResult: {},\r\n        removeResult: {}\r\n      }\r\n    },\r\n    onReady() {\r\n      this.uniCloudElement = this.$refs['udb'] as UniCloudDBElement\r\n      this.get();\r\n    },\r\n    onPullDownRefresh() {\r\n      this.uniCloudElement!.loadData({\r\n        clear: true,\r\n        success: (_ : UniCloudDBGetResult) => {\r\n          uni.stopPullDownRefresh()\r\n        }\r\n      })\r\n    },\r\n    methods: {\r\n      loadMore() {\r\n        this.uniCloudElement!.loadMore()\r\n      },\r\n      get() {\r\n        this.uniCloudElement!.loadData({\r\n          clear: true\r\n        })\r\n      },\r\n      add() {\r\n        const value = {\r\n          title: \"title-\" + Date.now(),\r\n          comment: \"comment\" + Date.now()\r\n        };\r\n        this.uniCloudElement!.add(value, {\r\n          showToast: false,\r\n          success: (res : UniCloudDBAddResult) => {\r\n            this.addResult = {\r\n              id: res.id\r\n            };\r\n            this.get();\r\n          },\r\n          fail: (err : any | null) => {\r\n            this.showError(err)\r\n          }\r\n        })\r\n      },\r\n      update(id : string) {\r\n        const value = {\r\n          title: \"title-\" + Date.now(),\r\n          comment: \"comment\" + Date.now()\r\n        };\r\n        this.uniCloudElement!.update(id, value, {\r\n          showToast: false,\r\n          needLoading: true,\r\n          needConfirm: false,\r\n          loadingTitle: \"正在更新...\",\r\n          success: (res : UniCloudDBUpdateResult) => {\r\n            this.updateResult = {\r\n              updated: res.updated\r\n            }\r\n          },\r\n          fail: (err : any | null) => {\r\n            this.showError(err)\r\n          }\r\n        })\r\n      },\r\n      remove(id : string) {\r\n        this.uniCloudElement!.remove(id, {\r\n          showToast: false,\r\n          needConfirm: false,\r\n          needLoading: false,\r\n          success: (res : UniCloudDBRemoveResult) => {\r\n            this.removeResult = {\r\n              deleted: res.deleted\r\n            }\r\n          },\r\n          fail: (err : any | null) => {\r\n            this.showError(err)\r\n          }\r\n        })\r\n      },\r\n      onQueryLoad(data : Array<UTSJSONObject>, ended : boolean, pagination : UTSJSONObject) {\r\n        console.log(data, ended, pagination);\r\n      },\r\n      showError(err : any | null) {\r\n        const error = err as UniCloudError\r\n        uni.showModal({\r\n          content: error.errMsg,\r\n          showCancel: false\r\n        })\r\n      }\r\n    }\r\n  }\r\n</script>\r\n\r\n<style>\r\n  .content {\r\n    flex: 1;\r\n    flex-direction: column;\r\n  }\r\n\r\n  .list {\r\n    flex: 1;\r\n    flex-direction: column;\r\n  }\r\n\r\n  .list-item {\r\n    flex-direction: row;\r\n    padding: 10px;\r\n  }\r\n\r\n  .list-item-fill {\r\n    flex: 1;\r\n  }\r\n\r\n  .list-item-remove {\r\n    padding: 10px;\r\n  }\r\n\r\n  .loading {\r\n    padding: 10px;\r\n    text-align: center;\r\n  }\r\n\r\n  .pagination {\r\n    flex-direction: row;\r\n    background-color: #f2f2f2;\r\n  }\r\n\r\n  .pagination-item {\r\n    margin: auto;\r\n    padding: 5px 10px;\r\n  }\r\n\r\n  .btn-group {\r\n    flex-direction: row;\r\n  }\r\n\r\n  .btn {\r\n    flex: 1;\r\n    margin: 10px;\r\n  }\r\n</style>\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\\<UTSJSONObject> | 是 | - | 已加载的数据 |\n#### UniCloudDBElement 的方法\n##### loadData(options?: UTSJSONObject \\| null): void @loaddata\n加载数据\n当 \\<unicloud-db> 组件的 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兼容性\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\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 指定按下去的样式类。当 hover-class=\"none\" 时，没有点击态效果 |\n| hover-stop-propagation | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 指定是否阻止本节点的祖先节点出现点击态(祖先节点：指根节点到该节点路径上的所有节点都是这个节点的祖先节点) |\n| hover-start-time | number | 50 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 按住后多久出现点击态，单位毫秒 |\n| hover-stay-time | number | 400 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 手指松开后点击态保留时间，单位毫秒 |","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<template>\r\n  <page-head title=\"view\"></page-head>\r\n  <view class=\"main\" :hover-class=\"hover_class ? 'is-parent-hover' : 'none'\">\r\n    <view class=\"test-view\" :hover-class=\"hover_class ? 'is-hover' : 'none'\" :hover-stop-propagation=\"stop_propagation\"\r\n      :hover-start-time=\"start_time\" :hover-stay-time=\"stay_time\">\r\n    </view>\r\n  </view>\r\n  <scroll-view style=\"flex: 1\">\r\n    <view class=\"content\">\r\n      <boolean-data :defaultValue=\"false\" title=\"是否指定按下去的样式类\" @change=\"change_hover_class_boolean\"></boolean-data>\r\n      <boolean-data :defaultValue=\"false\" title=\"是否阻止本节点的祖先节点出现点击态\"\r\n        @change=\"change_stop_propagation_boolean\"></boolean-data>\r\n      <enum-data :items=\"start_time_enum\" title=\"按住后多久出现点击态\" @change=\"radio_change_start_time_enum\"></enum-data>\r\n      <enum-data :items=\"stay_time_enum\" title=\"手指松开后点击态保留时间\" @change=\"radio_change_stay_time_enum\"></enum-data>\r\n    </view>\r\n  </scroll-view>\r\n</template>\r\n\r\n\r\n<style>\r\n  .main {\r\n    padding: 5px 0;\r\n    flex-direction: row;\r\n    justify-content: center;\r\n  }\r\n\r\n  .test-view {\r\n    height: 200px;\r\n    width: 200px;\r\n    background-color: white;\r\n  }\r\n\r\n  .text {\r\n    color: #777;\r\n    font-size: 13px;\r\n  }\r\n\r\n  .is-hover {\r\n    background-color: #179b16;\r\n  }\r\n\r\n  .is-parent-hover {\r\n    background-color: #aa0000;\r\n  }\r\n</style>\r\n\n```\n\n>Script\n```uts\n\r\n  import { ItemType } from '@/components/enum-data/enum-data-types'\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)"},"scroll-view":{"name":"## scroll-view","description":"> 组件类型：UniScrollViewElement \n\n 可滚动视图容器","compatibility":"\n###\n兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| type | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.11\",\"4.11\"]]}' /> | 渲染模式，可取值 nested |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| nested | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.11\",\"4.11\"]]}' /> | 嵌套模式。用于处理父子 scroll-view 间的嵌套滚动，子节点只能是 nested-scroll-header nested-scroll-body 组件或自定义 refresher |\n| direction | string | \"vertical\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | 滚动方向，可取值 none、all、horizontal、vertical，默认值vertical |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | 禁止滚动 |\n@| all | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 横向竖向都可滚动 app端不支持 |\n@| horizontal | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | 横向滚动 |\n@| vertical | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | 竖向滚动 |\n| associative-container | string | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.11\",\"4.11\"]]}' /> | 关联的滚动容器 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| nested-scroll-view | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.11\",\"4.11\"]]}' /> | 嵌套滚动 |\n| enable-back-to-top | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"4.11\"]]}' /> | iOS点击顶部状态栏滚动条返回顶部，只支持竖向 |\n| bounces | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.0\",\"4.11\"]]}' /> | 控制是否回弹效果 优先级高于rebound |\n| upper-threshold | number | 50 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 距顶部/左边多远时（单位px），触发 scrolltoupper 事件 |\n| lower-threshold | number | 50 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 距底部/右边多远时（单位px），触发 scrolltolower 事件 |\n| scroll-top | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 设置竖向滚动条位置 |\n| scroll-left | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 设置横向滚动条位置 |\n| scroll-into-view | string([string.IDString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素起始位置 |\n| scroll-with-animation | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否在设置滚动条位置时使用滚动动画，设置false没有滚动动画 |\n| refresher-enabled | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.11\",\"3.9\",\"4.11\"]]}' /> | 开启下拉刷新，暂时不支持scroll-x = true横向刷新 |\n| refresher-threshold | number | 45 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.11\",\"3.9\",\"4.11\"]]}' /> | 设置下拉刷新阈值 |\n| refresher-max-drag-distance | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 设置下拉最大拖拽距离（单位px），默认是下拉刷新控件高度的2.5倍 |\n| refresher-default-style | string | \"black\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.11\",\"3.9\",\"4.11\"]]}' /> | 设置下拉刷新默认样式，支持设置 black \\| white \\| none， none 表示不使用默认样式 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| black | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"3.9\",\"4.11\"]]}' /> | 深颜色雪花样式 |\n@| white | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"3.9\",\"4.11\"]]}' /> | 浅白色雪花样式 |\n@| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.11\",\"3.9\",\"4.11\"]]}' /> | 不使用默认样式 |\n| refresher-background | string([string.ColorString](/uts/data-type.md#ide-string)) | \"transparent\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.11\",\"3.9\",\"4.11\"]]}' /> | 设置下拉刷新区域背景颜色，默认透明 |\n| refresher-triggered | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.11\",\"3.9\",\"4.11\"]]}' /> | 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发 |\n| show-scrollbar | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 控制是否出现滚动条 |\n| custom-nested-scroll | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"x\"]]}' /> | 子元素是否开启嵌套滚动 将滚动事件与父元素协商处理 |\n| nested-scroll-child | string([string.IDString](/uts/data-type.md#ide-string)) | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.97\",\"x\"]]}' /> | 嵌套滚动子元素的id属性，不支持ref，scroll-view惯性滚动时会让对应id元素视图进行滚动，子元素滚动时会触发scroll-view的nestedprescroll事件，嵌套子元素需要设置custom-nested-scroll = true |\n| @refresherpulling | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.11\",\"3.9\",\"4.11\"]]}' /> | 下拉刷新控件被下拉 |\n| @refresherrefresh | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.11\",\"3.9\",\"4.11\"]]}' /> | 下拉刷新被触发 |\n| @refresherrestore | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.11\",\"3.9\",\"4.11\"]]}' /> | 下拉刷新被复位 |\n| @refresherabort | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 下拉刷新被中止 |\n| @scrolltoupper | (event: [UniScrollToUpperEvent](#uniscrolltoupperevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 滚动到顶部/左边，会触发 scrolltoupper 事件 |\n| @scrolltolower | (event: [UniScrollToLowerEvent](#uniscrolltolowerevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 滚动到底部/右边，会触发 scrolltolower 事件 |\n| @scroll | (event: [UniScrollEvent](#uniscrollevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |\n| @scrollend | (event: [UniScrollEvent](#uniscrollevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 滚动结束时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |\n| @startnestedscroll | (event: [UniStartNestedScrollEvent](#unistartnestedscrollevent)) => Boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"x\"]]}' /> | 子元素开始滚动时触发, return true表示与子元素开启滚动协商 默认return false! event = {node} |\n| @nestedprescroll | (event: [UniNestedPreScrollEvent](#uninestedprescrollevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"x\"]]}' /> | 子元素滚动时触发，可执行event.consumed(x,y)告知子元素deltaX、deltaY各消耗多少。子元素将执行差值后的deltaX、deltaY滚动距离。不执行consumed(x,y)则表示父元素不消耗deltaX、deltaY。event = {deltaX, deltaY} |\n| @stopnestedscroll | (event: [UniStopNestedScrollEvent](#unistopnestedscrollevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"x\"]]}' /> | 子元素滚动结束或意外终止时触发 |\n| ~~rebound~~ | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"3.9\",\"x\"]]}' /> | 控制是否回弹效果。已废弃，请改用bounces |\n| ~~scroll-y~~ | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 允许纵向滚动，不支持同时设置scroll-x属性为true，同时设置true时scroll-y生效。已废弃，请改用direction |\n| ~~scroll-x~~ | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 允许横向滚动，不支持同时设置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 | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"3.99\",\"x\"]]}' /> | 是否由触摸行为发生的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 | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"3.99\",\"x\"]]}' /> | 是否由触摸行为发生的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<template>\r\n  <!-- #ifdef APP -->\r\n  <scroll-view class=\"page-scroll-view\">\r\n  <!-- #endif -->\r\n    <view>\r\n      <page-head title=\"scroll-view,区域滚动视图\"></page-head>\r\n      <view class=\"uni-padding-wrap uni-common-mt\">\r\n        <view class=\"uni-title uni-common-mt\">\r\n          <text class=\"uni-title-text\">Vertical Scroll</text>\r\n          <text class=\"uni-subtitle-text\">纵向滚动</text>\r\n        </view>\r\n        <view>\r\n          <scroll-view :scroll-top=\"scrollTop\" direction=\"vertical\" class=\"scroll-Y\" scroll-with-animation=\"true\"\r\n            @scrolltoupper=\"upper\" @scrolltolower=\"lower\" @scroll=\"scroll\" @scrollend=\"end\"\r\n            :show-scrollbar=\"showScrollbar\" id=\"verticalScrollView\">\r\n            <view class=\"scroll-view-item uni-bg-red\"><text class=\"text\">A</text></view>\r\n            <view class=\"scroll-view-item uni-bg-green\"><text class=\"text\">B</text></view>\r\n            <view class=\"scroll-view-item uni-bg-blue\"><text class=\"text\">C</text></view>\r\n          </scroll-view>\r\n        </view>\r\n        <view @tap=\"goTop\" class=\"uni-center uni-common-mt\">\r\n          <text class=\"uni-link\">点击这里返回顶部</text>\r\n        </view>\r\n\r\n        <view class=\"uni-title uni-common-mt\">\r\n          <text class=\"uni-title-text\">Horizontal Scroll</text>\r\n          <text class=\"uni-subtitle-text\">横向滚动</text>\r\n        </view>\r\n        <view>\r\n          <scroll-view class=\"scroll-view_H\" direction=\"horizontal\" @scroll=\"scroll\" @scrollend=\"end\"\r\n            :scroll-left=\"scrollLeft\" :show-scrollbar=\"showScrollbar\">\r\n            <view class=\"scroll-view-item_H uni-bg-red\"><text class=\"text\">A</text></view>\r\n            <view class=\"scroll-view-item_H uni-bg-green\"><text class=\"text\">B</text></view>\r\n            <view class=\"scroll-view-item_H uni-bg-blue\"><text class=\"text\">C</text></view>\r\n          </scroll-view>\r\n        </view>\r\n\r\n        <navigator url=\"/pages/component/scroll-view/scroll-view-props\" hover-class=\"none\">\r\n          <button type=\"primary\" class=\"button\">\r\n            非下拉刷新的属性示例\r\n          </button>\r\n        </navigator>\r\n        <view class=\"uni-common-pb\"></view>\r\n\r\n        <navigator url=\"/pages/component/scroll-view/scroll-view-refresher-props\" hover-class=\"none\">\r\n          <button type=\"primary\" class=\"button\">\r\n            下拉刷新的属性示例\r\n          </button>\r\n        </navigator>\r\n        <view class=\"uni-common-pb\"></view>\r\n        <navigator url=\"/pages/component/scroll-view/scroll-view-refresher\" hover-class=\"none\">\r\n          <button type=\"primary\" class=\"button\"> 默认下拉刷新示例 </button>\r\n        </navigator>\r\n        <view class=\"uni-common-pb\"></view>\r\n        <navigator url=\"/pages/component/scroll-view/scroll-view-custom-refresher-props\" hover-class=\"none\">\r\n          <button type=\"primary\" class=\"button\">\r\n            自定义下拉刷新示例\r\n          </button>\r\n        </navigator>\r\n        <view class=\"uni-common-pb\"></view>\r\n      </view>\r\n    </view>\r\n  <!-- #ifdef APP -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n\r\n<style>\r\n  .scroll-Y {\r\n    height: 150px;\r\n  }\r\n\r\n  .scroll-view_H {\r\n    width: 100%;\r\n    flex-direction: row;\r\n  }\r\n\r\n  .scroll-view-item {\r\n    height: 150px;\r\n    justify-content: center;\r\n    align-items: center;\r\n  }\r\n\r\n  .scroll-view-item_H {\r\n    width: 100%;\r\n    height: 150px;\r\n    justify-content: center;\r\n    align-items: center;\r\n  }\r\n\r\n  .text {\r\n    font-size: 18px;\r\n    color: #ffffff;\r\n  }\r\n\r\n  .button {\r\n    margin-top: 15px;\r\n  }\r\n</style>\r\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)"},"swiper-item":{"name":"## swiper-item","description":"> 组件类型：UniSwiperItemElement \n\n swiper的唯一合法子组件。每个swiper-item代表一个滑块。宽高自动设置为100%","compatibility":"\n###\n兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| item-id | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 该 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)"},"swiper":{"name":"## swiper","description":"> 组件类型：UniSwiperElement \n\n 滑块视图容器","compatibility":"\n###\n兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| indicator-dots | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否显示面板指示点 |\n| indicator-color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"rgba(0, 0, 0, .3)\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 指示点颜色 |\n| indicator-active-color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#000000\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 当前选中的指示点颜色 |\n| active-class | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"x\",\"x\"]]}' /> | swiper-item 可见时的 class |\n| changing-class | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"x\",\"x\"]]}' /> | acceleration 设置为 {{true}} 时且处于滑动过程中，中间若干屏处于可见时的class |\n| acceleration | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"x\",\"x\"]]}' /> | 当开启时，会根据滑动速度，连续滑动多屏 |\n| disable-programmatic-animation | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"x\",\"x\"]]}' /> | 是否禁用代码变动触发 swiper 切换时使用动画。 |\n| disable-touch | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"3.9\",\"4.11\"]]}' /> | 是否禁止用户 touch 操作 |\n| touchable | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"x\",\"x\"]]}' /> | 是否监听用户的触摸事件 |\n| easing-function | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"x\",\"x\"]]}' /> | 指定 swiper 切换缓动动画类型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| default | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"x\",\"x\"]]}' /> |  |\n@| linear | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"x\",\"x\"]]}' /> |  |\n@| easeInCubic | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"x\",\"x\"]]}' /> |  |\n@| easeOutCubic | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"x\",\"x\"]]}' /> |  |\n@| easeInOutCubic | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"x\",\"x\"]]}' /> |  |\n| autoplay | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否自动切换 |\n| current | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 当前所在滑块的 index |\n| current-item-id | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 当前所在滑块的 item-id ，不能与 current 被同时指定 |\n| interval | number | 3000 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 自动切换时间间隔 |\n| duration | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 滑动动画时长 |\n| circular | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否采用衔接滑动 |\n| vertical | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 滑动方向是否为纵向 |\n| rebound | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"3.9\",\"4.11\"]]}' /> | 控制是否回弹效果 |\n| previous-margin | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"x\",\"x\"]]}' /> | 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值 |\n| next-margin | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"x\",\"x\"]]}' /> | 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 |\n| display-multiple-items | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"x\",\"x\"]]}' /> | 同时显示的滑块数量 |\n| skip-hidden-item-layout | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"x\",\"x\"]]}' /> | 是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息 |\n| @change | (event: [UniSwiperChangeEvent](#uniswiperchangeevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | current 改变时会触发 change 事件，event.detail = {current: current, source: source} |\n| @transition | (event: [UniSwiperTransitionEvent](#uniswipertransitionevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy} |\n| @animationfinish | (event: [UniSwiperAnimationFinishEvent](#uniswiperanimationfinishevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 动画结束时会触发 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 | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"x\",\"x\"]]}' /> | 切换结束的 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 | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"x\",\"x\"]]}' /> | 动画结束的 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<template>\r\n  <!-- #ifdef APP -->\r\n  <scroll-view class=\"page-scroll-view\">\r\n  <!-- #endif -->\r\n    <view>\r\n      <page-head title=\"swiper,可滑动视图\"></page-head>\r\n      <view class=\"uni-margin-wrap\">\r\n        <swiper id=\"swiper-view\" class=\"swiper\" :vertical=\"verticalSelect\" :indicator-dots=\"dotsSelect\" :autoplay=\"autoplaySelect\"\r\n          :rebound=\"reboundSelect\" :interval=\"intervalSelect\" :circular=\"circularSelect\"\r\n          :indicator-color=\"indicatorColor\" :indicator-active-color=\"indicatorColorActive\"\r\n          :disable-touch=\"disableTouchSelect\" :current=\"currentVal\" :current-item-id=\"currentItemIdVal\"\r\n          @change=\"swiperChange\" @transition=\"swiperTransition\" @animationfinish=\"swiperAnimationfinish\" @touchstart=\"swipertouchStart\">\r\n          <swiper-item item-id=\"A\">\r\n            <view class=\"swiper-item uni-bg-red\"><text class=\"swiper-item-Text\" @touchstart=\"viewtouchStart\">A</text></view>\r\n          </swiper-item>\r\n          <swiper-item item-id=\"B\">\r\n            <view class=\"swiper-item uni-bg-green\"><text class=\"swiper-item-Text\">B</text></view>\r\n          </swiper-item>\r\n          <swiper-item item-id=\"C\">\r\n            <view class=\"swiper-item uni-bg-blue\"><text class=\"swiper-item-Text\">C</text></view>\r\n          </swiper-item>\r\n        </swiper>\r\n      </view>\r\n      <view class=\"uni-list\">\r\n        <view class=\"uni-list-cell uni-list-cell-padding\">\r\n          <view class=\"uni-list-cell-db\">是否显示面板指示点</view>\r\n          <switch :checked=\"dotsSelect\" @change=\"dotsChange\" />\r\n        </view>\r\n        <view class=\"uni-list-cell uni-list-cell-padding\">\r\n          <view class=\"uni-list-cell-db\">是否自动切换</view>\r\n          <switch :checked=\"autoplaySelect\" @change=\"autoplayChange\" />\r\n        </view>\r\n        <view class=\"uni-list-cell uni-list-cell-padding\">\r\n          <view class=\"uni-list-cell-db\">是否循环</view>\r\n          <switch :checked=\"circularSelect\" @change=\"circularChange\" />\r\n        </view>\r\n        <view class=\"uni-list-cell uni-list-cell-padding\">\r\n          <view class=\"uni-list-cell-db\">是否显示rebound效果</view>\r\n          <switch :checked=\"reboundSelect\" @change=\"reboundSelectChange\" />\r\n        </view>\r\n        <view class=\"uni-title uni-list-cell-padding\">间隔时间(毫秒)</view>\r\n        <view class=\"uni-list-cell-padding\">\r\n          <slider @change=\"sliderChange\" :value=\"1000\" :min=\"500\" :max=\"5000\" :show-value=\"true\" />\r\n        </view>\r\n        <view class=\"uni-list-cell uni-list-cell-padding\">\r\n          <view class=\"uni-list-cell-db\">定制指示器颜色</view>\r\n          <switch :checked=\"indicatorColorSelect\" @change=\"indicatorColorChange\" />\r\n        </view>\r\n        <view class=\"uni-list-cell uni-list-cell-padding\">\r\n          <view class=\"uni-list-cell-db\">纵向</view>\r\n          <switch :checked=\"verticalSelect\" @change=\"verticalChange\" />\r\n        </view>\r\n        <view class=\"uni-list-cell uni-list-cell-padding\">\r\n          <view class=\"uni-list-cell-db\">指定current为最后一个元素</view>\r\n          <switch :checked=\"currentSelect\" @change=\"currentChange\" />\r\n        </view>\r\n        <view class=\"uni-list-cell uni-list-cell-padding\">\r\n          <view class=\"uni-list-cell-db\">指定current-item-id为最后一个元素</view>\r\n          <switch :checked=\"currentItemIdSelect\" @change=\"currentItemIdChange\" />\r\n        </view>\r\n        <view class=\"uni-list-cell uni-list-cell-padding\">\r\n          <view class=\"uni-list-cell-db\">禁止用户 touch 操作</view>\r\n          <switch :checked=\"disableTouchSelect\" @change=\"disableTouchChange\" />\r\n        </view>\r\n        <view class=\"uni-list-cell uni-list-cell-padding\">\r\n          <view class=\"uni-list-cell-db\">swiperTransition 是否打印</view>\r\n          <switch :checked=\"swiperTransitionSelect\" @change=\"swiperTransitionChange\" />\r\n        </view>\r\n        <view class=\"uni-list-cell uni-list-cell-padding\">\r\n          <view class=\"uni-list-cell-db\">swiperAnimationfinish 是否打印</view>\r\n          <switch :checked=\"swiperAnimationfinishSelect\" @change=\"swiperAnimationfinishChange\" />\r\n        </view>\r\n        <view class=\"uni-list-cell uni-list-cell-padding\">\r\n          <view class=\"uni-list-cell-db\">swiperChange 是否打印</view>\r\n          <switch :checked=\"swiperChangeSelect\" @change=\"swiperChangeChange\" />\r\n        </view>\r\n\r\n        <navigator url=\"/pages/component/swiper/swiper-list-view\">\r\n          <button type=\"primary\">\r\n            swiper 嵌套 list-view 测试\r\n          </button>\r\n        </navigator>\r\n\r\n      </view>\r\n    </view>\r\n  <!-- #ifdef APP -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n  .swiper {\r\n    height: 150px;\r\n  }\r\n\r\n  .swiper-item {\r\n    width: 100%;\r\n    height: 150px;\r\n  }\r\n\r\n  .swiper-item-Text {\r\n    width: 100%;\r\n    text-align: center;\r\n    line-height: 150px;\r\n  }\r\n</style>\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()\r\n      if(eleRect != null) {\r\n        this.swipeX = eleRect.width - 10\r\n        this.swipeY += eleRect.y + uni.getSystemInfoSync().safeArea.top + 44 + 35\r\n      }\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| 子组件 | 兼容性 |\n| :- | :- |\n| [swiper-item](swiper-item.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"-\"]]}' /> |","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)"},"match-media":{"name":"## match-media","description":"media query 匹配检测节点","compatibility":"\n###\n兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| width | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 页面宽度（px 为单位） |\n| min-width | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 页面最小宽度（px 为单位） |\n| max-width | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 页面最大宽度（px 为单位） |\n| height | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 页面高度（px 为单位） |\n| min-height | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 页面最小高度（px 为单位） |\n| max-height | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 页面最大高度（px 为单位） |\n| orientation | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 屏幕方向（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)"},"movable-area":{"name":"## movable-area","description":"movable-view 的可移动区域","compatibility":"\n###\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)"},"movable-view":{"name":"## movable-view","description":"可移动的视图容器，在页面中可以拖拽滑动","compatibility":"\n###\n兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| direction | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | movable-view的移动方向，属性值有all、vertical、horizontal、none |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| all | - |  |\n@| vertical | - |  |\n@| horizontal | - |  |\n@| none | - |  |\n| inertia | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | movable-view 是否带有惯性。 |\n| out-of-bounds | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 超过可移动区域后，movable-view 是否还可以移动。 |\n| x | string \\\\| number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 定义 x 轴方向的偏移，如果 x 的值不在可移动范围内，会自动移动到可移动范围；改变 x 的值会触发动画。 |\n| y | string \\\\| number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 定义 y 轴方向的偏移，如果 y 的值不在可移动范围内，会自动移动到可移动范围；改变 y 的值会触发动画。 |\n| damping | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 阻尼系数，用于控制 x 或 y 改变时的动画和过界回弹的动画，值越大移动越快。 |\n| friction | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值 2。 |\n| disabled | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 是否禁用。 |\n| scale | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 是否支持双指缩放，默认缩放手势生效区域是在 movable-view 内。 |\n| scale-min | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 定义缩放倍数最小值，默认为 0.5。 |\n| scale-max | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 定义缩放倍数最大值，默认为 10。 |\n| scale-value | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 定义缩放倍数，取值范围为 0.5 - 10 |\n| animation | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 是否使用动画，默认为 true。 |\n| @change | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 拖动过程中触发的事件，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 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 缩放过程中触发的事件，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<template>\r\n  <view class=\"page-body\">\r\n    <page-head title=\"movable-view,可拖动视图\"></page-head>\r\n    <view class=\"uni-padding-wrap uni-common-mt\">\r\n      <view class=\"uni-title uni-common-mt\">\r\n        示例 1\r\n        <text>\\nmovable-view 区域小于 movable-area</text>\r\n      </view>\r\n      <movable-area>\r\n        <movable-view :x=\"x\" :y=\"y\" direction=\"all\" @change=\"onChange\">text</movable-view>\r\n      </movable-area>\r\n      <view @tap=\"tap\" class=\"uni-link uni-center uni-common-mt\">\r\n        点击这里移动至 (30px, 30px)\r\n      </view>\r\n      <view class=\"uni-title uni-common-mt\">\r\n        示例 2\r\n        <text>\\nmovable-view区域大于movable-area</text>\r\n      </view>\r\n      <movable-area>\r\n        <movable-view class=\"max\" direction=\"all\">text</movable-view>\r\n      </movable-area>\r\n      <view class=\"uni-title uni-common-mt\">\r\n        示例 3\r\n        <text>\\n只可以横向移动</text>\r\n      </view>\r\n      <movable-area>\r\n        <movable-view direction=\"horizontal\">text</movable-view>\r\n      </movable-area>\r\n      <view class=\"uni-title uni-common-mt\">\r\n        示例 4\r\n        <text>\\n只可以纵向移动</text>\r\n      </view>\r\n      <movable-area>\r\n        <movable-view direction=\"vertical\">text</movable-view>\r\n      </movable-area>\r\n      <view class=\"uni-title uni-common-mt\">\r\n        示例 5\r\n        <text>\\n可超出边界</text>\r\n      </view>\r\n      <movable-area>\r\n        <movable-view direction=\"all\" out-of-bounds>text</movable-view>\r\n      </movable-area>\r\n      <view class=\"uni-title uni-common-mt\">\r\n        示例 6\r\n        <text>\\n带有惯性</text>\r\n      </view>\r\n      <movable-area>\r\n        <movable-view direction=\"all\" inertia>text</movable-view>\r\n      </movable-area>\r\n      <view class=\"uni-title uni-common-mt\">\r\n        示例 7\r\n        <text>\\n可放缩</text>\r\n      </view>\r\n      <movable-area scale-area>\r\n        <movable-view direction=\"all\" @scale=\"onScale\" scale scale-min=\"0.5\" scale-max=\"4\"\r\n          :scale-value=\"scale\">text</movable-view>\r\n      </movable-area>\r\n      <view @tap=\"tap2\" class=\"uni-link uni-center uni-common-mt\" style=\"padding-bottom:80rpx;\">\r\n        点击这里放大3倍\r\n      </view>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n  movable-view {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    height: 150rpx;\r\n    width: 150rpx;\r\n    background-color: #007AFF;\r\n    color: #fff;\r\n  }\r\n\r\n  movable-area {\r\n    height: 300rpx;\r\n    width: 100%;\r\n    background-color: #D8D8D8;\r\n    overflow: hidden;\r\n  }\r\n\r\n  .max {\r\n    width: 500rpx;\r\n    height: 500rpx;\r\n  }\r\n</style>\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)"},"cover-view":{"name":"## cover-view","description":"覆盖在原生组件之上的文本视图，可覆盖的原生组件包括map、video、canvas、camera，只支持嵌套cover-view、cover-image","compatibility":"\n###\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<template>\n  <view>\n    <page-head title=\"cover-view用于覆盖map、video等原生组件\"></page-head>\n    <view class=\"uni-padding-wrap uni-common-mb\">\n      <text class=\"uni-subtitle-text\">注意：需要正确配置地图服务商的Key才能正常显示地图组件</text>\n    </view>\n    <view class=\"cover-content\">\n      <map :latitude=\"latitude\" :longitude=\"longitude\"></map>\n      <cover-view class=\"cover-view\">简单的cover-view</cover-view>\n      <cover-image class=\"cover-image\" src=\"/static/uni.png\"></cover-image>\n    </view>\n  </view>\n</template>\n\n\n\n<style>\n  map {\n    width: 100%;\n    height: 600px;\n  }\n\n  .cover-content {\n    position: relative;\n  }\n\n  .cover-view {\n    position: absolute;\n    left: 5px;\n    top: 5px;\n    width: 375rpx;\n    text-align: center;\n    background-color: #DDDDDD;\n  }\n\n  .cover-image {\n    position: absolute;\n    left: 0;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    margin: auto;\n    width: 96px;\n    height: 96px;\n  }\n\n  .tips {\n    font-size: 12px;\n    margin-top: 15px;\n    opacity: .8;\n  }\n</style>\n\n```\n\n>Script\n```uts\n\n  export default {\n    data() {\n      return {\n        showMap: false,\n        latitude: 39.909,\n        longitude: 116.39742\n      };\n    },\n    onLoad() {\n      this.showMap = true\n    }\n  }\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)"},"cover-image":{"name":"## cover-image","description":"覆盖在原生组件之上的图片视图，可覆盖的原生组件同cover-view，支持嵌套在cover-view里。","compatibility":"\n###\n兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| v-for | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | - |\n| v-if | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | - |\n| v-show | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | - |\n| src | string([string.ImageURIString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 图标路径，支持临时路径、网络地址（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)"},"list-item":{"name":"## list-item","description":"> 组件类型：UniListItemElement \n\n list-view组件的唯一合法子组件。每个item是一行","compatibility":"\n###\n兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.02 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| type | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.25\"]]}' /> | 对应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)"},"sticky-header":{"name":"## sticky-header","description":"> 组件类型：UniStickyHeaderElement \n\n 吸顶布局容器 <br/><br/> 注意：暂时仅支持作为list-view、sticky-section的子节点, sticky-header不支持css样式！当一个容器视图设置多个sticky-header时，后一个sticky-header会停靠在前一个sticky-header的末尾处。","compatibility":"\n###\n兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.02 | 3.93 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| padding | array\\<number> | [0,0,0,0\\] | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.02\",\"3.98\",\"4.11\"]]}' /> | 长度为 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<template>\r\n  <list-view :scroll-y=\"true\" class=\"page\" rebound=\"false\" show-scrollbar=false :scroll-top=\"scroll_top_input\"\r\n    :refresher-enabled=\"refresher_enabled_boolean\" :refresher-triggered=\"refresher_triggered_boolean\"\r\n    @refresherrefresh=\"list_view_refresherrefresh\">\r\n    <list-item type=1>\r\n      <swiper indicator-dots=\"true\" circular=\"true\" style=\"height: 240px;\">\r\n        <swiper-item v-for=\"i in 3\" :item-id=\"i + ''\">\r\n          <image src=\"/static/shuijiao.jpg\" style=\"height: 240px; width: 100%;\"></image>\r\n          <text style=\"position: absolute;\">{{i}}</text>\r\n        </swiper-item>\r\n      </swiper>\r\n    </list-item>\r\n    <list-item class=\"content-item\" type=2>\r\n      <text class=\"text\">向上滑动页面，体验sticky-header吸顶效果。</text>\r\n    </list-item>\r\n    <sticky-header>\r\n      <scroll-view style=\"background-color: #f5f5f5; flex-direction: row;\" direction=\"horizontal\"\r\n        :show-scrollbar=\"false\">\r\n        <view style=\"align-self: flex-start; flex-direction: row;\">\r\n          <text ref=\"swipertab\" class=\"sift-item\" v-for=\"(name,index) in sift_item\" @click=\"clickTH(index)\">\r\n            {{name}}\r\n          </text>\r\n        </view>\r\n      </scroll-view>\r\n    </sticky-header>\r\n\r\n    <list-item v-for=\"(item,index) in list_item\" :key=\"index\" class=\"content-item\" type=3>\r\n      <text class=\"text\">{{item}}</text>\r\n    </list-item>\r\n  </list-view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n  .page {\r\n    flex: 1;\r\n    background-color: #f5f5f5;\r\n  }\r\n\r\n  .content-item {\r\n    padding: 15px;\r\n    margin-bottom: 10px;\r\n    background-color: #fff;\r\n  }\r\n\r\n  .text {\r\n    font-size: 14px;\r\n    color: #666;\r\n    line-height: 20px;\r\n  }\r\n\r\n  .sift-item {\r\n    color: #555;\r\n    font-size: 16px;\r\n    padding: 12px 15px;\r\n  }\r\n</style>\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<string>,\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<string> = []\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)"},"sticky-section":{"name":"## sticky-section","description":"> 组件类型：UniStickySectionElement \n\n 吸顶布局容器 <br/><br/> 注意：暂时仅支持作为list-view的子节点, sticky-section不支持css样式！","compatibility":"\n###\n兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.02 | 3.98 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| push-pinned-header | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.98\",\"4.11\"]]}' /> | sticky-section元素重叠时是否继续上推 |\n| padding | array\\<number> | [0,0,0,0\\] | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.02\",\"3.98\",\"4.11\"]]}' /> | 长度为 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<template>\r\n  <page-head title=\"sticky-section\"></page-head>\r\n  <list-view id=\"list-view\" ref=\"list-view\" show-scrollbar=false class=\"page\" :scroll-into-view=\"scrollIntoView\"\r\n    @scroll=\"onScroll\" @scrollend=\"onScrollEnd\" bounces=\"false\">\r\n    <list-item style=\"padding: 10px; margin: 5px 0;align-items: center;\" :type=20>\r\n      <button @click=\"gotoStickyHeader('C')\" size=\"mini\">跳转到id为C的sticky-header位置上</button>\r\n    </list-item>\r\n    <list-item style=\"padding: 10px; margin: 5px 0;align-items: center;\" :type=20>\r\n      <button @click=\"appendSectionItem(0)\" size=\"mini\">第一组 section 新增5条内容</button>\r\n    </list-item>\r\n    <list-item style=\"padding: 10px; margin: 5px 0;align-items: center;\" :type=20>\r\n      <button @click=\"deleteSection()\" size=\"mini\">删除第一组 section</button>\r\n    </list-item>\r\n    <sticky-section v-for=\"(section) in sectionArray\" :key=\"section.name\" :padding=\"sectionPadding\"\r\n      :push-pinned-header=\"true\">\r\n      <sticky-header :id=\"section.name\">\r\n        <text class=\"sticky-header-text\">{{section.name}}</text>\r\n      </sticky-header>\r\n      <list-item v-for=\"(list) in section.list\" :key=\"list.text\" :name=\"list.text\" class=\"content-item\" :type=10>\r\n        <text class=\"text\">{{list.text}}</text>\r\n      </list-item>\r\n    </sticky-section>\r\n    <list-item style=\"padding: 10px; margin: 5px 0;align-items: center;\" :type=30>\r\n      <!-- <text style=\"color: #aaa\">到底了</text> -->\r\n      <button @click=\"toTop\" size=\"mini\">回到顶部</button>\r\n    </list-item>\r\n  </list-view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n  .page {\r\n    flex: 1;\r\n    background-color: #f5f5f5;\r\n  }\r\n\r\n  .sticky-header-text {\r\n    font-size: 16px;\r\n    padding: 8px;\r\n    color: #959595;\r\n    background-color: #f5f5f5;\r\n  }\r\n\r\n  .content-item {\r\n    padding: 15px;\r\n    margin-bottom: 10px;\r\n    background-color: #fff;\r\n  }\r\n</style>\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<number>,\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)"},"list-view":{"name":"## list-view","description":"> 组件类型：UniListViewElement \n\n 列表组件","compatibility":"\n###\n兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.02 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| direction | string | \"vertical\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.0\",\"4.11\"]]}' /> | 滚动方向，可取值 none、horizontal、vertical，默认值vertical。注：iOS 平台仅支持vertical |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.02\",\"4.0\",\"4.11\"]]}' /> | 禁止滚动 |\n@| horizontal | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.0\",\"x\"]]}' /> | 横向滚动 |\n@| vertical | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.02\",\"4.0\",\"4.11\"]]}' /> | 竖向滚动 |\n| associative-container | string | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.11\",\"4.11\"]]}' /> | 关联的滚动容器 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| nested-scroll-view | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.11\",\"4.11\"]]}' /> | 嵌套滚动 |\n| bounces | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.0\",\"4.11\"]]}' /> | 控制是否回弹效果 优先级高于rebound |\n| upper-threshold | number | 50 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.02\",\"3.9\",\"4.11\"]]}' /> | 距顶部/左边多远时（单位px），触发 scrolltoupper 事件 |\n| lower-threshold | number | 50 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.02\",\"3.9\",\"4.11\"]]}' /> | 距底部/右边多远时（单位px），触发 scrolltolower 事件 |\n| scroll-top | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.02\",\"3.9\",\"4.11\"]]}' /> | 设置竖向滚动条位置 |\n| scroll-left | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 设置横向滚动条位置 |\n| show-scrollbar | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.02\",\"3.9\",\"4.11\"]]}' /> | 控制是否出现滚动条 |\n| scroll-into-view | string([string.IDString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素起始位置 |\n| scroll-with-animation | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.02\",\"3.9\",\"4.11\"]]}' /> | 是否在设置滚动条位置时使用滚动动画，设置false没有滚动动画 |\n| refresher-enabled | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.11\",\"3.9\",\"4.11\"]]}' /> | 开启下拉刷新，暂时不支持scroll-x = true横向刷新 |\n| refresher-threshold | number | 45 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.11\",\"3.9\",\"4.11\"]]}' /> | 设置下拉刷新阈值, 仅 refresher-default-style = 'none' 自定义样式下生效 |\n| refresher-max-drag-distance | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 设置下拉最大拖拽距离（单位px），默认是下拉刷新控件高度的2.5倍 |\n| refresher-default-style | string | \"black\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.11\",\"3.9\",\"4.11\"]]}' /> | 设置下拉刷新默认样式，支持设置 black \\| white \\| none， none 表示不使用默认样式 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| black | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"3.9\",\"4.11\"]]}' /> | 深颜色雪花样式 |\n@| white | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"3.9\",\"4.11\"]]}' /> | 浅白色雪花样式 |\n@| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.11\",\"3.93\",\"4.11\"]]}' /> | 不使用默认样式 |\n| refresher-background | string([string.ColorString](/uts/data-type.md#ide-string)) | \"transparent\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.11\",\"3.9\",\"4.11\"]]}' /> | 设置下拉刷新区域背景颜色，默认透明 |\n| refresher-triggered | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.11\",\"3.9\",\"4.11\"]]}' /> | 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发 |\n| enable-back-to-top | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"4.11\"]]}' /> | iOS点击顶部状态栏滚动条返回顶部，只支持竖向 |\n| custom-nested-scroll | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 子元素是否开启嵌套滚动 将滚动事件与父元素协商处理 |\n| @refresherpulling | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.11\",\"3.9\",\"4.11\"]]}' /> | 下拉刷新控件被下拉 |\n| @refresherrefresh | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.11\",\"3.9\",\"4.11\"]]}' /> | 下拉刷新被触发 |\n| @refresherrestore | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.11\",\"3.9\",\"4.11\"]]}' /> | 下拉刷新被复位 |\n| @refresherabort | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.11\",\"3.9\",\"4.11\"]]}' /> | 下拉刷新被中止 |\n| @scrolltoupper | (event: [UniScrollToUpperEvent](#uniscrolltoupperevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.02\",\"3.9\",\"4.11\"]]}' /> | 滚动到顶部/左边，会触发 scrolltoupper 事件 |\n| @scrolltolower | (event: [UniScrollToLowerEvent](#uniscrolltolowerevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.02\",\"3.9\",\"4.11\"]]}' /> | 滚动到底部/右边，会触发 scrolltolower 事件 |\n| @scroll | (event: [UniScrollEvent](#uniscrollevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.02\",\"3.9\",\"4.11\"]]}' /> | 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |\n| @scrollend | (event: [UniScrollEvent](#uniscrollevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 滚动结束时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |\n| ~~rebound~~ | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 控制是否回弹效果。已废弃，请改用bounces |\n| ~~scroll-y~~ | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 允许纵向滚动，不支持同时设置scroll-x属性为true，同时设置true时scroll-y生效。已废弃，请改用direction |\n| ~~scroll-x~~ | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"x\"]]}' /> | 允许横向滚动，不支持同时设置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\n\n<template>\n  <view class=\"main\">\n    <list-view :direction=\"scroll_direction\" :rebound=\"bounces_boolean\" :upper-threshold=\"upper_threshold_input\"\n      :lower-threshold=\"lower_threshold_input\" :scroll-top=\"scroll_top_input\" :scroll-left=\"scroll_left_input\"\n      :show-scrollbar=\"show_scrollbar_boolean\" :scroll-into-view=\"scrollIntoView\"\n      :scroll-with-animation=\"scroll_with_animation_boolean\" :refresher-enabled=\"refresher_enabled_boolean\"\n      :refresher-background=\"refresher_background_input\" :refresher-triggered=\"refresher_triggered_boolean\"\n      :refresher-default-style=\"refresher_default_style_input\" @click=\"list_view_click\"\n      @touchstart=\"list_view_touchstart\" @touchmove=\"list_view_touchmove\" @touchcancel=\"list_view_touchcancel\"\n      @touchend=\"list_view_touchend\" @tap=\"list_view_tap\" @longpress=\"list_view_longpress\"\n      @refresherpulling=\"list_view_refresherpulling\" @refresherrefresh=\"list_view_refresherrefresh\"\n      @refresherrestore=\"list_view_refresherrestore\" @refresherabort=\"list_view_refresherabort\"\n      @scrolltoupper=\"list_view_scrolltoupper\" ref=\"listview\" @scrolltolower=\"list_view_scrolltolower\"\n      @scroll=\"list_view_scroll\" @scrollend=\"list_view_scrollend\" style=\"width:100%;\" id=\"listview\">\n      <list-item v-for=\"key in scrollData\" :key=\"key\" :id=\"key\" @click=\"list_item_click\"\n        @touchstart=\"list_item_touchstart\" @touchmove=\"list_item_touchmove\" @touchcancel=\"list_item_touchcancel\"\n        @touchend=\"list_item_touchend\" @tap=\"list_item_tap\" @longpress=\"list_item_longpress\" class=\"list-item\">\n        <text>{{key}}</text>\n      </list-item>\n      <!-- #ifdef APP -->\n      <list-item slot=\"refresher\" class=\"refresh-box\">\n        <text class=\"tip-text\">{{text[state]}}</text>\n      </list-item>\n      <!-- #endif -->\n    </list-view>\n  </view>\n\n  <scroll-view style=\"flex:1\" direction=\"vertical\">\n    <view class=\"content\">\n      <!-- #ifdef APP -->\n      <boolean-data :defaultValue=\"false\" title=\"设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发\"\n        @change=\"change_refresher_triggered_boolean\"></boolean-data>\n      <boolean-data :defaultValue=\"false\" title=\"开启下拉刷新\" @change=\"change_refresher_enabled_boolean\"></boolean-data>\n      <boolean-data :defaultValue=\"false\" title=\"开启自定义样式\" @change=\"change_refresher_style_boolean\"></boolean-data>\n      <!-- #endif -->\n      <boolean-data :defaultValue=\"false\" title=\"是否在设置滚动条位置时使用滚动动画，设置false没有滚动动画\"\n        @change=\"change_scroll_with_animation_boolean\"></boolean-data>\n      <boolean-data :defaultValue=\"false\" title=\"控制是否出现滚动条\" @change=\"change_show_scrollbar_boolean\"></boolean-data>\n      <!-- #ifdef APP -->\n      <boolean-data :defaultValue=\"true\" title=\"控制是否回弹效果\" @change=\"change_bounces_boolean\"></boolean-data>\n      <!-- #endif -->\n      <boolean-data :defaultValue=\"true\" title=\"允许纵向滚动\" @change=\"change_scroll_y_boolean\"></boolean-data>\n      <!-- #ifdef APP -->\n      <boolean-data :defaultValue=\"false\" title=\"允许横向滚动\" @change=\"change_scroll_x_boolean\"></boolean-data>\n      <!-- #endif -->\n      <input-data defaultValue=\"50\" title=\"距顶部/左边多远时（单位px），触发 scrolltoupper 事件\" type=\"number\"\n        @confirm=\"confirm_upper_threshold_input\"></input-data>\n      <input-data defaultValue=\"50\" title=\"距底部/右边多远时（单位px），触发 scrolltolower 事件\" type=\"number\"\n        @confirm=\"confirm_lower_threshold_input\"></input-data>\n      <input-data defaultValue=\"0\" title=\"设置竖向滚动条位置\" type=\"number\" @confirm=\"confirm_scroll_top_input\"></input-data>\n      <!-- #ifdef APP -->\n      <input-data defaultValue=\"0\" title=\"设置横向滚动条位置\" type=\"number\" @confirm=\"confirm_scroll_left_input\"></input-data>\n      <input-data defaultValue=\"#FFF\" title=\"设置下拉刷新区域背景颜色\" type=\"text\"\n        @confirm=\"confirm_refresher_background_input\"></input-data>\n      <enum-data :items=\"size_enum\" title=\"通过id位置跳转\" @change=\"item_change_size_enum\"></enum-data>\n      <navigator url=\"/pages/component/list-view/list-view-refresh\">\n        <button type=\"primary\" class=\"button\">\n          list-view 下拉刷新\n        </button>\n      </navigator>\n      <!-- #endif -->\n      <navigator url=\"/pages/component/list-view/list-view-multiplex\">\n        <button type=\"primary\" class=\"button\">\n          list-view 对list-item复用测试\n        </button>\n      </navigator>\n      <navigator url=\"/pages/component/list-view/list-view-multiplex-input\">\n        <button type=\"primary\" class=\"button\">\n          list-view 复用测试（item中嵌入input）\n        </button>\n      </navigator>\n      <navigator url=\"/pages/component/list-view/list-view-multiplex-video\">\n        <button type=\"primary\" class=\"button\">\n          list-view 复用测试（item中嵌入video）\n        </button>\n      </navigator>\n      <navigator url=\"/pages/component/list-view/list-view-children-in-slot\">\n        <button type=\"primary\" class=\"button\">\n          list-view 测试插槽中子组件增删\n        </button>\n      </navigator>\n    </view>\n  </scroll-view>\n</template>\n\n<style>\n  .main {\n    max-height: 250px;\n    padding: 5px 0;\n    border-bottom: 1px solid rgba(0, 0, 0, .06);\n    flex-direction: row;\n    justify-content: center;\n  }\n\n  .main .list-item {\n    width: 100%;\n    height: 250px;\n    border: 1px solid #666;\n    background-color: #66ccff;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .tip-text {\n    color: #888;\n    font-size: 12px;\n  }\n\n  .refresh-box {\n    justify-content: center;\n    align-items: center;\n    flex-direction: row;\n    height: 45px;\n    width: 100%;\n  }\n\n  .button {\n    margin-top: 15px;\n  }\n</style>\n\n```\n\n>Script\n```uts\n\n  type ScrollEventTest = {\n    type : string;\n    target : UniElement | null;\n    currentTarget : UniElement | null;\n    direction ?: string\n  }\n  import { ItemType } from '@/components/enum-data/enum-data-types'\n  export default {\n    data() {\n      return {\n        refresher_triggered_boolean: false,\n        refresher_enabled_boolean: false,\n        scroll_with_animation_boolean: false,\n        show_scrollbar_boolean: false,\n        bounces_boolean: true,\n        scroll_y_boolean: true,\n        scroll_x_boolean: false,\n        scroll_direction: \"vertical\",\n        upper_threshold_input: 50,\n        lower_threshold_input: 50,\n        scroll_top_input: 0,\n        scroll_left_input: 0,\n        refresher_background_input: \"#FFF\",\n        scrollData: [] as Array<string>,\n        size_enum: [{ \"value\": 0, \"name\": \"item---0\" }, { \"value\": 3, \"name\": \"item---3\" }] as ItemType[],\n        scrollIntoView: \"\",\n        refresherrefresh: false,\n        refresher_default_style_input: \"black\",\n        text: ['继续下拉执行刷新', '释放立即刷新', '刷新中', \"\"],\n        state: 3,\n        reset: true,\n        // 自动化测试\n        isScrollTest: '',\n        isScrolltolowerTest: '',\n        isScrolltoupperTest: '',\n        scrollDetailTest: null as UniScrollEventDetail | null,\n        scrollEndDetailTest: null as UniScrollEventDetail | null,\n      }\n    },\n    onLoad() {\n      let lists : Array<string> = []\n      for (let i = 0; i < 10; i++) {\n        lists.push(\"item---\" + i)\n      }\n      this.scrollData = lists\n    },\n    methods: {\n      list_view_click() { console.log(\"组件被点击时触发\") },\n      list_view_touchstart() { console.log(\"手指触摸动作开始\") },\n      list_view_touchmove() { console.log(\"手指触摸后移动\") },\n      list_view_touchcancel() { console.log(\"手指触摸动作被打断，如来电提醒，弹窗\") },\n      list_view_touchend() { console.log(\"手指触摸动作结束\") },\n      list_view_tap() { console.log(\"手指触摸后马上离开\") },\n      list_view_longpress() { console.log(\"如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。\") },\n      list_view_refresherpulling(e : RefresherEvent) {\n        console.log(\"下拉刷新控件被下拉\")\n        if (this.reset) {\n          if (e.detail.dy > 45) {\n            this.state = 1\n          } else {\n            this.state = 0\n          }\n        }\n      },\n      list_view_refresherrefresh() {\n        console.log(\"下拉刷新被触发 \")\n        this.refresherrefresh = true\n        this.refresher_triggered_boolean = true\n        this.state = 2\n        this.reset = false;\n        setTimeout(() => {\n          this.refresher_triggered_boolean = false\n        }, 1500)\n      },\n      list_view_refresherrestore() {\n        this.refresherrefresh = false\n        this.state = 3\n        this.reset = true\n        console.log(\"下拉刷新被复位\")\n      },\n      list_view_refresherabort() { console.log(\"下拉刷新被中止\") },\n      list_view_scrolltoupper(e : UniScrollToUpperEvent) {\n        console.log(\"滚动到顶部/左边，会触发 scrolltoupper 事件  direction=\" + e.detail.direction)\n        this.checkEventTest({\n          type: e.type,\n          target: e.target,\n          currentTarget: e.currentTarget,\n          direction: e.detail.direction,\n        } as ScrollEventTest, 'scrolltoupper')\n      },\n      list_view_scrolltolower(e : UniScrollToLowerEvent) {\n        console.log(\"滚动到底部/右边，会触发 scrolltolower 事件  direction=\" + e.detail.direction)\n        this.checkEventTest({\n          type: e.type,\n          target: e.target,\n          currentTarget: e.currentTarget,\n          direction: e.detail.direction,\n        } as ScrollEventTest, 'scrolltolower')\n      },\n      list_view_scroll(e : UniScrollEvent) {\n        console.log(\"滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}\")\n        this.scrollDetailTest = e.detail\n        this.checkEventTest({\n          type: e.type,\n          target: e.target,\n          currentTarget: e.currentTarget\n        } as ScrollEventTest, 'scroll')\n      },\n      list_view_scrollend(e : UniScrollEvent) {\n        console.log(\"滚动结束时触发\", e.detail)\n        this.scrollEndDetailTest = e.detail\n        this.checkEventTest({\n          type: e.type,\n          target: e.target,\n          currentTarget: e.currentTarget\n        } as ScrollEventTest, 'scrollend')\n      },\n      list_item_click() { console.log(\"list-item组件被点击时触发\") },\n      list_item_touchstart() { console.log(\"手指触摸list-item组件动作开始\") },\n      list_item_touchmove() { console.log(\"手指触摸list-item组件后移动\") },\n      list_item_touchcancel() { console.log(\"手指触摸list-item组件动作被打断，如来电提醒，弹窗\") },\n      list_item_touchend() { console.log(\"手指触摸list-item组件动作结束\") },\n      list_item_tap() { console.log(\"手指触摸list-item组件后马上离开\") },\n      list_item_longpress() { console.log(\"list-item组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。\") },\n      change_refresher_triggered_boolean(checked : boolean) { this.refresher_triggered_boolean = checked },\n      change_refresher_enabled_boolean(checked : boolean) { this.refresher_enabled_boolean = checked },\n      change_scroll_with_animation_boolean(checked : boolean) { this.scroll_with_animation_boolean = checked },\n      change_show_scrollbar_boolean(checked : boolean) { this.show_scrollbar_boolean = checked },\n      change_bounces_boolean(checked : boolean) { this.bounces_boolean = checked },\n      change_scroll_y_boolean(checked : boolean) {\n        this.scroll_y_boolean = checked\n        this.change_scroll_direction()\n      },\n      change_scroll_x_boolean(checked : boolean) {\n        this.scroll_x_boolean = checked\n        this.change_scroll_direction()\n      },\n      change_scroll_direction() {\n        if (this.scroll_y_boolean && this.scroll_x_boolean || this.scroll_y_boolean) {\n          this.scroll_direction = \"vertical\"\n        } else if (!this.scroll_y_boolean && !this.scroll_x_boolean) {\n          this.scroll_direction = \"none\"\n        } else if (!this.scroll_y_boolean && this.scroll_x_boolean) {\n          this.scroll_direction = \"horizontal\"\n        }\n      },\n      confirm_upper_threshold_input(value : number) { this.upper_threshold_input = value },\n      confirm_lower_threshold_input(value : number) { this.lower_threshold_input = value },\n      confirm_scroll_top_input(value : number) { this.scroll_top_input = value },\n      confirm_scroll_left_input(value : number) { this.scroll_left_input = value },\n      confirm_refresher_background_input(value : string) { this.refresher_background_input = value },\n      item_change_size_enum(index : number) { this.scrollIntoView = \"item---\" + index },\n      // 自动化测试专用（由于事件event参数对象中存在循环引用，在ios端JSON.stringify报错，自动化测试无法page.data获取）\n      checkEventTest(e : ScrollEventTest, eventName : String) {\n        const isPass = e.type === eventName && e.target instanceof UniElement && e.currentTarget instanceof UniElement;\n        const result = isPass ? `${eventName}:Success` : `${eventName}:Fail`;\n        switch (eventName) {\n          case 'scroll':\n            this.isScrollTest = result\n            break;\n          case 'scrolltolower':\n            this.isScrolltolowerTest = result + `-${e.direction}`\n            break;\n          case 'scrolltoupper':\n            this.isScrolltoupperTest = result + `-${e.direction}`\n            break;\n          default:\n            break;\n        }\n      },\n      //自动化测试例专用\n      check_scroll_height() : Boolean {\n        var listElement = this.$refs[\"listview\"] as UniElement\n        console.log(\"check_scroll_height--\" + listElement.scrollHeight)\n        if (listElement.scrollHeight > 2000) {\n          return true\n        }\n        return false\n      },\n      //自动化测试例专用\n      check_scroll_width() : Boolean {\n        var listElement = this.$refs[\"listview\"] as UniElement\n        console.log(\"check_scroll_width\" + listElement.scrollWidth)\n        if (listElement.scrollWidth > 2000) {\n          return true\n        }\n        return false\n      },\n      change_refresher_style_boolean(checked : boolean) {\n        if (checked) {\n          this.refresher_default_style_input = \"none\"\n        } else {\n          this.refresher_default_style_input = \"black\"\n        }\n      }\n    }\n  }\n\n```\n\n:::","children":"### 子组件 @children-tags\n| 子组件 | 兼容性 |\n| :- | :- |\n| [list-item](list-item.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"-\"]]}' /> |\n| [sticky-header](sticky-header.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"-\"]]}' /> |\n| [sticky-section](sticky-section.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"-\"]]}' /> |","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)"},"nested-scroll-header":{"name":"## nested-scroll-header","description":"> 组件类型：UniNestedScrollHeaderElement \n\n  scroll-view 嵌套模式场景中属于外层 scroll-view 的节点，仅支持作为 \\<scroll-view type='nested'> 嵌套模式的直接子节点。不支持复数子节点，渲染时会取其第一个子节点来渲染","compatibility":"\n###\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<template>\r\n  <scroll-view style=\"flex:1\" type=\"nested\" direction=\"vertical\">\r\n    <nested-scroll-header>\r\n      <view class=\"scroll-header-tiem1\">\r\n        <text>会渲染的nested-scroll-header</text>\r\n      </view>\r\n      <view class=\"scroll-header-tiem1\">\r\n        <text>不会渲染nested-scroll-header，因为 nested-scroll-header 只会渲染第一个子节点</text>\r\n      </view>\r\n    </nested-scroll-header>\r\n    <nested-scroll-header>\r\n      <swiper ref=\"header\" indicator-dots=\"true\" circular=\"true\">\r\n        <swiper-item v-for=\"i in 3\" :item-id=\"i\">\r\n          <view class=\"scroll-header-tiem2\">\r\n            <text>如果存在多个头部节点，那么就使用多个 nested-scroll-header 来将其包裹</text>\r\n          </view>\r\n        </swiper-item>\r\n      </swiper>\r\n    </nested-scroll-header>\r\n    <nested-scroll-body>\r\n      <scroll-view style=\"flex:1\" associative-container=\"nested-scroll-view\">\r\n        <view v-for=\"key in scrollData\">\r\n          <view class=\"scroll-item\">\r\n            <text class=\"scroll-item-title\">{{key}}</text>\r\n          </view>\r\n        </view>\r\n      </scroll-view>\r\n    </nested-scroll-body>\r\n  </scroll-view>\r\n</template>\r\n\r\n<script>\r\n  export default {\r\n    data() {\r\n      return {\r\n        scrollData: [] as Array<string>,\r\n      }\r\n    },\r\n    onLoad() {\r\n      let lists : Array<string> = []\r\n      for (let i = 0; i < 30; i++) {\r\n        lists.push(\"item---\" + i)\r\n      }\r\n      this.scrollData = lists\r\n    },\r\n    methods: {\r\n    }\r\n  }\r\n</script>\r\n\r\n<style>\r\n  .scroll-item {\r\n    margin-left: 6px;\r\n    margin-right: 6px;\r\n    margin-top: 6px;\r\n    background-color: #fff;\r\n    border-radius: 4px;\r\n  }\r\n\r\n  .scroll-item-title {\r\n    width: 100%;\r\n    height: 60px;\r\n    line-height: 60px;\r\n    text-align: center;\r\n    color: #555;\r\n  }\r\n\r\n  .scroll-header-tiem1 {\r\n    height: 200px;\r\n    background-color: #66ccff;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n\r\n  .scroll-header-tiem2 {\r\n    height: 100px;\r\n    background-color: #89ff8d;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n</style>\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)"},"nested-scroll-body":{"name":"## nested-scroll-body","description":"> 组件类型：UniNestedScrollHeaderElement \n\n  scroll-view 嵌套模式场景中属于嵌套内层 scroll-view 的父节点，仅支持作为 \\<scroll-view type='nested'> 嵌套模式的直接子节点。不支持复数子节点，渲染时会取其第一个子节点来渲染","compatibility":"\n###\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<template>\r\n  <scroll-view style=\"flex:1\" type=\"nested\" direction=\"vertical\" refresher-enabled=\"true\" refresher-default-style=\"none\"\r\n    bounces=\"false\" :refresher-triggered=\"refresherTriggered\" @refresherpulling=\"onRefresherpulling\"\r\n    @refresherrefresh=\"onRefresherrefresh\" @refresherrestore=\"onRefreshrestore\">\r\n    <nested-scroll-header>\r\n      <swiper ref=\"header\" indicator-dots=\"true\" circular=\"true\">\r\n        <swiper-item v-for=\"i in 3\" :item-id=\"i\">\r\n          <image src=\"/static/shuijiao.jpg\" style=\"width:100% ;height: 240px;\"></image>\r\n        </swiper-item>\r\n      </swiper>\r\n    </nested-scroll-header>\r\n    <nested-scroll-body>\r\n      <view style=\"flex:1\">\r\n        <view style=\"flex-direction: row;\">\r\n          <text style=\"padding: 12px 15px;\">nested-scroll-body</text>\r\n        </view>\r\n        <!-- 嵌套滚动仅可能关闭bounces效果 会影响嵌套滚动不连贯 -->\r\n        <list-view bounces=\"false\" id=\"body-list\" :scroll-top=\"scrollTop\" style=\"flex:1\"\r\n          associative-container=\"nested-scroll-view\">\r\n          <list-item v-for=\"key in scrollData\">\r\n            <view class=\"scroll-item\">\r\n              <text class=\"scroll-item-title\">{{key}}</text>\r\n            </view>\r\n          </list-item>\r\n        </list-view>\r\n      </view>\r\n      <text>不会渲染，因为 nested-scroll-body 只会渲染第一个子节点</text>\r\n    </nested-scroll-body>\r\n    <!-- 支持自定义样式下拉刷新slot组件 -->\r\n    <refresh-box slot=\"refresher\" :state=\"state\"></refresh-box>\r\n  </scroll-view>\r\n</template>\r\n\r\n<script>\r\n  import refreshBox from '../../template/custom-refresher/refresh-box/refresh-box.uvue';\r\n  export default {\r\n    components: { refreshBox },\r\n    data() {\r\n      return {\r\n        scrollData: [] as Array<string>,\r\n        scrollTop: 0,\r\n        refresherTriggered: false,\r\n        pullingDistance: 0,\r\n        resetting: false\r\n      }\r\n    },\r\n    computed: {\r\n      state() : number {\r\n        if (this.resetting) {\r\n          return 3;\r\n        }\r\n        if (this.refresherTriggered) {\r\n          return 2\r\n        }\r\n        if (this.pullingDistance > 45) {\r\n          return 1\r\n        } else {\r\n          return 0;\r\n        }\r\n      }\r\n    },\r\n    onLoad() {\r\n      let lists : Array<string> = []\r\n      for (let i = 0; i < 30; i++) {\r\n        lists.push(\"item---\" + i)\r\n      }\r\n      this.scrollData = lists\r\n    },\r\n    methods: {\r\n      onRefresherpulling(e : RefresherEvent) {\r\n        this.pullingDistance = e.detail.dy;\r\n      },\r\n      onRefresherrefresh() {\r\n        this.refresherTriggered = true\r\n        setTimeout(() => {\r\n          this.refresherTriggered = false\r\n          this.resetting = true;\r\n        }, 1500)\r\n      },\r\n      onRefreshrestore() {\r\n        this.pullingDistance = 0\r\n        this.resetting = false;\r\n      },\r\n      //自动化测试使用\r\n      testBodyScrollBy(y : number) {\r\n        this.scrollTop = y\r\n      }\r\n    }\r\n  }\r\n</script>\r\n\r\n<style>\r\n  .scroll-item {\r\n    margin-left: 6px;\r\n    margin-right: 6px;\r\n    margin-top: 6px;\r\n    background-color: #fff;\r\n    border-radius: 4px;\r\n  }\r\n\r\n  .scroll-item-title {\r\n    width: 100%;\r\n    height: 60px;\r\n    line-height: 60px;\r\n    text-align: center;\r\n    color: #555;\r\n  }\r\n\r\n  .scroll-header-tiem {\r\n    height: 200px;\r\n    background-color: #66ccff;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n</style>\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)"},"icon":{"name":"## icon","description":"图标","compatibility":"\n###\n兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| type | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 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 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | icon的大小，单位px |\n| color | string([string.ColorString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 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)"},"text":{"name":"## text","description":"> 组件类型：[UniTextElement](/dom/unitextelement.md) \n\n 文本","compatibility":"\n###\n兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| selectable | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 文本是否可选 |\n| space | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 显示连续空格 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| ensp | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 中文字符空格一半大小 |\n@| emsp | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 中文字符空格大小 |\n@| nbsp | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 根据字体设置的空格大小 |\n| decode | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否解码 (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<template>\r\n  <!-- #ifdef APP -->\r\n  <scroll-view style=\"flex: 1\">\r\n  <!-- #endif -->\r\n    <page-head :title=\"title\"></page-head>\r\n    <view class=\"uni-padding-wrap uni-common-mt\">\r\n      <view class=\"text-box\">\r\n        <text class=\"text\">{{ text }}</text>\r\n      </view>\r\n      <view class=\"uni-btn-v\">\r\n        <button class=\"uni-btn\" type=\"primary\" :disabled=\"!canAdd\" @click=\"add\">\r\n          add line\r\n        </button>\r\n        <button class=\"uni-btn\" type=\"warn\" :disabled=\"!canRemove\" @click=\"remove\">\r\n          remove line\r\n        </button>\r\n        <button class=\"uni-btn\" type=\"primary\" @click=\"textProps\">\r\n          更多属性示例\r\n        </button>\r\n      </view>\r\n    </view>\r\n  <!-- #ifdef APP -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n  .text-box {\r\n    margin-bottom: 20px;\r\n    padding: 20px 0;\r\n    display: flex;\r\n    min-height: 150px;\r\n    background-color: #ffffff;\r\n    justify-content: center;\r\n    align-items: center;\r\n  }\r\n\r\n  .text {\r\n    font-size: 15px;\r\n    color: #353535;\r\n    line-height: 27px;\r\n    text-align: center;\r\n  }\r\n</style>\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| 子组件 | 兼容性 |\n| :- | :- |\n| [text](text.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"-\"]]}' /> |","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)"},"rich-text":{"name":"## rich-text","description":"> 组件类型：UniRichTextElement \n\n 富文本。可渲染文字样式、图片、超链接。支持部分HTML标签","compatibility":"\n###\n兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| nodes | array \\\\| string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 节点列表 \\| HTML String |\n| selectable | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 文本是否可选 |\n| @itemclick | (event: [UniRichTextItemClickEvent](#unirichtextitemclickevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 拦截点击事件（只支持 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 | 否 | - | - | \\<img/>图片链接 |\n@| href | string | 否 | - | - | \\<a/>超链接 |\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<template>\r\n  <view>\r\n    <page-head title=\"rich-text\"></page-head>\r\n    <view class=\"uni-padding-wrap uni-common-mt\">\r\n      <view class=\"uni-btn-v\">\r\n        <navigator url=\"/pages/component/rich-text/rich-text-tags\">\r\n          <button type=\"primary\">rich-text渲染单个HTML标签示例</button>\r\n        </navigator>\r\n      </view>\r\n      <view class=\"uni-btn-v\">\r\n        <navigator url=\"/pages/component/rich-text/rich-text-complex\">\r\n          <button type=\"primary\">rich-text渲染复杂HTML示例</button>\r\n        </navigator>\r\n      </view>\r\n      <view class=\"uni-title\">\r\n        <text class=\"uni-subtitle-text\">selectable</text>\r\n        <button type=\"default\" @click=\"changeText\">修改文本内容</button>\r\n      </view>\r\n      <view class=\"text-box\" id=\"rich-text-parent\" @click=\"richTextParentClick\">\r\n        <rich-text id=\"richtext\" style=\"border: 1px; border-style: solid; border-color: red;\" :selectable=\"true\"\r\n          :nodes=\"text\"></rich-text>\r\n        <view>\r\n          <text>rich-text-parent</text>\r\n          <text id='rich-text-str'>{{richTextStr}}</text>\r\n        </view>\r\n      </view>\n      <view class=\"text-box2\">\n        <rich-text style=\"height: 80px;\" :selectable=\"true\"\n          :nodes=\"text\"></rich-text>\n      </view>\r\n    </view>\r\n  </view>\r\n  <rich-text v-if=\"autoTest\" id=\"test-rich-text\" :nodes=\"testNodes\" :selectable=\"true\" @itemclick=\"itemClickForTest\" style=\"position: fixed;width: 100px;height: 100px;\"></rich-text>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n  .text-box {\r\n    padding: 20px 0;\r\n    background-color: white;\r\n  }\n\n  .text-box2 {\n    top: 20px;\n    background-color: white;\n  }\n\r\n</style>\n\n```\n\n>Script\n```uts\n\r\n  export default {\r\n    data() {\r\n      return {\r\n        text: \"<span>hello uni-app x!</span><br/><span>uni-app x，终极跨平台方案</span>\",\r\n        richTextHeight: 0,\r\n        richTextElement: null as UniElement | null,\r\n        // 自动化测试\r\n        autoTest: false,\r\n        testNodes: '<img src=\"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png\"></img>',\r\n        isItemClickTrigger: false,\r\n        richTextStr: false\r\n      }\r\n    },\r\n    onReady() {\r\n      this.richTextElement = uni.getElementById('richtext') as UniElement\r\n      setTimeout(() => {\r\n        this.updateRichTextHeight()\r\n      }, 2500)\r\n    },\r\n    methods: {\r\n      changeText() {\r\n        if (this.text === \"<span>hello uni-app x!</span><br/><span>uni-app x，终极跨平台方案</span>\") {\r\n          this.text = \"<h1>hello uni-app x!</h1><br/><h2>uni-app x，终极跨平台方案</h2>\"\r\n        } else {\r\n          this.text = \"<span>hello uni-app x!</span><br/><span>uni-app x，终极跨平台方案</span>\"\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      },\r\n      // 自动化测试\r\n      itemClickForTest(_ : RichTextItemClickEvent) {\r\n        this.isItemClickTrigger = true;\r\n      },\r\n      getBoundingClientRectForTest() : DOMRect {\r\n        return uni.getElementById('test-rich-text')?.getBoundingClientRect()!;\r\n      },\r\n      getWindowInfoForTest() : GetWindowInfoResult {\r\n        return uni.getWindowInfo();\r\n      },\r\n      richTextParentClick() {\r\n        this.richTextStr = true;\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.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)"},"progress":{"name":"## progress","description":"> 组件类型：UniProgressElement \n\n 进度条","compatibility":"\n###\n兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| duration | number | 30 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 进度增加1%所需毫秒数 |\n| percent | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 百分比0~100 |\n| show-info | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 在进度条右侧显示百分比 |\n| border-radius | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 圆角大小 |\n| font-size | number | 16 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 右侧百分比字体大小 |\n| stroke-width | number | 6 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 进度条线的宽度，单位px |\n| activeColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#09BB07\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 已选择的进度条的颜色 |\n| backgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#EBEBEB\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 未选择的进度条的颜色 |\n| active | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 进度条从左往右的动画 |\n| active-mode | string | \"backwards\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | backwards: 动画从头播；forwards：动画从上次结束点接着播 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| backwards | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 动画从头播 |\n@| forwards | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 动画从上次结束点接着播 |\n| @activeend | (event: [UniProgressActiveendEvent](#uniprogressactiveendevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 动画完成事件 |","event":"\n### 事件\n#### UniProgressActiveendEvent\n\n```mermaid\ngraph LR\n  \nUniProgressActiveendEvent -- Extends --> UniCustomEvent&ltUniProgressActiveendEventDetail&gt\n  style UniCustomEvent&ltUniProgressActiveendEventDetail&gt color:#42b983\n  click UniCustomEvent&ltUniProgressActiveendEventDetail&gt \"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<template>\r\n  <view class=\"main\">\r\n    <progress :duration=\"duration_input\" :percent=\"percent_input\" :show-info=\"show_info_boolean\"\r\n      :stroke-width=\"stroke_width_input\" :activeColor=\"activeColor_input\" :backgroundColor=\"backgroundColor_input\"\r\n      :active=\"active_boolean\" :active-mode=\"active_mode_enum[active_mode_enum_current].name\"\r\n      @touchstart=\"progress_touchstart\" @touchmove=\"progress_touchmove\" @touchcancel=\"progress_touchcancel\"\r\n      @touchend=\"progress_touchend\" @tap=\"progress_tap\" style=\"width: 80%\">\r\n      <text>uni-app-x</text>\r\n    </progress>\r\n  </view>\r\n\r\n  <scroll-view style=\"flex: 1\">\r\n    <view class=\"content\">\r\n      <page-head title=\"组件属性\"></page-head>\r\n      <boolean-data :defaultValue=\"false\" title=\"进度条从左往右的动画\" @change=\"change_active_boolean\"></boolean-data>\r\n      <boolean-data :defaultValue=\"false\" title=\"在进度条右侧显示百分比\" @change=\"change_show_info_boolean\"></boolean-data>\r\n      <input-data defaultValue=\"30\" title=\"进度增加1%所需毫秒数\" type=\"number\" @confirm=\"confirm_duration_input\"></input-data>\r\n      <input-data defaultValue=\"0\" title=\"百分比0~100\" type=\"number\" @confirm=\"confirm_percent_input\"></input-data>\r\n      <input-data defaultValue=\"6\" title=\"进度条线的宽度，单位px\" type=\"number\"\r\n        @confirm=\"confirm_stroke_width_input\"></input-data>\r\n      <input-data defaultValue=\"#09BB07\" title=\"已选择的进度条的颜色\" type=\"text\"\r\n        @confirm=\"confirm_activeColor_input\"></input-data>\r\n      <input-data defaultValue=\"#EBEBEB\" title=\"未选择的进度条的颜色\" type=\"text\"\r\n        @confirm=\"confirm_backgroundColor_input\"></input-data>\r\n      <enum-data :items=\"active_mode_enum\" title=\"backwards: 动画从头播；forwards：动画从上次结束点接着播\"\r\n        @change=\"radio_change_active_mode_enum\"></enum-data>\r\n    </view>\r\n\r\n    <view>\r\n      <page-head title=\"默认及使用\"></page-head>\r\n      <view class=\"uni-padding-wrap uni-common-mt\">\r\n        <view class=\"progress-box\">\r\n          <progress :percent=\"pgList[0]\" :active=\"true\" :border-radius=\"borderRadius\" :show-info=\"showInfo\"\r\n            :font-size=\"fontSize\" :stroke-width=\"strokeWidth\" :background-color=\"backgroundColor\" class=\"progress p\"\r\n            @activeend=\"activeend\" />\r\n        </view>\r\n        <view class=\"progress-box\">\r\n          <progress :percent=\"pgList[1]\" :stroke-width=\"3\" class=\"progress p1\" />\r\n        </view>\r\n        <view class=\"progress-box\">\r\n          <progress :percent=\"pgList[2]\" :stroke-width=\"3\" class=\"progress p2\" />\r\n        </view>\r\n        <view class=\"progress-box\">\r\n          <progress :percent=\"pgList[3]\" activeColor=\"#10AEFF\" :stroke-width=\"3\" class=\"progress p3\" />\r\n        </view>\r\n        <view class=\"progress-control\">\r\n          <button type=\"primary\" @click=\"setProgress\" class=\"button\">\r\n            设置进度\r\n          </button>\r\n          <button type=\"warn\" @click=\"clearProgress\" class=\"button\">\r\n            清除进度\r\n          </button>\r\n        </view>\r\n      </view>\r\n    </view>\r\n  </scroll-view>\r\n</template>\r\n\r\n<style>\r\n  .main {\r\n    max-height: 250px;\r\n    padding: 5px 0;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.06);\r\n    flex-direction: row;\r\n    justify-content: center;\r\n  }\r\n\r\n  .main .list-item {\r\n    width: 100%;\r\n    height: 100px;\r\n    border: 1px solid #666;\r\n  }\r\n\r\n  .progress-box {\r\n    height: 25px;\r\n    margin-bottom: 30px;\r\n  }\r\n\r\n  .button {\r\n    margin-top: 10px;\r\n  }\r\n</style>\r\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-types'\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)"},"native-view":{"name":"## native-view","description":"> 组件类型：[UniNativeViewElement](/dom/uninativeviewelement.md) \n\n 自定义原生View组件","compatibility":"\n###\n兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| x | 4.31 | 4.31 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| @init | (event: [UniNativeViewInitEvent](#uninativeviewinitevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.31\",\"4.31\"]]}' /> | native-view初始化时回调，event.detail = { element: 'native-view元素实例对象'} |","event":"\n### 事件\n#### UniNativeViewInitEvent\nnative-view 组件 init事件event\n```mermaid\ngraph LR\n  \nUniNativeViewInitEvent -- Extends --> UniCustomEvent&ltUniNativeViewInitEventDetail&gt\n  style UniCustomEvent&ltUniNativeViewInitEventDetail&gt color:#42b983\n  click UniCustomEvent&ltUniNativeViewInitEventDetail&gt \"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#### native-view\n展示使用 native-view 封装的原生view的UTS插件-标准模式组件\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<template>\r\n  <view>\n    <text class=\"tips\">说明：如果本地无 uts 插件编译环境请提交打包自定义基座查看效果</text>\r\n    <!-- native-button 通过 native-view 绑定原生button 实现的UTS插件-标准模式组件 -->\r\n    <native-button class=\"native-button\" style=\"width: 200px; height: 100px;\" :text=\"buttonText\" @buttonTap=\"ontap\"\r\n      @load=\"onload\"></native-button>\r\n    <!-- native-time-picker 通过 native-view 绑定原生time-picker 实现的UTS插件-标准模式组件 -->\r\n    <native-time-picker class=\"native-time-picker\" :hour=2 :minute=3 @changed=\"onChanged\"></native-time-picker>\r\n  </view>\r\n</template>\r\n\r\n<script>\r\n  export default {\r\n    data() {\r\n      return {\r\n        title: 'Hello',\r\n        buttonText: \"native-button\",\r\n        isLoad: false,\r\n        clickCount: 0\r\n      }\r\n    },\r\n    onLoad() {\r\n\r\n    },\r\n    methods: {\r\n      ontap(e : UniNativeViewEvent) {\r\n        uni.showToast({\r\n          title: \"按钮被点击了\"\r\n        })\r\n        this.clickCount ++\r\n        this.buttonText = \"native-button\"+this.clickCount\r\n      },\r\n      onload() {\r\n        //标记已初始化 用于自动化测试\r\n        this.isLoad = true\r\n      },\r\n      onChanged(e : UniNativeViewEvent) {\r\n        console.log(\"onchanged-----\", e.detail)\r\n      }\r\n    }\r\n  }\r\n</script>\r\n\r\n<style>\n\n  .tips {\n    font-size: 14px;\n    color: #BEBEBE;\n    margin: 25px auto 25px auto;\n    text-align: center;\n  }\n\r\n  .native-button {\r\n    height: 100px;\r\n    width: 100px;\r\n    margin: 25px auto 25px auto;\r\n  }\r\n\r\n  .native-time-picker {\r\n    margin: 10px auto 25px auto;\r\n    border-style: solid;\r\n    border-radius: 5px;\r\n  }\r\n</style>\n\n```\n:::\n#### native-button\n通过 native-view 绑定原生 button 实现的UTS插件-标准模式组件\n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//uni_modules/native-button/components/native-button/native-button.uvue) \n>\n> 该 API 不支持 Web，请运行 hello uni-app x 到 App 平台体验 \n```uvue\n<template>\r\n\t<native-view @init=\"onviewinit\" @customClick=\"ontap\"></native-view>\r\n</template>\r\n<script setup lang=\"uts\">\r\n\timport { NativeButton } from \"@/uni_modules/native-button\";\r\n\tlet button : NativeButton | null = null\r\n\r\n\t//声明属性\r\n\tconst props = defineProps<{ text : string }>()\r\n\r\n\t//声明事件\r\n\tconst emit = defineEmits<{\r\n\t\t(e : \"load\") : void\r\n\t\t(e : \"buttonTap\", event : UniNativeViewEvent) : void\r\n\t}>()\r\n\r\n\t//声明方法\r\n\tfunction updateText(value : string) {\r\n\t\tbutton?.updateText(value)\r\n\t}\r\n\r\n\t//监听属性变化\r\n\twatchEffect(() => {\r\n\t\tconst text = props.text\r\n\t\tupdateText(text)\r\n\t})\r\n\r\n\t//native-view初始化时触发此方法\r\n\tfunction onviewinit(e : UniNativeViewInitEvent) {\r\n\t\t//获取UniNativeViewElement 传递给NativeButton对象\r\n\t\tbutton = new NativeButton(e.detail.element);\r\n\t\tupdateText(props.text)\r\n\t\temit(\"load\")\r\n\t}\r\n\r\n\tfunction ontap(e : UniNativeViewEvent) {\r\n\t\temit(\"buttonTap\", e)\r\n\t}\r\n\r\n\tfunction onUnmounted() {\r\n\t\t// iOS平台需要主动释放 uts 实例\r\n\t\tbutton?.destroy()\r\n\t}\r\n</script>\r\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)"},"button":{"name":"## button","description":"> 组件类型：UniButtonElement \n\n 按钮","compatibility":"\n###\n兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| disabled | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否禁用 |\n| hover-class | string([string.ClassString](/uts/data-type.md#ide-string)) | \"button-hover\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 指定按下去的样式类。当 hover-class=\"none\" 时，没有点击态效果 |\n| hover-stop-propagation | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 指定是否阻止本节点的祖先节点出现点击态 |\n| hover-start-time | number | 20 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 按住后多久出现点击态，单位毫秒 |\n| hover-stay-time | number | 70 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 手指松开后点击态保留时间，单位毫秒 |\n| size | string | \"default\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 按钮的大小 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| default | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 默认大小 |\n@| mini | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 小尺寸 |\n| type | string | \"default\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 按钮的样式类型 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| default | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 白色 |\n@| primary | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 蓝色 |\n@| warn | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 红色 |\n| plain | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 按钮是否镂空，背景色透明 |\n| loading | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 名称前是否带 loading 图标 |\n| form-type | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| submit | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 提交表单 |\n@| reset | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 重置表单 |\n| open-type | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"4.31\",\"4.31\"]]}' /> | 开放能力 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| agreePrivacyAuthorization | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.31\",\"4.31\"]]}' /> | 用户同意隐私协议按钮。用户点击一次此按钮后，所有已声明过的隐私接口可以正常调用。 |\n@| feedback | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 打开“意见反馈”页面，用户可提交反馈内容并上传日志 |\n@| share | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 触发用户转发 |\n@| getUserInfo | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 获取用户信息，可以从@getuserinfo回调中获取到用户信息 |\n@| contact | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 打开客服会话，如果用户在会话中点击消息卡片后返回应用，可以从 @contact 回调中获得具体信息 |\n@| getPhoneNumber | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 获取用户手机号，可以从@getphonenumber回调中获取到用户信息 |\n@| launchApp | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 打开APP，可以通过app-parameter属性设定向APP传的参数 |\n@| openSetting | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 打开授权设置页 |\n@| chooseAvatar | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 获取用户头像，可以从@chooseavatar回调中获取到头像信息 |\n@| getAuthorize | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 支持小程序授权 |\n@| lifestyle | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 关注生活号 |\n@| contactShare | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 分享到通讯录好友 |\n@| openGroupProfile | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 呼起QQ群资料卡页面，可以通过group-id属性设定需要打开的群资料卡的群号，同时manifest.json中必须配置groupIdList |\n@| openGuildProfile | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 呼起频道页面，可以通过guild-id属性设定需要打开的频道ID |\n@| openPublicProfile | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 打开公众号资料卡，可以通过public-id属性设定需要打开的公众号资料卡的号码，同时manifest.json中必须配置publicIdList |\n@| shareMessageToFriend | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 在自定义开放数据域组件中,向指定好友发起分享据 |\n@| addFriend | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 添加好友，对方需要通过该小程序进行授权，允许被加好友后才能调用成功用户授权 |\n@| addColorSign | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 添加彩签，点击后添加状态有用户提示，无回调 |\n@| addGroupApp | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 添加群应用（只有管理员或群主有权操作），添加后给button绑定@addgroupapp事件接收回调数据 |\n@| addToFavorites | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 收藏当前页面，点击按钮后会触发Page.onAddToFavorites方法 |\n@| chooseAddress | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 选择用户收货地址，可以从@chooseaddress回调中获取到用户选择的地址信息 |\n@| chooseInvoiceTitle | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 选择用户发票抬头，可以从@chooseinvoicetitle回调中获取到用户选择发票抬头信息 |\n@| login | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 登录，可以从@login回调中确认是否登录成功 |\n@| subscribe | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 订阅类模板消息，需要用户授权才可发送 |\n@| favorite | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 触发用户收藏 |\n@| watchLater | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 触发用户稍后再看 |\n@| openProfile | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 触发打开用户主页 |\n| lang | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。 |\n| session-from | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 会话来源 |\n| send-message-title | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 会话内消息卡片标题 |\n| send-message-path | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 会话内消息卡片点击跳转应用路径 |\n| send-message-img | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 会话内消息卡片图片 |\n| show-message-card | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 显示会话内消息卡片 |\n| app-parameter | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 打开 APP 时，向 APP 传递的参数 |\n| group-id | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 打开群资料卡时，传递的群号 |\n| guild-id | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 打开频道页面时，传递的频道号 |\n| public-id | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 打开公众号资料卡时，传递的号码 |\n| @getuserinfo | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与uni.getUserInfo返回的一致 |\n| @contact | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 客服消息回调 |\n| @getphonenumber | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 获取用户手机号回调 |\n| @error | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"x\",\"x\"]]}' /> | 当使用开放能力时，发生错误的回调 |\n| @opensetting | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 在打开授权设置页后回调 |\n| @launchapp | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 打开 APP 成功的回调 |\n| @chooseavatar | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 获取用户头像回调 |\n| @chooseaddress | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 调起用户编辑并选择收货地址的回调 |\n| @chooseinvoicetitle | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"x\",\"x\"]]}' /> | 用户选择发票抬头的回调 |\n| @addgroupapp | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 添加群应用的回调 |\n| @subscribe | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"x\",\"x\"]]}' /> | 订阅消息授权回调 |\n| @login | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"x\",\"x\"]]}' /> | 登录回调 |","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<template>\r\n  <view class=\"main\">\r\n    <button id=\"testButton\" :disabled=\"disabled_boolean\" :size=\"size_enum[size_enum_current].name\"\r\n      :type=\"type_enum[type_enum_current].name\" :plain=\"plain_boolean\" @click=\"button_click\"\r\n      @touchstart=\"button_touchstart\" @touchmove=\"button_touchmove\" @touchcancel=\"button_touchcancel\"\r\n      @touchend=\"button_touchend\" @tap=\"button_tap\" @longpress=\"button_longpress\" class=\"btn\"\r\n      :class=\"default_style ? (disabled_boolean ? 'custom-btn-disable' : 'custom-btn') : ''\"\r\n      :hover-class=\"default_style ? 'is-hover' : 'button-hover'\">\r\n      {{ text }}\r\n    </button>\r\n  </view>\r\n  <scroll-view style=\"flex: 1\">\r\n    <view class=\"content\">\r\n      <boolean-data :defaultValue=\"false\" title=\"按钮是否镂空，背景色透明\" @change=\"change_plain_boolean\"></boolean-data>\r\n      <boolean-data :defaultValue=\"false\" title=\"是否禁用\" @change=\"change_disabled_boolean\"></boolean-data>\r\n      <boolean-data :defaultValue=\"false\" title=\"修改默认样式和点击效果(高优先)\" @change=\"change_default_style\"></boolean-data>\r\n      <enum-data :items=\"size_enum\" title=\"按钮的大小\" @change=\"radio_change_size_enum\"></enum-data>\r\n      <enum-data :items=\"type_enum\" title=\"按钮的类型\" @change=\"radio_change_type_enum\"></enum-data>\r\n      <input-data :defaultValue=\"text\" title=\"按钮的文案\" type=\"text\" @confirm=\"confirm_text_input\"></input-data>\r\n      <view style=\"height: 10px;\"></view>\r\n      <button @click=\"openPrivacyDialog\">open-type实现隐私政策弹框</button>\n      <view style=\"height: 10px;\"></view>\n      <button @click=\"navigateToChild\">更多示例</button>\n      <view style=\"height: 10px;\"></view>\n    </view>\r\n  </scroll-view>\r\n</template>\r\n\r\n<style>\r\n  .main {\r\n    padding: 5px 0;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.06);\r\n    flex-direction: row;\r\n    justify-content: center;\r\n  }\r\n\r\n  .main .list-item {\r\n    width: 100%;\r\n    height: 100px;\r\n    border: 1px solid #666;\r\n  }\r\n\r\n  .custom-btn {\r\n    color: #ffffff;\r\n    background-color: #1AAD19;\r\n    border-color: #1AAD19;\r\n  }\r\n\r\n  .custom-btn-disable {\r\n    color: rgba(255, 255, 255, 0.7);\r\n    background-color: rgba(26, 173, 25, 0.7);\r\n    border-color: rgba(26, 173, 25, 0.7);\r\n  }\r\n\r\n  .is-hover {\r\n    color: rgba(255, 255, 255, 0.6);\r\n    background-color: #179b16;\r\n    border-color: #179b16;\r\n  }\r\n\r\n  .button-hover {\r\n    color: rgba(0, 0, 0, 0.6);\r\n    background-color: #dedede;\r\n  }\r\n</style>\r\n\n```\n\n>Script\n```uts\n\r\n  import { ItemType } from '@/components/enum-data/enum-data-types'\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      },\n      openPrivacyDialog() {\n        uni.openDialogPage({\n          url: '/pages/component/button/privacy',\n        })\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)"},"checkbox":{"name":"## checkbox","description":"> 组件类型：UniCheckboxElement \n\n 多选项。在1组check-group中可选择多个","compatibility":"\n###\n兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| disabled | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否禁用 |\n| value | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | checkbox 标识，选中时触发 checkbox-group 的 change 事件，并携带 checkbox 的 value |\n| checked | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 当前是否选中，可用来设置默认选中 |\n| backgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | checkbox默认的背景颜色 |\n| borderColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#d1d1d1\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | checkbox默认的边框颜色 |\n| activeBackgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | checkbox选中时的背景颜色 |\n| activeBorderColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#d1d1d1\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | checkbox选中时的边框颜色 |\n| foreColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.18\",\"4.18\",\"4.18\"]]}' /> | checkbox的图标颜色，优先级大于color属性 |\n| ~~iconColor~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | checkbox的图标颜色，优先级大于color属性 (使用foreColor替代) |\n| ~~color~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 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<template>\r\n  <view class=\"main\">\r\n    <checkbox :disabled=\"disabled_boolean\" :checked=\"checked_boolean\" :color=\"color_input\" :iconColor=\"iconColor_input\"\r\n      :foreColor=\"foreColor_input\" :backgroundColor=\"backgroundColor_input\" :borderColor=\"borderColor_input\"\r\n      :activeBackgroundColor=\"activeBackgroundColor_input\" :activeBorderColor=\"activeBorderColor_input\"\r\n      @click=\"checkbox_click\" @touchstart=\"checkbox_touchstart\" @touchmove=\"checkbox_touchmove\"\r\n      @touchcancel=\"checkbox_touchcancel\" @touchend=\"checkbox_touchend\" @tap=\"checkbox_tap\"\r\n      @longpress=\"checkbox_longpress\"><text>uni-app-x</text></checkbox>\r\n  </view>\r\n\r\n  <scroll-view style=\"flex: 1\">\r\n    <view class=\"content\">\r\n      <page-head title=\"组件属性\"></page-head>\r\n      <boolean-data :defaultValue=\"false\" title=\"当前是否选中，可用来设置默认选中\" @change=\"change_checked_boolean\"></boolean-data>\r\n      <boolean-data :defaultValue=\"false\" title=\"是否禁用\" @change=\"change_disabled_boolean\"></boolean-data>\r\n      <input-data defaultValue=\"#007aff\" title=\"checkbox的颜色\" type=\"text\" @confirm=\"confirm_color_input\"></input-data>\r\n      <input-data defaultValue=\"#ffffff\" title=\"checkbox默认的背景颜色\" type=\"text\"\r\n        @confirm=\"confirm_backgroundColor_input\"></input-data>\r\n      <input-data defaultValue=\"#d1d1d1\" title=\"checkbox默认的边框颜色\" type=\"text\"\r\n        @confirm=\"confirm_borderColor_input\"></input-data>\r\n      <input-data defaultValue=\"#ffffff\" title=\"checkbox选中时的背景颜色\" type=\"text\"\r\n        @confirm=\"confirm_activeBackgroundColor_input\"></input-data>\r\n      <input-data defaultValue=\"#d1d1d1\" title=\"checkbox选中时的边框颜色\" type=\"text\"\r\n        @confirm=\"confirm_activeBorderColor_input\"></input-data>\r\n      <input-data defaultValue=\"#007aff\" title=\"iconColor: checkbox的图标颜色，优先级大于color属性\" type=\"text\"\r\n        @confirm=\"confirm_iconColor_input\"></input-data>\r\n      <input-data defaultValue=\"#ff0000\" title=\"foreColor: checkbox的图标颜色，优先级大于color属性\" type=\"text\"\r\n        @confirm=\"confirm_foreColor_input\"></input-data>\r\n    </view>\r\n\r\n    <view>\r\n      <page-head title=\"默认及使用\"></page-head>\r\n      <view class=\"uni-padding-wrap uni-common-mt\">\r\n        <view class=\"uni-title uni-common-mt\">\r\n          <text class=\"uni-title-text\"> 默认样式 </text>\r\n        </view>\r\n        <view>\r\n          <checkbox-group class=\"uni-flex uni-row checkbox-group\" @change=\"testChange\" style=\"flex-wrap: wrap\">\r\n            <checkbox value=\"cb\" :checked=\"checked\" :color=\"color\" :iconColor=\"iconColor\" :foreColor=\"foreColor\"\r\n              style=\"margin-right: 15px\" class=\"checkbox cb\">选中\r\n            </checkbox>\r\n            <checkbox value=\"cb1\" style=\"margin-right: 15px\" class=\"checkbox cb1\">{{ text }}</checkbox>\r\n            <checkbox value=\"cb2\" :disabled=\"disabled\" class=\"checkbox cb2\">禁用</checkbox>\r\n            <checkbox value=\"cb3\" style=\"margin-top: 10px\" class=\"checkbox cb3\">\r\n              {{ wrapText }}\r\n            </checkbox>\r\n          </checkbox-group>\r\n        </view>\r\n        <view class=\"uni-title uni-common-mt\">\r\n          <text class=\"uni-title-text\"> 不同颜色和尺寸的checkbox </text>\r\n        </view>\r\n        <view>\r\n          <checkbox-group class=\"uni-flex uni-row checkbox-group\">\r\n            <checkbox value=\"cb1\" :checked=\"true\" color=\"#FFCC33\" style=\"transform: scale(0.7); margin-right: 15px\"\r\n              class=\"checkbox\">选中\r\n            </checkbox>\r\n            <checkbox value=\"cb\" color=\"#FFCC33\" style=\"transform: scale(0.7)\" class=\"checkbox\">未选中</checkbox>\r\n          </checkbox-group>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"uni-padding-wrap\">\r\n        <view class=\"uni-title uni-common-mt\">\r\n          <text class=\"uni-title-text\"> 推荐展示样式 </text>\r\n        </view>\r\n      </view>\r\n      <view class=\"uni-list uni-common-pl\">\r\n        <checkbox-group @change=\"checkboxChange\" class=\"checkbox-group\" id=\"trigger-change\">\r\n          <checkbox class=\"uni-list-cell uni-list-cell-pd checkbox\" v-for=\"(item, index) in items\" :key=\"item.value\"\r\n            :value=\"item.value\" :checked=\"item.checked\" :class=\"[\r\n              index < items.length - 1 ? 'uni-list-cell-line' : '',\r\n              'checkbox-item-' + index,\r\n            ]\">\r\n            {{ item.name }}\r\n          </checkbox>\r\n        </checkbox-group>\r\n      </view>\r\n    </view>\r\n  </scroll-view>\r\n</template>\r\n\r\n<style>\r\n  .main {\r\n    max-height: 250px;\r\n    padding: 5px 0;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.06);\r\n    flex-direction: row;\r\n    justify-content: center;\r\n  }\r\n\r\n  .main .list-item {\r\n    width: 100%;\r\n    height: 100px;\r\n    border: 1px solid #666;\r\n  }\r\n\r\n  .uni-list-cell {\r\n    justify-content: flex-start;\r\n  }\r\n</style>\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)"},"checkbox-group":{"name":"## checkbox-group","description":"> 组件类型：UniCheckboxGroupElement \n\n 多选框组","compatibility":"\n###\n兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| name | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| @change | (event: [UniCheckboxGroupChangeEvent](#unicheckboxgroupchangeevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | checkbox-group中选中项发生改变是触发 change 事件，detail = {value:\\[选中的checkbox的value的数组] |","event":"\n### 事件\n#### UniCheckboxGroupChangeEvent\n\n```mermaid\ngraph LR\n  \nUniCheckboxGroupChangeEvent -- Extends --> UniCustomEvent&ltUniCheckboxGroupChangeEventDetail&gt\n  style UniCustomEvent&ltUniCheckboxGroupChangeEventDetail&gt color:#42b983\n  click UniCustomEvent&ltUniCheckboxGroupChangeEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniCheckboxGroupChangeEventDetail\n\n\n###### UniCheckboxGroupChangeEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- |  :-: | :- |\n| value | Array\\<string\\> | 是 | - | - | - |\n\n","example":"","children":"### 子组件 @children-tags\n| 子组件 | 兼容性 |\n| :- | :- |\n| [checkbox](checkbox.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"-\"]]}' /> |","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)"},"form":{"name":"## form","description":"> 组件类型：UniFormElement \n\n 表单","compatibility":"\n###\n兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.97 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| disabled | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.97\",\"4.11\"]]}' /> | 是否禁用 |\n| report-submit | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 是否返回 formId 用于发送模板消息 |\n| @submit | (event: [UniFormSubmitEvent](#uniformsubmitevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.97\",\"4.11\"]]}' /> | 携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'}} |\n| @reset | (event: [UniFormResetEvent](#uniformresetevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.97\",\"4.11\"]]}' /> | 表单重置时会触发 reset 事件 |","event":"\n### 事件\n#### UniFormSubmitEvent\n\n```mermaid\ngraph LR\n  \nUniFormSubmitEvent -- Extends --> UniCustomEvent&ltUniFormSubmitEventDetail&gt\n  style UniCustomEvent&ltUniFormSubmitEventDetail&gt color:#42b983\n  click UniCustomEvent&ltUniFormSubmitEventDetail&gt \"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&ltUniFormResetEventDetail&gt\n  style UniCustomEvent&ltUniFormResetEventDetail&gt color:#42b983\n  click UniCustomEvent&ltUniFormResetEventDetail&gt \"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<template>\r\n  <!-- #ifdef APP -->\r\n  <scroll-view class=\"scroll-view\">\r\n  <!-- #endif -->\r\n    <view class=\"page\">\r\n      <form @submit=\"onFormSubmit\" @reset=\"onFormReset\">\r\n        <view class=\"uni-form-item\">\r\n          <view class=\"title\">姓名</view>\r\n          <input class=\"uni-input\" name=\"nickname\" :value=\"nickname\" placeholder=\"请输入姓名\" maxlength=\"-1\" />\r\n        </view>\r\n        <view class=\"uni-form-item\">\r\n          <view class=\"title\">性别</view>\r\n          <radio-group name=\"gender\" class=\"flex-row\">\r\n            <view class=\"group-item\">\r\n              <radio value=\"0\" :checked=\"gender=='0'\" /><text>男</text>\r\n            </view>\r\n            <view class=\"group-item\">\r\n              <radio value=\"1\" :checked=\"gender=='1'\" /><text>女</text>\r\n            </view>\r\n          </radio-group>\r\n        </view>\r\n        <view class=\"uni-form-item\">\r\n          <view class=\"title\">爱好</view>\r\n          <checkbox-group name=\"loves\" class=\"flex-row\">\r\n            <view class=\"group-item\">\r\n              <checkbox value=\"0\" :checked=\"loves.indexOf('0')>-1\" /><text>读书</text>\r\n            </view>\r\n            <view class=\"group-item\">\r\n              <checkbox value=\"1\" :checked=\"loves.indexOf('1')>-1\" /><text>写字</text>\r\n            </view>\r\n          </checkbox-group>\r\n        </view>\r\n        <view class=\"uni-form-item\">\r\n          <view class=\"title\">年龄</view>\r\n          <slider name=\"age\" :value=\"age\" :show-value=\"true\"></slider>\r\n        </view>\r\n        <view class=\"uni-form-item\">\r\n          <view class=\"title\">保留选项</view>\r\n          <view>\r\n            <switch name=\"switch\" :checked=\"switch\" />\r\n          </view>\r\n        </view>\r\n        <view class=\"uni-form-item\">\r\n          <view class=\"title\">备注</view>\r\n          <textarea name=\"comment\" :value=\"comment\" placeholder=\"请输入备注\" style=\"background: #FFF;\" />\r\n          <!-- <textarea class=\"uni-input\" name=\"comment\" :value=\"comment\" placeholder=\"这个class的写法，导致iOS和Android产生了高度差异\"/> -->\r\n        </view>\r\n        <view class=\"uni-btn-v flex-row\">\r\n          <button class=\"btn btn-submit\" form-type=\"submit\" type=\"primary\">Submit</button>\r\n          <button class=\"btn btn-reset\" type=\"default\" form-type=\"reset\">Reset</button>\r\n        </view>\r\n      </form>\r\n      <view class=\"result\">提交的表单数据</view>\r\n      <textarea class=\"textarea\" :value=\"formDataText\" :maxlength=\"-1\" :auto-height=\"true\"></textarea>\r\n    </view>\r\n  <!-- #ifdef APP -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n  .scroll-view {\r\n    flex: 1;\r\n  }\r\n\r\n  .page {\r\n    padding: 15px;\r\n  }\r\n\r\n  .flex-row {\r\n    flex-direction: row;\r\n  }\r\n\r\n  .uni-form-item {\r\n    padding: 15px 0;\r\n  }\r\n\r\n  .title {\r\n    margin-bottom: 10px;\r\n  }\r\n\r\n  .group-item {\r\n    flex-direction: row;\r\n    margin-right: 20px;\r\n  }\r\n\r\n  .btn {\r\n    flex: 1;\r\n  }\r\n\r\n  .btn-submit {\r\n    margin-right: 5px;\r\n  }\r\n\r\n  .btn-reset {\r\n    margin-left: 5px;\r\n  }\r\n\r\n  .result {\r\n    margin-top: 30px;\r\n  }\r\n\r\n  .textarea {\r\n    margin-top: 5px;\r\n    padding: 5px;\r\n    background-color: #fff;\r\n  }\r\n</style>\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)"},"input":{"name":"## input","description":"> 组件类型：[UniInputElement](/dom/uniinputelement.md) \n\n 输入框","compatibility":"\n###\n兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| name | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| disabled | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否禁用 |\n| value | string | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 输入框的初始内容 |\n| type | text \\| number \\| idcard \\| digit \\| tel \\| safe-password \\| nickname | \"text\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | input的类型 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| text | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 文本输入键盘 |\n@| number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 数字输入键盘 |\n@| idcard | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 身份证输入键盘 |\n@| digit | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 带小数点数字输入键盘 |\n@| tel | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 电话输入键盘 |\n@| safe-password | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 密码安全输入键盘 |\n@| nickname | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 昵称输入键盘 |\n| password | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否是密码类型 |\n| placeholder | string | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 输入框为空时占位符 |\n| placeholder-style | string | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 指定 placeholder 的样式，目前仅支持color,font-size和font-weight |\n| placeholder-class | string([string.ClassString](/uts/data-type.md#ide-string)) | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 指定 placeholder 的样式类，目前仅支持color,font-size和font-weight |\n| maxlength | number | \"不限制长度\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 最大输入长度，0和正数为合法值，非法值的时候不限制最大长度 |\n| cursor-spacing | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 |\n| cursor-color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.99\",\"4.11\"]]}' /> | 指定光标颜色 |\n| auto-focus | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 自动获取焦点，与`focus`属性对比，此属性只会首次生效。 |\n| focus | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 获取焦点 |\n| confirm-type | send \\| search \\| next \\| go \\| done | \"done\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 设置键盘右下角按钮的文字，仅在 type为text 时生效。 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| send | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 发送 |\n@| search | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 搜索 |\n@| next | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 下一个 |\n@| go | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 前往 |\n@| done | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 完成 |\n| always-embed | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) |\n| confirm-hold | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 点击键盘右下角按钮时是否保持键盘不收起 |\n| cursor | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 指定focus时的光标位置 |\n| selection-start | number | -1 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 光标起始位置，自动聚集时有效，需与selection-end搭配使用 |\n| selection-end | number | -1 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 光标结束位置，自动聚集时有效，需与selection-satrt搭配使用 |\n| adjust-position | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 键盘弹起时，是否自动上推页面 |\n| text-content-type | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 文本区域的语义，根据类型自动填充 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| oneTimeCode | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 一次性验证码 |\n| hold-keyboard | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.0\",\"4.11\"]]}' /> | focus时，点击页面的时候不收起键盘 |\n| safe-password-cert-path | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 安全键盘加密公钥的路径，只支持包内路径 |\n| safe-password-length | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 安全键盘输入密码长度 |\n| safe-password-time-stamp | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 安全键盘加密时间戳 |\n| safe-password-nonce | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 安全键盘加密盐值 |\n| safe-password-salt | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 安全键盘计算 hash 盐值，若指定custom-hash 则无效 |\n| safe-password-custom-hash | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 安全键盘计算 hash 的算法表达式 |\n| random-number | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 当 type 为 number, digit, idcard 数字键盘是否随机排列 |\n| controlled | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 是否为受控组件。为 true 时，value 内容会完全受 setData 控制 |\n| always-system | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 是否强制使用系统键盘和 Web-view 创建的 input 元素。为 true 时，confirm-type、confirm-hold 可能失效 |\n| inputmode | none \\| text \\| decimal \\| numeric \\| tel \\| search \\| email \\| url | \"text\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。在符合条件的高版本webview里，uni-app的 web 和 app-vue 平台中可使用本属性。 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用。 |\n@| text | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 使用用户本地区域设置的标准文本输入键盘。 |\n@| decimal | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 小数输入键盘，包含数字和分隔符（通常是“ . ”或者“ , ”），设备可能也可能不显示减号键。 |\n@| numeric | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 数字输入键盘，所需要的就是 0 到 9 的数字，设备可能也可能不显示减号键。 |\n@| tel | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 电话输入键盘，包含 0 到 9 的数字、星号（*）和井号（#）键。表单输入里面的电话输入通常应该使用 \\<input type=\"tel\"\\> 。 |\n@| search | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 为搜索输入优化的虚拟键盘，比如，返回键可能被重新标记为“搜索”，也可能还有其他的优化。 |\n@| email | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 为邮件地址输入优化的虚拟键盘，通常包含\"@\"符号和其他优化。表单里面的邮件地址输入应该使用 \\<input type=\"email\"\\> 。 |\n@| url | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 为网址输入优化的虚拟键盘，比如，“/”键会更加明显、历史记录访问等。表单里面的网址输入通常应该使用 \\<input type=\"url\"\\> 。 |\n| @input | (event: [UniInputEvent](#uniinputevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 当键盘输入时，触发input事件，event.detail = {value, cursor}，处理函数可以直接 return 一个字符串，将替换输入框的内容。 |\n| @focus | (event: [UniInputFocusEvent](#uniinputfocusevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度 |\n| @blur | (event: [UniInputBlurEvent](#uniinputblurevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 输入框失去焦点时触发，event.detail = {value: value} |\n| @keyboardheightchange | (event: [UniInputKeyboardHeightChangeEvent](#uniinputkeyboardheightchangeevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration} |\n| @confirm | (event: [UniInputConfirmEvent](#uniinputconfirmevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 点击完成按钮时触发，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 | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 键盘高度 |\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<template>\r\n  <!-- #ifdef APP -->\r\n  <scroll-view style=\"flex: 1\">\r\n  <!-- #endif -->\r\n    <page-head :title=\"title\"></page-head>\r\n    <view class=\"uni-common-mt uni-padding-wrap\">\r\n      <view>\r\n        <view class=\"uni-title\">\r\n          <text class=\"uni-title-text\">设置输入框的初始内容</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input id=\"uni-input-default\" class=\"uni-input\" value=\"hello uni-app x\" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\">\r\n          <text class=\"uni-title-text\">type取值（不同输入法表现可能不一致）</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input id=\"uni-input-type-text\" class=\"uni-input\" type=\"text\" placeholder=\"文本输入键盘\" />\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input id=\"uni-input-type-number\" class=\"uni-input\" type=\"number\" placeholder=\"数字输入键盘\" />\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input id=\"uni-input-type-digit\" class=\"uni-input\" type=\"digit\" placeholder=\"带小数点的数字输入键盘\" />\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input id=\"uni-input-type-tel\" class=\"uni-input\" :type=\"inputTypeTel\" placeholder=\"电话输入键盘\" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\">\r\n          <text class=\"uni-title-text\">密码输入框</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input id=\"uni-input-password\" class=\"uni-input\" :password=\"inputPassword\" :value=\"inputPasswordValue\" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\">\r\n          <text class=\"uni-title-text\">无value设置的密码输入框</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input class=\"uni-input\" :password=\"true\" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\">\r\n          <text class=\"uni-title-text\">占位符样式</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input id=\"uni-input-placeholder1\" class=\"uni-input\" :placeholder-style=\"inputPlaceHolderStyle\"\r\n            placeholder=\"占位符文字颜色为红色\" />\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input id=\"uni-input-placeholder2\" class=\"uni-input\" :placeholder-class=\"inputPlaceHolderClass\"\r\n            placeholder=\"占位符字体大小为10px\" />\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input class=\"uni-input\" :placeholder-style=\"inputPlaceHolderStyle\"\r\n            value=\"不设置placeholder只设置placeholder-style\" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\">\r\n          <text class=\"uni-title-text\">设置禁用输入框</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input id=\"uni-input-disable\" class=\"uni-input\" :disabled=\"true\" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\">\r\n          <text class=\"uni-title-text\">设置最大输入长度</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input id=\"uni-input-maxlength\" class=\"uni-input\" :maxlength=\"10\" placeholder=\"最大输入长度为10\"\r\n            :value=\"inputMaxLengthValue\" @input=\"onMaxLengthInput\" :focus=\"inputMaxLengthFocus\" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\">\r\n          <text class=\"uni-title-text\">设置光标与键盘的距离</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input class=\"uni-input\" :cursor-spacing=\"1000\" placeholder=\"光标与键盘的距离为1000px\" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\">\r\n          <text class=\"uni-title-text\">自动获取焦点</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input id=\"uni-input-focus\" class=\"uni-input\" :focus=\"focus\"\r\n            @keyboardheightchange=\"inputFocusKeyBoardChange\" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\">\r\n          <text class=\"uni-title-text\">confirm-type取值（不同输入法表现可能不一致）</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input id=\"uni-input-confirm-send\" class=\"uni-input\" confirmType=\"send\" placeholder=\"键盘右下角按钮显示为发送\" />\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input id=\"uni-input-confirm-search\" class=\"uni-input\" confirmType=\"search\" placeholder=\"键盘右下角按钮显示为搜索\" />\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input id=\"uni-input-confirm-next\" class=\"uni-input\" confirmType=\"next\" placeholder=\"键盘右下角按钮显示为下一个\" />\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input id=\"uni-input-confirm-go\" class=\"uni-input\" confirmType=\"go\" placeholder=\"键盘右下角按钮显示为前往\" />\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input id=\"uni-input-confirm-done\" class=\"uni-input\" confirmType=\"done\" placeholder=\"键盘右下角按钮显示为完成\" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\">\r\n          <text class=\"uni-title-text\">点击键盘右下角按钮时保持键盘不收起</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input class=\"uni-input\" :confirm-hold=\"true\" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\" @click=\"setCursor(4)\">\r\n          <text class=\"uni-title-text\">设置输入框聚焦时光标的位置（点这里）</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input ref=\"input\" class=\"uni-input\" value=\"0123456789\" :cursor=\"cursor\" @blur=\"onCursorBlurChange\" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\" @click=\"setSelection(0, 4)\">\r\n          <text class=\"uni-title-text\">设置输入框聚焦时光标的起始位置和结束位置（点这里）</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input ref=\"input2\" class=\"uni-input\" value=\"0123456789\" :selection-start=\"selectionStart\"\r\n            :selection-end=\"selectionEnd\" @blur=\"onSelectionBlurChange\" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\" style=\"flex-direction: row; align-items: center\">\r\n          <text class=\"uni-title-text\">设置光标颜色为红色</text>\r\n          <switch style=\"margin-left: 10px\" @change=\"changeCursorColor\" :checked=\"cursor_color == 'red'\"></switch>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input id=\"uni-input-cursor-color\" class=\"uni-input\" :cursor-color=\"cursor_color\" value=\"光标颜色\" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\">\r\n          <text class=\"uni-title-text\">键盘弹起时，自动上推页面</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input class=\"uni-input\" :adjust-position=\"true\" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\" style=\"flex-direction: row; align-items: center\">\r\n          <text class=\"uni-title-text\">设置hold-keyboard</text>\r\n          <switch style=\"margin-left: 10px\" @change=\"changeHoldKeyboard\" :checked=\"holdKeyboard\"></switch>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input class=\"uni-input\" :hold-keyboard=\"holdKeyboard\" value=\"hold keyboard \" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\">\r\n          <text class=\"uni-title-text\">input事件</text>\r\n          <text class=\"uni-subtitle-text\" v-if=\"inputEventDetail\">{{\r\n            inputEventDetail\r\n          }}</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input class=\"uni-input\" @input=\"onInput\" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\">\r\n          <text class=\"uni-title-text\">focus事件和blur事件</text>\r\n          <text class=\"uni-subtitle-text\" v-if=\"focusAndBlurEventDetail\">{{\r\n            focusAndBlurEventDetail\r\n          }}</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input class=\"uni-input\" @focus=\"onFocus\" @blur=\"onBlur\" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\">\r\n          <text class=\"uni-title-text\">confirm事件</text>\r\n          <text class=\"uni-subtitle-text\" v-if=\"confirmEventDetail\">{{\r\n            confirmEventDetail\r\n          }}</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input class=\"uni-input\" @confirm=\"onConfirm\" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\">\r\n          <text class=\"uni-title-text\">keyboardheightchange事件</text>\r\n          <text class=\"uni-subtitle-text\"\r\n            v-if=\"keyboardHeightChangeEventDetail\">{{ keyboardHeightChangeEventDetail }}</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input class=\"uni-input\" @keyboardheightchange=\"onKeyborardHeightChange\"\r\n            :focus=\"focusedForKeyboardHeightChangeTest\" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\">\r\n          <text class=\"uni-title-text\">带清除按钮的输入框</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input class=\"uni-input\" placeholder=\"带清除按钮的输入框\" :value=\"inputClearValue\" @input=\"clearInput\" />\r\n          <image class=\"uni-icon\" src=\"/static/icons/clear.png\" v-if=\"showClearIcon\" @click=\"clearIcon\">\r\n          </image>\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\">\r\n          <text class=\"uni-title-text\">可查看密码的输入框</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input class=\"uni-input\" placeholder=\"请输入密码\" :password=\"showPassword\" />\r\n          <image class=\"uni-icon\" :src=\"\r\n              !showPassword\r\n                ? '/static/icons/eye-active.png'\r\n                : '/static/icons/eye.png'\r\n            \" @click=\"changePassword\"></image>\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\">\r\n          <text class=\"uni-title-text\">同时存在 v-model 和 value</text>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input id=\"both-model-value\" class=\"uni-input\" v-model=\"demoValue\" value=\"456\" />\r\n        </view>\r\n      </view>\r\n\r\n      <view>\r\n        <view class=\"uni-title\" style=\"flex-direction: row; align-items: center\">\r\n          <text class=\"uni-title-text\">设置adjust-position</text>\r\n          <switch style=\"margin-left: 10px\" @change=\"changeAdjustPosition\" :checked=\"adjustPosition\"></switch>\r\n        </view>\r\n        <view class=\"input-wrapper\">\r\n          <input class=\"uni-input\" :adjust-position=\"adjustPosition\" />\r\n        </view>\r\n      </view>\n\n      <view>\n        <view class=\"uni-title\">\n          <text class=\"uni-title-text\">输入内容的同步更新UI</text>\n        </view>\n        <text>{{syncDisplayValue}}</text>\n        <view class=\"input-wrapper\">\n          <input class=\"uni-input\" v-model=\"syncDisplayValue\"/>\n        </view>\n      </view>\n\r\n    </view>\r\n  <!-- #ifdef APP -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n\r\n<style scoped>\r\n  .input-wrapper {\r\n    display: flex;\r\n    padding: 8px 13px;\r\n    margin: 5px 0;\r\n    flex-direction: row;\r\n    flex-wrap: nowrap;\r\n    background-color: #ffffff;\r\n  }\r\n\r\n  .uni-input {\r\n    height: 28px;\r\n    font-size: 15px;\r\n    padding: 0px;\r\n    flex: 1;\r\n    background-color: #ffffff;\r\n  }\r\n\r\n  .uni-icon {\r\n    width: 24px;\r\n    height: 24px;\r\n  }\r\n\r\n  .uni-input-placeholder-class {\r\n    font-size: 10px;\r\n  }\r\n</style>\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,\n        syncDisplayValue: ''\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<UniInputElement>(\"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)"},"editor":{"name":"## editor","description":"富文本编辑器，可以对图片、文字进行编辑。","compatibility":"\n###\n兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| read-only | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 设置编辑器为只读。 |\n| placeholder | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 提示信息。 |\n| show-img-size | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 点击图片时显示图片大小控件。 |\n| show-img-toolbar | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 点击图片时显示工具栏控件。 |\n| show-img-resize | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 点击图片时显示修改尺寸控件。 |\n| @ready | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 编辑器初始化完成时触发 |\n| @focus | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 编辑器聚焦时触发，event.detail = {html, text, delta} |\n| @blur | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 编辑器失去焦点时触发，detail = {html, text, delta} |\n| @input | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 编辑器内容改变时触发，detail = {html, text, delta} |\n| @statuschange | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 通过 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<template>\n  <view class=\"container\">\n    <view class=\"page-body\">\n      <view class='wrapper'>\n        <view class='toolbar' @tap=\"format\">\n          <view :class=\"formats.bold ? 'ql-active' : ''\" class=\"iconfont icon-zitijiacu\" data-name=\"bold\"></view>\n          <view :class=\"formats.italic ? 'ql-active' : ''\" class=\"iconfont icon-zitixieti\" data-name=\"italic\"></view>\n          <view :class=\"formats.underline ? 'ql-active' : ''\" class=\"iconfont icon-zitixiahuaxian\"\n            data-name=\"underline\"></view>\n          <view :class=\"formats.strike ? 'ql-active' : ''\" class=\"iconfont icon-zitishanchuxian\" data-name=\"strike\">\n          </view>\n\n          <view :class=\"formats.align === 'left' ? 'ql-active' : ''\" class=\"iconfont icon-zuoduiqi\" data-name=\"align\"\n            data-value=\"left\"></view>\n\n          <view :class=\"formats.align === 'center' ? 'ql-active' : ''\" class=\"iconfont icon-juzhongduiqi\"\n            data-name=\"align\" data-value=\"center\"></view>\n          <view :class=\"formats.align === 'right' ? 'ql-active' : ''\" class=\"iconfont icon-youduiqi\" data-name=\"align\"\n            data-value=\"right\"></view>\n          <view :class=\"formats.align === 'justify' ? 'ql-active' : ''\" class=\"iconfont icon-zuoyouduiqi\"\n            data-name=\"align\" data-value=\"justify\"></view>\n\n          <view :class=\"formats.lineHeight ? 'ql-active' : ''\" class=\"iconfont icon-line-height\" data-name=\"lineHeight\"\n            data-value=\"2\"></view>\n          <view :class=\"formats.letterSpacing ? 'ql-active' : ''\" class=\"iconfont icon-Character-Spacing\"\n            data-name=\"letterSpacing\" data-value=\"2em\"></view>\n          <view :class=\"formats.marginTop ? 'ql-active' : ''\" class=\"iconfont icon-722bianjiqi_duanqianju\"\n            data-name=\"marginTop\" data-value=\"20px\"></view>\n          <view :class=\"formats.marginBottom ? 'ql-active' : ''\" class=\"iconfont icon-723bianjiqi_duanhouju\"\n            data-name=\"marginBottom\" data-value=\"20px\"></view>\n\n          <view :class=\"formats.fontFamily ? 'ql-active' : ''\" class=\"iconfont icon-font\" data-name=\"fontFamily\"\n            data-value=\"Pacifico\"></view>\n          <view :class=\"formats.fontSize === '24px' ? 'ql-active' : ''\" class=\"iconfont icon-fontsize\"\n            data-name=\"fontSize\" data-value=\"24px\"></view>\n          <view :class=\"formats.color === '#0000ff' ? 'ql-active' : ''\" class=\"iconfont icon-text_color\"\n            data-name=\"color\" data-value=\"#0000ff\"></view>\n          <view :class=\"formats.backgroundColor === '#00ff00' ? 'ql-active' : ''\" class=\"iconfont icon-fontbgcolor\"\n            data-name=\"backgroundColor\" data-value=\"#00ff00\"></view>\n\n          <view class=\"iconfont icon--checklist\" data-name=\"list\" data-value=\"check\"></view>\n          <view :class=\"formats.list === 'ordered' ? 'ql-active' : ''\" class=\"iconfont icon-youxupailie\"\n            data-name=\"list\" data-value=\"ordered\"></view>\n          <view :class=\"formats.list === 'bullet' ? 'ql-active' : ''\" class=\"iconfont icon-wuxupailie\" data-name=\"list\"\n            data-value=\"bullet\"></view>\n\n\n          <view class=\"iconfont icon-outdent\" data-name=\"indent\" data-value=\"-1\"></view>\n          <view class=\"iconfont icon-indent\" data-name=\"indent\" data-value=\"+1\"></view>\n\n\n          <view :class=\"formats.header === 1 ? 'ql-active' : ''\" class=\"iconfont icon-format-header-1\"\n            data-name=\"header\" :data-value=\"1\"></view>\n          <view :class=\"formats.script === 'sub' ? 'ql-active' : ''\" class=\"iconfont icon-zitixiabiao\"\n            data-name=\"script\" data-value=\"sub\"></view>\n          <view :class=\"formats.script === 'super' ? 'ql-active' : ''\" class=\"iconfont icon-zitishangbiao\"\n            data-name=\"script\" data-value=\"super\"></view>\n\n          <view :class=\"formats.direction === 'rtl' ? 'ql-active' : ''\" class=\"iconfont icon-direction-rtl\"\n            data-name=\"direction\" data-value=\"rtl\"></view>\n\n          <view class=\"iconfont icon-date\" @tap=\"insertDate\"></view>\n          <view class=\"iconfont icon-fengexian\" @tap=\"insertDivider\"></view>\n          <view class=\"iconfont icon-charutupian\" @tap=\"chooseInsertImage\"></view>\n          <view class=\"iconfont icon-clearedformat\" @tap=\"removeFormat\"></view>\n          <view class=\"iconfont icon-undo\" @tap=\"undo\"></view>\n          <view class=\"iconfont icon-redo\" @tap=\"redo\"></view>\n          <view class=\"iconfont icon-shanchu\" @tap=\"clearShowModal\"></view>\n        </view>\n\n        <view class=\"editor-wrapper\">\n          <editor id=\"editor\" class=\"ql-container\" placeholder=\"开始输入...\" show-img-size show-img-toolbar show-img-resize\n            @statuschange=\"onStatusChange\" :read-only=\"readOnly\" @ready=\"onEditorReady\">\n          </editor>\n        </view>\n        <view>\n          <button @tap=\"getCon\">打印文本内容</button>\n        </view>\n      </view>\n    </view>\n  </view>\n</template>\n\n\n\n<style>\n  @import \"./editor-icon.css\";\n\n  .page-body {\n    height: calc(100vh - var(--window-top) - var(--status-bar-height));\n  }\n\n  .wrapper {\n    height: 100%;\n  }\n\n  .editor-wrapper {\n    height: calc(100vh - var(--window-top) - var(--status-bar-height) - 140px - 46px);\n    background: #fff;\n  }\n\n  .iconfont {\n    display: inline-block;\n    width: 30px;\n    height: 30px;\n    cursor: pointer;\n    font-size: 20px;\n    margin: 0px 6px;\n    align-content: center;\n  }\n\n  .toolbar {\n    box-sizing: border-box;\n    border-bottom: 0;\n    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;\n    flex-direction: row;\n    flex-wrap: wrap;\n    height: 140px;\n    padding-left: 10px;\n  }\n\n  .ql-container {\n    box-sizing: border-box;\n    padding: 12px 15px;\n    width: 100%;\n    min-height: 30vh;\n    height: 100%;\n    font-size: 16px;\n    line-height: 1.5;\n  }\n\n  .ql-active {\n    color: #06c;\n  }\n</style>\n\n```\n\n>Script\n```uts\n\n  type Context = {\n    id ?: string;\n    pageId ?: number;\n  }\n\n  export default {\n    data() {\n      return {\n        readOnly: false,\n        formats: {},\n        editorCtx: {} as Context,\n        // 自动化测试\n        autoTest: false,\n        undoTest: false,\n        redoTest: false,\n        removeFormatTest: false,\n        insertImageTest: false,\n        blurTest: false\n      }\n    },\n    onLoad() {\n      uni.loadFontFace({\n        family: 'Pacifico',\n        source: 'url(\"/static/font/Pacifico-Regular.ttf\")',\n        success() {\n          console.log('success load font')\n        },\n        fail() {\n          console.log('fail load font load')\n        }\n      })\n    },\n    methods: {\n      readOnlyChange() {\n        this.readOnly = !this.readOnly\n      },\n      onEditorReady() {\n        uni.createSelectorQuery().select('#editor').context((res) => {\n          this.editorCtx = res.context\n        }).exec()\n      },\n      // 自动化测试专用\n      setContents(options) {\n        this.editorCtx.setContents({\n          delta: {\n            ops: options\n          },\n          success: (res) => {\n            console.log('setContents-success', res)\n          },\n          fail: (err) => {\n            console.log(err)\n          }\n        })\n      },\n      blur() {\n        this.editorCtx.blur({\n          success: (res) => {\n            console.log('编辑器失焦：', res)\n            this.blurTest = true\n          },\n          fail: (err) => {\n            console.log(err)\n          }\n        })\n      },\n      getCon() {\n        this.editorCtx.getContents({\n          success: (res) => {\n            console.log('文本详情：', res)\n          },\n          fail: (err) => {\n            console.log(err)\n          }\n        })\n      },\n      undo() {\n        this.editorCtx.undo({\n          success: (res) => {\n            this.undoTest = true\n          },\n          fail: (err) => {\n            this.undoTest = false\n          }\n        })\n      },\n      redo() {\n        this.editorCtx.redo({\n          success: (res) => {\n            this.redoTest = true\n          },\n          fail: (err) => {\n            this.redoTest = false\n          }\n        })\n      },\n      format(e) {\n        let { name, value } = e.target.dataset\n        if (!name) return\n        // console.log('format', name, value)\n        this.editorCtx.format(name, value)\n      },\n      onStatusChange(e) {\n        const formats = e.detail\n        this.formats = formats\n      },\n      insertDivider() {\n        this.editorCtx.insertDivider({\n          success: function () {\n            console.log('insert divider success')\n          }\n        })\n      },\n      clear() {\n        this.editorCtx.clear({\n          success: function (res) {\n            console.log(\"clear success\")\n          }\n        })\n      },\n      clearShowModal() {\n        uni.showModal({\n          title: '清空编辑器',\n          content: '确定清空编辑器全部内容？',\n          success: res => {\n            if (res.confirm) {\n              this.clear()\n            }\n          }\n        })\n      },\n      removeFormat() {\n        this.editorCtx.removeFormat({\n          success: (res) => {\n            console.log('removeFormat-success', res)\n            this.removeFormatTest = true\n          },\n          fail: (err) => {\n            this.removeFormatTest = false\n          }\n        })\n      },\n      insertDate() {\n        const date = new Date()\n        const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`\n        this.editorCtx.insertText({\n          text: formatDate\n        })\n      },\n      insertImage(image) {\n        this.editorCtx.insertImage({\n          src: image,\n          alt: '图像',\n          success: () => {\n            console.log('insert image success')\n            this.insertImageTest = true\n          }\n        })\n      },\n      chooseInsertImage() {\n        uni.chooseImage({\n          count: 1,\n          success: (res) => {\n            this.insertImage(res.tempFilePaths[0])\n          }\n        })\n      }\n    }\n  }\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)"},"label":{"name":"## label","description":"用来改进表单组件的可用性，使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件","compatibility":"\n###\n兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| disabled | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 是否禁用 |\n| for | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 绑定控件的 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<template>\r\n  <view>\r\n    <page-head :title=\"title\"></page-head>\r\n    <view class=\"uni-common-mt\">\r\n      <view class=\"uni-form-item uni-column\">\r\n        <view class=\"title\">表单组件在label内</view>\r\n        <checkbox-group class=\"uni-list\" @change=\"checkboxChange\">\r\n          <label class=\"uni-list-cell uni-list-cell-pd checkboxItemsTest\" v-for=\"item in checkboxItems\"\r\n            :key=\"item.name\">\r\n            <view>\r\n              <checkbox :value=\"item.name\" :checked=\"item.checked\"></checkbox>\r\n            </view>\r\n            <view>{{item.value}}</view>\r\n          </label>\r\n        </checkbox-group>\r\n      </view>\r\n\r\n      <view class=\"uni-form-item uni-column\">\r\n        <view class=\"title\">label用for标识表单组件</view>\r\n        <radio-group class=\"uni-list\" @change=\"radioChange\">\r\n          <view class=\"uni-list-cell uni-list-cell-pd\" v-for=\"(item,index) in radioItems\" :key=\"index\">\r\n            <view>\r\n              <radio :id=\"item.name\" :value=\"item.name\" :checked=\"item.checked\"></radio>\r\n            </view>\r\n            <label class=\"label-2-text\" :for=\"item.name\">\r\n              <text>{{item.value}}</text>\r\n            </label>\r\n          </view>\r\n        </radio-group>\r\n      </view>\r\n\r\n      <view class=\"uni-form-item uni-column\">\r\n        <view class=\"title\">label内有多个时选中第一个</view>\r\n        <checkbox-group class=\"uni-list\" @change=\"checkboxChange\">\r\n          <label class=\"label-3\">\r\n            <view class=\"uni-list-cell uni-list-cell-pd\">\r\n              <checkbox>选项一</checkbox>\r\n            </view>\r\n            <view class=\"uni-list-cell uni-list-cell-pd\">\r\n              <checkbox>选项二</checkbox>\r\n            </view>\r\n            <view class=\"uni-link uni-center\" style=\"margin:20rpx 0;\">点击该label下的文字默认选中第一个checkbox</view>\r\n          </label>\r\n        </checkbox-group>\r\n      </view>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n\r\n<style>\r\n  .uni-list-cell {\r\n    justify-content: flex-start\r\n  }\r\n\r\n  .uni-list .label-3 {\r\n    padding: 0;\r\n  }\r\n\r\n  .label-2-text {\r\n    flex: 1;\r\n  }\r\n\r\n  .uni-form-item {\r\n    display: flex;\r\n    width: 100%;\r\n    padding: 10rpx 0;\r\n  }\r\n\r\n  .uni-form-item .title {\r\n    padding: 10rpx 25rpx;\r\n  }\r\n\r\n  radio-group {\r\n    padding: 0 20rpx;\r\n  }\r\n\r\n  checkbox-group label {\r\n    margin: 0 20rpx;\r\n  }\r\n</style>\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)"},"picker":{"name":"## picker","description":"从底部弹起的滚动选择器，现支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。","compatibility":"\n###\n兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| disabled | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 是否禁用 |\n| mode | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 选择器类型 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| selector | - | 普通选择器 |\n@| multiSelector | - | 多列选择器 |\n@| time | - | 时间选择器 |\n@| date | - | 日期选择器 |\n@| region | - | 省市选择器 |\n| range | array | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | mode为 selector 或 multiSelector 时，range 有效 |\n| range-key | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 |\n| value | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | mode为select或multiSelector时：value 的值表示选择了 range 中的第几个（下标从 0 开始）；mode为time时：表示选中的时间，格式为\"hh:mm\"；mode为date时：表示选中的日期，格式为\"YYYY-MM-DD\"；mode为region时：<br/>\t\t表示选中的省市区，默认选中每一列的第一个值。 |\n| start | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | mode为time：表示有效时间范围的开始，字符串格式为\"hh:mm\"；mode为date：表示有效日期范围的开始，字符串格式为\"YYYY-MM-DD\" |\n| end | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | mode为time：表示有效时间范围的结束，字符串格式为\"hh:mm\"；mode为date：表示有效日期范围的结束，字符串格式为\"YYYY-MM-DD\" |\n| fields | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 有效值 year,month,day，表示选择器的粒度 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| year | - | 选择器粒度为年 |\n@| month | - | 选择器粒度为月份 |\n@| day | - | 选择器粒度为天 |\n| custom-item | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 可为每一列的顶部添加一个自定义的项 |\n| @change | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | value 改变时触发 change 事件，event.detail = {value: value} |\n| @columnchange | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 某一列的值改变时触发 columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改变了第几列（下标从0开始），value 的值表示变更值的下标 |\n| @cancel | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 取消选择时触发 |","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<template>\r\n  <view>\r\n    <page-head :title=\"title\"></page-head>\r\n    <view class=\"uni-title uni-common-pl\">普通选择器</view>\r\n    <view class=\"uni-list\">\r\n      <view class=\"uni-list-cell\">\r\n        <view class=\"uni-list-cell-left\">\r\n          当前选择\r\n        </view>\r\n        <view class=\"uni-list-cell-db\">\r\n          <picker class=\"picker\" @change=\"bindPickerChange\" :value=\"index\" :range=\"array\" range-key=\"name\">\r\n            <view class=\"uni-input pickerValue\">{{array[index].name}}</view>\r\n          </picker>\r\n        </view>\r\n      </view>\r\n    </view>\r\n\r\n    <view class=\"uni-title uni-common-pl\">多列选择器</view>\r\n    <view class=\"uni-list\">\r\n      <view class=\"uni-list-cell\">\r\n        <view class=\"uni-list-cell-left\">\r\n          当前选择\r\n        </view>\r\n        <view class=\"uni-list-cell-db\">\r\n          <picker class=\"pickerMulti\" mode=\"multiSelector\" @columnchange=\"bindMultiPickerColumnChange\"\r\n            :value=\"multiIndex\" :range=\"multiArray\">\r\n            <view class=\"uni-input pickerMultiValue\">\r\n              {{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}\r\n            </view>\r\n          </picker>\r\n        </view>\r\n      </view>\r\n    </view>\r\n\r\n    <view class=\"uni-title uni-common-pl\">时间选择器</view>\r\n    <view class=\"uni-list\">\r\n      <view class=\"uni-list-cell\">\r\n        <view class=\"uni-list-cell-left\">\r\n          当前选择\r\n        </view>\r\n        <view class=\"uni-list-cell-db\">\r\n          <picker class=\"pickerTime\" mode=\"time\" :value=\"time\" start=\"09:01\" end=\"21:01\" @change=\"bindTimeChange\">\r\n            <view class=\"uni-input\">{{time}}</view>\r\n          </picker>\r\n        </view>\r\n      </view>\r\n    </view>\r\n    <view class=\"uni-picker-tips\">\r\n      注：选择 09:01 ~ 21:01 之间的时间, 不在区间内不能选中\r\n    </view>\r\n\r\n    <view class=\"uni-title uni-common-pl\">日期选择器</view>\r\n    <view class=\"uni-list\">\r\n      <view class=\"uni-list-cell\">\r\n        <view class=\"uni-list-cell-left\">\r\n          当前选择\r\n        </view>\r\n        <view class=\"uni-list-cell-db\">\r\n          <picker class=\"pickerDate\" mode=\"date\" :value=\"date\" :start=\"startDate\" :end=\"endDate\"\r\n            @change=\"bindDateChange\">\r\n            <view class=\"uni-input\">{{date}}</view>\r\n          </picker>\r\n        </view>\r\n      </view>\r\n    </view>\r\n    <view class=\"uni-picker-tips\">\r\n      注：选择当前时间 ±10 年之间的时间, 不在区间内不能选中\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n\r\n<style>\r\n  .uni-picker-tips {\r\n    font-size: 12px;\r\n    color: #666;\r\n    margin-bottom: 15px;\r\n    padding: 0 15px;\r\n  }\r\n</style>\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)"},"picker-view-column":{"name":"## picker-view-column","description":"仅可放置于 picker-view 中，其子节点未继承 picker-view 的选中框的高度，需要自己设置高度并居中","compatibility":"\n###\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)"},"picker-view":{"name":"## picker-view","description":"> 组件类型：UniPickerViewElement \n\n 嵌入页面的滚动选择器","compatibility":"\n###\n兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| value | array\\<number> | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | picker-view-column 选择的第几项 |\n| indicator-style | string([string.CSSString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 设置选择器中间选中框的样式 |\n| indicator-class | string([string.ClassString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 设置选择器中间选中框的类名 |\n| mask-style | string([string.CSSString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 设置蒙层的样式 |\n| mask-top-style | string([string.CSSString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 设置蒙层上半部分的样式 |\n| mask-bottom-style | string([string.CSSString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 设置蒙层下半部分的样式 |\n| mask-class | string([string.ClassString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 设置蒙层的类名 |\n| @change | (event: [UniPickerViewChangeEvent](#unipickerviewchangeevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0<br/>\t\t开始） |","event":"\n### 事件\n#### UniPickerViewChangeEvent\n\n```mermaid\ngraph LR\n  \nUniPickerViewChangeEvent -- Extends --> UniCustomEvent&ltUniPickerViewChangeEventDetail&gt\n  style UniCustomEvent&ltUniPickerViewChangeEventDetail&gt color:#42b983\n  click UniCustomEvent&ltUniPickerViewChangeEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniPickerViewChangeEventDetail\n\n\n###### UniPickerViewChangeEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- |  :-: | :- |\n| value | Array\\<number\\> | 是 | - | - | - |\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<template>\r\n  <view>\r\n    <page-head :title=\"title\"></page-head>\r\n    <view class=\"uni-padding-wrap\">\r\n      <view class=\"uni-title\">\r\n        日期：{{year}}年{{month}}月{{day}}日\r\n      </view>\r\n    </view>\r\n    <picker-view class=\"picker-view\" :value=\"value\" @change=\"bindChange\" :indicator-style=\"indicatorStyle\"\r\n      :indicator-class=\"indicatorClass\" :mask-style=\"maskStyle\" :mask-class=\"maskClass\" :mask-top-style=\"maskTopStyle\"\r\n      :mask-bottom-style=\"maskBottomStyle\">\r\n      <picker-view-column class=\"picker-view-column\">\r\n        <view class=\"item\" v-for=\"(item,index) in years\" :key=\"index\"><text class=\"text\">{{item}}年</text></view>\r\n      </picker-view-column>\r\n      <picker-view-column class=\"picker-view-column\">\r\n        <view class=\"item\" v-for=\"(item,index) in months\" :key=\"index\"><text class=\"text\">{{item}}月</text>\r\n        </view>\r\n      </picker-view-column>\r\n      <picker-view-column class=\"picker-view-column\">\r\n        <view class=\"item\" v-for=\"(item,index) in days\" :key=\"index\"><text class=\"text\">{{item}}日</text></view>\r\n      </picker-view-column>\r\n    </picker-view>\r\n  </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n  .picker-view {\r\n    width: 100%;\r\n    height: 320px;\r\n    margin-top: 10px;\r\n  }\r\n  .item {\r\n    height: 50px;\r\n  }\r\n  .text {\r\n    line-height: 50px;\r\n    text-align: center;\r\n  }\r\n  /* 自动化测试 */\r\n  .indicator-test{\r\n    height: 50px;\r\n    border:#0055ff solid 1px;\r\n    background:rgba(0, 170, 0, 0.4);\r\n  }\r\n  .mask-test{\r\n    background-image: linear-gradient(to bottom, #d8e5ff, rgba(216, 229, 255, 0));\r\n  }\r\n\r\n  /* 自动化测试 */\r\n  .indicator-test {\r\n    height: 50px;\r\n    border: #0055ff solid 1px;\r\n    background: rgba(0, 170, 0, 0.4);\r\n  }\r\n\r\n  .mask-test {\r\n    background-image: linear-gradient(to bottom, #d8e5ff, rgba(216, 229, 255, 0));\r\n  }\r\n</style>\r\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      // 20180112 HBuilderX内测开始 :)\r\n      const _years : number[] = []\r\n      const _year = 2018\r\n      const _months : number[] = []\r\n      const _month : number = 1\r\n      const _days : number[] = []\r\n      const _day = 12\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        // 自动化测试 触发事件元素、type 类型\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, 1, 30] 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| 子组件 | 兼容性 |\n| :- | :- |\n| [picker-view-column](picker-view-column.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"-\"]]}' /> |","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)"},"radio":{"name":"## radio","description":"> 组件类型：UniRadioElement \n\n 单选项。在1组radio-group中只能选中1个","compatibility":"\n###\n兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| disabled | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否禁用 |\n| value | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | \\<radio/> 标识。当该radio 选中时，radio-group的 change 事件会携带radio的value |\n| checked | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | \\<radio/> 当前是否选中 |\n| backgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | radio默认的背景颜色 |\n| borderColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#d1d1d1\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | radio默认的边框颜色 |\n| activeBackgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007AFF\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | radio选中时的背景颜色，优先级大于color属性 |\n| activeBorderColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | radio选中时的边框颜色 |\n| foreColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.18\",\"4.18\",\"4.18\"]]}' /> | radio的图标颜色 |\n| ~~iconColor~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | radio的图标颜色 (使用foreColor替代) |\n| ~~color~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007AFF\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 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<template>\r\n  <view class=\"main\">\r\n    <radio :disabled=\"disabled_boolean\" :checked=\"checked_boolean\" :color=\"color_input\"\r\n      :backgroundColor=\"backgroundColor_input\" :borderColor=\"borderColor_input\"\r\n      :activeBackgroundColor=\"activeBackgroundColor_input\" :activeBorderColor=\"activeBorderColor_input\"\r\n      :iconColor=\"iconColor_input\" @click=\"radio_click\" @touchstart=\"radio_touchstart\" @touchmove=\"radio_touchmove\"\r\n      @touchcancel=\"radio_touchcancel\" @touchend=\"radio_touchend\" @tap=\"radio_tap\" @longpress=\"radio_longpress\">\r\n      <text>uni-app-x</text>\r\n    </radio>\r\n  </view>\r\n\r\n  <scroll-view style=\"flex: 1\">\r\n    <view class=\"content\">\r\n      <page-head title=\"组件属性\"></page-head>\r\n      <boolean-data :defaultValue=\"false\" title=\"<radio/> 当前是否选中\" @change=\"change_checked_boolean\"></boolean-data>\r\n      <boolean-data :defaultValue=\"false\" title=\"是否禁用\" @change=\"change_disabled_boolean\"></boolean-data>\r\n      <input-data defaultValue=\"#007AFF\" title=\"radio的颜色\" type=\"text\" @confirm=\"confirm_color_input\"></input-data>\r\n      <input-data defaultValue=\"#ffffff\" title=\"radio默认的背景颜色\" type=\"text\"\r\n        @confirm=\"confirm_backgroundColor_input\"></input-data>\r\n      <input-data defaultValue=\"#d1d1d1\" title=\"radio默认的边框颜色\" type=\"text\"\r\n        @confirm=\"confirm_borderColor_input\"></input-data>\r\n      <input-data defaultValue=\"#007AFF\" title=\"radio选中时的背景颜色，优先级大于color属性\" type=\"text\"\r\n        @confirm=\"confirm_activeBackgroundColor_input\"></input-data>\r\n      <input-data defaultValue=\"\" title=\"radio选中时的边框颜色\" type=\"text\"\r\n        @confirm=\"confirm_activeBorderColor_input\"></input-data>\r\n      <input-data defaultValue=\"#ffffff\" title=\"radio的图标颜色\" type=\"text\" @confirm=\"confirm_iconColor_input\"></input-data>\r\n    </view>\r\n\r\n    <view>\r\n      <page-head title=\"默认及使用\"></page-head>\r\n      <view class=\"uni-padding-wrap\">\r\n        <view class=\"uni-title uni-common-mt\">\r\n          <text class=\"uni-title-text\"> 默认样式 </text>\r\n        </view>\r\n        <radio-group class=\"uni-flex uni-row radio-group\" @change=\"testChange\" style=\"flex-wrap: wrap\">\r\n          <radio id=\"trigger-change\" value=\"r\" :checked=\"checked\" :color=\"color\" style=\"margin-right: 15px\"\r\n            class=\"radio r\">选中\r\n          </radio>\r\n          <radio value=\"r1\" style=\"margin-right: 15px\" class=\"radio r1\">{{\r\n            text\r\n          }}</radio>\r\n          <radio value=\"r2\" :disabled=\"disabled\" class=\"radio r2\">禁用</radio>\r\n          <radio value=\"r3\" class=\"radio r3\" style=\"margin-top: 10px\">{{\r\n            wrapText\r\n          }}</radio>\r\n        </radio-group>\r\n      </view>\r\n\r\n      <view class=\"uni-padding-wrap\">\r\n        <view class=\"uni-title uni-common-mt\">\r\n          <text class=\"uni-title-text\"> 不同颜色和尺寸的radio </text>\r\n        </view>\r\n        <radio-group class=\"uni-flex uni-row radio-group\">\r\n          <radio value=\"r1\" :checked=\"true\" color=\"#FFCC33\" style=\"transform: scale(0.7); margin-right: 15px\"\r\n            class=\"radio\">选中\r\n          </radio>\r\n          <radio value=\"r2\" color=\"#FFCC33\" style=\"transform: scale(0.7)\" class=\"radio\">未选中</radio>\r\n        </radio-group>\r\n      </view>\r\n\r\n      <view class=\"uni-padding-wrap\">\r\n        <view class=\"uni-title uni-common-mt\">\r\n          <text class=\"uni-title-text\"> 推荐展示样式 </text>\r\n        </view>\r\n      </view>\r\n      <view class=\"uni-list uni-common-pl\">\r\n        <radio-group @change=\"radioChange\" class=\"radio-group\">\r\n          <radio class=\"uni-list-cell uni-list-cell-pd radio recommand\" v-for=\"(item, index) in items\" :key=\"item.value\"\r\n            :class=\"index < items.length - 1 ? 'uni-list-cell-line' : ''\" :value=\"item.value\"\r\n            :checked=\"index === current\">\r\n            {{ item.name }}\r\n          </radio>\r\n        </radio-group>\r\n      </view>\r\n    </view>\r\n  </scroll-view>\r\n</template>\r\n\r\n<style>\r\n  .main {\r\n    max-height: 250px;\r\n    padding: 5px 0;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.06);\r\n    flex-direction: row;\r\n    justify-content: center;\r\n  }\r\n\r\n  .main .list-item {\r\n    width: 100%;\r\n    height: 100px;\r\n    border: 1px solid #666;\r\n  }\r\n\r\n  .uni-list-cell {\r\n    justify-content: flex-start;\r\n  }\r\n</style>\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)"},"radio-group":{"name":"## radio-group","description":"> 组件类型：UniRadioGroupElement \n\n 单选框组","compatibility":"\n###\n兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| name | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| @change | (event: [UniRadioGroupChangeEvent](#uniradiogroupchangeevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | radio-group 中的选中项发生变化时触发 change 事件，event.detail = {value: 选中项radio的value} |","event":"\n### 事件\n#### UniRadioGroupChangeEvent\n\n```mermaid\ngraph LR\n  \nUniRadioGroupChangeEvent -- Extends --> UniCustomEvent&ltUniRadioGroupChangeEventDetail&gt\n  style UniCustomEvent&ltUniRadioGroupChangeEventDetail&gt color:#42b983\n  click UniCustomEvent&ltUniRadioGroupChangeEventDetail&gt \"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| 子组件 | 兼容性 |\n| :- | :- |\n| [radio](radio.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"-\",\"-\"]]}' /> |","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)"},"slider":{"name":"## slider","description":"> 组件类型：UniSliderElement \n\n 滑动选择器","compatibility":"\n###\n兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| name | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| disabled | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否禁用 |\n| min | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | slider 最小值 |\n| max | number | 100 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | slider 最大值 |\n| step | number | 1 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | slider 步长，取值必须大于 0，并且可被(max - min)整除 |\n| value | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | radio当前取值 |\n| activeBackgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.18\",\"4.18\",\"4.18\"]]}' /> | slider 滑块左侧已选择部分的线条颜色 |\n| backgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#e9e9e9\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | radio背景条的颜色 |\n| block-size | number | 28 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | radio滑块的大小，取值范围为 12 - 28 |\n| foreColor | string([string.ColorString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.18\",\"4.18\",\"4.18\"]]}' /> | slider 的滑块背景颜色 |\n| show-value | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否显示当前 value |\n| @change | (event: [UniSliderChangeEvent](#unisliderchangeevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 完成一次拖动后触发的事件，event.detail = {value: value} |\n| @changing | (event: [UniSliderChangeEvent](#unisliderchangeevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 拖动过程中触发的事件，event.detail = {value: value} |\n| ~~block-color~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 滑块颜色 (使用foreColor替代) |\n| ~~activeColor~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | slider 滑块左侧已选择部分的线条颜色 |","event":"\n### 事件\n#### UniSliderChangeEvent\n\n```mermaid\ngraph LR\n  \nUniSliderChangeEvent -- Extends --> UniCustomEvent&ltUniSliderChangeEventDetail&gt\n  style UniCustomEvent&ltUniSliderChangeEventDetail&gt color:#42b983\n  click UniCustomEvent&ltUniSliderChangeEventDetail&gt \"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<template>\r\n  <view class=\"main\">\r\n    <slider :disabled=\"disabled_boolean\" :min=\"min_input\" :max=\"max_input\" :step=\"step_input\" :value=\"value_input\"\r\n      :activeColor=\"activeColor_input\" :backgroundColor=\"backgroundColor_input\" :block-size=\"block_size_input\"\r\n      :block-color=\"block_color_input\" :show-value=\"show_value_boolean\" :valueColor=\"valueColor\" @click=\"slider_click\"\r\n      @touchstart=\"slider_touchstart\" @touchmove=\"slider_touchmove\" @touchcancel=\"slider_touchcancel\"\r\n      @touchend=\"slider_touchend\" @tap=\"slider_tap\" @longpress=\"slider_longpress\" @change=\"slider_change\"\r\n      @changing=\"slider_changing\" style=\"width: 90%\"><text>uni-app-x</text></slider>\r\n  </view>\r\n\r\n  <scroll-view style=\"flex: 1\">\r\n    <view class=\"content\">\r\n      <page-head title=\"组件属性\"></page-head>\r\n      <boolean-data :defaultValue=\"false\" title=\"是否显示当前 value\" @change=\"change_show_value_boolean\"></boolean-data>\r\n      <boolean-data :defaultValue=\"false\" title=\"是否禁用\" @change=\"change_disabled_boolean\"></boolean-data>\r\n      <input-data defaultValue=\"0\" title=\"最小值(min)\" type=\"number\" @confirm=\"confirm_min_input\"></input-data>\r\n      <input-data defaultValue=\"100\" title=\"最大值(max)\" type=\"number\" @confirm=\"confirm_max_input\"></input-data>\r\n      <input-data defaultValue=\"1\" title=\"步长(step)，取值必须大于 0，并且可被(max - min)整除\" type=\"number\"\r\n        @confirm=\"confirm_step_input\"></input-data>\r\n      <input-data defaultValue=\"0\" title=\"当前取值(value)\" type=\"number\" @confirm=\"confirm_value_input\"></input-data>\r\n      <input-data defaultValue=\"#007aff\" title=\"滑块左侧已选择部分的线条颜色(active-color)\" type=\"text\"\r\n        @confirm=\"confirm_activeColor_input\"></input-data>\r\n      <input-data defaultValue=\"#e9e9e9\" title=\"背景条的颜色(background-color)\" type=\"text\"\r\n        @confirm=\"confirm_backgroundColor_input\"></input-data>\r\n      <input-data defaultValue=\"28\" title=\"滑块的大小(block-size)，取值范围为 12 - 28\" type=\"number\"\r\n        @confirm=\"confirm_block_size_input\"></input-data>\r\n      <input-data defaultValue=\"#ffffff\" title=\"滑块颜色(block-color)\" type=\"text\"\r\n        @confirm=\"confirm_block_color_input\"></input-data>\r\n      <input-data defaultValue=\"#888888\" title=\"Value颜色(value-color)\" type=\"text\"\r\n        @confirm=\"confirm_value_color_input\"></input-data>\r\n    </view>\r\n\r\n    <view class=\"uni-padding-wrap\">\r\n      <page-head title=\"默认及使用\"></page-head>\r\n      <view class=\"uni-title\">显示当前value</view>\r\n      <view>\r\n        <slider @change=\"sliderChange\" :value=\"50\" :show-value=\"true\" />\r\n      </view>\r\n\r\n      <view class=\"uni-title\">设置步进:step=10跳动</view>\r\n      <view>\r\n        <view class=\"uni-row\">\r\n          <text>0</text>\r\n          <text class=\"m-l-a\">100</text>\r\n        </view>\r\n        <slider @change=\"sliderChange\" :value=\"60\" :step=\"10\" />\r\n      </view>\r\n\r\n      <view class=\"uni-title\">浮点步进:step=0.01跳动</view>\r\n      <view>\r\n        <slider :value=\"0.5\" :min=\"0\" :max=\"1\" :step=\"0.01\" :show-value=\"true\" />\r\n      </view>\r\n\r\n      <view class=\"uni-title\">设置最小/最大值</view>\r\n      <view>\r\n        <slider @change=\"sliderChange\" :value=\"100\" :min=\"50\" :max=\"200\" :show-value=\"true\" />\r\n      </view>\r\n\r\n      <view class=\"uni-title\">不同颜色和大小的滑块</view>\r\n      <view>\r\n        <slider id=\"slider-custom-color-and-size\" @change=\"sliderChange\" :value=\"sliderValue\"\r\n          :backgroundColor=\"sliderBackgroundColor\" :activeColor=\"sliderActiveColor\"\r\n          :activeBackgroundColor=\"sliderActiveColor\" :blockColor=\"sliderBlockColor\" :foreColor=\"sliderBlockColor\"\r\n          :block-size=\"sliderBlockSize\" />\r\n      </view>\r\n      <view class=\"uni-title\">暗黑模式</view>\r\n      <view>\r\n        <slider :show-value=\"true\" backgroundColor=\"rgba(32,32,32,0.5)\" valueColor=\"#555\" />\r\n      </view>\r\n\r\n      <navigator url=\"./slider-in-swiper\">\r\n        <button>slider in swiper</button>\r\n      </navigator>\r\n    </view>\r\n  </scroll-view>\r\n</template>\r\n\r\n<style>\r\n  .main {\r\n    padding: 5px 0;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.06);\r\n    flex-direction: row;\r\n    justify-content: center;\r\n  }\r\n\r\n  .main .list-item {\r\n    width: 100%;\r\n    height: 100px;\r\n    border: 1px solid #666;\r\n  }\r\n\r\n  .m-l-a {\r\n    margin-left: auto;\r\n  }\r\n</style>\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)"},"switch":{"name":"## switch","description":"> 组件类型：UniSwitchElement \n\n 开关选择器","compatibility":"\n###\n兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| name | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| checked | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否选中 |\n| type | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 样式，有效值：switch, checkbox |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| switch | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> |  |\n@| checkbox | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> |  |\n| backgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.18\",\"4.18\",\"4.18\"]]}' /> | switch 的关闭状态背景颜色 |\n| activeBackgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.18\",\"4.18\",\"4.18\"]]}' /> | switch 的开启状态背景颜色 |\n| foreColor | string([string.ColorString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.18\",\"4.18\",\"4.18\"]]}' /> | switch 的滑块背景颜色 |\n| activeForeColor | string([string.ColorString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.18\",\"4.18\",\"4.18\"]]}' /> | switch 的开启状态下的滑块背景颜色 |\n| disabled | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否禁用 |\n| @change | (event: [UniSwitchChangeEvent](#uniswitchchangeevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | checked 改变时触发 change 事件，event.detail={ value:checked} |\n| ~~color~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | switch 的颜色，同 css 的 color (使用foreColor替代) |","event":"\n### 事件\n#### UniSwitchChangeEvent\n\n```mermaid\ngraph LR\n  \nUniSwitchChangeEvent -- Extends --> UniCustomEvent&ltUniSwitchChangeEventDetail&gt\n  style UniCustomEvent&ltUniSwitchChangeEventDetail&gt color:#42b983\n  click UniCustomEvent&ltUniSwitchChangeEventDetail&gt \"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<template>\r\n  <view>\r\n    <view class=\"uni-padding-wrap uni-common-mt\">\r\n      <view class=\"uni-title\">默认样式</view>\r\n      <view class=\"flex-row\">\r\n        <switch class=\"switch-checked\" :checked=\"checked\" @change=\"switch1Change\" />\r\n        <switch @change=\"switch2Change\" />\r\n      </view>\r\n      <view class=\"uni-title\">暗黑样式</view>\r\n      <view class=\"flex-row\">\r\n        <switch id=\"darkChecked\" background-color=\"#1f1f1f\" activeBackgroundColor=\"#007aff\" foreColor=\"#f0f0f0\"\r\n          activeForeColor=\"#ffffff\" :checked=\"checked\" />\r\n        <switch id=\"dark\" background-color=\"#1f1f1f\" activeBackgroundColor=\"#007aff\" foreColor=\"#f0f0f0\"\r\n          activeForeColor=\"#ffffff\" />\r\n      </view>\r\n      <view class=\"uni-title\">禁用样式</view>\r\n      <view class=\"flex-row\">\r\n        <switch class=\"switch-checked\" :checked=\"checked\" :disabled=\"true\" />\r\n        <switch :disabled=\"true\" />\r\n      </view>\r\n      <view class=\"uni-title\">不同颜色和尺寸的switch</view>\r\n      <view class=\"flex-row\">\r\n        <switch class=\"switch-color-checked\" :color=\"color\" style=\"transform:scale(0.7)\" :checked=\"true\" />\r\n        <switch class=\"switch-color\" :color=\"color\" style=\"transform:scale(0.7)\" />\r\n      </view>\r\n      <view class=\"uni-title\">推荐展示样式</view>\r\n    </view>\r\n    <view class=\"uni-list\">\r\n      <view class=\"uni-list-cell uni-list-cell-padding\">\r\n        <view class=\"uni-list-cell-db\">开启中</view>\r\n        <switch :checked=\"true\" />\r\n      </view>\r\n      <view class=\"uni-list-cell uni-list-cell-padding\">\r\n        <view class=\"uni-list-cell-db\">关闭</view>\r\n        <switch />\r\n      </view>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n  .flex-row {\r\n    flex-direction: row;\r\n  }\r\n</style>\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)"},"textarea":{"name":"## textarea","description":"> 组件类型：[UniTextareaElement](/dom/unitextareaelement.md) \n\n 多行输入框","compatibility":"\n###\n兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| name | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| value | string | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 输入框的初始内容 |\n| placeholder | string | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 输入框为空时占位符 |\n| placeholder-style | string | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 指定 placeholder 的样式，目前仅支持color,font-size和font-weight |\n| placeholder-class | string([string.ClassString](/uts/data-type.md#ide-string)) | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 指定 placeholder 的样式类，目前仅支持color,font-size和font-weight |\n| maxlength | number | \"不限制长度\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 最大输入长度，0和正数为合法值，非法值的时候不限制最大长度 |\n| auto-focus | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 自动获取焦点，与`focus`属性对比，此属性只会首次生效。 |\n| focus | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 获取焦点 |\n| confirm-type | return \\| send \\| search \\| next \\| go \\| done | \"return\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.15\"]]}' /> | 设置键盘右下角按钮的文字 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| return | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.15\"]]}' /> | 换行 |\n@| send | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"4.15\"]]}' /> | 发送 |\n@| search | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"4.15\"]]}' /> | 搜索 |\n@| next | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"4.15\"]]}' /> | 下一个 |\n@| go | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"4.15\"]]}' /> | 前往 |\n@| done | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"4.15\"]]}' /> | 完成 |\n| cursor | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 指定focus时的光标位置 |\n| confirm-hold | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 点击键盘右下角按钮时是否保持键盘不收起 |\n| auto-height | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否自动增高，设置auto-height时，style.height不生效 |\n| fixed | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true |\n| cursor-spacing | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 指定光标与键盘的距离，单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 |\n| cursor-color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"3.99\",\"4.11\"]]}' /> | 指定光标颜色 |\n| show-confirm-bar | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 是否显示键盘上方带有”完成“按钮那一栏 |\n| selection-start | number | -1 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 光标起始位置，自动聚集时有效，需与selection-end搭配使用 |\n| selection-end | number | -1 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 光标结束位置，自动聚集时有效，需与selection-satrt搭配使用 |\n| adjust-position | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 键盘弹起时，是否自动上推页面 |\n| inputmode | none \\| text \\| decimal \\| numeric \\| tel \\| search \\| email \\| url | \"text\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"x\",\"x\"]]}' /> | 是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。在符合条件的高版本webview里，uni-app的 web 和 app-vue 平台中可使用本属性。 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"x\",\"x\"]]}' /> | 无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用。 |\n@| text | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"x\",\"x\"]]}' /> | 使用用户本地区域设置的标准文本输入键盘。 |\n@| decimal | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"x\",\"x\"]]}' /> | 小数输入键盘，包含数字和分隔符（通常是“ . ”或者“ , ”），设备可能也可能不显示减号键。 |\n@| numeric | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"x\",\"x\"]]}' /> | 数字输入键盘，所需要的就是 0 到 9 的数字，设备可能也可能不显示减号键。 |\n@| tel | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"x\",\"x\"]]}' /> | 电话输入键盘，包含 0 到 9 的数字、星号（*）和井号（#）键。表单输入里面的电话输入通常应该使用 \\<input type=\"tel\"\\> 。 |\n@| search | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"x\",\"x\"]]}' /> | 为搜索输入优化的虚拟键盘，比如，返回键可能被重新标记为“搜索”，也可能还有其他的优化。 |\n@| email | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"x\",\"x\"]]}' /> | 为邮件地址输入优化的虚拟键盘，通常包含\"@\"符号和其他优化。表单里面的邮件地址输入应该使用 \\<input type=\"email\"\\> 。 |\n@| url | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"x\",\"x\"]]}' /> | 为网址输入优化的虚拟键盘，比如，“/”键会更加明显、历史记录访问等。表单里面的网址输入通常应该使用 \\<input type=\"url\"\\> 。 |\n| hold-keyboard | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.0\",\"4.11\"]]}' /> | focus时，点击页面的时候不收起键盘 |\n| @confirm | (event: [UniInputConfirmEvent](#uniinputconfirmevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 点击完成时， 触发 confirm 事件，event.detail = {value: value} |\n| @input | (event: [UniInputEvent](#uniinputevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 当键盘输入时，触发 input 事件，event.detail = {value, cursor}， @input 处理函数的返回值并不会反映到 textarea 上 |\n| @linechange | (event: [UniTextareaLineChangeEvent](#unitextarealinechangeevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0} |\n| @blur | (event: [UniTextareaBlurEvent](#unitextareablurevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 输入框失去焦点时触发，event.detail = {value, cursor} |\n| @keyboardheightchange | (event: [UniInputKeyboardHeightChangeEvent](#uniinputkeyboardheightchangeevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration} |\n| @focus | (event: [UniTextareaFocusEvent](#unitextareafocusevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 输入框聚焦时触发，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 | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 键盘高度 |\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<template>\r\n  <!-- #ifdef APP -->\r\n  <scroll-view style=\"flex: 1\">\r\n  <!-- #endif -->\r\n    <view class=\"main\">\r\n      <textarea :value=\"default_value\" class=\"uni-textarea\" :auto-focus=\"true\" :focus=\"focus_boolean\"\r\n        :confirm-hold=\"confirm_hold_boolean\" :auto-height=\"auto_height_boolean\" :fixed=\"fixed_boolean\"\r\n        :show-confirm-bar=\"show_confirm_bar_boolean\" :adjust-position=\"adjust_position_boolean\"\r\n        :cursor-color=\"cursor_color\" :cursor=\"cursor\" :placeholder=\"placeholder_value\"\r\n        :inputmode=\"inputmode_enum[inputmode_enum_current].name\"\r\n        :confirm-type=\"confirm_type_list[confirm_type_current].name\" @click=\"textarea_click\"\r\n        @touchstart=\"textarea_touchstart\" @touchmove=\"textarea_touchmove\" @touchcancel=\"textarea_touchcancel\"\r\n        @touchend=\"textarea_touchend\" @tap=\"textarea_tap\" @longpress=\"textarea_longpress\" @confirm=\"textarea_confirm\"\r\n        @input=\"textarea_input\" @linechange=\"textarea_linechange\" @blur=\"textarea_blur\"\r\n        @keyboardheightchange=\"textarea_keyboardheightchange\" @focus=\"textarea_focus\"\r\n        style=\"padding: 10px; border: 1px solid #666;height: 200px\" />\r\n    </view>\r\n    <view class=\"content\">\r\n      <boolean-data :defaultValue=\"false\" title=\"键盘弹起时，是否自动上推页面（限非 Web 平台）\"\r\n        @change=\"change_adjust_position_boolean\"></boolean-data>\r\n      <boolean-data :defaultValue=\"false\" title=\"是否自动增高，设置auto-height时，style.height不生效\"\r\n        @change=\"change_auto_height_boolean\"></boolean-data>\r\n      <boolean-data :defaultValue=\"focus_boolean\" title=\"获取焦点\" @change=\"change_focus_boolean\"></boolean-data>\r\n      <boolean-data :defaultValue=\"true\" title=\"首次自动获取焦点\" @change=\"change_auto_focus_boolean\"></boolean-data>\r\n      <boolean-data :defaultValue=\"false\" title=\"改变光标颜色为透明\" @change=\"change_cursor_color_boolean\"></boolean-data>\r\n      <enum-data :items=\"confirm_type_list\" title=\"confirm-type，设置键盘右下角按钮。（Android仅支持return）\"\r\n        @change=\"radio_change_confirm_type\"></enum-data>\r\n      <boolean-data :defaultValue=\"false\" title=\"点击软键盘右下角按钮时是否保持键盘不收起(confirm-type为return时必然不收起)\"\r\n        @change=\"change_confirm_hold_boolean\"></boolean-data>\r\n      <enum-data :items=\"inputmode_enum\" title=\"input-mode，控制软键盘类型。（仅限 Web 平台符合条件的高版本浏览器或webview）。\"\r\n        @change=\"radio_change_inputmode_enum\"></enum-data>\r\n      <boolean-data :defaultValue=\"false\" title=\"是否显示键盘上方带有“完成”按钮那一栏（仅限小程序平台）\"\r\n        @change=\"change_show_confirm_bar_boolean\"></boolean-data>\r\n      <boolean-data :defaultValue=\"false\" title=\"如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true（仅限小程序平台）\"\r\n        @change=\"change_fixed_boolean\"></boolean-data>\r\n\r\n\r\n      <view class=\"title-wrap\">\r\n        <view>maxlength 输入最大长度为10</view>\r\n      </view>\r\n      <view class=\"textarea-wrap\">\r\n        <textarea id=\"textarea-instance-maxlength\" class=\"textarea-instance\" :value=\"textareaMaxLengthValue\"\r\n          :maxlength=\"10\" />\r\n      </view>\r\n\r\n      <view class=\"title-wrap\">\r\n        <view>cursor-spacing、placeholder-class、placeholder-style例子</view>\r\n      </view>\r\n      <view class=\"textarea-wrap\">\r\n        <textarea id=\"textarea-height-exception\" class=\"textarea-instance\" placeholder=\"底部textarea测试键盘遮挡\"\r\n          placeholder-class=\"placeholder\" placeholder-style=\"background-color:red\" :cursor-spacing=\"300\" />\r\n      </view>\r\n      <view class=\"title-wrap\">\r\n        <view @click=\"setSelection(2, 5)\">设置输入框聚焦时光标的起始位置和结束位置（点击生效）</view>\r\n      </view>\r\n      <view class=\"textarea-wrap\">\r\n        <textarea id=\"textarea-instance-2\" class=\"textarea-instance\" value=\"Hello UniApp X Textarea TestCase\"\r\n          :selection-start=\"selectionStart\" :selection-end=\"selectionEnd\" @blur=\"onSelectionBlurChange\" />\r\n      </view>\r\n\r\n      <view class=\"title-wrap\">\r\n        <view>设置hold-keyboard</view>\r\n        <switch style=\"margin-left: 10px;\" @change=\"changeHoldKeyboard\" :checked=\"hold_keyboard\"></switch>\r\n      </view>\r\n      <view class=\"textarea-wrap\">\r\n        <textarea class=\"textarea-instance\" :hold-keyboard=\"hold_keyboard\" />\r\n      </view>\r\n\r\n      <view class=\"title-wrap\">\r\n        <view>同时存在 v-model 和 value</view>\r\n      </view>\r\n      <view class=\"textarea-wrap\">\r\n        <textarea id=\"both-model-value\" class=\"textarea-instance\" v-model='defaultModel' value='456'></textarea>\r\n      </view>\r\n\r\n      <view class=\"title-wrap\">\r\n        <view>设置adjust-position</view>\r\n        <switch style=\"margin-left: 10px;\" @change=\"changeAdjustPosition\" :checked=\"adjust_position\"></switch>\r\n      </view>\r\n      <view class=\"textarea-wrap\">\r\n        <textarea class=\"textarea-instance\" :adjust-position=\"adjust_position\" />\r\n      </view>\r\n    </view>\r\n  <!-- #ifdef APP -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<style>\r\n  .main {\r\n    min-height: 100px;\r\n    padding: 5px 0;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.06);\r\n    flex-direction: row;\r\n    justify-content: center;\r\n  }\r\n\r\n  .main .list-item {\r\n    width: 100%;\r\n    height: 100px;\r\n    border: 1px solid #666;\r\n  }\r\n\r\n  .textarea-wrap {\r\n    flex-direction: row;\r\n    justify-content: center;\r\n  }\r\n\r\n  .title-wrap {\r\n    flex-direction: row;\r\n    align-items: center;\r\n    margin-left: 10px;\r\n  }\r\n\r\n  .textarea-instance {\r\n    flex: 1;\r\n    border: 1 solid #666;\r\n    margin: 10px;\r\n  }\r\n\r\n  .placeholder {\r\n    background-color: yellow;\r\n  }\r\n</style>\r\n\n```\n\n>Script\n```uts\n\r\n  import { ItemType } from '@/components/enum-data/enum-data-types'\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)"},"navigator":{"name":"## navigator","description":"> 组件类型：UniNavigatorElement \n\n 页面链接","compatibility":"\n###\n兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| target | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 在哪个目标上发生跳转，默认当前应用 |\n| url | string([string.PageURIString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 当前应用内的跳转链接 |\n| open-type | string | \"navigate\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 跳转方式 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| navigate | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 对应 uni.navigateTo 或 navigateToMiniProgram 的功能 |\n@| redirect | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 对应 uni.redirectTo 的功能 |\n@| switchTab | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 对应 uni.switchTab 的功能 |\n@| reLaunch | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 对应 uni.reLaunch 的功能 |\n@| navigateBack | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 对应 uni.navigateBack 的功能 |\n| delta | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 当 open-type 为 navigateBack 时有效，表示回退的层数 |\n| app-id | string | - | - | 当target=\"miniProgram\"时有效，要打开的小程序 appId |\n| path | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 当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\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.18\",\"4.11\"]]}' /> | 当 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 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 当 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 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 是否给 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<template>\r\n  <page-head :title=\"title\"></page-head>\r\n  <view class=\"uni-padding-wrap uni-common-mt\">\r\n    <navigator id=\"navigate\" class=\"navigator\" url=\"navigate?title=navigate\">\r\n      <button type=\"default\">跳转到新页面</button>\r\n    </navigator>\r\n    <navigator id=\"redirect\" class=\"navigator\" url=\"redirect?title=redirect\" open-type=\"redirect\">\r\n      <button type=\"default\">在当前页打开redirect</button>\r\n    </navigator>\r\n    <navigator id=\"switchTab\" class=\"navigator\" url=\"/pages/tabBar/template\" open-type=\"switchTab\">\r\n      <button type=\"default\">切换到模板选项卡switchTab</button>\r\n    </navigator>\r\n    <navigator id=\"reLaunch\" class=\"navigator\" url=\"/pages/tabBar/component\" open-type=\"reLaunch\">\r\n      <button type=\"default\">关闭所有页面回首页reLaunch</button>\r\n    </navigator>\r\n    <navigator id=\"reLaunch\" class=\"navigator\" open-type=\"navigateBack\">\r\n      <button type=\"default\">返回上一页navigateBack</button>\r\n    </navigator>\r\n    <!-- <navigator id=\"reLaunch\" class=\"navigator\" open-type=\"exit\">\r\n      <button type=\"default\">退出应用（仅Android和小程序生效）</button>\r\n    </navigator> -->\r\n    <navigator id=\"navigateToErrorPage\" class=\"navigator\" url=\"/pages/error-page/error-page\">\r\n      <button type=\"default\"> 打开不存在的页面 </button>\r\n    </navigator>\r\n    <navigator id=\"navigateToErrorPage\" class=\"navigator\">\r\n      <button type=\"default\"> 未指定URL的跳转 </button>\r\n    </navigator>\r\n    <navigator style=\"flex-direction: row;justify-content: space-between;\">\r\n      <text>两端对齐样式测试</text>\r\n      <view style=\"width: 20px;height: 20px; background-color: aqua;\"></view>\r\n    </navigator>\r\n  </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n  .navigator {\r\n    margin-bottom: 15px;\r\n  }\r\n</style>\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)"},"image":{"name":"## image","description":"> 组件类型：[UniImageElement](/dom/uniimageelement.md) \n\n 图片","compatibility":"\n###\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)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 图片资源地址 |\n| mode | string | \"scaleToFill\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 图片裁剪、缩放的模式 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| scaleToFill | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 |\n@| aspectFit | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 |\n@| aspectFill | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取 |\n@| widthFix | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 宽度不变，高度自动变化，保持原图宽高比不变 |\n@| heightFix | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 高度不变，宽度自动变化，保持原图宽高比不变 |\n@| top | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 不缩放图片，只显示图片的顶部区域 |\n@| bottom | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 不缩放图片，只显示图片的底部区域 |\n@| center | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 不缩放图片，只显示图片的中间区域 |\n@| left | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 不缩放图片，只显示图片的左边区域 |\n@| right | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 不缩放图片，只显示图片的右边区域 |\n@| top left | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 不缩放图片，只显示图片的左上边区域 |\n@| top right | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 不缩放图片，只显示图片的右上边区域 |\n@| bottom left | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 不缩放图片，只显示图片的左下边区域 |\n@| bottom right | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 不缩放图片，只显示图片的右下边区域 |\n| lazy-load | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"4.11\"]]}' /> | 图片懒加载。只针对page与scroll-view下的image有效。 安卓默认懒加载不支持修改 |\n| fade-show | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"x\"]]}' /> | 图片显示动画效果 |\n| webp | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 是否支持 webP 格式 |\n| show-menu-by-longpress | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 开启长按图片显示识别小程序码菜单 |\n| draggable | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 鼠标长按是否能拖动图片(仅H5平台) |\n| @error | (event: [UniImageErrorEvent](#uniimageerrorevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 图片加载错误时触发，event.detail = { errMsg } |\n| @load | (event: [UniImageLoadEvent](#uniimageloadevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 图片加载完成时触发，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<template>\r\n  <view style=\"flex: 1;\">\r\n    <page-head :title=\"title\"></page-head>\r\n    <view class=\"uni-padding-wrap uni-common-mt\">\r\n      <view class=\"uni-center\" style=\"background:#FFFFFF;\">\r\n        <image class=\"image\" :fade-show=\"true\" mode=\"widthFix\" :src=\"imageSrc\" @error=\"error\" @load=\"load\"></image>\r\n      </view>\r\n      <view class=\"uni-btn-v\">\r\n        <button type=\"primary\" @tap=\"imageFormat\">图片格式示例</button>\r\n      </view>\r\n      <view class=\"uni-btn-v\">\r\n        <button type=\"primary\" @tap=\"imageMode\">图片缩放模式示例</button>\r\n      </view>\r\n      <view class=\"uni-btn-v\">\r\n        <button type=\"primary\" @tap=\"imagePath\">图片路径示例</button>\r\n      </view>\r\n      <view class=\"uni-btn-v\">\r\n        <button type=\"primary\" @tap=\"imageLarge\">大图示例</button>\r\n      </view>\r\n    </view>\r\n    <view v-if=\"autoTest\">\r\n      <image :src=\"setCookieImage\"></image>\r\n      <image :src=\"verifyCookieImage\" @error=\"error\"></image>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n<style>\r\n  .image {\r\n    margin: 20px auto;\r\n    width: 100px;\r\n  }\r\n</style>\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)"},"video":{"name":"## video","description":"> 组件类型：[UniVideoElement](/dom/univideoelement.md) \n\n 视频","compatibility":"\n###\n兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| loop | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否循环播放 |\n| src | string([string.VideoURIString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 视频资源地址 |\n| initial-time | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 指定视频初始播放位置 |\n| duration | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 指定视频长度 |\n| controls | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否显示默认播放控件（播放/暂停按钮、播放进度、时间） |\n| danmu-list | array | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 弹幕列表 |\n| danmu-btn | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否显示弹幕按钮，只在初始化时有效，不能动态变更 |\n| enable-danmu | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否展示弹幕，只在初始化时有效，不能动态变更 |\n| autoplay | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否自动播放 |\n| muted | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否静音播放 |\n| page-gesture | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 在非全屏模式下，是否开启亮度与音量调节手势 |\n| direction | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 设置全屏时视频的方向，不指定则根据宽高比自动判断。有效值为 0（正常竖向）, 90（屏幕逆时针90度）, -90（屏幕顺时针90度） |\n| show-progress | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 若不设置，宽度大于240时才会显示 |\n| show-fullscreen-btn | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否显示全屏按钮 |\n| show-play-btn | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否显示视频底部控制栏的播放按钮 |\n| show-center-play-btn | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否显示视频中间的播放按钮 |\n| show-loading | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否显示loading控件 |\n| enable-progress-gesture | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否开启控制进度的手势 |\n| object-fit | string | \"contain\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 当视频大小与 video 容器大小不一致时，视频的表现形式。 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| contain | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 包含 |\n@| fill | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 填充 |\n@| cover | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 覆盖 |\n| poster | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效 |\n| show-mute-btn | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否显示静音按钮 |\n| title | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 视频的标题，全屏时在顶部展示 |\n| play-btn-position | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 播放按钮的位置 |\n| enable-play-gesture | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否开启播放手势，即双击切换播放、暂停 |\n| auto-pause-if-navigate | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 当跳转到其它页面时，是否自动暂停本页面的视频 |\n| auto-pause-if-open-native | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 当跳转到其它小程序宿主原生页面时，是否自动暂停本页面的视频 |\n| vslide-gesture | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 在非全屏模式下，是否开启亮度与音量调节手势（同 page-gesture） |\n| vslide-gesture-in-fullscreen | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 在全屏模式下，是否开启亮度与音量调节手势 |\n| ad-unit-id | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 视频前贴广告单元ID |\n| poster-for-crawler | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 用于给搜索等场景作为视频封面展示，建议使用无播放 icon 的视频封面图，只支持网络地址 |\n| codec | string | \"hardware\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 解码器选择 |\n| http-cache | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 是否对 http、https 视频源开启本地缓存 |\n| play-strategy | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 播放策略 |\n| is-live | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 是否为直播源 |\n| @loadedmetadata | (event: [UniVideoLoadedMetadataEvent](#univideoloadedmetadataevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 视频元数据加载完成时触发 |\n| @play | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 当开始/继续播放时触发 |\n| @pause | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 当暂停播放时触发 |\n| @ended | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 当播放到视频末尾时触发 |\n| @timeupdate | (event: [UniVideoTimeUpdateEvent](#univideotimeupdateevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 播放进度变化时触发，event.detail = { currentTime, duration }。触发频率 250ms 一次 |\n| @fullscreenchange | (event: [UniVideoFullScreenChangeEvent](#univideofullscreenchangeevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 当视频进入和退出全屏时触发，event.detail = { fullScreen, direction }，direction取为 vertical 或 horizontal |\n| @waiting | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 视频出现缓冲时触发 |\n| @error | (event: [UniVideoErrorEvent](#univideoerrorevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 播放出错时触发 |\n| @progress | (event: [UniVideoProgressEvent](#univideoprogressevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 加载进度变化时触发，只支持一段加载。event.detail = { buffered }，百分比 |\n| @fullscreenclick | (event: [UniVideoFullScreenClickEvent](#univideofullscreenclickevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 视频全屏播放时点击屏幕触发。event.detail = { screenX, screenY, screenWidth, screenHeight } |\n| @controlstoggle | (event: [UniVideoControlsToggleEvent](#univideocontrolstoggleevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 切换 controls 显示隐藏时触发。event.detail = { show } |","event":"\n### 事件\n#### UniVideoTimeUpdateEvent\ntimeupdate 事件<br/>播放进度变化时触发\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 事件<br/>当视频进入和退出全屏是触发\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 事件<br/>视频播放出错时触发\n\n##### UniVideoErrorEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- |  :-: | :- |\n| detail | **VideoError** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- |  :-: | :- |\n@| errCode | number | 是 | - | - | 统一错误码<br/>100001 网络错误<br/>200001 内部错误<br/>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 事件<br/>加载进度变化时触发\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 事件<br/>视频播放全屏播放时点击事件\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 事件<br/>切换播放控件显示隐藏时触发\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<template>\r\n  <view class=\"uni-flex-item\">\r\n    <video class=\"video\" ref=\"video\" id=\"video\" :header=\"header\" :src=src :autoplay=\"autoplay\" :loop=\"loop\"\r\n      :muted=\"muted\" :initial-time=\"initialTime\" :duration=\"duration\" :controls=\"controls\" :danmu-btn=\"danmuBtn\"\r\n      :enable-danmu=\"enableDanmu\" :page-gesture=\"pageGesture\" :direction=\"direction\" :show-progress=\"showProgress\"\r\n      :show-fullscreen-btn=\"showFullscreenBtn\" :show-play-btn=\"showPlayBtn\" :show-center-play-btn=\"showCenterPlayBtn\"\r\n      :show-loading=\"showLoading\" :enable-progress-gesture=\"enableProgressGesture\" :object-fit=\"objectFit\"\r\n      :poster=\"poster\" :show-mute-btn=\"showMuteBtn\" :title=\"title\" :enable-play-gesture=\"enablePlayGesture\"\r\n      :vslide-gesture=\"vslideGesture\" :vslide-gesture-in-fullscreen=\"vslideGestureInFullscreen\" :codec=\"codec\"\r\n      :http-cache=\"httpCache\" :play-strategy=\"playStrategy\" :danmu-list=\"danmuList\" @play=\"onPlay\" @pause=\"onPause\"\r\n      @ended=\"onEnded\" @timeupdate=\"onTimeUpdate\" @waiting=\"onWaiting\" @error=\"onError\" @progress=\"onProgress\"\r\n      @fullscreenclick=\"onFullScreenClick\" @controlstoggle=\"onControlsToggle\" @fullscreenchange=\"onFullScreenChange\">\r\n      <!-- #ifdef APP -->\r\n      <image v-if=\"subCompEnable && subCompShow\" class=\"img-fast-backward\"\r\n        src=\"../../../static/test-video/fast-backward.png\" @tap=\"fastBackward\"></image>\r\n      <image v-if=\"subCompEnable && subCompShow\" class=\"img-fast-forward\"\r\n        src=\"../../../static/test-video/fast-forward.png\" @tap=\"fastForward\"></image>\r\n      <input id=\"input-send-danmu\" class=\"input-send-danmu\" v-if=\"subCompEnable && subCompShow\" placeholder=\"请输入弹幕内容\"\r\n        placeholder-style=\"color: white;\" confirm-type=\"send\" @confirm=\"onSendDanmuConfirm\"\r\n        @keyboardheightchange=\"onSendDanmuKeyboardHeightChange\" @blur=\"onSendDanmuBlur\"></input>\r\n      <!-- #endif -->\r\n    </video>\r\n    <scroll-view class=\"uni-padding-wrap uni-common-mt uni-flex-item\">\r\n      <view class=\"uni-btn-v\">\r\n        <navigator url=\"/pages/component/video/video-format\">\r\n          <button type=\"primary\" @click=\"pause\">视频格式示例</button>\r\n        </navigator>\r\n      </view>\r\n      <!-- #ifdef APP -->\r\n      <view class=\"uni-flex uni-btn-v\" style=\"justify-content: space-between;align-items: center;\">\r\n        <text class=\"uni-title\" style=\"width: 80%;\">子组件实现快进、快退、发送弹幕功能（全屏后显示）</text>\r\n        <switch :checked=\"subCompEnable\" @change=\"onSubCompEnableChange\" />\r\n      </view>\r\n      <!-- #endif -->\r\n      <view class=\"uni-title\">\r\n        <text class=\"uni-title-text\">API示例</text>\r\n      </View>\r\n      <view class=\"uni-btn-v\">\r\n        <button type=\"primary\" @click=\"play\">播放</button>\r\n      </view>\r\n      <view class=\"uni-btn-v\">\r\n        <button type=\"primary\" @click=\"pause\">暂停</button>\r\n      </view>\r\n      <view class=\"uni-btn-v\">\r\n        <input class=\"input\" placeholder=\"输入要跳转的位置,单位s\" type=\"number\" @input=\"onSeekInput\"></input>\r\n        <button type=\"primary\" @click=\"seek(this.pos)\">跳转到指定位置</button>\r\n      </view>\r\n      <view class=\"uni-btn-v\">\r\n        <enum-data title=\"选择进入全屏时的视频方向\" :items=\"directionItemTypes\"\r\n          @change=\"onRequestFullScreenDirectionChange\"></enum-data>\r\n        <button type=\"primary\" @click=\"requestFullScreen\">进入全屏</button>\r\n      </view>\r\n      <view class=\"uni-btn-v\">\r\n        <button type=\"primary\" @click=\"exitFullScreen\">退出全屏</button>\r\n      </view>\r\n      <view class=\"uni-btn-v\">\r\n        <button type=\"primary\" @click=\"stop\">停止</button>\r\n      </view>\r\n      <view class=\"uni-btn-v\">\r\n        <input class=\"input\" placeholder=\"输入弹幕\" value=\"{ 'text': '要显示的文本', 'color': '#FF0000' }\" type=\"string\"\r\n          @input=\"onSendDanmuInput\"></input>\r\n        <button type=\"primary\" :disabled=\"!enableDanmu\" @click=\"sendDanmu\">发送弹幕</button>\r\n      </view>\r\n      <view class=\"uni-btn-v\">\r\n        <enum-data title=\"选择倍速\" :items=\"rateItemTypes\" @change=\"onPlaybackRateChange\"></enum-data>\r\n        <button type=\"primary\" @click=\"playbackRate\">设置倍速</button>\r\n      </view>\r\n      <view class=\"uni-title\">\r\n        <text class=\"uni-title-text\">属性示例</text>\r\n      </view>\r\n      <input class=\"input margin-10\" type=\"string\" placeholder=\"设置播放资源\" @confirm=\"onSrcComfirm\"></input>\r\n      <input class=\"input margin-10\" type=\"number\" placeholder=\"设置初始播放位置（播放前设置有效）\"\r\n        @confirm=\"onInitialTimeComfirm\"></input>\r\n      <input class=\"input margin-10\" type=\"number\" placeholder=\"设置视频时长（播放前设置有效）\" @confirm=\"onDurationComfirm\"></input>\r\n      <input class=\"input margin-10\" type=\"string\" placeholder=\"设置视频封面\" @confirm=\"onPosterComfirm\"></input>\r\n      <input class=\"input margin-10\" type=\"string\" placeholder=\"设置视频标题（仅限非 Web 平台）\" @confirm=\"onTitleComfirm\"></input>\r\n      <input class=\"input margin-10\" type=\"string\" placeholder=\"设置header(json格式)\" @confirm=\"onHeaderComfirm\"></input>\r\n      <boolean-data title=\"设置是否展示弹幕（播放前设置有效）\" :defaultValue=\"enableDanmu\" @change=\"onEnableDanmuChange\"></boolean-data>\r\n      <boolean-data title=\"设置是否自动播放（播放前设置有效）\" :defaultValue=\"autoplay\" @change=\"onAutoplayChange\"></boolean-data>\r\n      <boolean-data title=\"设置是否循环播放（播放完成后生效）\" :defaultValue=\"loop\" @change=\"onLoopChange\"></boolean-data>\r\n      <boolean-data title=\"设置是否静音播放\" :defaultValue=\"muted\" @change=\"onMutedChange\"></boolean-data>\r\n      <boolean-data title=\"设置是否显示默认播放控件\" :defaultValue=\"controls\" @change=\"onControlsChange\"></boolean-data>\r\n      <boolean-data title=\"设置是否显示弹幕按钮\" :defaultValue=\"danmuBtn\" @change=\"onDanmuBtnChange\"></boolean-data>\r\n      <boolean-data title=\"设置是否显示进度条\" :defaultValue=\"showProgress\" @change=\"onShowProgressChange\"></boolean-data>\r\n      <boolean-data title=\"设置是否显示全屏按钮\" :defaultValue=\"showFullscreenBtn\"\r\n        @change=\"onShowFullscreenBtnChange\"></boolean-data>\r\n      <boolean-data title=\"设置是否显示视频底部控制栏的播放按钮\" :defaultValue=\"showPlayBtn\" @change=\"onShowPlayBtnChange\"></boolean-data>\r\n      <boolean-data title=\"设置是否显示静音按钮（仅限非 Web 平台）\" :defaultValue=\"showMuteBtn\"\r\n        @change=\"onShowMuteBtnChange\"></boolean-data>\r\n      <enum-data title=\"设置全屏时视频的方向\" :items=\"directionItemTypes\" @change=\"onDirectionChange\"></enum-data>\r\n      <boolean-data title=\"设置是否显示视频中间的播放按钮\" :defaultValue=\"showCenterPlayBtn\"\r\n        @change=\"onShowCenterPlayBtnChange\"></boolean-data>\r\n      <boolean-data title=\"设置是否显示loading控件\" :defaultValue=\"showLoading\" @change=\"onShowLoadingChange\"></boolean-data>\r\n      <boolean-data title=\"设置是否开启控制进度的手势\" :defaultValue=\"enableProgressGesture\"\r\n        @change=\"onEnableProgressGestureChange\"></boolean-data>\r\n      <boolean-data title=\"设置是否开启播放手势（仅限非 Web 平台）\" :defaultValue=\"enablePlayGesture\"\r\n        @change=\"onEnablePlayGestureChange\"></boolean-data>\r\n      <!-- #ifndef WEB -->\r\n      <boolean-data title=\"非全屏模式下，设置是否开启亮度与音量调节手势\" :defaultValue=\"pageGesture\"\r\n        @change=\"onPageGestureChange\"></boolean-data>\r\n      <!-- #endif -->\r\n      <boolean-data title=\"非全屏模式下，设置是否开启亮度与音量调节手势（仅限非 Web 平台）\" :defaultValue=\"vslideGesture\"\r\n        @change=\"onVslideGestureChange\"></boolean-data>\r\n      <boolean-data title=\"全屏模式下，设置是否开启亮度与音量调节手势（仅限非 Web 平台）\" :defaultValue=\"vslideGestureInFullscreen\"\r\n        @change=\"onVslideGestureInFullscreenChange\"></boolean-data>\r\n      <boolean-data title=\"设置是否对http、https视频源开启本地缓存（仅 App 平台，播放前设置有效）\" :defaultValue=\"httpCache\"\r\n        @change=\"onHttpCacheChange\"></boolean-data>\r\n      <enum-data title=\"设置视频大小与video容器大小不一致时，视频的表现形式\" :items=\"objectFitItemTypes\"\r\n        @change=\"onObjectFitChange\"></enum-data>\r\n      <enum-data title=\"设置解码器（仅 App 平台，播放前设置有效）\" :items=\"codecItemTypes\" @change=\"onCodecChange\"></enum-data>\r\n      <enum-data title=\"设置播放策略（仅 App 平台，播放前设置有效）\" :items=\"playStrategyItemTypes\"\r\n        @change=\"onPlayStrategyChange\"></enum-data>\r\n    </scroll-view>\r\n  </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n  .video {\r\n    width: 100%;\r\n    height: 200px;\r\n  }\r\n\r\n  .input {\r\n    height: 40px;\r\n    background: #FFF;\r\n    padding: 8px 13px;\r\n  }\r\n\r\n  .margin-10 {\r\n    margin: 10px;\r\n  }\r\n\r\n  .img-fast-backward {\r\n    width: 40px;\r\n    height: 40px;\r\n    top: 50%;\r\n    left: 12%;\r\n    transform: translate(-50%, -50%);\r\n    position: absolute;\r\n  }\r\n\r\n  .img-fast-forward {\r\n    width: 40px;\r\n    height: 40px;\r\n    top: 50%;\r\n    right: 12%;\r\n    transform: translate(50%, -50%);\r\n    position: absolute;\r\n  }\r\n\r\n  .input-send-danmu {\r\n    height: 40px;\r\n    padding: 8px 13px;\r\n    margin: 0 var(--status-bar-height);\r\n    bottom: 50px;\r\n    position: absolute;\r\n    background-color: rgba(0, 0, 0, 0.5);\r\n    color: #FFF;\r\n  }\r\n</style>\r\n\n```\n\n>Script\n```uts\n\r\n  import { ItemType } from '@/components/enum-data/enum-data-types';\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<Danmu>,\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<UniVideoElement>(\"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<Danmu>(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<ViewGroup>();\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)"},"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兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| x | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| path | string | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 动画资源地址，目前只支持绝对路径 |\n| loop | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 动画是否循环播放 |\n| autoplay | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 动画是否自动播放 |\n| action | string | \"stop\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 动画操作，可取值 play、pause、stop |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| play | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 播放 |\n@| pause | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 暂停 |\n@| stop | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 停止 |\n| hidden | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 是否隐藏动画 |\n| @ended | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | - |","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)"},"live-player":{"name":"## live-player","description":"实时音视频播放","compatibility":"\n###\n兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| x | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| src | string([string.UniLivePlayerURIString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 音视频地址。目前仅支持 flv, rtmp 格式 |\n| mode | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | live（直播），RTC（实时通话） |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| RTC | - |  |\n@| live | - |  |\n| autoplay | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 自动播放 |\n| muted | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 是否静音 |\n| orientation | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 画面方向，可选值有 vertical，horizontal |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| vertical | - |  |\n@| horizontal | - |  |\n| object-fit | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 填充模式，可选值有 contain，fillCrop |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| contain | - |  |\n@| fillCrop | - |  |\n| background-mute | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 进入后台时是否静音 |\n| min-cache | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 最小缓冲区，单位s |\n| max-cache | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 最大缓冲区，单位s |\n| @statechange | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 播放状态变化事件，detail = {code} |\n| @fullscreenchange | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 全屏变化事件，detail = {direction, fullScreen} |\n| @netstatus | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 网络状态通知，detail = {info} |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.media.live.live-player)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/live-player.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=live-player&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=live-player&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=live-player&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=live-player&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=live-player&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=live-player)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=live-player&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)"},"live-pusher":{"name":"## live-pusher","description":"实时音视频录制","compatibility":"\n###\n兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| x | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| url | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 推流地址。目前仅支持 flv, rtmp 格式 |\n| mode | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | SD（标清）, HD（高清）, FHD（超清）, RTC（实时通话） |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| RTC | - |  |\n@| SD | - |  |\n@| HD | - |  |\n@| FHD | - |  |\n| autopush | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 自动推流 |\n| muted | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 是否静音 |\n| enable-camera | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 开启摄像头 |\n| auto-focus | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 自动获取焦点 |\n| orientation | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 画面方向，可选值有 vertical，horizontal |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| vertical | - |  |\n@| horizontal | - |  |\n| beauty | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 美颜 |\n| aspect | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 美白 |\n| min-bitrate | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 最小码率 |\n| max-bitrate | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 最大码率 |\n| waiting-image | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 进入后台时推流的等待画面 |\n| waiting-image-md5 | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 等待画面资源的MD5值 |\n| background-mute | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 进入后台时是否静音 |\n| @statechange | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 播放状态变化事件，detail = {code} |\n| @error | Any | - | - | - |\n| @netstatus | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 网络状态通知，detail = {info} |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.media.live.live-pusher)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/live-pusher.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=live-pusher&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=live-pusher&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=live-pusher&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=live-pusher&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=live-pusher&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=live-pusher)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=live-pusher&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)"},"map":{"name":"## map","description":"地图","compatibility":"\n###\n兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 4.31 | 4.31 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| longitude | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.31\",\"4.31\"]]}' /> | 中心经度 |\n| latitude | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.31\",\"4.31\"]]}' /> | 中心纬度 |\n| scale | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.31\",\"4.31\"]]}' /> | 缩放级别，web端取值范围为5-18 , app端取值范围为3-20 |\n| min-scale | number | 3 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.31\",\"4.31\"]]}' /> | 最小缩放级别 |\n| max-scale | number | 20 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.31\",\"4.31\"]]}' /> | 最大缩放级别 |\n| layer-style | string | \"1\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.31\",\"4.31\"]]}' /> | 个性化地图（如实现地图暗黑模式） |\n| markers | array | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.31\",\"4.31\"]]}' /> | 标记点 |\n| covers | array | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 即将移除，请使用 markers |\n| polyline | array | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.31\",\"4.31\"]]}' /> | 路线 |\n| polygons | array | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.31\",\"4.31\"]]}' /> | 多边形 |\n| circles | array | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.31\",\"4.31\"]]}' /> | 圆 |\n| controls | array | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.31\",\"4.31\"]]}' /> | 控件 |\n| include-points | array | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.31\",\"4.31\"]]}' /> | 缩放视野以包含所有给定的坐标点 |\n| show-location | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.31\",\"4.31\"]]}' /> | 显示带有方向的当前定位点 |\n| enable-3D | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.31\",\"4.31\"]]}' /> | 是否显示3D楼块 |\n| show-compass | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.31\",\"4.31\"]]}' /> | 是否显示指南针 |\n| enable-zoom | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.31\",\"4.31\"]]}' /> | 是否支持缩放 |\n| enable-scroll | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.31\",\"4.31\"]]}' /> | 是否支持拖动 |\n| enable-rotate | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.31\",\"4.31\"]]}' /> | 是否支持旋转 |\n| rotate | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.31\",\"4.31\"]]}' /> | 旋转角度(范围0-360)地图正北和设备 y 轴角度的夹角 |\n| skew | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.31\",\"4.31\"]]}' /> | 倾斜角度，范围 0 ~ 40 , 关于 z 轴的倾角 |\n| enable-overlooking | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.31\",\"4.31\"]]}' /> | 是否开启俯视（是否开启手势修改倾斜角度） |\n| enable-satellite | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.31\",\"4.31\"]]}' /> | 是否开启卫星图 |\n| enable-traffic | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.31\",\"4.31\"]]}' /> | 是否开启实时路况 |\n| enable-poi | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.31\",\"4.31\"]]}' /> | 是否展示 POI 点 |\n| enable-building | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.31\",\"4.31\"]]}' /> | 是否展示建筑物 |\n| enable-indoorMap | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.31\",\"4.31\"]]}' /> | 是否展示室内地图 |\n| @markertap | (event: [UniMapMarkerTapEvent](#unimapmarkertapevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.31\",\"4.31\"]]}' /> | 点击标记点时触发 |\n| @callouttap | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 点击标记点对应的气泡时触发 |\n| @controltap | (event: [UniMapControlTapEvent](#unimapcontroltapevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.31\",\"4.31\"]]}' /> | 点击控件时触发 |\n| @regionchange | (event: [UniMapRegionChangeEvent](#unimapregionchangeevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.31\",\"4.31\"]]}' /> | 视野发生变化时触发 |\n| @updated | (event: [UniMapUpdatedEvent](#unimapupdatedevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.31\",\"4.31\"]]}' /> | 在地图渲染更新完成时触发 |\n| @tap | (event: [UniMapTapEvent](#unimaptapevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.31\",\"4.31\"]]}' /> | 点击地图时触发 |\n| @anchorpointtap | (event: [UniMapAnchorPointTapEvent](#unimapanchorpointtapevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.31\",\"4.31\"]]}' /> | 点击定位标时触发 |\n| @poitap | (event: [UniMapPoiTapEvent](#unimappoitapevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.31\",\"4.31\"]]}' /> | 点击地图poi点时触发 |\n| ~~theme~~ | string | \"normal\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.31\",\"4.31\"]]}' /> | 主题（satellite 或 normal） |","event":"\n### 事件\n#### UniMapMarkerTapEvent\n\n```mermaid\ngraph LR\n  \nUniMapMarkerTapEvent -- Extends --> UniCustomEvent&ltUniMapMarkerTapEventDetail&gt\n  style UniCustomEvent&ltUniMapMarkerTapEventDetail&gt color:#42b983\n  click UniCustomEvent&ltUniMapMarkerTapEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniMapMarkerTapEventDetail\n\n\n###### UniMapMarkerTapEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- |  :-: | :- |\n| markerId | number | 否 | - | - |  |\n\n\n#### UniMapControlTapEvent\n\n```mermaid\ngraph LR\n  \nUniMapControlTapEvent -- Extends --> UniCustomEvent&ltUniMapControlTapEventDetail&gt\n  style UniCustomEvent&ltUniMapControlTapEventDetail&gt color:#42b983\n  click UniCustomEvent&ltUniMapControlTapEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniMapControlTapEventDetail\n\n\n###### UniMapControlTapEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- |  :-: | :- |\n| controlId | number | 否 | - | - |  |\n\n\n#### UniMapRegionChangeEvent\n\n```mermaid\ngraph LR\n  \nUniMapRegionChangeEvent -- Extends --> UniCustomEvent&lt&gt\n  style UniCustomEvent&lt&gt color:#42b983\n  click UniCustomEvent&lt&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniMapRegionChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- |  :-: | :- |\n| causedBy | string | 否 | - | - |  |\n\n\n#### UniMapUpdatedEvent\n\n```mermaid\ngraph LR\n  \nUniMapUpdatedEvent -- Extends --> UniCustomEvent&ltUniMapUpdatedEventDetail&gt\n  style UniCustomEvent&ltUniMapUpdatedEventDetail&gt color:#42b983\n  click UniCustomEvent&ltUniMapUpdatedEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n#### UniMapTapEvent\n\n```mermaid\ngraph LR\n  \nUniMapTapEvent -- Extends --> UniCustomEvent&ltUniMapTapEventDetail&gt\n  style UniCustomEvent&ltUniMapTapEventDetail&gt color:#42b983\n  click UniCustomEvent&ltUniMapTapEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniMapTapEventDetail\n\n\n###### UniMapTapEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- |  :-: | :- |\n| latitude | number | 否 | - | - |  |\n| longitude | number | 否 | - | - |  |\n\n\n#### UniMapAnchorPointTapEvent\n\n```mermaid\ngraph LR\n  \nUniMapAnchorPointTapEvent -- Extends --> UniCustomEvent&ltUniMapAnchorPointTapEventDetail&gt\n  style UniCustomEvent&ltUniMapAnchorPointTapEventDetail&gt color:#42b983\n  click UniCustomEvent&ltUniMapAnchorPointTapEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniMapAnchorPointTapEventDetail\n\n\n###### UniMapAnchorPointTapEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- |  :-: | :- |\n| latitude | number | 否 | - | - |  |\n| longitude | number | 否 | - | - |  |\n\n\n#### UniMapPoiTapEvent\n\n```mermaid\ngraph LR\n  \nUniMapPoiTapEvent -- Extends --> UniCustomEvent&ltUniMapPoiTapEventDetail&gt\n  style UniCustomEvent&ltUniMapPoiTapEventDetail&gt color:#42b983\n  click UniCustomEvent&ltUniMapPoiTapEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniMapPoiTapEventDetail\n\n\n###### UniMapPoiTapEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- |  :-: | :- |\n| latitude | number | 否 | - | - |  |\n| longitude | number | 否 | - | - |  |\n| name | string | 否 | - | - |  |\n\n","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<template>\n  <view class=\"content\">\n    <map class=\"map\" id=\"map1\" ref=\"map1\" :longitude=\"location.longitude\" :latitude=\"location.latitude\" :scale=\"scale\"\n      :markers=\"markers\" :include-points=\"includePoints\" :polyline=\"polyline\" :polygons=\"polygons\" :circles=\"circles\"\n      :controls=\"controls\" :show-location=\"showLocation\" :enable-3D=\"enable3D\" :rotate=\"rotate\" :skew=\"skew\"\n      :show-compass=\"showCompass\" :enable-overlooking=\"enableOverlooking\" :enable-zoom=\"enableZoom\"\n      :enable-scroll=\"enableScroll\" :enable-rotate=\"enableRotate\" :enable-satellite=\"enableSatellite\"\n      :enable-traffic=\"enableTraffic\" @markertap=\"onmarkertap\" @callouttap=\"oncallouttap\" @controltap=\"oncontroltap\"\n      @regionchange=\"onregionchange\" @tap=\"maptap\" @updated=\"onupdated\" @poitap=\"onpoitap\"></map>\n    <scroll-view class=\"scrollview\" scroll-y=\"true\">\n      <view class=\"tips\">注意：需要正确配置地图服务商的Key才能正常显示地图组件</view>\n      <view class=\"uni-title\">\n        <text class=\"uni-title-text\">属性示例</text>\n      </View>\n      <input-data defaultValue=\"13\" title=\"scale: 缩放级别，取值范围为5-18\" type=\"number\"\n        @confirm=\"confirm_scale_input\"></input-data>\n      <boolean-data :defaultValue=\"showLocation\" title=\"开启显示带有方向的当前定位点\" @change=\"change_show_location\"></boolean-data>\n      <boolean-data :default-value=\"enable3D\" :disabled=\"enableSatellite\" title=\"3D效果(放大缩放级别才能看到建筑物3D效果)\" @change=\"change_enable_3d\"></boolean-data>\n      <boolean-data :default-value=\"showCompass\" title=\"显示指南针\" @change=\"change_show_campass\"></boolean-data>\n      <boolean-data :default-value=\"enableOverlooking\" title=\"俯视支持\" @change=\"change_enable_overlooking\"></boolean-data>\n      <boolean-data :default-value=\"enableRotate\" title=\"旋转支持\" @change=\"change_enable_rotate\"></boolean-data>\n      <boolean-data :default-value=\"enableZoom\" title=\"缩放支持\" @change=\"change_enable_zoom\"></boolean-data>\n      <boolean-data :default-value=\"enableScroll\" title=\"拖动支持\" @change=\"change_enable_scroll\"></boolean-data>\n      <boolean-data :default-value=\"enableSatellite\" title=\"卫星图\" @change=\"change_enable_satellite\"></boolean-data>\n      <boolean-data :default-value=\"enableTraffic\" title=\"实时路况\" @change=\"change_enable_traffic\"></boolean-data>\n\n      <button class=\"button\" @click=\"addControls\">控件</button>\n      <button class=\"button\" @click=\"addMarkers\">添加标记点</button>\n      <!-- #ifdef WEB -->\n      <button class=\"button\" @click=\"addMarkersLabel\">为标记点旁边增加标签</button>\n      <!-- #endif -->\n      <button class=\"button\" @click=\"removeMarker\">移除ID为4的标记点和标签</button>\n      <button class=\"button\" @click=\"addPolyline\">添加路线</button>\n      <button class=\"button\" @click=\"removePolyline\">移除一条路线</button>\n      <button class=\"button\" @click=\"addPolygons\">添加多边形</button>\n      <button class=\"button\" @click=\"removePolygon\">移除一个多边形</button>\n      <button class=\"button\" @click=\"addCircles\">添加圆</button>\n      <button class=\"button\" @click=\"removeCircle\">移除一个圆</button>\n      <button class=\"button\" @click=\"includePoint\">缩放视野以包含所有给定的坐标点</button>\n      <view class=\"uni-title\">\n        <text class=\"uni-title-text\">方法示例</text>\n      </View>\n      <button class=\"button\" @click=\"handleGetCenterLocation\">获取当前地图中心的经纬度</button>\n      <button class=\"button\" @click=\"handleGetRegion\">获取当前地图的视野范围</button>\n      <button class=\"button\" @click=\"handleTranslateMarker\">平移marker</button>\n      <button class=\"button\" @click=\"handleMoveToLocation\">将地图中心移动到指定坐标</button>\n      <button class=\"button\" @click=\"handleMoveToMyLocation\">将地图中心移动到当前位置</button>\n      <button class=\"button\" @click=\"handleGetScale\">获取当前地图的缩放级别</button>\n\n    </scroll-view>\n  </view>\n</template>\n\n\n\n<style>\n  .content {\n    flex: 1;\n  }\n\n  .map {\n    width: 100%;\n    height: 300px;\n    background-color: #f0f0f0;\n  }\n\n  .scrollview {\n    flex: 1;\n    padding: 10px;\n  }\n\n  .list-item {\n    flex-direction: row;\n    flex-wrap: nowrap;\n    align-items: center;\n    padding: 5px 0px;\n  }\n\n  .list-text {\n    flex: 1;\n  }\n\n  .button {\n    margin-top: 5px;\n    margin-bottom: 5px;\n  }\n\n  .tips {\n    font-size: 12px;\n    margin-top: 15px;\n    opacity: .8;\n  }\n</style>\n\n```\n\n>Script\n```uts\n\n  type TypeJestResult = {\n    translateMarkerMsg : string,\n    animationEnd : boolean,\n    centerPoints : LocationObject,\n    southwest : LocationObject,\n    northeast : LocationObject,\n    moveToLocationMsg : string,\n    scale : number\n  }\n\n  const testMarkers :Marker[]= [{\n    id: 0,\n    latitude: 39.989631,\n    longitude: 116.481018,\n    title: '方恒国际 阜通东大街6号',\n    iconPath: '../../../static/location.png',\n    rotate: 0,\n    width: 20,\n    height: 20,\n    anchor: {\n      x: 0.5,\n      y: 1\n    } ,\n    callout: {\n      content: '方恒国际 阜通东大街6号',\n      color: '#00BFFF',\n      fontSize: 10,\n      borderRadius: 4,\n      borderWidth: 1,\n      borderColor: '#333300',\n      bgColor: '#CCFF99',\n      padding: 5,\n      display: 'ALWAYS'\n    } as MapMarkerCallout\n  },\n  {\n    id: 1,\n    latitude: 39.9086920000,\n    longitude: 116.3974770000,\n    title: '天安门',\n    // zIndex: '1',\n    iconPath: '../../../static/location.png',\n    width: 40,\n    height: 40,\n    anchor: {\n      x: 0.5,\n      y: 1\n    },\n    callout: {\n      content: '首都北京\\n天安门',\n      color: '#00BFFF',\n      fontSize: 12,\n      borderRadius: 10,\n      borderWidth: 2,\n      borderColor: '#333300',\n      bgColor: '#CCFF11',\n      padding: 5,\n      display: 'ALWAYS'\n    } as MapMarkerCallout\n  },\n  {\n    id: 2,\n    latitude: 39.894793,\n    longitude: 116.321592,\n    title: '北京西站',\n    iconPath: '../../../static/location.png',\n    width: 40,\n    height: 40,\n    anchor: {\n      x: 0.5,\n      y: 1\n    },\n    callout: {\n      content: '北京西站',\n      color: '#ffffff',\n      fontSize: 12,\n      borderRadius: 10,\n      borderWidth: 2,\n      borderColor: '#333300',\n      bgColor: '#ff5500',\n      padding: 5,\n      display: 'ALWAYS'\n    } as MapMarkerCallout\n  },\n  {\n    id: 3,\n    latitude: 39.902344,\n    longitude: 116.484822,\n    title: '北京东站',\n    iconPath: '../../../static/location.png',\n    width: 20,\n    height: 20,\n    anchor: {\n      x: 0.5,\n      y: 1\n    },\n    callout: {\n      content: '北京东站',\n      color: '#ffffff',\n      fontSize: 12,\n      borderRadius: 10,\n      borderWidth: 2,\n      borderColor: '#333300',\n      bgColor: '#ff5500',\n      padding: 5,\n      display: 'ALWAYS'\n    } as MapMarkerCallout\n  },\n  {\n    id: 4,\n    latitude: 39.865011,\n    longitude: 116.379007,\n    title: '北京南站',\n    iconPath: '../../../static/location.png',\n    width: 40,\n    height: 40,\n    anchor: {\n      x: 0.5,\n      y: 1\n    },\n    callout: {\n      content: '北京南站',\n      color: '#ffffff',\n      fontSize: 12,\n      borderRadius: 10,\n      borderWidth: 2,\n      borderColor: '#333300',\n      bgColor: '#00aa00',\n      padding: 5,\n      display: 'ALWAYS'\n    } as MapMarkerCallout\n  },\n  ];\n\n\n  const testPolyline: Polyline[] = [{\n    points: [{\n      latitude: 39.925539,\n      longitude: 116.279037\n    },\n    {\n      latitude: 39.925539,\n      longitude: 116.520285\n    }],\n    color: '#FFCCFF',\n    width: 7,\n    dottedLine: true,\n    arrowLine: true,\n    borderColor: '#000000',\n    borderWidth: 2\n  },\n  {\n    points: [{\n      latitude: 39.938698,\n      longitude: 116.275177\n    },\n    {\n      latitude: 39.966069,\n      longitude: 116.289253\n    },\n    {\n      latitude: 39.944226,\n      longitude: 116.306076\n    },\n    {\n      latitude: 39.966069,\n      longitude: 116.322899\n    },\n    {\n      latitude: 39.938698,\n      longitude: 116.336975\n    }],\n    color: '#CCFFFF',\n    width: 5,\n    dottedLine: false,\n    arrowLine: true,\n    borderColor: '#CC0000',\n    borderWidth: 3\n  }\n  ];\n\n  const testPolygons : Polygon[] = [{\n    points: [{\n      latitude: 39.781892,\n      longitude: 116.293413\n    },\n    {\n      latitude: 39.787600,\n      longitude: 116.391842\n    },\n    {\n      latitude: 39.733187,\n      longitude: 116.417932\n    },\n    {\n      latitude: 39.704653,\n      longitude: 116.338255\n    }],\n    fillColor: '#FFCCFF',\n    strokeWidth: 3,\n    strokeColor: '#CC99CC',\n    zIndex: 11\n  },\n  {\n    points: [{\n      latitude: 39.887600,\n      longitude: 116.518932\n    },\n    {\n      latitude: 39.781892,\n      longitude: 116.518932\n    },\n    {\n      latitude: 39.781892,\n      longitude: 116.428932\n    },\n    {\n      latitude: 39.887600,\n      longitude: 116.428932\n    }\n    ],\n    fillColor: '#CCFFFF',\n    strokeWidth: 5,\n    strokeColor: '#CC0000',\n    zIndex: 3\n  }\n  ];\n\n  const testCircles: Circle[] = [{\n    latitude: 39.996441,\n    longitude: 116.411146,\n    radius: 15000,\n    strokeWidth: 5,\n    color: '#CCFFFF',\n    fillColor: '#CC0000'\n  },\n  {\n    latitude: 40.096441,\n    longitude: 116.511146,\n    radius: 12000,\n    strokeWidth: 3,\n    color: '#CCFFFF',\n    fillColor: '#FFCCFF'\n  },\n  {\n    latitude: 39.896441,\n    longitude: 116.311146,\n    radius: 9000,\n    strokeWidth: 1,\n    color: '#CCFFFF',\n    fillColor: '#CC0000'\n  }\n  ];\n\n  const testIncludePoints :LocationObject[] = [{\n    latitude: 39.989631,\n    longitude: 116.481018,\n  },\n  {\n    latitude: 39.9086920000,\n    longitude: 116.3974770000,\n  }\n  ];\n\n\n  const mapContext = ref(null as MapContext | null);\n  const location = ref({ longitude: 116.39742, latitude: 39.909 } as LocationObject);\n  const rotate = ref(0);\n  const skew = ref(0);\n  // 自动化测试\n  const autoTest = ref(false);\n  const updateAutoTest = (value : boolean) => {\n    autoTest.value = value\n  }\n\n\n  const jestResult = reactive({\n    translateMarkerMsg: \"\",\n    animationEnd: false,\n    centerPoints: {\n      latitude: 0,\n      longitude: 0\n    },\n    southwest: {\n      latitude: 0,\n      longitude: 0\n    },\n    northeast: {\n      latitude: 0,\n      longitude: 0\n    },\n    moveToLocationMsg: \"\",\n    scale: 0,\n  } as TypeJestResult);\n\n\n  onReady(() => {\n    mapContext.value = uni.createMapContext(\"map1\", getCurrentInstance()!.proxy!)\n  });\n\n  const scale = ref(13);\n  const confirm_scale_input = (value : number) => {\n    scale.value = value\n  };\n\n  const controls = ref([] as Control[]);\n  const addControls = () => {\n    controls.value = [{\n      id: 1,\n      position: {\n        left: 5,\n        top: 180,\n        width: 30,\n        height: 30\n      } as ControlPosition,\n      iconPath: '../../../static/uni.png',\n      clickable: true\n    } as Control]\n  }\n\n  const showLocation = ref(false);\n  const enable3D = ref(false);\n  const showCompass = ref(false);\n  const enableOverlooking = ref(false);\n  const enableRotate = ref(false);\n  const enableZoom = ref(true);\n  const enableScroll = ref(true);\n  const enableSatellite = ref(false);\n  const enableTraffic = ref(false);\n  const change_show_location = (checked : boolean) => {\n    showLocation.value = checked\n  }\n\n  const change_enable_3d = (checked : boolean) => {\n    enable3D.value = checked\n  }\n\n  const change_show_campass = (checked : boolean) => {\n    showCompass.value = checked\n  }\n\n  const change_enable_overlooking = (checked : boolean) => {\n    enableOverlooking.value = checked\n  }\n\n  const change_enable_rotate = (checked : boolean) => {\n    enableRotate.value = checked\n  }\n\n  const change_enable_zoom = (checked : boolean) => {\n    enableZoom.value = checked\n  }\n\n  const change_enable_scroll = (checked : boolean) => {\n    enableScroll.value = checked\n  }\n\n  const change_enable_satellite = (checked : boolean) => {\n    enableSatellite.value = checked\n  }\n\n  const change_enable_traffic = (checked : boolean) => {\n    enableTraffic.value = checked\n  }\n\n  const includePoints = ref([] as LocationObject[]);\n  const includePoint = () => {\n    includePoints.value = testIncludePoints;\n  };\n\n\n  let markers = ref([] as Marker[]);\n  const addMarkers = () => {\n    scale.value = 11\n    const temp = JSON.parse<Marker[]>(JSON.stringify(testMarkers))!\n    markers.value = temp\n  };\n\n  const removeMarker = () => {\n    // #ifdef APP\n    mapContext.value?.removeMarkers({markerIds:[4]})\n    // #endif\n    // #ifdef WEB\n    const index = markers.value.findIndex((marker: Marker):boolean=>{\n       return marker.id == 4\n    });\n    if (index != -1) {\n      delete markers.value[index].label;\n      markers.value.splice(index, 1);\n    } else {\n      uni.showToast({\n        title: '未找到该标记点',\n        icon: 'none'\n      });\n    }\n    // #endif\n  };\n\n  // #ifdef WEB\n  const addMarkersLabel = () => {\n    markers.value.forEach((marker, index) => {\n      marker.label = {\n        content: 'Hello Label' + (index + 1),\n        color: '#aa00ff',\n        fontSize: 12,\n        x: 5,\n        y: 0,\n        borderColor: '#333300',\n        borderWidth: 2,\n        borderRadius: 20,\n        bgColor: '#aaffff',\n        padding: 10\n      };\n    });\n  };\n  // #endif\n\n\n  const polyline = ref([] as Polyline[]);\n  const addPolyline = () => {\n    scale.value = 11;\n    polyline.value = JSON.parse<Polyline[]>(JSON.stringify(testPolyline))!;\n  };\n  const removePolyline = () => {\n    if (polyline.value.length > 1) {\n      polyline.value = JSON.parse<Polyline[]>(JSON.stringify(testPolyline))!.splice(0, 1);\n    }\n  };\n\n\n  const polygons = ref([] as Polygon[]);\n  const addPolygons = () => {\n    scale.value = 10;\n    polygons.value = JSON.parse<Polygon[]>(JSON.stringify(testPolygons))!;\n  };\n  const removePolygon = () => {\n    if (polygons.value.length > 1) {\n      polygons.value = JSON.parse<Polygon[]>(JSON.stringify(testPolygons))!.splice(0, 1);\n    }\n  };\n\n\n  const circles = ref([] as Circle[]);\n  const addCircles = () => {\n    scale.value = 10;\n    circles.value = JSON.parse<Circle[]>(JSON.stringify(testCircles))!;\n  };\n  const removeCircle = () => {\n    if (circles.value.length > 1) {\n      circles.value = JSON.parse<Circle[]>(JSON.stringify(testCircles))!.slice(1);\n    }\n  };\n\n  const handleGetCenterLocation = () => {\n      mapContext.value?.getCenterLocation({\n        success: ret => {\n          // console.log('getCenterLocation',ret);\n          jestResult.centerPoints = ret;\n          if (!autoTest.value) {\n            uni.showModal({\n              content: JSON.stringify(ret)\n            });\n          }\n        }\n      });\n  };\n\n  const handleGetRegion = () => {\n      mapContext.value?.getRegion({\n        success: ret => {\n          // console.log('getRegion',JSON.stringify(ret));\n          jestResult.southwest = ret.southwest;\n          jestResult.northeast = ret.northeast\n          if (!autoTest.value) {\n            uni.showModal({\n              content: JSON.stringify(ret)\n            });\n          }\n        }\n      });\n  };\n\n\n  const handleTranslateMarker = () => {\n      mapContext.value?.translateMarker({\n        markerId: 1,\n        destination: {\n          latitude: 39.989631,\n          longitude: 116.481018\n        },\n        autoRotate: true,\n        rotate: 10,\n        duration: 2000,\n        moveWithRotate: true,\n        // #ifdef WEB\n        animationEnd: () => {\n          console.log('动画结束');\n          jestResult.animationEnd = true;\n        },\n        // #endif\n        success: ret => {\n          console.log('handleTranslateMarker',JSON.stringify(ret));\n          const result = ret as UTSJSONObject\n          jestResult.translateMarkerMsg = result[\"errMsg\"] as string;\n        },\n        fail: error => {\n          console.log(error)\n        }\n      });\n      mapContext.value?.translateMarker({\n        markerId: 2,\n        destination: {\n          latitude: 39.902344,\n          longitude: 116.484822,\n        },\n        autoRotate: true,\n        rotate: 0,\n        duration: 2000,\n        success: ret => {\n          console.log('handleTranslateMarker', JSON.stringify(ret));\n        },\n        fail: error => {\n          console.log(error)\n        }\n      });\n  };\n\n\n  const handleGetScale = () => {\n      mapContext.value?.getScale({\n        success: res => {\n          // console.log('getScale',res);\n          scale.value = res.scale\n          jestResult.scale = res.scale\n          if (!autoTest.value) {\n            uni.showModal({\n              content: '当前地图的缩放级别为：' + res.scale\n            });\n          }\n        },\n        fail: error => {\n          console.log(error)\n        },\n      });\n  };\n\n  const handleMoveToLocation = () => {\n      mapContext.value?.moveToLocation({\n        latitude: 39.909,\n        longitude: 116.39742,\n        success: res => {\n          console.log('moveToLocation',res);\n          const result = res as UTSJSONObject\n          jestResult.moveToLocationMsg = result[\"errMsg\"] as string;\n\n          if (!autoTest.value) {\n            uni.showModal({\n              content: JSON.stringify(res)\n            });\n          }\n        },\n        fail: error => {\n          console.log(error)\n        }\n      });\n  };\n\n  const handleMoveToMyLocation = () => {\n    mapContext.value?.moveToLocation({\n      success: res => {\n        uni.showModal({\n          content: '地图中心已经移动到当前位置'\n        })\n      },\n      fail: error => {\n        console.log(error);\n      }\n    })\n  }\n\n  const maptap = (e : UniMapTapEvent) => {\n    // console.log('点击地图时触发',e)\n    uni.showModal({\n      content: JSON.stringify(e.detail)\n    });\n  };\n\n  const onmarkertap = (e : UniMapMarkerTapEvent) => {\n    // console.log('点击标记点时触发',e)\n    uni.showModal({\n      content: JSON.stringify(e.detail)\n    });\n  };\n\n  const oncontroltap = (e : UniMapControlTapEvent) => {\n    // console.log('点击控件时触发',e)\n    uni.showModal({\n      content: JSON.stringify(e.detail)\n    });\n  };\n\n  const oncallouttap = (e : UniEvent) => {\n    // console.log('点击标记点对应的气泡时触发',e)\n    uni.showModal({\n      content: JSON.stringify(e)\n    });\n  };\n\n  const onupdated = (e : UniMapUpdatedEvent) => {\n    console.log('在地图渲染更新完成时触发', e)\n  };\n\n  const onregionchange = (e : UniMapRegionChangeEvent) => {\n    console.log('视野发生变化时触发', e.detail)\n  };\n\n  const onpoitap = (e : UniMapPoiTapEvent) => {\n    // console.log('点击地图poi点时触发',e)\n    uni.showModal({\n      content: JSON.stringify(e.detail)\n    });\n  };\n\n  defineExpose({\n    jestResult,\n    autoTest,\n    updateAutoTest,\n    addControls,\n    addMarkers,\n    // #ifdef WEB\n    addMarkersLabel,\n    // #endif\n    removeMarker,\n    addPolyline,\n    removePolyline,\n    addPolygons,\n    removePolygon,\n    addCircles,\n    removeCircle,\n    includePoint,\n    handleGetCenterLocation,\n    handleGetRegion,\n    handleTranslateMarker,\n    handleMoveToLocation,\n    handleGetScale\n  })\n\n```\n\n:::","children":"### 子组件 @children-tags\n不可以嵌套组件","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)"},"canvas":{"name":"## canvas","description":"> 组件类型：[UniCanvasElement](/dom/unicanvaselement.md) \n\n 画布","compatibility":"\n###\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<template>\r\n  <view class=\"page\" id=\"page-canvas\">\r\n    <canvas id=\"canvas\" class=\"canvas-element\"></canvas>\r\n    <scroll-view class=\"scroll-view\">\r\n      <!-- #ifdef WEB -->\r\n      <button class=\"canvas-drawing-button\" @click=\"canvasToBlob\">canvasToBlob</button>\r\n      <view>\r\n        <text>testToBlobResult: {{testToBlobResult}}</text>\r\n      </view>\r\n      <!-- #endif -->\r\n      <button class=\"canvas-drawing-button\" id=\"toDataURL\" @click=\"canvasToDataURL\">canvasToDataURL</button>\r\n      <view class=\"text-group\" v-if=\"dataBase64.length>0\">\r\n        <text>canvasToDataURL:</text>\r\n        <text>{{dataBase64.slice(0,22)}}...</text>\r\n      </view>\r\n      <button @click=\"onCreateImage\">createImage</button>\r\n      <button @click=\"onCreatePath2D\">createPath2D</button>\r\n      <button @click=\"startAnimationFrame\">requestAnimationFrame</button>\r\n      <button @click=\"stopAnimationFrame\">cancelAnimationFrame</button>\r\n      <view style=\"padding: 8px 10px;\">CanvasContext API 演示</view>\r\n      <navigator url=\"./canvas-context\">\r\n        <button>CanvasContext API</button>\r\n      </navigator>\r\n\r\n      <view class=\"text-group\">\r\n        <text>获取 CanvasContext 结果：</text>\r\n        <text id=\"testCanvasContext\">{{testCanvasContext}}</text>\r\n      </view>\r\n      <view class=\"text-group\">\r\n        <text>测试 ToDataURL 结果：</text>\r\n        <text id=\"testToDataURLResult\">{{testToDataURLResult}}</text>\r\n      </view>\r\n\r\n      <view class=\"text-group\">\r\n        <text>测试 createImage 结果：</text>\r\n        <text id=\"testCreateImage\">{{testCreateImage}}</text>\r\n      </view>\r\n\r\n      <view class=\"text-group\">\r\n        <text>测试 createPath2D 结果：</text>\r\n        <text id=\"testCreatePath2D\">{{testCreatePath2D}}</text>\r\n      </view>\r\n    </scroll-view>\r\n  </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n  .page {\r\n    flex: 1;\r\n    height: 100%;\r\n    overflow: hidden;\r\n  }\r\n\r\n  .scroll-view {\r\n    flex: 1;\r\n  }\r\n\r\n  .canvas-element {\r\n    width: 100%;\r\n    height: 250px;\r\n    background-color: #ffffff;\r\n  }\r\n\r\n  .btn-to-image {\r\n    margin: 10px;\r\n  }\r\n\r\n  .text-group {\r\n    display: flex;\r\n    flex-flow: row nowrap;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    padding: 8px 10px;\r\n  }\r\n</style>\r\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":"### 子组件 @children-tags\n不可以嵌套组件","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)"},"ad":{"name":"## ad","description":"广告","compatibility":"\n###\n兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| x | 4.31 | 4.31 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| adpid | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.31\",\"4.31\"]]}' /> | 广告位id，在uniAD官网申请广告位 |\n| @load | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.31\",\"4.31\"]]}' /> | 广告加载成功的回调 |\n| @close | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.31\",\"4.31\"]]}' /> | 广告关闭的回调 |\n| @error | (e:[UniAdErrorEvent](#uniaderrorevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.31\",\"4.31\"]]}' /> | 广告加载失败的回调 |","event":"\n### 事件\n#### UniAdErrorEvent\n\n\n##### UniAdErrorEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- |  :-: | :- |\n| detail | **IUniAdError** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- |  :-: | :- |\n@| errCode | number | 是 | - | - | 错误码<br/>- -5001 广告位标识adpid为空，请传入有效的adpid<br/>- -5002 无效的广告位标识adpid，请使用正确的adpid<br/>- -5003 广告位未开通广告，请在广告平台申请并确保已审核通过<br/>- -5004 无广告模块，打包时请配置要使用的广告模块<br/>- -5005 广告加载失败，请稍后重试<br/>- -5006 广告已经展示过了，请重新加载<br/>- -5007 广告不可用或已过期，请重新请求<br/>- -5008 广告不可用或已过期，请重新请求<br/>- -5009 广告类型不符，请检查后再试<br/>- -5011 打包或开通的渠道，不支持此类型广告<br/>- -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<template>\r\n  <view>\r\n    <page-head title=\"信息流广告\"></page-head>\r\n    <ad adpid=\"1111111111\" style=\"width: 100%;\" @load=\"loadFun\" @error=\"errorFun\"></ad>\r\n    <view v-if=\"tips\" class=\"uni-center\">信息流广告加载失败，请退出当前页面重试。</view>\n    <button @click=\"pushList\">列表-信息流</button>\r\n  </view>\r\n</template>\r\n\r\n<script>\r\n  export default {\r\n    data() {\r\n      return {\r\n        tips: false\r\n      }\r\n    },\r\n    methods: {\n      pushList(){\n        uni.navigateTo({\n        \turl: '/pages/component/ad/list-view-ad',\n        })\n      },\r\n      loadFun() {\r\n        uni.showToast({\r\n          position: \"bottom\",\r\n          title: \"信息流广告加载成功\"\r\n        })\r\n      },\r\n      errorFun() {\r\n        this.tips = true;\r\n      }\r\n    }\r\n  }\r\n</script>\r\n\r\n<style>\r\n\r\n</style>\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)"},"web-view":{"name":"## web-view","description":"> 组件类型：[UniWebViewElement](/dom/uniwebviewelement.md) \n\n 承载网页的容器","compatibility":"\n###\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)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | webview 指向网页的链接 |\n| allow | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 用于为 [iframe](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe) 指定其[特征策略](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/策略特征) |\n| sandbox | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 该属性对呈现在 [iframe](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe) 框架中的内容启用一些额外的限制条件。 |\n| fullscreen | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 是否铺满整个页面，默认值：`true`。 |\n| webview-styles | **WebViewStyles** | {\"progress\":{\"color\":\"#00FF00\"}} | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | webview 网络地址页面加载进度条样式 |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- |  :-: | :- |\n@| progress | [WebViewProgressStyles](#webviewprogressstyles-values) \\\\| boolean | 是 | false | - | 网络地址页面加载进度条样式，设置为 false 时表示不显示加载进度条。 |\n@\n| horizontalScrollBarAccess | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.11\",\"4.13\"]]}' /> | 设置是否显示横向滚动条 |\n| verticalScrollBarAccess | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.11\",\"4.13\"]]}' /> | 设置是否显示纵向滚动条 |\n| @message | (event: [UniWebViewMessageEvent](#uniwebviewmessageevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 网页向应用 postMessage 时触发。e.detail = { data } |\n| @error | (event: [UniWebViewErrorEvent](#uniwebviewerrorevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 网页加载错误时触发。e.detail = { errSubject, errCode, errMsg, url, fullUrl, src } |\n| @load | (event: [UniWebViewLoadEvent](#uniwebviewloadevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.0\",\"4.11\"]]}' /> | 网页加载完成后触发。e.detail = { url, src } |\n| @loading | (event: [UniWebViewLoadingEvent](#uniwebviewloadingevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 网页加载中触发。e.detail = { url, src } |\n| @download | (event: [UniWebViewDownloadEvent](#uniwebviewdownloadevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 点击网页中可下载链接时触发。e.detail = { url, userAgent, contentDisposition, mimetype, contentLength } |\n| ~~@loaded~~ | (event: [UniWebViewLoadEvent](#uniwebviewloadevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 网页加载完成后触发。e.detail = { url, src }。已废弃，请改用load |","event":"\n### 事件\n#### UniWebViewMessageEvent\n\n```mermaid\ngraph LR\n  \nUniWebViewMessageEvent -- Extends --> UniCustomEvent&ltUniWebViewMessageEventDetail&gt\n  style UniCustomEvent&ltUniWebViewMessageEventDetail&gt color:#42b983\n  click UniCustomEvent&ltUniWebViewMessageEventDetail&gt \"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\\<string, any \\| null> \\| null，4.13版本（含）之后类型为Array\\<UTSJSONObject> |\n\n\n#### UniWebViewErrorEvent\n\n```mermaid\ngraph LR\n  \nUniWebViewErrorEvent -- Extends --> UniCustomEvent&ltUniWebViewErrorEventDetail&gt\n  style UniCustomEvent&ltUniWebViewErrorEventDetail&gt color:#42b983\n  click UniCustomEvent&ltUniWebViewErrorEventDetail&gt \"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 | 是 | - | - | 统一错误码<br/>100001 ssl error<br/>100002 page error<br/>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&ltUniWebViewLoadEventDetail&gt\n  style UniCustomEvent&ltUniWebViewLoadEventDetail&gt color:#42b983\n  click UniCustomEvent&ltUniWebViewLoadEventDetail&gt \"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&ltUniWebViewLoadingEventDetail&gt\n  style UniCustomEvent&ltUniWebViewLoadingEventDetail&gt color:#42b983\n  click UniCustomEvent&ltUniWebViewLoadingEventDetail&gt \"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&ltUniWebViewDownloadEventDetail&gt\n  style UniCustomEvent&ltUniWebViewDownloadEventDetail&gt color:#42b983\n  click UniCustomEvent&ltUniWebViewDownloadEventDetail&gt \"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<template>\r\n  <scroll-view class=\"uni-flex-item\">\r\n    <web-view id=\"web-view\" class=\"uni-flex-item\" :style=\"{ 'pointer-events': pointerEvents }\" :src=\"src\"\r\n      :webview-styles=\"webview_styles\" :horizontalScrollBarAccess=\"horizontalScrollBarAccess\"\r\n      :verticalScrollBarAccess=\"verticalScrollBarAccess\" @message=\"message\" @error=\"error\" @loading=\"loading\"\r\n      @load=\"load\" @download=\"download\" @touchstart=\"touchstart\" @tap=\"tap\">\r\n    </web-view>\r\n    <!-- #ifdef APP -->\r\n    <view class=\"uni-padding-wrap uni-common-mt\">\r\n      <view class=\"uni-btn-v\">\r\n        <input class=\"uni-input\" confirmType=\"go\" placeholder=\"输入网址跳转\" @confirm=\"confirm\" maxlength=\"-1\" />\r\n      </view>\r\n      <view class=\"uni-row uni-btn-v\">\r\n        <button class=\"uni-flex-item\" type=\"primary\" :disabled=\"!canGoBack\" @click=\"back\">后退</button>\r\n        <button class=\"margin-left-5 uni-flex-item\" type=\"primary\" :disabled=\"!canGoForward\"\r\n          @click=\"forward\">前进</button>\r\n      </view>\r\n      <view class=\"uni-row uni-btn-v\">\r\n        <button class=\"uni-flex-item\" type=\"primary\" @click=\"reload\">重新加载</button>\r\n        <button class=\"margin-left-5 uni-flex-item\" type=\"primary\" @click=\"stop\">停止加载</button>\r\n      </view>\r\n      <view class=\"uni-btn-v\">\r\n        <button type=\"primary\" @click=\"nativeToWeb\">原生和Web通信</button>\r\n      </view>\r\n      <!-- #ifdef APP-ANDROID -->\r\n      <view class=\"uni-row uni-btn-v\">\r\n        <view class=\"uni-row uni-flex-item align-items-center\">\r\n          <text>显示横向滚动条</text>\r\n          <switch :checked=\"true\" @change=\"changeHorizontalScrollBarAccess\"></switch>\r\n        </view>\r\n        <view class=\"uni-row uni-flex-item align-items-center\">\r\n          <text>显示竖向滚动条</text>\r\n          <switch :checked=\"true\" @change=\"changeVerticalScrollBarAccess\"></switch>\r\n        </view>\r\n      </view>\r\n      <!-- #endif -->\r\n      <!-- #ifdef APP-IOS -->\r\n      <view class=\"uni-row uni-btn-v\" v-if=\"isProd() === false\">\r\n        <view class=\"uni-row uni-flex-item align-items-center\">\r\n          <text>前进、后退功能在Windows端需要打自定义基座，MAC端需要配置Xcode环境后进行真机运行或者打自定义基座</text>\r\n        </view>\r\n      </view>\r\n      <!-- #endif -->\r\n    </view>\r\n    <!-- #endif -->\r\n  </scroll-view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n  .margin-left-5 {\r\n    margin-left: 5px;\r\n  }\r\n\r\n  .align-items-center {\r\n    align-items: center;\r\n  }\r\n</style>\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        pointerEvents: 'auto',\r\n        isTouchEnable: false\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.isTouchEnable = event.touches[0].clientX > 0 && event.touches[0].clientY > 0;\r\n        }\r\n      },\r\n      tap(event : UniPointerEvent) {\r\n        if (this.autoTest) {\r\n          this.isTouchEnable = event.clientX > 0 && event.clientY > 0;\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)"},"page-meta":{"name":"## page-meta","description":"","compatibility":"\n###\n兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| x | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| background-text-style | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 下拉背景字体、loading 图的样式，仅支持 dark 和 light |\n| background-color | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 窗口的背景色，必须为十六进制颜色值 |\n| background-color-top | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 顶部窗口的背景色，必须为十六进制颜色值，仅 iOS 支持 |\n| background-color-bottom | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 底部窗口的背景色，必须为十六进制颜色值，仅 iOS 支持 |\n| scroll-top | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 滚动位置，可以使用 px 或者 rpx 为单位，在被设置时，页面会滚动到对应位置 |\n| scroll-duration | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 滚动动画时长 |\n| page-style | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 页面根节点样式，页面根节点是所有页面节点的祖先节点，相当于 HTML 中的 body 节点 |\n| root-font-size | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 页面的根字体大小，页面中的所有 rem 单位，将使用这个字体大小作为参考值，即 1rem 等于这个字体大小 |\n| enable-pull-down-refresh | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 是否开启下拉刷新 |\n| @resize | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 页面尺寸变化时会触发 resize 事件， event.detail = { size: { windowWidth, windowHeight } } |\n| @scroll | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 页面滚动时会触发 scroll 事件， event.detail = { scrollTop } |\n| @scrolldone | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]]}' /> | 如果通过改变 scroll-top 属性来使页面滚动，页面滚动结束后会触发 scrolldone 事件 |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.page-meta.page-meta)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/page-meta.html)"},"navigation-bar":{"name":"## navigation-bar","description":"","compatibility":"\n###\n兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| x | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| title | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 导航条标题 |\n| title-icon | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 标题icon |\n| titleIcon-radius | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 标题icon圆角 |\n| subtitle-text | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | - |\n| subtitle-size | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | - |\n| subtitle-color | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | - |\n| subtitle-overflow | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | - |\n| title-align | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | - |\n| background-image | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | - |\n| background-repeat | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | - |\n| blur-effect | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | - |\n| loading | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 是否在导航条显示 loading 加载提示 |\n| front-color | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 导航条前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000 |\n| background-color | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 导航条背景颜色值，有效值为十六进制颜色 |\n| color-animation-duration | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 改变导航栏颜色时的动画时长，默认为 0 （即没有动画效果） |\n| color-animation-timing-func | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 改变导航栏颜色时的动画方式，支持 linear 、 easeIn 、 easeOut 和 easeInOut |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.page-meta.navigation-bar)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/navigation-bar.html)"},"custom-tab-bar":{"name":"## custom-tab-bar","description":"自定义tabBar","compatibility":"\n###\n兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.24 | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| direction | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 选项的排列方向 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| horizontal | - | 选项的排列方向水平 |\n@| vertical | - | 选项的排列方向水平 |\n| show-icon | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 是否显示icon |\n| selected | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 选中的tabBar选项索引值 |\n| @onTabItemTap | (event: [OnTabItemTapOption](#ontabitemtapoption)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 点击自定义 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)"},"unicloud-db":{"name":"## unicloud-db","description":"> 组件类型：[UniCloudDBElement](#uniclouddbelement) \n\n 是一个数据库查询组件，它将clientDB的API封装为组件，进一步减少开发者使用所需的代码量。","compatibility":"\n###\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 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.93\",\"4.11\"]]}' /> | {data, loading, hasMore, pagination, error} |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| data | - | 查询结果，类型为Array\\<UTSJSONObject> |\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)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.93\",\"4.11\"]]}' /> | 表名 |\n| field | string([string.DBFieldString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.93\",\"4.11\"]]}' /> | 查询字段，多个字段用 `,` 分割 |\n| where | string([string.JQLString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.93\",\"4.11\"]]}' /> | 查询条件 |\n| orderby | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.93\",\"4.11\"]]}' /> | 排序字段及正序倒叙设置 |\n| groupby | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.93\",\"4.11\"]]}' /> | 对数据进行分组 |\n| group-field | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.93\",\"4.11\"]]}' /> | 对数据进行分组统计 |\n| distinct | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.93\",\"4.11\"]]}' /> | 是否对数据查询结果中重复的记录进行去重 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| true | - | 去重 |\n@| false | - | 不去重 |\n| page-data | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.93\",\"4.11\"]]}' /> | add 多次查询的集合, replace 当前查询的集合 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| add | - | 多次查询的集合 |\n@| replace | - | 当前查询的集合 |\n| page-current | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.93\",\"4.11\"]]}' /> | 当前页 |\n| page-size | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.93\",\"4.11\"]]}' /> | 每页数据数量 |\n| getone | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 指定查询结果是否返回数组第一条数据，默认 false。在false情况下返回的是数组，即便只有一条结果，也需要\\[0]方式获取。在true下，直接返回结果数据，少一层数组 |\n| getcount | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.93\",\"4.11\"]]}' /> | 是否查询总数量 |\n| gettree | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.93\",\"4.11\"]]}' /> | 是否查询树状结构数据 |\n| startwith | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.93\",\"4.11\"]]}' /> | gettree的第一层级条件，此初始条件可以省略，不传startWith时默认从最顶级开始查询 |\n| limitlevel | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.93\",\"4.11\"]]}' /> | gettree查询返回的树的最大层级。超过设定层级的节点不会返回。默认10级，最大15，最小1 |\n| manual | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.93\",\"4.11\"]]}' /> | 是否手动加载数据，默认为 false，页面onLoad时自动联网加载数据 |\n| loadtime | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.93\",\"4.11\"]]}' /> | 加载数据时机，默认auto，可选值 auto\\|onready\\|manual |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| auto | - | 页面就绪后或属性变化后加载数据，默认为auto |\n@| onready | - | 页面就绪后不自动加载数据，属性变化后加载。适合在onLoad中接收上个页面的参数作为where条件时 |\n@| manual | - | 手动模式，不自动加载数据。如果涉及到分页，需要先手动修改当前页，在调用加载数据 |\n| @load | (data : Array\\<UTSJSONObject>, ended : boolean, pagination : [UTSJSONObject](/uts/buildin-object-api/utsjsonobject.md)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.93\",\"4.11\"]]}' /> | 成功回调。如联网返回结果后，想修改下数据再渲染界面，则在本方法里对data进行修改 |\n| @error | (event: [UniEvent](/component/common.md#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.93\",\"4.11\"]]}' /> | 失败回调 |\n| ~~action~~ | string([string.ClientDBActionString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 云端执行数据库查询的前或后，触发某个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<template>\r\n  <view class=\"content\">\r\n    <unicloud-db ref=\"udb\" v-slot:default=\"{data, pagination, loading, error}\" :collection=\"collection\" :getcount=\"true\"\r\n      loadtime=\"manual\">\r\n      <list-view v-if=\"data.length>0\" ref=\"listView\" class=\"list\" :scroll-y=\"true\" @scrolltolower=\"loadMore()\">\r\n        <list-item class=\"list-item\" v-for=\"(item, _) in data\">\r\n          <view class=\"list-item-fill\">\r\n            <text>{{item}}</text>\r\n          </view>\r\n          <view>\r\n            <text class=\"list-item-remove\" @click=\"remove(item.getString('_id')!)\">❌</text>\r\n          </view>\r\n        </list-item>\r\n      </list-view>\r\n      <text class=\"loading\" v-if=\"loading\">Loading...</text>\r\n      <view v-if=\"error!=null\">{{error.errMsg}}</view>\r\n      <view class=\"pagination\" v-if=\"data.length>0\">\r\n        <text class=\"pagination-item\">{{data.length}} / {{pagination.count}}</text>\r\n      </view>\r\n    </unicloud-db>\r\n    <view class=\"btn-group\">\r\n      <button class=\"btn\" @click=\"add()\">Add</button>\r\n      <button class=\"btn\" @click=\"get()\">Get</button>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n<script>\r\n  const db = uniCloud.databaseForJQL()\r\n\r\n  export default {\r\n    data() {\r\n      return {\r\n        collection: 'unicloud-db-test',\r\n        collectionList: [\r\n          db.collection('book').where('name == \"水浒传\"').getTemp(),\r\n        ] as UTSJSONObject[],\r\n        uniCloudElement: null as UniCloudDBElement | null,\r\n        isTesting: false,\r\n        addResult: {},\r\n        updateResult: {},\r\n        removeResult: {}\r\n      }\r\n    },\r\n    onReady() {\r\n      this.uniCloudElement = this.$refs['udb'] as UniCloudDBElement\r\n      this.get();\r\n    },\r\n    onPullDownRefresh() {\r\n      this.uniCloudElement!.loadData({\r\n        clear: true,\r\n        success: (_ : UniCloudDBGetResult) => {\r\n          uni.stopPullDownRefresh()\r\n        }\r\n      })\r\n    },\r\n    methods: {\r\n      loadMore() {\r\n        this.uniCloudElement!.loadMore()\r\n      },\r\n      get() {\r\n        this.uniCloudElement!.loadData({\r\n          clear: true\r\n        })\r\n      },\r\n      add() {\r\n        const value = {\r\n          title: \"title-\" + Date.now(),\r\n          comment: \"comment\" + Date.now()\r\n        };\r\n        this.uniCloudElement!.add(value, {\r\n          showToast: false,\r\n          success: (res : UniCloudDBAddResult) => {\r\n            this.addResult = {\r\n              id: res.id\r\n            };\r\n            this.get();\r\n          },\r\n          fail: (err : any | null) => {\r\n            this.showError(err)\r\n          }\r\n        })\r\n      },\r\n      update(id : string) {\r\n        const value = {\r\n          title: \"title-\" + Date.now(),\r\n          comment: \"comment\" + Date.now()\r\n        };\r\n        this.uniCloudElement!.update(id, value, {\r\n          showToast: false,\r\n          needLoading: true,\r\n          needConfirm: false,\r\n          loadingTitle: \"正在更新...\",\r\n          success: (res : UniCloudDBUpdateResult) => {\r\n            this.updateResult = {\r\n              updated: res.updated\r\n            }\r\n          },\r\n          fail: (err : any | null) => {\r\n            this.showError(err)\r\n          }\r\n        })\r\n      },\r\n      remove(id : string) {\r\n        this.uniCloudElement!.remove(id, {\r\n          showToast: false,\r\n          needConfirm: false,\r\n          needLoading: false,\r\n          success: (res : UniCloudDBRemoveResult) => {\r\n            this.removeResult = {\r\n              deleted: res.deleted\r\n            }\r\n          },\r\n          fail: (err : any | null) => {\r\n            this.showError(err)\r\n          }\r\n        })\r\n      },\r\n      onQueryLoad(data : Array<UTSJSONObject>, ended : boolean, pagination : UTSJSONObject) {\r\n        console.log(data, ended, pagination);\r\n      },\r\n      showError(err : any | null) {\r\n        const error = err as UniCloudError\r\n        uni.showModal({\r\n          content: error.errMsg,\r\n          showCancel: false\r\n        })\r\n      }\r\n    }\r\n  }\r\n</script>\r\n\r\n<style>\r\n  .content {\r\n    flex: 1;\r\n    flex-direction: column;\r\n  }\r\n\r\n  .list {\r\n    flex: 1;\r\n    flex-direction: column;\r\n  }\r\n\r\n  .list-item {\r\n    flex-direction: row;\r\n    padding: 10px;\r\n  }\r\n\r\n  .list-item-fill {\r\n    flex: 1;\r\n  }\r\n\r\n  .list-item-remove {\r\n    padding: 10px;\r\n  }\r\n\r\n  .loading {\r\n    padding: 10px;\r\n    text-align: center;\r\n  }\r\n\r\n  .pagination {\r\n    flex-direction: row;\r\n    background-color: #f2f2f2;\r\n  }\r\n\r\n  .pagination-item {\r\n    margin: auto;\r\n    padding: 5px 10px;\r\n  }\r\n\r\n  .btn-group {\r\n    flex-direction: row;\r\n  }\r\n\r\n  .btn {\r\n    flex: 1;\r\n    margin: 10px;\r\n  }\r\n</style>\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)","component_type":"### UniCloudDBElement\n\n#### UniCloudDBElement 的属性值\n| 名称 | 类型 | 必填 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| dataList | Array\\<UTSJSONObject> | 是 | - | 已加载的数据 |\n#### UniCloudDBElement 的方法\n##### loadData(options?: UTSJSONObject \\| null): void @loaddata\n加载数据\n当 \\<unicloud-db> 组件的 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