From 7854afe9ec19539ae0e56302a3fdbb7aa9a4dbbc Mon Sep 17 00:00:00 2001 From: DCloud_LXH <283700113@qq.com> Date: Sat, 30 Nov 2024 11:57:04 +0800 Subject: [PATCH] chore: uts com json --- docs/.vuepress/utils/utsComJson.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/.vuepress/utils/utsComJson.json b/docs/.vuepress/utils/utsComJson.json index ce16f5c5..c0966a31 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兼容性\n| Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.0 | 4.41 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| hover-class | string([string.ClassString](/uts/data-type.md#ide-string)) | \"none\" | | 指定按下去的样式类。当 hover-class=\"none\" 时，没有点击态效果 |\n| hover-stop-propagation | boolean | false | | 指定是否阻止本节点的祖先节点出现点击态(祖先节点：指根节点到该节点路径上的所有节点都是这个节点的祖先节点) |\n| hover-start-time | number | 50 | | 按住后多久出现点击态，单位毫秒 |\n| hover-stay-time | number | 400 | | 手指松开后点击态保留时间，单位毫秒 |","event":"","example":"### 示例\n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/view/view.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/view/view\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/view/view\n\n>Template\n```vue\n\r\n\r\n\r\n\r\n\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/miniprogram/dev/component/view.html)\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 | 4.41 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| type | string | - | | 渲染模式，可取值 nested |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| nested | | 嵌套模式。用于处理父子 scroll-view 间的嵌套滚动，子节点只能是 nested-scroll-header nested-scroll-body 组件或自定义 refresher |\n| direction | string | \"vertical\" | | 滚动方向，可取值 none、all、horizontal、vertical，默认值vertical |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| none | | 禁止滚动 |\n@| all | | 横向竖向都可滚动 app端不支持 |\n@| horizontal | | 横向滚动 |\n@| vertical | | 竖向滚动 |\n| associative-container | string | \"\" | | 关联的滚动容器 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| nested-scroll-view | | 嵌套滚动 |\n| enable-back-to-top | boolean | false | | iOS点击顶部状态栏滚动条返回顶部，只支持竖向 |\n| bounces | boolean | true | | 控制是否回弹效果 优先级高于rebound |\n| upper-threshold | number | 50 | | 距顶部/左边多远时（单位px），触发 scrolltoupper 事件 |\n| lower-threshold | number | 50 | | 距底部/右边多远时（单位px），触发 scrolltolower 事件 |\n| scroll-top | number | 0 | | 设置竖向滚动条位置 |\n| scroll-left | number | 0 | | 设置横向滚动条位置 |\n| scroll-into-view | string([string.IDString](/uts/data-type.md#ide-string)) | - | | 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素起始位置 |\n| scroll-with-animation | boolean | false | | 是否在设置滚动条位置时使用滚动动画，设置false没有滚动动画 |\n| refresher-enabled | boolean | false | | 开启下拉刷新，暂时不支持scroll-x = true横向刷新 |\n| refresher-threshold | number | 45 | | 设置下拉刷新阈值 |\n| refresher-max-drag-distance | number | - | | 设置下拉最大拖拽距离（单位px），默认是下拉刷新控件高度的2.5倍 |\n| refresher-default-style | string | \"black\" | | 设置下拉刷新默认样式，支持设置 black \\| white \\| none， none 表示不使用默认样式 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| black | | 深颜色雪花样式 |\n@| white | | 浅白色雪花样式 |\n@| none | | 不使用默认样式 |\n| refresher-background | string([string.ColorString](/uts/data-type.md#ide-string)) | \"transparent\" | | 设置下拉刷新区域背景颜色，默认透明 |\n| refresher-triggered | boolean | false | | 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发 |\n| show-scrollbar | boolean | true | | 控制是否出现滚动条 |\n| custom-nested-scroll | boolean | false | | 子元素是否开启嵌套滚动 将滚动事件与父元素协商处理 |\n| nested-scroll-child | string([string.IDString](/uts/data-type.md#ide-string)) | \"\" | | 嵌套滚动子元素的id属性，不支持ref，scroll-view惯性滚动时会让对应id元素视图进行滚动，子元素滚动时会触发scroll-view的nestedprescroll事件，嵌套子元素需要设置custom-nested-scroll = true |\n| @refresherpulling | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | | 下拉刷新控件被下拉 |\n| @refresherrefresh | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | | 下拉刷新被触发 |\n| @refresherrestore | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | | 下拉刷新被复位 |\n| @refresherabort | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | | 下拉刷新被中止 |\n| @scrolltoupper | (event: [UniScrollToUpperEvent](#uniscrolltoupperevent)) => void | - | | 滚动到顶部/左边，会触发 scrolltoupper 事件 |\n| @scrolltolower | (event: [UniScrollToLowerEvent](#uniscrolltolowerevent)) => void | - | | 滚动到底部/右边，会触发 scrolltolower 事件 |\n| @scroll | (event: [UniScrollEvent](#uniscrollevent)) => void | - | | 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |\n| @scrollend | (event: [UniScrollEvent](#uniscrollevent)) => void | - | | 滚动结束时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |\n| @startnestedscroll | (event: [UniStartNestedScrollEvent](#unistartnestedscrollevent)) => Boolean | - | | 子元素开始滚动时触发, return true表示与子元素开启滚动协商 默认return false! event = {node} |\n| @nestedprescroll | (event: [UniNestedPreScrollEvent](#uninestedprescrollevent)) => void | - | | 子元素滚动时触发，可执行event.consumed(x,y)告知子元素deltaX、deltaY各消耗多少。子元素将执行差值后的deltaX、deltaY滚动距离。不执行consumed(x,y)则表示父元素不消耗deltaX、deltaY。event = {deltaX, deltaY} |\n| @stopnestedscroll | (event: [UniStopNestedScrollEvent](#unistopnestedscrollevent)) => void | - | | 子元素滚动结束或意外终止时触发 |\n| enable-passive | boolean | - | | - |\n| fast-deceleration | boolean | - | | - |\n| @dragstart | eventhandle | - | | - |\n| @dragging | eventhandle | - | | - |\n| @dragend | eventhandle | - | | - |\n| ~~rebound~~ | boolean | true | | 控制是否回弹效果。已废弃，请改用bounces |\n| ~~scroll-y~~ | boolean | true | | 允许纵向滚动，不支持同时设置scroll-x属性为true，同时设置true时scroll-y生效。已废弃，请改用direction |\n| ~~scroll-x~~ | boolean | false | | 允许横向滚动，不支持同时设置scroll-y属性为true，同时设置true时scroll-y生效。已废弃，请改用direction |","event":"\n### 事件\n#### UniRefresherEvent\n\n```mermaid\ngraph LR\n \nUniRefresherEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniRefresherEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniRefresherEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| dy | number | 是 | - | - | - |\n\n\n#### UniScrollToUpperEvent\n\n```mermaid\ngraph LR\n \nUniScrollToUpperEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniScrollToUpperEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniScrollToUpperEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| direction | string | 是 | - | - | 滚动方向 top 或 left |\n\n\n#### UniScrollToLowerEvent\n\n```mermaid\ngraph LR\n \nUniScrollToLowerEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniScrollToLowerEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniScrollToLowerEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| direction | string | 是 | - | - | 滚动方向 bottom 或 right |\n\n\n#### UniScrollEvent\n\n```mermaid\ngraph LR\n \nUniScrollEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniScrollEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniScrollEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| scrollTop | number | 是 | - | - | 竖向滚动的距离 |\n@| scrollLeft | number | 是 | - | - | 横向滚动的距离 |\n@| scrollHeight | number | 是 | - | - | 滚动区域的高度 |\n@| scrollWidth | number | 是 | - | - | 滚动区域的宽度 |\n@| deltaY | number | 是 | - | - | 当次滚动事件竖向滚动量 |\n@| deltaX | number | 是 | - | - | 当次滚动事件横向滚动量 |\n\n\n#### UniStartNestedScrollEvent\n\n```mermaid\ngraph LR\n \nUniStartNestedScrollEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniStartNestedScrollEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| node | [UniElement](/dom/unielement.md) | 是 | - | - | 开始滚动子节点对象 |\n| isTouch | boolean | 是 | - | | 是否由触摸行为发生的Event |\n\n\n#### UniNestedPreScrollEvent\n\n```mermaid\ngraph LR\n \nUniNestedPreScrollEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniNestedPreScrollEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| deltaX | number | 是 | - | - | x轴滚动距离 |\n| deltaY | number | 是 | - | - | y轴滚动距离 |\n| isTouch | boolean | 是 | - | | 是否由触摸行为发生的Event |\n\n\n##### UniNestedPreScrollEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| consumed | (consumedX: number, consumedY: number) => void | 是 | - | - | 通知到子节点x,y轴滚动距离的消耗 |\n\n#### UniStopNestedScrollEvent\n\n```mermaid\ngraph LR\n \nUniStopNestedScrollEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniStopNestedScrollEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| isTouch | boolean | 是 | - | - | 是否由触摸行为发生的Event |\n\n","example":"### 示例\n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/scroll-view/scroll-view.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/scroll-view/scroll-view\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/scroll-view/scroll-view\n\n>Template\n```vue\n\r\n\r\n\r\n\r\n\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":"### 子组件 @children-tags\n支持所有组件","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/miniprogram/dev/component/scroll-view.html)\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 | x | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| item-id | string | - | | 该 swiper-item 的标识符 |\n| skip-hidden-item-layout | boolean | - | | - |","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/miniprogram/dev/component/swiper-item.html)\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 | 4.41 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| indicator-dots | boolean | false | | 是否显示面板指示点 |\n| indicator-color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"rgba(0, 0, 0, .3)\" | | 指示点颜色 |\n| indicator-active-color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#000000\" | | 当前选中的指示点颜色 |\n| active-class | string | - | | swiper-item 可见时的 class |\n| changing-class | boolean | - | | acceleration 设置为 {{true}} 时且处于滑动过程中，中间若干屏处于可见时的class |\n| acceleration | boolean | - | | 当开启时，会根据滑动速度，连续滑动多屏 |\n| disable-programmatic-animation | boolean | - | | 是否禁用代码变动触发 swiper 切换时使用动画。 |\n| disable-touch | boolean | false | | 是否禁止用户 touch 操作 |\n| touchable | boolean | - | | 是否监听用户的触摸事件 |\n| easing-function | string | - | | 指定 swiper 切换缓动动画类型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| default | | |\n@| linear | | |\n@| easeInCubic | | |\n@| easeOutCubic | | |\n@| easeInOutCubic | | |\n| autoplay | boolean | false | | 是否自动切换 |\n| current | number | 0 | | 当前所在滑块的 index |\n| current-item-id | string | - | | 当前所在滑块的 item-id ，不能与 current 被同时指定 |\n| interval | number | 3000 | | 自动切换时间间隔 |\n| duration | number | - | | 滑动动画时长 |\n| circular | boolean | false | | 是否采用衔接滑动 |\n| vertical | boolean | false | | 滑动方向是否为纵向 |\n| rebound | boolean | true | | 控制是否回弹效果 |\n| previous-margin | string | - | | 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值 |\n| next-margin | string | - | | 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 |\n| display-multiple-items | number | - | | 同时显示的滑块数量 |\n| skip-hidden-item-layout | boolean | - | | 是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息 |\n| @change | (event: [UniSwiperChangeEvent](#uniswiperchangeevent)) => void | - | | current 改变时会触发 change 事件，event.detail = {current: current, source: source} |\n| @transition | (event: [UniSwiperTransitionEvent](#uniswipertransitionevent)) => void | - | | swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy} |\n| @animationfinish | (event: [UniSwiperAnimationFinishEvent](#uniswiperanimationfinishevent)) => void | - | | 动画结束时会触发 animationfinish 事件，event.detail = {current: current, source: source} |","event":"\n### 事件\n#### UniSwiperChangeEvent\n\n```mermaid\ngraph LR\n \nUniSwiperChangeEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniSwiperChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniSwiperChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| current | number | 是 | - | - | 发生change事件的滑块下标 |\n@| currentItemId | string | 否 | - | | 切换结束的 swiper-item 的 item-id 属性值 |\n@| source | string | 是 | - | - | autoplay 自动播放导致swiper变化；touch 用户划动引起swiper变化 |\n\n\n#### UniSwiperTransitionEvent\n\n```mermaid\ngraph LR\n \nUniSwiperTransitionEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniSwiperTransitionEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniSwiperTransitionEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| dx | number | 是 | - | - | 横向偏移量，单位是逻辑像素px |\n@| dy | number | 是 | - | - | 纵向偏移量，单位是逻辑像素px |\n\n\n#### UniSwiperAnimationFinishEvent\n\n```mermaid\ngraph LR\n \nUniSwiperAnimationFinishEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniSwiperAnimationFinishEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniSwiperAnimationFinishEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| current | number | 是 | - | - | 发生动画结束事件的滑块下标 |\n@| currentItemId | string | 否 | - | | 动画结束的 swiper-item 的 item-id 属性值 |\n@| source | string | 是 | - | - | autoplay 自动播放导致swiper变化；touch 用户划动引起swiper变化 |\n\n","example":"### 示例\n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/swiper/swiper.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/swiper/swiper\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/swiper/swiper\n\n>Template\n```vue\n\r\n\r\n\r\n\r\n\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) | |","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/miniprogram/dev/component/swiper.html)\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 | 4.41 | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| width | number | - | | 页面宽度（px 为单位） |\n| min-width | number | - | | 页面最小宽度（px 为单位） |\n| max-width | number | - | | 页面最大宽度（px 为单位） |\n| height | number | - | | 页面高度（px 为单位） |\n| min-height | number | - | | 页面最小高度（px 为单位） |\n| max-height | number | - | | 页面最大高度（px 为单位） |\n| orientation | string | - | | 屏幕方向（landscape 或 portrait） |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| vertical | - | |\n@| horizontal | - | |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.match-media)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/match-media.html)\n- [微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/component/match-media.html)\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 | 4.41 | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| scale-area | boolean | - | | - |","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/miniprogram/dev/component/movable-area.html)\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 | 4.41 | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| direction | string | - | | movable-view的移动方向，属性值有all、vertical、horizontal、none |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| all | - | |\n@| vertical | - | |\n@| horizontal | - | |\n@| none | - | |\n| inertia | boolean | - | | movable-view 是否带有惯性。 |\n| out-of-bounds | boolean | - | | 超过可移动区域后，movable-view 是否还可以移动。 |\n| x | string \\\\| number | - | | 定义 x 轴方向的偏移，如果 x 的值不在可移动范围内，会自动移动到可移动范围；改变 x 的值会触发动画。 |\n| y | string \\\\| number | - | | 定义 y 轴方向的偏移，如果 y 的值不在可移动范围内，会自动移动到可移动范围；改变 y 的值会触发动画。 |\n| damping | number | - | | 阻尼系数，用于控制 x 或 y 改变时的动画和过界回弹的动画，值越大移动越快。 |\n| friction | number | - | | 摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值 2。 |\n| disabled | boolean | - | | 是否禁用。 |\n| scale | boolean | - | | 是否支持双指缩放，默认缩放手势生效区域是在 movable-view 内。 |\n| scale-min | number | - | | 定义缩放倍数最小值，默认为 0.5。 |\n| scale-max | number | - | | 定义缩放倍数最大值，默认为 10。 |\n| scale-value | number | - | | 定义缩放倍数，取值范围为 0.5 - 10 |\n| animation | boolean | - | | 是否使用动画，默认为 true。 |\n| @change | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 拖动过程中触发的事件，event.detail = {x: x, y: y, source: source}。其中source表示产生移动的原因，值可为touch（拖动）、touch-out-of-bounds（超出移动范围）、out-of-bounds（超出移动范围后的回弹）、friction（惯性）和空字符串（setData）。 |\n| @scale | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 缩放过程中触发的事件，event.detail = {x: x, y: y, scale: scale}。 |\n| htouchmove | eventhandle | - | | - |\n| vtouchmove | eventhandle | - | | - |","event":"","example":"### 示例\n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/movable-view/movable-view.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/movable-view/movable-view\n\n>Template\n```vue\n\r\n\r\n\r\n\r\n\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/miniprogram/dev/component/movable-view.html)\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 | 4.41 | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| scroll-top | number/string | - | | - |","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\n\n\n\n\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/miniprogram/dev/component/cover-view.html)\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 | 4.41 | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| v-for | Any | - | | - |\n| v-if | Any | - | | - |\n| v-show | Any | - | | - |\n| src | string([string.ImageURIString](/uts/data-type.md#ide-string)) | - | | 图标路径，支持临时路径、网络地址（1.6.0起支持）。暂不支持base64格式。 |\n| referrer-policy | string | - | | *(string)*
格式固定为 `https://servicewechat.com/{appid}/{version}/page-frame.html`，其中 {appid} 为小程序的 appid，{version} 为小程序的版本号，版本号为 0 表示为开发版、体验版以及审核版本，版本号为 devtools 表示为开发者工具，其余为正式版本； |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| origin | | |\n@| no-referrer | | |\n| @load | eventhandle | - | | - |\n| @error | eventhandle | - | | - |","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/miniprogram/dev/component/cover-image.html)\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 | x | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| type | number | 0 | | 对应list-item的类型 list-view 将对同类型条目进行复用，所以合理的类型拆分，可以很好地提升 list-view 性能 |","event":"","example":"","children":"### 子组件 @children-tags\n支持所有组件","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 吸顶布局容器

注意：暂时仅支持作为list-view、sticky-section的子节点, sticky-header不支持css样式！当一个容器视图设置多个sticky-header时，后一个sticky-header会停靠在前一个sticky-header的末尾处。","compatibility":"\n###\n兼容性\n| Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.02 | x | 3.93 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| padding | array\\ | [0,0,0,0\\] | | 长度为 4 的数组，按 top、right、bottom、left 顺序指定内边距 |\n| offset-top | number | - | | - |","event":"","example":"### 示例\n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/sticky-header/sticky-header.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/sticky-header/sticky-header\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/sticky-header/sticky-header\n\n>Template\n```vue\n\r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n sift_item: [\"排序\", \"筛选\"],\r\n list_item: [] as Array,\r\n refresher_enabled_boolean: true,\r\n refresher_triggered_boolean: false,\r\n scroll_top_input: 0\r\n }\r\n },\r\n onLoad() {\r\n let lists : Array = []\r\n for (let i = 0; i < 40; i++) {\r\n lists.push(\"item---\" + i)\r\n }\r\n this.list_item = lists\r\n },\r\n methods: {\r\n list_view_refresherrefresh() {\r\n console.log(\"下拉刷新被触发 \")\r\n this.refresher_triggered_boolean = true\r\n setTimeout(() => {\r\n this.refresher_triggered_boolean = false\r\n }, 1500)\r\n },\r\n confirm_scroll_top_input(value : number) {\r\n this.scroll_top_input = value\r\n },\r\n clickTH(index : number) {\r\n console.log(\"点击表头：\" + index);\r\n }\r\n }\r\n }\r\n\n```\n\n:::","children":"### 子组件 @children-tags\n支持所有组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.sticky.sticky-header)\n- [微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/component/sticky-header.html)\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 吸顶布局容器

注意：暂时仅支持作为list-view的子节点, sticky-section不支持css样式！","compatibility":"\n###\n兼容性\n| Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.02 | x | 3.98 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| push-pinned-header | boolean | true | | sticky-section元素重叠时是否继续上推 |\n| padding | array\\ | [0,0,0,0\\] | | 长度为 4 的数组，按 top、right、bottom、left 顺序指定内边距 |","event":"","example":"### 示例\n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/sticky-section/sticky-section.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/sticky-section/sticky-section\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/sticky-section/sticky-section\n\n>Template\n```vue\n\r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n export type sectionData = {\r\n name : string,\r\n list : sectionListItem[]\r\n }\r\n export type sectionListItem = {\r\n text : string\r\n }\r\n export default {\r\n data() {\r\n return {\r\n data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N'],\r\n sectionPadding: [0, 10, 0, 10] as Array,\r\n scrollIntoView: \"\",\r\n scrolling: false,\r\n sectionArray: [] as sectionData[],\r\n appendId: 0\r\n }\r\n },\r\n onLoad() {\r\n this.data.forEach(key => {\r\n const list = [] as sectionListItem[]\r\n for (let i = 1; i < 11; i++) {\r\n const item = { text: key + \"--item--content----\" + i } as sectionListItem\r\n list.push(item)\r\n }\r\n const data = { name: key, list: list } as sectionData\r\n this.sectionArray.push(data)\r\n }\r\n )\r\n },\r\n methods: {\r\n toTop() {\r\n this.scrollIntoView = \"\"\r\n uni.getElementById(\"list-view\")!.scrollTop = 0\r\n },\r\n //用于自动化测试\r\n listViewScrollByY(y : number) {\r\n const listview = this.$refs[\"list-view\"] as UniElement\r\n // listview.scrollBy(0, y)\r\n listview.scrollTop = y\r\n },\r\n gotoStickyHeader(id : string) {\r\n // #ifdef APP\r\n this.scrollIntoView = id\r\n // #endif\r\n // #ifdef WEB\r\n console.log(\"web端不支持该功能\")\r\n // #endif\r\n },\r\n onScroll() {\r\n this.scrolling = true\r\n },\r\n onScrollEnd() {\r\n this.scrolling = false\r\n //滚动后重置scrollIntoView = \"\"\r\n if (this.scrollIntoView != \"\") {\r\n this.scrollIntoView = \"\"\r\n }\r\n },\r\n appendSectionItem(index : number) {\r\n const data = this.sectionArray[index]\r\n this.appendId++\r\n const list = [\r\n { text: data.name + \"--item--content----new1--\" + this.appendId } as sectionListItem,\r\n { text: data.name + \"--item--content----new2--\" + this.appendId } as sectionListItem,\r\n { text: data.name + \"--item--content----new3--\" + this.appendId } as sectionListItem,\r\n { text: data.name + \"--item--content----new4--\" + this.appendId } as sectionListItem,\r\n { text: data.name + \"--item--content----new5--\" + this.appendId } as sectionListItem\r\n ] as sectionListItem[]\r\n data.list.unshift(...list)\r\n },\r\n deleteSection() {\r\n this.sectionArray.shift()\r\n }\r\n }\r\n }\r\n\n```\n\n:::","children":"### 子组件 @children-tags\n支持所有组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.sticky.sticky-section)\n- [微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/component/sticky-section.html)\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 | x | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| direction | string | \"vertical\" | | 滚动方向，可取值 none、horizontal、vertical，默认值vertical。注：iOS 平台仅支持vertical |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| none | | 禁止滚动 |\n@| horizontal | | 横向滚动 |\n@| vertical | | 竖向滚动 |\n| associative-container | string | \"\" | | 关联的滚动容器 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| nested-scroll-view | | 嵌套滚动 |\n| bounces | boolean | true | | 控制是否回弹效果 优先级高于rebound |\n| upper-threshold | number | 50 | | 距顶部/左边多远时（单位px），触发 scrolltoupper 事件 |\n| lower-threshold | number | 50 | | 距底部/右边多远时（单位px），触发 scrolltolower 事件 |\n| scroll-top | number | 0 | | 设置竖向滚动条位置 |\n| scroll-left | number | 0 | | 设置横向滚动条位置 |\n| show-scrollbar | boolean | true | | 控制是否出现滚动条 |\n| scroll-into-view | string([string.IDString](/uts/data-type.md#ide-string)) | - | | 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素起始位置 |\n| scroll-with-animation | boolean | false | | 是否在设置滚动条位置时使用滚动动画，设置false没有滚动动画 |\n| refresher-enabled | boolean | false | | 开启下拉刷新，暂时不支持scroll-x = true横向刷新 |\n| refresher-threshold | number | 45 | | 设置下拉刷新阈值, 仅 refresher-default-style = 'none' 自定义样式下生效 |\n| refresher-max-drag-distance | number | - | | 设置下拉最大拖拽距离（单位px），默认是下拉刷新控件高度的2.5倍 |\n| refresher-default-style | string | \"black\" | | 设置下拉刷新默认样式，支持设置 black \\| white \\| none， none 表示不使用默认样式 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| black | | 深颜色雪花样式 |\n@| white | | 浅白色雪花样式 |\n@| none | | 不使用默认样式 |\n| refresher-background | string([string.ColorString](/uts/data-type.md#ide-string)) | \"transparent\" | | 设置下拉刷新区域背景颜色，默认透明 |\n| refresher-triggered | boolean | false | | 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发 |\n| enable-back-to-top | boolean | false | | iOS点击顶部状态栏滚动条返回顶部，只支持竖向 |\n| custom-nested-scroll | boolean | false | | 子元素是否开启嵌套滚动 将滚动事件与父元素协商处理 |\n| @refresherpulling | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | | 下拉刷新控件被下拉 |\n| @refresherrefresh | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | | 下拉刷新被触发 |\n| @refresherrestore | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | | 下拉刷新被复位 |\n| @refresherabort | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | | 下拉刷新被中止 |\n| @scrolltoupper | (event: [UniScrollToUpperEvent](#uniscrolltoupperevent)) => void | - | | 滚动到顶部/左边，会触发 scrolltoupper 事件 |\n| @scrolltolower | (event: [UniScrollToLowerEvent](#uniscrolltolowerevent)) => void | - | | 滚动到底部/右边，会触发 scrolltolower 事件 |\n| @scroll | (event: [UniScrollEvent](#uniscrollevent)) => void | - | | 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |\n| @scrollend | (event: [UniScrollEvent](#uniscrollevent)) => void | - | | 滚动结束时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |\n| padding | Array | - | | - |\n| ~~rebound~~ | boolean | true | | 控制是否回弹效果。已废弃，请改用bounces |\n| ~~scroll-y~~ | boolean | true | | 允许纵向滚动，不支持同时设置scroll-x属性为true，同时设置true时scroll-y生效。已废弃，请改用direction |\n| ~~scroll-x~~ | boolean | false | | 允许横向滚动，不支持同时设置scroll-y属性为true，同时设置true时scroll-y生效。已废弃，请改用direction |","event":"\n### 事件\n#### UniRefresherEvent\n\n```mermaid\ngraph LR\n \nUniRefresherEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniRefresherEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniRefresherEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| dy | number | 是 | - | - | - |\n\n\n#### UniScrollToUpperEvent\n\n```mermaid\ngraph LR\n \nUniScrollToUpperEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniScrollToUpperEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniScrollToUpperEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| direction | string | 是 | - | - | 滚动方向 top 或 left |\n\n\n#### UniScrollToLowerEvent\n\n```mermaid\ngraph LR\n \nUniScrollToLowerEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniScrollToLowerEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniScrollToLowerEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| direction | string | 是 | - | - | 滚动方向 bottom 或 right |\n\n\n#### UniScrollEvent\n\n```mermaid\ngraph LR\n \nUniScrollEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniScrollEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniScrollEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| scrollTop | number | 是 | - | - | 竖向滚动的距离 |\n@| scrollLeft | number | 是 | - | - | 横向滚动的距离 |\n@| scrollHeight | number | 是 | - | - | 滚动区域的高度 |\n@| scrollWidth | number | 是 | - | - | 滚动区域的宽度 |\n@| deltaY | number | 是 | - | - | 当次滚动事件竖向滚动量 |\n@| deltaX | number | 是 | - | - | 当次滚动事件横向滚动量 |\n\n","example":"### 示例\n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/list-view/list-view.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/list-view/list-view\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/list-view/list-view\n\n>Template\n```vue\n\n\n\n\n\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,\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 = []\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) | |\n| [sticky-header](sticky-header.md) | |\n| [sticky-section](sticky-section.md) | |","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.list-view.list-view)\n- [微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/component/list-view.html)\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)"},"grid-item":{"name":"## grid-item","description":"> 组件类型：UniGridItemElement \n\n grid-view组件的唯一合法子组件。每个item","compatibility":"\n###\n兼容性\n| Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| x | x | 4.37 | 4.37 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| type | number | 0 | | 对应grid-item的类型 grid-view 将对同类型条目进行复用，所以合理的类型拆分，可以很好地提升 grid-view 性能 |","event":"","example":"","children":"### 子组件 @children-tags\n支持所有组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.grid-view.grid-item)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=grid-item&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=grid-item&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=grid-item&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=grid-item&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=grid-item&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=grid-item)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=grid-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)"},"grid-view":{"name":"## grid-view","description":"> 组件类型：UniGridViewElement \n\n 表格组件","compatibility":"\n###\n兼容性\n| Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| x | x | 4.37 | 4.37 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| type | string | - | | *(string)*
布局方式 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| aligned | | |\n@| masonry | | |\n| cross-axis-count | number | - | | - |\n| max-cross-axis-extent | number | - | | - |\n| main-axis-gap | number | - | | - |\n| cross-axis-gap | number | - | | - |\n| padding | Array | - | | - |\n| associative-container | string | \"\" | | 关联的滚动容器 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| nested-scroll-view | | 嵌套滚动 |\n| bounces | boolean | true | | 控制是否回弹效果 |\n| upper-threshold | number | 50 | | 距顶部/左边多远时（单位px），触发 scrolltoupper 事件 |\n| lower-threshold | number | 50 | | 距底部/右边多远时（单位px），触发 scrolltolower 事件 |\n| scroll-top | number | 0 | | 设置竖向滚动条位置 |\n| show-scrollbar | boolean | true | | 控制是否出现滚动条 |\n| scroll-into-view | string([string.IDString](/uts/data-type.md#ide-string)) | - | | 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素起始位置 |\n| scroll-with-animation | boolean | false | | 是否在设置滚动条位置时使用滚动动画，设置false没有滚动动画 |\n| refresher-enabled | boolean | false | | 开启下拉刷新，暂时不支持scroll-x = true横向刷新 |\n| refresher-threshold | number | 45 | | 设置下拉刷新阈值, 仅 refresher-default-style = 'none' 自定义样式下生效 |\n| refresher-max-drag-distance | number | - | | 设置下拉最大拖拽距离（单位px），默认是下拉刷新控件高度的2.5倍 |\n| refresher-default-style | string | \"black\" | | 设置下拉刷新默认样式，支持设置 black \\| white \\| none， none 表示不使用默认样式 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| black | | 深颜色雪花样式 |\n@| white | | 浅白色雪花样式 |\n@| none | | 不使用默认样式 |\n| refresher-background | string([string.ColorString](/uts/data-type.md#ide-string)) | \"transparent\" | | 设置下拉刷新区域背景颜色，默认透明 |\n| refresher-triggered | boolean | false | | 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发 |\n| enable-back-to-top | boolean | false | | iOS点击顶部状态栏滚动条返回顶部，只支持竖向 |\n| custom-nested-scroll | boolean | false | | 子元素是否开启嵌套滚动 将滚动事件与父元素协商处理 |\n| @refresherpulling | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | | 下拉刷新控件被下拉 |\n| @refresherrefresh | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | | 下拉刷新被触发 |\n| @refresherrestore | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | | 下拉刷新被复位 |\n| @refresherabort | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | | 下拉刷新被中止 |\n| @scrolltoupper | (event: [UniScrollToUpperEvent](#uniscrolltoupperevent)) => void | - | | 滚动到顶部/左边，会触发 scrolltoupper 事件 |\n| @scroll | (event: [UniScrollEvent](#uniscrollevent)) => void | - | | 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |\n| @scrollend | (event: [UniScrollEvent](#uniscrollevent)) => void | - | | 滚动结束时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |","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#### 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":"","children":"### 子组件 @children-tags\n| 子组件 | 兼容性 |\n| :- | :- |\n| [grid-item](grid-item.md) | |","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.skyline.grid-view)\n- [微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/component/grid-view.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=grid-view&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=grid-view&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=grid-view&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=grid-view&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=grid-view)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=grid-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 的节点，仅支持作为 \\ 嵌套模式的直接子节点。不支持复数子节点，渲染时会取其第一个子节点来渲染","compatibility":"\n###\n兼容性\n| Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| x | x | 4.11 | 4.11 |\n","attribute":"","event":"","example":"### 示例\n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/nested-scroll-header/nested-scroll-header.uvue) \n>\n> 该 API 不支持 Web，请运行 hello uni-app x 到 App 平台体验 \n\n::: preview\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/nested-scroll-header/nested-scroll-header\n```uvue\n\r\n\r\n\r\n\r\n\n\n```\n:::","children":"### 子组件 @children-tags\n支持所有组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.nested-scroll.nested-scroll-header)\n- [微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/component/nested-scroll-header.html)\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 的父节点，仅支持作为 \\ 嵌套模式的直接子节点。不支持复数子节点，渲染时会取其第一个子节点来渲染","compatibility":"\n###\n兼容性\n| Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| x | x | 4.11 | 4.11 |\n","attribute":"","event":"","example":"### 示例\n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/nested-scroll-body/nested-scroll-body.uvue) \n>\n> 该 API 不支持 Web，请运行 hello uni-app x 到 App 平台体验 \n\n::: preview\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/nested-scroll-body/nested-scroll-body\n```uvue\n\r\n\r\n\r\n\r\n\n\n```\n:::","children":"### 子组件 @children-tags\n支持所有组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.nested-scroll.nested-scroll-body)\n- [微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/component/nested-scroll-body.html)\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)"},"page-container":{"name":"## page-container","description":"","compatibility":"\n###\n兼容性\n| Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| x | x | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| show | boolean | - | | - |\n| duration | number | - | | - |\n| z-index | number | - | | - |\n| overlay | boolean | - | | - |\n| position | string | - | | - |\n| round | boolean | - | | - |\n| close-on-slide-down | boolean | - | | - |\n| overlay-style | string | - | | - |\n| custom-style | string | - | | - |\n| @:beforeenter | eventhandle | - | | - |\n| @:enter | eventhandle | - | | - |\n| @:afterenter | eventhandle | - | | - |\n| @:beforeleave | eventhandle | - | | - |\n| @:leave | eventhandle | - | | - |\n| @:afterleave | eventhandle | - | | - |\n| @:clickoverlay | eventhandle | - | | - |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.page-container)\n- [微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/component/page-container.html)"},"root-portal":{"name":"## root-portal","description":"","compatibility":"\n###\n兼容性\n| Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| x | x | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| enable | boolean | - | | - |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.root-portal)\n- [微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/component/root-portal.html)"},"icon":{"name":"## icon","description":"图标","compatibility":"\n###\n兼容性\n| Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.0 | x | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| type | string | - | | icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| success | - | |\n@| success_no_circle | - | |\n@| warn | - | |\n@| waiting | - | |\n@| cancel | - | |\n@| download | - | |\n@| search | - | |\n@| clear | - | |\n| size | number | - | | icon的大小，单位px |\n| color | string([string.ColorString](/uts/data-type.md#ide-string)) | - | | icon的颜色，同css的color |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.basic-content.icon)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/icon.html)\n- [微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/component/icon.html)\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 | 4.41 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| selectable | boolean | false | | 文本是否可选 |\n| space | string | - | | 显示连续空格 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| ensp | | 中文字符空格一半大小 |\n@| emsp | | 中文字符空格大小 |\n@| nbsp | | 根据字体设置的空格大小 |\n| decode | boolean | false | | 是否解码 (app平台如需解析字符实体，需要配置为 true) |\n| user-select | boolean | - | | - |","event":"","example":"### 示例\n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/text/text.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/text/text\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/text/text\n\n>Template\n```vue\n\r\n\r\n\r\n\r\n\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) | |","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/miniprogram/dev/component/text.html)\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 | 4.41 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| nodes | array \\\\| string | - | | 节点列表 \\| HTML String |\n| selectable | boolean | false | | 文本是否可选 |\n| @itemclick | (event: [UniRichTextItemClickEvent](#unirichtextitemclickevent)) => void | - | | 拦截点击事件（只支持 a、img标签），返回img标签的src属性或a标签的href属性。event.detail={ src \\| href } |\n| space | string | - | | *(string)*
显示连续空格 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| ensp | | |\n@| emsp | | |\n@| nbsp | | |\n| user-select | boolean | - | | - |","event":"\n### 事件\n#### UniRichTextItemClickEvent\n\n```mermaid\ngraph LR\n \nUniRichTextItemClickEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniRichTextItemClickEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniRichTextItemClickEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| src | string | 否 | - | - | \\图片链接 |\n@| href | string | 否 | - | - | \\超链接 |\n\n","example":"### 示例\n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/rich-text/rich-text.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/rich-text/rich-text\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/rich-text/rich-text\n\n>Template\n```vue\n\r\n\r\n\r\n\r\n\n\n```\n\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n text: \"hello uni-app x!
uni-app x，终极跨平台方案\",\r\n richTextHeight: 0,\r\n richTextElement: null as UniElement | null,\r\n // 自动化测试\r\n autoTest: false,\r\n testNodes: '',\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 === \"hello uni-app x!
uni-app x，终极跨平台方案\") {\r\n this.text = \"

hello uni-app x!


uni-app x，终极跨平台方案

\"\r\n } else {\r\n this.text = \"hello uni-app x!
uni-app x，终极跨平台方案\"\r\n }\r\n setTimeout(() => {\r\n this.updateRichTextHeight()\r\n }, 200)\r\n },\r\n updateRichTextHeight() {\r\n if (this.richTextElement != null) {\r\n const elRect = this.richTextElement!.getBoundingClientRect()\r\n this.richTextHeight = elRect.height\r\n console.log('richTextHeight:', this.richTextHeight)\r\n }\r\n },\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/miniprogram/dev/component/rich-text.html)\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 | 4.41 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| duration | number | 30 | | 进度增加1%所需毫秒数 |\n| percent | number | 0 | | 百分比0~100 |\n| show-info | boolean | false | | 在进度条右侧显示百分比 |\n| border-radius | number | 0 | | 圆角大小 |\n| font-size | number | 16 | | 右侧百分比字体大小 |\n| stroke-width | number | 6 | | 进度条线的宽度，单位px |\n| activeColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#09BB07\" | | 已选择的进度条的颜色 |\n| backgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#EBEBEB\" | | 未选择的进度条的颜色 |\n| active | boolean | false | | 进度条从左往右的动画 |\n| active-mode | string | \"backwards\" | | backwards: 动画从头播；forwards：动画从上次结束点接着播 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| backwards | | 动画从头播 |\n@| forwards | | 动画从上次结束点接着播 |\n| @activeend | (event: [UniProgressActiveendEvent](#uniprogressactiveendevent)) => void | - | | 动画完成事件 |\n| color | string | - | | - |","event":"\n### 事件\n#### UniProgressActiveendEvent\n\n```mermaid\ngraph LR\n \nUniProgressActiveendEvent -- Extends --> UniCustomEvent<UniProgressActiveendEventDetail>\n style UniCustomEvent<UniProgressActiveendEventDetail> color:#42b983\n click UniCustomEvent<UniProgressActiveendEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniProgressActiveendEventDetail\n\n\n###### UniProgressActiveendEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| curPercent | number | 是 | - | - | - |\n\n","example":"### 示例\n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/progress/progress.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/progress/progress\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/progress/progress\n\n>Template\n```vue\n\r\n\r\n\r\n\r\n\r\n\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/miniprogram/dev/component/progress.html)\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 | x | 4.31 | 4.31 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| @init | (event: [UniNativeViewInitEvent](#uninativeviewinitevent)) => void | - | | native-view初始化时回调，event.detail = { element: 'native-view元素实例对象'} |","event":"\n### 事件\n#### UniNativeViewInitEvent\nnative-view 组件 init事件event\n```mermaid\ngraph LR\n \nUniNativeViewInitEvent -- Extends --> UniCustomEvent<UniNativeViewInitEventDetail>\n style UniCustomEvent<UniNativeViewInitEventDetail> color:#42b983\n click UniCustomEvent<UniNativeViewInitEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniNativeViewInitEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniNativeViewInitEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| element | [UniNativeViewElement](/dom/uninativeviewelement.md) | 是 | - | - | - |\n| type | string | 是 | - | - | - |\n\n\n##### UniNativeViewInitEventDetail\n\n\n###### UniNativeViewInitEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| element | [UniNativeViewElement](/dom/uninativeviewelement.md) | 是 | - | - | - |\n\n","example":"### 示例\n#### 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\r\n\r\n\r\n\r\n\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\r\n\r\n\n```","children":"### 子组件 @children-tags\n不可以嵌套组件","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 | | 是否禁用 |\n| hover-class | string([string.ClassString](/uts/data-type.md#ide-string)) | \"button-hover\" | | 指定按下去的样式类。当 hover-class=\"none\" 时，没有点击态效果 |\n| hover-stop-propagation | boolean | - | | 指定是否阻止本节点的祖先节点出现点击态 |\n| hover-start-time | number | 20 | | 按住后多久出现点击态，单位毫秒 |\n| hover-stay-time | number | 70 | | 手指松开后点击态保留时间，单位毫秒 |\n| size | string | \"default\" | | 按钮的大小 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| default | | 默认大小 |\n@| mini | | 小尺寸 |\n| type | string | \"default\" | | 按钮的样式类型 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| default | | 白色 |\n@| primary | | 蓝色 |\n@| warn | | 红色 |\n| plain | boolean | false | | 按钮是否镂空，背景色透明 |\n| loading | boolean | - | | 名称前是否带 loading 图标 |\n| form-type | string | - | | 用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| submit | | 提交表单 |\n@| reset | | 重置表单 |\n| open-type | string | - | | 开放能力 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| agreePrivacyAuthorization | | 用户同意隐私协议按钮。用户点击一次此按钮后，所有已声明过的隐私接口可以正常调用。 |\n@| feedback | | 打开“意见反馈”页面，用户可提交反馈内容并上传日志 |\n@| share | | 触发用户转发 |\n@| getUserInfo | | 获取用户信息，可以从@getuserinfo回调中获取到用户信息 |\n@| contact | | 打开客服会话，如果用户在会话中点击消息卡片后返回应用，可以从 @contact 回调中获得具体信息 |\n@| getPhoneNumber | | 获取用户手机号，可以从@getphonenumber回调中获取到用户信息 |\n@| launchApp | | 打开APP，可以通过app-parameter属性设定向APP传的参数 |\n@| openSetting | | 打开授权设置页 |\n@| chooseAvatar | | 获取用户头像，可以从@chooseavatar回调中获取到头像信息 |\n@| getAuthorize | | 支持小程序授权 |\n@| lifestyle | | 关注生活号 |\n@| contactShare | | 分享到通讯录好友 |\n@| openGroupProfile | | 呼起QQ群资料卡页面，可以通过group-id属性设定需要打开的群资料卡的群号，同时manifest.json中必须配置groupIdList |\n@| openGuildProfile | | 呼起频道页面，可以通过guild-id属性设定需要打开的频道ID |\n@| openPublicProfile | | 打开公众号资料卡，可以通过public-id属性设定需要打开的公众号资料卡的号码，同时manifest.json中必须配置publicIdList |\n@| shareMessageToFriend | | 在自定义开放数据域组件中,向指定好友发起分享据 |\n@| addFriend | | 添加好友，对方需要通过该小程序进行授权，允许被加好友后才能调用成功用户授权 |\n@| addColorSign | | 添加彩签，点击后添加状态有用户提示，无回调 |\n@| addGroupApp | | 添加群应用（只有管理员或群主有权操作），添加后给button绑定@addgroupapp事件接收回调数据 |\n@| addToFavorites | | 收藏当前页面，点击按钮后会触发Page.onAddToFavorites方法 |\n@| chooseAddress | | 选择用户收货地址，可以从@chooseaddress回调中获取到用户选择的地址信息 |\n@| chooseInvoiceTitle | | 选择用户发票抬头，可以从@chooseinvoicetitle回调中获取到用户选择发票抬头信息 |\n@| login | | 登录，可以从@login回调中确认是否登录成功 |\n@| subscribe | | 订阅类模板消息，需要用户授权才可发送 |\n@| favorite | | 触发用户收藏 |\n@| watchLater | | 触发用户稍后再看 |\n@| openProfile | | 触发打开用户主页 |\n@| liveActivity | | |\n@| getRealtimePhoneNumber | | |\n| lang | string | - | | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| en | | |\n@| zh_CN | | |\n@| zh_TW | | |\n| session-from | string | - | | 会话来源 |\n| send-message-title | string | - | | 会话内消息卡片标题 |\n| send-message-path | string | - | | 会话内消息卡片点击跳转应用路径 |\n| send-message-img | string | - | | 会话内消息卡片图片 |\n| show-message-card | boolean | - | | 显示会话内消息卡片 |\n| app-parameter | string | - | | 打开 APP 时，向 APP 传递的参数 |\n| group-id | string | - | | 打开群资料卡时，传递的群号 |\n| guild-id | string | - | | 打开频道页面时，传递的频道号 |\n| public-id | string | - | | 打开公众号资料卡时，传递的号码 |\n| @getuserinfo | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与uni.getUserInfo返回的一致 |\n| @contact | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 客服消息回调 |\n| @getphonenumber | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 获取用户手机号回调 |\n| @error | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 当使用开放能力时，发生错误的回调 |\n| @opensetting | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 在打开授权设置页后回调 |\n| @launchapp | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 打开 APP 成功的回调 |\n| @chooseavatar | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 获取用户头像回调 |\n| @chooseaddress | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 调起用户编辑并选择收货地址的回调 |\n| @chooseinvoicetitle | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 用户选择发票抬头的回调 |\n| @addgroupapp | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 添加群应用的回调 |\n| @subscribe | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 订阅消息授权回调 |\n| @login | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 登录回调 |\n| phone-number-no-quota-toast | boolean | - | | - |\n| createliveactivity | eventhandle | - | | - |\n| @getrealtimephonenumber | eventhandle | - | | - |\n| @agreeprivacyauthorization | eventhandle | - | | - |","event":"","example":"### 示例\n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/button/button.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/button/button\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/button/button\n\n>Template\n```vue\n\r\n\r\n\r\n\r\n\r\n\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/miniprogram/dev/component/button.html)\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 | 4.41 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| disabled | boolean | false | | 是否禁用 |\n| value | string | - | | checkbox 标识，选中时触发 checkbox-group 的 change 事件，并携带 checkbox 的 value |\n| checked | boolean | false | | 当前是否选中，可用来设置默认选中 |\n| backgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | | checkbox默认的背景颜色 |\n| borderColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#d1d1d1\" | | checkbox默认的边框颜色 |\n| activeBackgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | | checkbox选中时的背景颜色 |\n| activeBorderColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#d1d1d1\" | | checkbox选中时的边框颜色 |\n| foreColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | | checkbox的图标颜色，优先级大于color属性 |\n| ~~iconColor~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | | checkbox的图标颜色，优先级大于color属性 (使用foreColor替代) |\n| ~~color~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | | checkbox的颜色 (使用foreColor替代) |","event":"","example":"### 示例\n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/checkbox/checkbox.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/checkbox/checkbox\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/checkbox/checkbox\n\n>Template\n```vue\n\r\n\r\n\r\n\r\n\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/miniprogram/dev/component/checkbox.html)\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 | 4.41 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | - | | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| @change | (event: [UniCheckboxGroupChangeEvent](#unicheckboxgroupchangeevent)) => void | - | | checkbox-group中选中项发生改变是触发 change 事件，detail = {value:\\[选中的checkbox的value的数组] |","event":"\n### 事件\n#### UniCheckboxGroupChangeEvent\n\n```mermaid\ngraph LR\n \nUniCheckboxGroupChangeEvent -- Extends --> UniCustomEvent<UniCheckboxGroupChangeEventDetail>\n style UniCustomEvent<UniCheckboxGroupChangeEventDetail> color:#42b983\n click UniCustomEvent<UniCheckboxGroupChangeEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniCheckboxGroupChangeEventDetail\n\n\n###### UniCheckboxGroupChangeEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| value | Array\\ | 是 | - | - | - |\n\n","example":"","children":"### 子组件 @children-tags\n| 子组件 | 兼容性 |\n| :- | :- |\n| [checkbox](checkbox.md) | |","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.checkbox.checkbox-group)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/checkbox.html)\n- [微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/component/checkbox-group.html)\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 | 4.41 | 3.97 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| disabled | boolean | - | | 是否禁用 |\n| report-submit | boolean | - | | 是否返回 formId 用于发送模板消息 |\n| @submit | (event: [UniFormSubmitEvent](#uniformsubmitevent)) => void | - | | 携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'}} |\n| @reset | (event: [UniFormResetEvent](#uniformresetevent)) => void | - | | 表单重置时会触发 reset 事件 |\n| report-submit-timeout | number | - | | - |","event":"\n### 事件\n#### UniFormSubmitEvent\n\n```mermaid\ngraph LR\n \nUniFormSubmitEvent -- Extends --> UniCustomEvent<UniFormSubmitEventDetail>\n style UniCustomEvent<UniFormSubmitEventDetail> color:#42b983\n click UniCustomEvent<UniFormSubmitEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniFormSubmitEventDetail\n\n\n###### UniFormSubmitEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| value | UTSJSONObject | 是 | - | - | - |\n\n\n#### UniFormResetEvent\n\n```mermaid\ngraph LR\n \nUniFormResetEvent -- Extends --> UniCustomEvent<UniFormResetEventDetail>\n style UniCustomEvent<UniFormResetEventDetail> color:#42b983\n click UniCustomEvent<UniFormResetEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```","example":"### 示例\n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/form/form.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/form/form\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/form/form\n\n>Template\n```vue\n\r\n\r\n\r\n\r\n\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/miniprogram/dev/component/form.html)\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 | 4.41 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | - | | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| disabled | boolean | false | | 是否禁用 |\n| value | string | \"\" | | 输入框的初始内容 |\n| type | text \\| number \\| idcard \\| digit \\| tel \\| safe-password \\| nickname | \"text\" | | input的类型 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| text | | 文本输入键盘 |\n@| number | | 数字输入键盘 |\n@| idcard | | 身份证输入键盘 |\n@| digit | | 带小数点数字输入键盘 |\n@| tel | | 电话输入键盘 |\n@| safe-password | | 密码安全输入键盘 |\n@| nickname | | 昵称输入键盘 |\n| password | boolean | false | | 是否是密码类型 |\n| placeholder | string | \"\" | | 输入框为空时占位符 |\n| placeholder-style | string | \"\" | | 指定 placeholder 的样式，目前仅支持color,font-size和font-weight |\n| placeholder-class | string([string.ClassString](/uts/data-type.md#ide-string)) | \"\" | | 指定 placeholder 的样式类，目前仅支持color,font-size和font-weight |\n| maxlength | number | \"不限制长度\" | | 最大输入长度，0和正数为合法值，非法值的时候不限制最大长度 |\n| cursor-spacing | number | 0 | | 指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 |\n| cursor-color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"\" | | 指定光标颜色 |\n| auto-focus | boolean | false | | 自动获取焦点，与`focus`属性对比，此属性只会首次生效。 |\n| focus | boolean | false | | 获取焦点 |\n| confirm-type | send \\| search \\| next \\| go \\| done | \"done\" | | 设置键盘右下角按钮的文字，仅在 type为text 时生效。 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| send | | 发送 |\n@| search | | 搜索 |\n@| next | | 下一个 |\n@| go | | 前往 |\n@| done | | 完成 |\n| always-embed | boolean | - | | 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) |\n| confirm-hold | boolean | false | | 点击键盘右下角按钮时是否保持键盘不收起 |\n| cursor | number | 0 | | 指定focus时的光标位置 |\n| selection-start | number | -1 | | 光标起始位置，自动聚集时有效，需与selection-end搭配使用 |\n| selection-end | number | -1 | | 光标结束位置，自动聚集时有效，需与selection-satrt搭配使用 |\n| adjust-position | boolean | true | | 键盘弹起时，是否自动上推页面 |\n| text-content-type | string | - | | 文本区域的语义，根据类型自动填充 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| oneTimeCode | | 一次性验证码 |\n| hold-keyboard | boolean | false | | focus时，点击页面的时候不收起键盘 |\n| safe-password-cert-path | string | - | | 安全键盘加密公钥的路径，只支持包内路径 |\n| safe-password-length | number | - | | 安全键盘输入密码长度 |\n| safe-password-time-stamp | number | - | | 安全键盘加密时间戳 |\n| safe-password-nonce | string | - | | 安全键盘加密盐值 |\n| safe-password-salt | string | - | | 安全键盘计算 hash 盐值，若指定custom-hash 则无效 |\n| safe-password-custom-hash | string | - | | 安全键盘计算 hash 的算法表达式 |\n| random-number | boolean | - | | 当 type 为 number, digit, idcard 数字键盘是否随机排列 |\n| controlled | boolean | - | | 是否为受控组件。为 true 时，value 内容会完全受 setData 控制 |\n| always-system | boolean | - | | 是否强制使用系统键盘和 Web-view 创建的 input 元素。为 true 时，confirm-type、confirm-hold 可能失效 |\n| inputmode | none \\| text \\| decimal \\| numeric \\| tel \\| search \\| email \\| url | \"text\" | | 是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。在符合条件的高版本webview里，uni-app的 web 和 app-vue 平台中可使用本属性。 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| none | | 无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用。 |\n@| text | | 使用用户本地区域设置的标准文本输入键盘。 |\n@| decimal | | 小数输入键盘，包含数字和分隔符（通常是“ . ”或者“ , ”），设备可能也可能不显示减号键。 |\n@| numeric | | 数字输入键盘，所需要的就是 0 到 9 的数字，设备可能也可能不显示减号键。 |\n@| tel | | 电话输入键盘，包含 0 到 9 的数字、星号（*）和井号（#）键。表单输入里面的电话输入通常应该使用 \\ 。 |\n@| search | | 为搜索输入优化的虚拟键盘，比如，返回键可能被重新标记为“搜索”，也可能还有其他的优化。 |\n@| email | | 为邮件地址输入优化的虚拟键盘，通常包含\"@\"符号和其他优化。表单里面的邮件地址输入应该使用 \\ 。 |\n@| url | | 为网址输入优化的虚拟键盘，比如，“/”键会更加明显、历史记录访问等。表单里面的网址输入通常应该使用 \\ 。 |\n| @input | (event: [UniInputEvent](#uniinputevent)) => void | - | | 当键盘输入时，触发input事件，event.detail = {value, cursor}，处理函数可以直接 return 一个字符串，将替换输入框的内容。 |\n| @focus | (event: [UniInputFocusEvent](#uniinputfocusevent)) => void | - | | 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度 |\n| @blur | (event: [UniInputBlurEvent](#uniinputblurevent)) => void | - | | 输入框失去焦点时触发，event.detail = {value: value} |\n| @keyboardheightchange | (event: [UniInputKeyboardHeightChangeEvent](#uniinputkeyboardheightchangeevent)) => void | - | | 键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration} |\n| @confirm | (event: [UniInputConfirmEvent](#uniinputconfirmevent)) => void | - | | 点击完成按钮时触发，event.detail = {value: value} |\n| @nicknamereview | eventhandle | - | | - |","event":"\n### 事件\n#### UniInputEvent\n\n```mermaid\ngraph LR\n \nUniInputEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | 输入框内容 |\n@| cursor | number | 是 | - | - | 光标的位置 |\n@| keyCode | number | 是 | - | - | 输入字符的Unicode值 |\n\n\n#### UniInputFocusEvent\n\n```mermaid\ngraph LR\n \nUniInputFocusEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputFocusEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputFocusEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| height | number | 是 | - | | 键盘高度 |\n@| value | string | 是 | - | - | 输入框内容 |\n\n\n#### UniInputBlurEvent\n\n```mermaid\ngraph LR\n \nUniInputBlurEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputBlurEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputBlurEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | 输入框内容 |\n@| cursor | number | 是 | - | - | 选择区域的起始位置 |\n\n\n#### UniInputKeyboardHeightChangeEvent\n\n```mermaid\ngraph LR\n \nUniInputKeyboardHeightChangeEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputKeyboardHeightChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputKeyboardHeightChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| height | number | 是 | - | - | 键盘高度 |\n@| duration | number | 是 | - | - | 持续时间 |\n\n\n#### UniInputConfirmEvent\n\n```mermaid\ngraph LR\n \nUniInputConfirmEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputConfirmEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputConfirmEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | 输入框内容 |\n\n","example":"### 示例\n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/input/input.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/input/input\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/input/input\n\n>Template\n```vue\n\r\n\r\n\r\n\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(\"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/miniprogram/dev/component/input.html)\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 | 4.41 | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| read-only | boolean | - | | 设置编辑器为只读。 |\n| placeholder | string | - | | 提示信息。 |\n| show-img-size | boolean | - | | 点击图片时显示图片大小控件。 |\n| show-img-toolbar | boolean | - | | 点击图片时显示工具栏控件。 |\n| show-img-resize | string | - | | 点击图片时显示修改尺寸控件。 |\n| @ready | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 编辑器初始化完成时触发 |\n| @focus | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 编辑器聚焦时触发，event.detail = {html, text, delta} |\n| @blur | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 编辑器失去焦点时触发，detail = {html, text, delta} |\n| @input | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 编辑器内容改变时触发，detail = {html, text, delta} |\n| @statuschange | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 通过 Context 方法改变编辑器内样式时触发，返回选区已设置的样式 |\n| enable-formats | Array.<string> | - | | - |","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\n\n\n\n\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/miniprogram/dev/component/editor.html)\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 | 4.41 | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| disabled | boolean | - | | 是否禁用 |\n| for | string | - | | 绑定控件的 id |","event":"","example":"### 示例\n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/label/label.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/label/label\n\n>Template\n```vue\n\r\n\r\n\r\n\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/miniprogram/dev/component/label.html)\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 | 4.41 | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| disabled | boolean | - | | 是否禁用 |\n| mode | string | - | | 选择器类型 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| selector | | 普通选择器 |\n@| multiSelector | | 多列选择器 |\n@| time | | 时间选择器 |\n@| date | | 日期选择器 |\n@| region | | 省市选择器 |\n| range | array | - | | mode为 selector 或 multiSelector 时，range 有效 |\n| range-key | string | - | | 当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 |\n| value | string | - | | mode为select或multiSelector时：value 的值表示选择了 range 中的第几个（下标从 0 开始）；mode为time时：表示选中的时间，格式为\"hh:mm\"；mode为date时：表示选中的日期，格式为\"YYYY-MM-DD\"；mode为region时：
\t\t表示选中的省市区，默认选中每一列的第一个值。 |\n| start | string | - | | mode为time：表示有效时间范围的开始，字符串格式为\"hh:mm\"；mode为date：表示有效日期范围的开始，字符串格式为\"YYYY-MM-DD\" |\n| end | string | - | | mode为time：表示有效时间范围的结束，字符串格式为\"hh:mm\"；mode为date：表示有效日期范围的结束，字符串格式为\"YYYY-MM-DD\" |\n| fields | string | - | | 有效值 year,month,day，表示选择器的粒度 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| year | | 选择器粒度为年 |\n@| month | | 选择器粒度为月份 |\n@| day | | 选择器粒度为天 |\n| custom-item | string | - | | 可为每一列的顶部添加一个自定义的项 |\n| @change | (event: [UniEvent](/component/common.md#unievent)) => void | - | | value 改变时触发 change 事件，event.detail = {value: value} |\n| @columnchange | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 某一列的值改变时触发 columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改变了第几列（下标从0开始），value 的值表示变更值的下标 |\n| @cancel | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 取消选择时触发 |\n| header-text | string | - | | - |\n| level | string | - | | mode=\"region\" 时有效，选择器层级 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| province | | |\n@| city | | |\n@| region | | |\n@| sub-district | | |","event":"","example":"### 示例\n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/picker/picker.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/picker/picker\n\n>Template\n```vue\n\r\n\r\n\r\n\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/miniprogram/dev/component/picker.html)\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 | 4.41 | 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/miniprogram/dev/component/picker-view-column.html)\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 | 4.41 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| value | array\\ | - | | picker-view-column 选择的第几项 |\n| indicator-style | string([string.CSSString](/uts/data-type.md#ide-string)) | - | | 设置选择器中间选中框的样式 |\n| indicator-class | string([string.ClassString](/uts/data-type.md#ide-string)) | - | | 设置选择器中间选中框的类名 |\n| mask-style | string([string.CSSString](/uts/data-type.md#ide-string)) | - | | 设置蒙层的样式 |\n| mask-top-style | string([string.CSSString](/uts/data-type.md#ide-string)) | - | | 设置蒙层上半部分的样式 |\n| mask-bottom-style | string([string.CSSString](/uts/data-type.md#ide-string)) | - | | 设置蒙层下半部分的样式 |\n| mask-class | string([string.ClassString](/uts/data-type.md#ide-string)) | - | | 设置蒙层的类名 |\n| @change | (event: [UniPickerViewChangeEvent](#unipickerviewchangeevent)) => void | - | | 当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0
\t\t开始） |\n| @pickstart | eventhandle | - | | - |\n| @pickend | eventhandle | - | | - |","event":"\n### 事件\n#### UniPickerViewChangeEvent\n\n```mermaid\ngraph LR\n \nUniPickerViewChangeEvent -- Extends --> UniCustomEvent<UniPickerViewChangeEventDetail>\n style UniCustomEvent<UniPickerViewChangeEventDetail> color:#42b983\n click UniCustomEvent<UniPickerViewChangeEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniPickerViewChangeEventDetail\n\n\n###### UniPickerViewChangeEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| value | Array\\ | 是 | - | - | - |\n\n","example":"### 示例\n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/picker-view/picker-view.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/picker-view/picker-view\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/picker-view/picker-view\n\n>Template\n```vue\n\r\n\r\n\r\n\r\n\r\n\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) | |","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/miniprogram/dev/component/picker-view.html)\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 | 4.41 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| disabled | boolean | false | | 是否禁用 |\n| value | string | - | | \\ 标识。当该radio 选中时，radio-group的 change 事件会携带radio的value |\n| checked | boolean | false | | \\ 当前是否选中 |\n| backgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | | radio默认的背景颜色 |\n| borderColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#d1d1d1\" | | radio默认的边框颜色 |\n| activeBackgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007AFF\" | | radio选中时的背景颜色，优先级大于color属性 |\n| activeBorderColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"\" | | radio选中时的边框颜色 |\n| foreColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | | radio的图标颜色 |\n| ~~iconColor~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | | radio的图标颜色 (使用foreColor替代) |\n| ~~color~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007AFF\" | | radio的颜色 (使用foreColor替代) |","event":"","example":"### 示例\n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/radio/radio.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/radio/radio\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/radio/radio\n\n>Template\n```vue\n\r\n\r\n\r\n\r\n\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/miniprogram/dev/component/radio.html)\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 | 4.41 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | - | | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| @change | (event: [UniRadioGroupChangeEvent](#uniradiogroupchangeevent)) => void | - | | radio-group 中的选中项发生变化时触发 change 事件，event.detail = {value: 选中项radio的value} |","event":"\n### 事件\n#### UniRadioGroupChangeEvent\n\n```mermaid\ngraph LR\n \nUniRadioGroupChangeEvent -- Extends --> UniCustomEvent<UniRadioGroupChangeEventDetail>\n style UniCustomEvent<UniRadioGroupChangeEventDetail> color:#42b983\n click UniCustomEvent<UniRadioGroupChangeEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniRadioGroupChangeEventDetail\n\n\n###### UniRadioGroupChangeEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| value | string | 是 | - | - | - |\n\n","example":"","children":"### 子组件 @children-tags\n| 子组件 | 兼容性 |\n| :- | :- |\n| [radio](radio.md) | |","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.radio.radio-group)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/radio.html)\n- [微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/component/radio-group.html)\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 | 4.41 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | - | | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| disabled | boolean | - | | 是否禁用 |\n| min | number | 0 | | slider 最小值 |\n| max | number | 100 | | slider 最大值 |\n| step | number | 1 | | slider 步长，取值必须大于 0，并且可被(max - min)整除 |\n| value | number | 0 | | radio当前取值 |\n| activeBackgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | | slider 滑块左侧已选择部分的线条颜色 |\n| backgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#e9e9e9\" | | radio背景条的颜色 |\n| block-size | number | 28 | | radio滑块的大小，取值范围为 12 - 28 |\n| foreColor | string([string.ColorString](/uts/data-type.md#ide-string)) | - | | slider 的滑块背景颜色 |\n| show-value | boolean | false | | 是否显示当前 value |\n| @change | (event: [UniSliderChangeEvent](#unisliderchangeevent)) => void | - | | 完成一次拖动后触发的事件，event.detail = {value: value} |\n| @changing | (event: [UniSliderChangeEvent](#unisliderchangeevent)) => void | - | | 拖动过程中触发的事件，event.detail = {value: value} |\n| color | color | - | | - |\n| selected-color | color | - | | - |\n| ~~block-color~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | | 滑块颜色 (使用foreColor替代) |\n| ~~activeColor~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | | slider 滑块左侧已选择部分的线条颜色 |","event":"\n### 事件\n#### UniSliderChangeEvent\n\n```mermaid\ngraph LR\n \nUniSliderChangeEvent -- Extends --> UniCustomEvent<UniSliderChangeEventDetail>\n style UniCustomEvent<UniSliderChangeEventDetail> color:#42b983\n click UniCustomEvent<UniSliderChangeEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniSliderChangeEventDetail\n\n\n###### UniSliderChangeEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| value | number | 是 | - | - | - |\n\n","example":"### 示例\n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/slider/slider.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/slider/slider\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/slider/slider\n\n>Template\n```vue\n\r\n\r\n\r\n\r\n\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/miniprogram/dev/component/slider.html)\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 | 4.41 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | - | | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| checked | boolean | - | | 是否选中 |\n| type | string | - | | 样式，有效值：switch, checkbox |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| switch | | |\n@| checkbox | | |\n| backgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | - | | switch 的关闭状态背景颜色 |\n| activeBackgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | - | | switch 的开启状态背景颜色 |\n| foreColor | string([string.ColorString](/uts/data-type.md#ide-string)) | - | | switch 的滑块背景颜色 |\n| activeForeColor | string([string.ColorString](/uts/data-type.md#ide-string)) | - | | switch 的开启状态下的滑块背景颜色 |\n| disabled | boolean | - | | 是否禁用 |\n| @change | (event: [UniSwitchChangeEvent](#uniswitchchangeevent)) => void | - | | checked 改变时触发 change 事件，event.detail={ value:checked} |\n| ~~color~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | - | | switch 的颜色，同 css 的 color (使用foreColor替代) |","event":"\n### 事件\n#### UniSwitchChangeEvent\n\n```mermaid\ngraph LR\n \nUniSwitchChangeEvent -- Extends --> UniCustomEvent<UniSwitchChangeEventDetail>\n style UniCustomEvent<UniSwitchChangeEventDetail> color:#42b983\n click UniCustomEvent<UniSwitchChangeEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniSwitchChangeEventDetail\n\n\n###### UniSwitchChangeEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| value | boolean | 是 | - | - | - |\n\n","example":"### 示例\n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/switch/switch.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/switch/switch\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/switch/switch\n\n>Template\n```vue\n\r\n\r\n\r\n\r\n\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/miniprogram/dev/component/switch.html)\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 | 4.41 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | - | | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| value | string | \"\" | | 输入框的初始内容 |\n| placeholder | string | \"\" | | 输入框为空时占位符 |\n| placeholder-style | string | \"\" | | 指定 placeholder 的样式，目前仅支持color,font-size和font-weight |\n| placeholder-class | string([string.ClassString](/uts/data-type.md#ide-string)) | \"\" | | 指定 placeholder 的样式类，目前仅支持color,font-size和font-weight |\n| maxlength | number | \"不限制长度\" | | 最大输入长度，0和正数为合法值，非法值的时候不限制最大长度 |\n| auto-focus | boolean | false | | 自动获取焦点，与`focus`属性对比，此属性只会首次生效。 |\n| focus | boolean | false | | 获取焦点 |\n| confirm-type | return \\| send \\| search \\| next \\| go \\| done | \"return\" | | 设置键盘右下角按钮的文字 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| return | | 换行 |\n@| send | | 发送 |\n@| search | | 搜索 |\n@| next | | 下一个 |\n@| go | | 前往 |\n@| done | | 完成 |\n| cursor | number | 0 | | 指定focus时的光标位置 |\n| confirm-hold | boolean | false | | 点击键盘右下角按钮时是否保持键盘不收起 |\n| auto-height | boolean | false | | 是否自动增高，设置auto-height时，style.height不生效 |\n| fixed | boolean | - | | 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true |\n| cursor-spacing | number | 0 | | 指定光标与键盘的距离，单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 |\n| cursor-color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"\" | | 指定光标颜色 |\n| show-confirm-bar | boolean | - | | 是否显示键盘上方带有”完成“按钮那一栏 |\n| selection-start | number | -1 | | 光标起始位置，自动聚集时有效，需与selection-end搭配使用 |\n| selection-end | number | -1 | | 光标结束位置，自动聚集时有效，需与selection-satrt搭配使用 |\n| adjust-position | boolean | true | | 键盘弹起时，是否自动上推页面 |\n| inputmode | none \\| text \\| decimal \\| numeric \\| tel \\| search \\| email \\| url | \"text\" | | 是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。在符合条件的高版本webview里，uni-app的 web 和 app-vue 平台中可使用本属性。 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| none | | 无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用。 |\n@| text | | 使用用户本地区域设置的标准文本输入键盘。 |\n@| decimal | | 小数输入键盘，包含数字和分隔符（通常是“ . ”或者“ , ”），设备可能也可能不显示减号键。 |\n@| numeric | | 数字输入键盘，所需要的就是 0 到 9 的数字，设备可能也可能不显示减号键。 |\n@| tel | | 电话输入键盘，包含 0 到 9 的数字、星号（*）和井号（#）键。表单输入里面的电话输入通常应该使用 \\ 。 |\n@| search | | 为搜索输入优化的虚拟键盘，比如，返回键可能被重新标记为“搜索”，也可能还有其他的优化。 |\n@| email | | 为邮件地址输入优化的虚拟键盘，通常包含\"@\"符号和其他优化。表单里面的邮件地址输入应该使用 \\ 。 |\n@| url | | 为网址输入优化的虚拟键盘，比如，“/”键会更加明显、历史记录访问等。表单里面的网址输入通常应该使用 \\ 。 |\n| hold-keyboard | boolean | false | | focus时，点击页面的时候不收起键盘 |\n| @confirm | (event: [UniInputConfirmEvent](#uniinputconfirmevent)) => void | - | | 点击完成时， 触发 confirm 事件，event.detail = {value: value} |\n| @input | (event: [UniInputEvent](#uniinputevent)) => void | - | | 当键盘输入时，触发 input 事件，event.detail = {value, cursor}， @input 处理函数的返回值并不会反映到 textarea 上 |\n| @linechange | (event: [UniTextareaLineChangeEvent](#unitextarealinechangeevent)) => void | - | | 输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0} |\n| @blur | (event: [UniTextareaBlurEvent](#unitextareablurevent)) => void | - | | 输入框失去焦点时触发，event.detail = {value, cursor} |\n| @keyboardheightchange | (event: [UniInputKeyboardHeightChangeEvent](#uniinputkeyboardheightchangeevent)) => void | - | | 键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration} |\n| @focus | (event: [UniTextareaFocusEvent](#unitextareafocusevent)) => void | - | | 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度，在基础库 1.9.90 起支持 |\n| disabled | boolean | - | | - |\n| disable-default-padding | boolean | - | | - |\n| adjust-keyboard-to | boolean | - | | *(boolean)*
键盘对齐位置 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| cursor | | |\n@| bottom | | |","event":"\n### 事件\n#### UniInputConfirmEvent\n\n```mermaid\ngraph LR\n \nUniInputConfirmEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputConfirmEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputConfirmEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | 输入框内容 |\n\n\n#### UniInputEvent\n\n```mermaid\ngraph LR\n \nUniInputEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | 输入框内容 |\n@| cursor | number | 是 | - | - | 光标的位置 |\n@| keyCode | number | 是 | - | - | 输入字符的Unicode值 |\n\n\n#### UniTextareaLineChangeEvent\n\n```mermaid\ngraph LR\n \nUniTextareaLineChangeEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniTextareaLineChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniTextareaLineChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| lineCount | number | 是 | - | - | 行数 |\n@| heightRpx | number | 是 | - | - | textarea的高度 |\n@| height | number | 是 | - | - | textarea的高度 |\n\n\n#### UniTextareaBlurEvent\n\n```mermaid\ngraph LR\n \nUniTextareaBlurEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniTextareaBlurEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniTextareaBlurEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | 输入框内容 |\n@| cursor | number | 是 | - | - | 选择区域的起始位置 |\n\n\n#### UniInputKeyboardHeightChangeEvent\n\n```mermaid\ngraph LR\n \nUniInputKeyboardHeightChangeEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputKeyboardHeightChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputKeyboardHeightChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| height | number | 是 | - | - | 键盘高度 |\n@| duration | number | 是 | - | - | 持续时间 |\n\n\n#### UniTextareaFocusEvent\n\n```mermaid\ngraph LR\n \nUniTextareaFocusEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniTextareaFocusEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniTextareaFocusEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| height | number | 是 | - | | 键盘高度 |\n@| value | string | 是 | - | - | 输入框内容 |\n\n","example":"### 示例\n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/textarea/textarea.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/textarea/textarea\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/textarea/textarea\n\n>Template\n```vue\n\r\n\r\n\r\n\r\n\r\n\r\n\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/miniprogram/dev/component/form.html)\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| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | - | | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| disabled | boolean | false | | 是否禁用 |\n| value | string | \"\" | | 输入框的初始内容 |\n| type | text \\| number \\| idcard \\| digit \\| tel \\| safe-password \\| nickname | \"text\" | | input的类型 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| text | | 文本输入键盘 |\n@| number | | 数字输入键盘 |\n@| idcard | | 身份证输入键盘 |\n@| digit | | 带小数点数字输入键盘 |\n@| tel | | 电话输入键盘 |\n@| safe-password | | 密码安全输入键盘 |\n@| nickname | | 昵称输入键盘 |\n| password | boolean | false | | 是否是密码类型 |\n| placeholder | string | \"\" | | 输入框为空时占位符 |\n| placeholder-style | string | \"\" | | 指定 placeholder 的样式，目前仅支持color,font-size和font-weight |\n| placeholder-class | string([string.ClassString](/uts/data-type.md#ide-string)) | \"\" | | 指定 placeholder 的样式类，目前仅支持color,font-size和font-weight |\n| maxlength | number | \"不限制长度\" | | 最大输入长度，0和正数为合法值，非法值的时候不限制最大长度 |\n| cursor-spacing | number | 0 | | 指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 |\n| cursor-color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"\" | | 指定光标颜色 |\n| auto-focus | boolean | false | | 自动获取焦点，与`focus`属性对比，此属性只会首次生效。 |\n| focus | boolean | false | | 获取焦点 |\n| confirm-type | send \\| search \\| next \\| go \\| done | \"done\" | | 设置键盘右下角按钮的文字，仅在 type为text 时生效。 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| send | | 发送 |\n@| search | | 搜索 |\n@| next | | 下一个 |\n@| go | | 前往 |\n@| done | | 完成 |\n| always-embed | boolean | - | | 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) |\n| confirm-hold | boolean | false | | 点击键盘右下角按钮时是否保持键盘不收起 |\n| cursor | number | 0 | | 指定focus时的光标位置 |\n| selection-start | number | -1 | | 光标起始位置，自动聚集时有效，需与selection-end搭配使用 |\n| selection-end | number | -1 | | 光标结束位置，自动聚集时有效，需与selection-satrt搭配使用 |\n| adjust-position | boolean | true | | 键盘弹起时，是否自动上推页面 |\n| text-content-type | string | - | | 文本区域的语义，根据类型自动填充 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| oneTimeCode | | 一次性验证码 |\n| hold-keyboard | boolean | false | | focus时，点击页面的时候不收起键盘 |\n| safe-password-cert-path | string | - | | 安全键盘加密公钥的路径，只支持包内路径 |\n| safe-password-length | number | - | | 安全键盘输入密码长度 |\n| safe-password-time-stamp | number | - | | 安全键盘加密时间戳 |\n| safe-password-nonce | string | - | | 安全键盘加密盐值 |\n| safe-password-salt | string | - | | 安全键盘计算 hash 盐值，若指定custom-hash 则无效 |\n| safe-password-custom-hash | string | - | | 安全键盘计算 hash 的算法表达式 |\n| random-number | boolean | - | | 当 type 为 number, digit, idcard 数字键盘是否随机排列 |\n| controlled | boolean | - | | 是否为受控组件。为 true 时，value 内容会完全受 setData 控制 |\n| always-system | boolean | - | | 是否强制使用系统键盘和 Web-view 创建的 input 元素。为 true 时，confirm-type、confirm-hold 可能失效 |\n| inputmode | none \\| text \\| decimal \\| numeric \\| tel \\| search \\| email \\| url | \"text\" | | 是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。在符合条件的高版本webview里，uni-app的 web 和 app-vue 平台中可使用本属性。 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| none | | 无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用。 |\n@| text | | 使用用户本地区域设置的标准文本输入键盘。 |\n@| decimal | | 小数输入键盘，包含数字和分隔符（通常是“ . ”或者“ , ”），设备可能也可能不显示减号键。 |\n@| numeric | | 数字输入键盘，所需要的就是 0 到 9 的数字，设备可能也可能不显示减号键。 |\n@| tel | | 电话输入键盘，包含 0 到 9 的数字、星号（*）和井号（#）键。表单输入里面的电话输入通常应该使用 \\ 。 |\n@| search | | 为搜索输入优化的虚拟键盘，比如，返回键可能被重新标记为“搜索”，也可能还有其他的优化。 |\n@| email | | 为邮件地址输入优化的虚拟键盘，通常包含\"@\"符号和其他优化。表单里面的邮件地址输入应该使用 \\ 。 |\n@| url | | 为网址输入优化的虚拟键盘，比如，“/”键会更加明显、历史记录访问等。表单里面的网址输入通常应该使用 \\ 。 |\n| @input | (event: [UniInputEvent](#uniinputevent)) => void | - | | 当键盘输入时，触发input事件，event.detail = {value, cursor}，处理函数可以直接 return 一个字符串，将替换输入框的内容。 |\n| @focus | (event: [UniInputFocusEvent](#uniinputfocusevent)) => void | - | | 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度 |\n| @blur | (event: [UniInputBlurEvent](#uniinputblurevent)) => void | - | | 输入框失去焦点时触发，event.detail = {value: value} |\n| @keyboardheightchange | (event: [UniInputKeyboardHeightChangeEvent](#uniinputkeyboardheightchangeevent)) => void | - | | 键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration} |\n| @confirm | (event: [UniInputConfirmEvent](#uniinputconfirmevent)) => void | - | | 点击完成按钮时触发，event.detail = {value: value} |\n| @nicknamereview | eventhandle | - | | - |","event":"\n### 事件\n#### UniInputEvent\n\n```mermaid\ngraph LR\n \nUniInputEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | 输入框内容 |\n@| cursor | number | 是 | - | - | 光标的位置 |\n@| keyCode | number | 是 | - | - | 输入字符的Unicode值 |\n\n\n#### UniInputFocusEvent\n\n```mermaid\ngraph LR\n \nUniInputFocusEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputFocusEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputFocusEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| height | number | 是 | - | | 键盘高度 |\n@| value | string | 是 | - | - | 输入框内容 |\n\n\n#### UniInputBlurEvent\n\n```mermaid\ngraph LR\n \nUniInputBlurEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputBlurEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputBlurEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | 输入框内容 |\n@| cursor | number | 是 | - | - | 选择区域的起始位置 |\n\n\n#### UniInputKeyboardHeightChangeEvent\n\n```mermaid\ngraph LR\n \nUniInputKeyboardHeightChangeEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputKeyboardHeightChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputKeyboardHeightChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| height | number | 是 | - | - | 键盘高度 |\n@| duration | number | 是 | - | - | 持续时间 |\n\n\n#### UniInputConfirmEvent\n\n```mermaid\ngraph LR\n \nUniInputConfirmEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputConfirmEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputConfirmEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | 输入框内容 |\n\n","example":"### 示例\n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/input/input.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/input/input\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/input/input\n\n>Template\n```vue\n\r\n\r\n\r\n\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(\"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/miniprogram/dev/component/input.html)\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| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| read-only | boolean | - | | 设置编辑器为只读。 |\n| placeholder | string | - | | 提示信息。 |\n| show-img-size | boolean | - | | 点击图片时显示图片大小控件。 |\n| show-img-toolbar | boolean | - | | 点击图片时显示工具栏控件。 |\n| show-img-resize | string | - | | 点击图片时显示修改尺寸控件。 |\n| @ready | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 编辑器初始化完成时触发 |\n| @focus | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 编辑器聚焦时触发，event.detail = {html, text, delta} |\n| @blur | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 编辑器失去焦点时触发，detail = {html, text, delta} |\n| @input | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 编辑器内容改变时触发，detail = {html, text, delta} |\n| @statuschange | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 通过 Context 方法改变编辑器内样式时触发，返回选区已设置的样式 |\n| enable-formats | Array.<string> | - | | - |","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\n\n\n\n\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/miniprogram/dev/component/editor.html)\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| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| disabled | boolean | - | | 是否禁用 |\n| for | string | - | | 绑定控件的 id |","event":"","example":"### 示例\n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/label/label.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/label/label\n\n>Template\n```vue\n\r\n\r\n\r\n\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/miniprogram/dev/component/label.html)\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| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | x | x |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| disabled | boolean | - | | 是否禁用 |\n| mode | string | - | | 选择器类型 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| selector | | 普通选择器 |\n@| multiSelector | | 多列选择器 |\n@| time | | 时间选择器 |\n@| date | | 日期选择器 |\n@| region | | 省市选择器 |\n| range | array | - | | mode为 selector 或 multiSelector 时，range 有效 |\n| range-key | string | - | | 当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 |\n| value | string | - | | mode为select或multiSelector时：value 的值表示选择了 range 中的第几个（下标从 0 开始）；mode为time时：表示选中的时间，格式为\"hh:mm\"；mode为date时：表示选中的日期，格式为\"YYYY-MM-DD\"；mode为region时：
\t\t表示选中的省市区，默认选中每一列的第一个值。 |\n| start | string | - | | mode为time：表示有效时间范围的开始，字符串格式为\"hh:mm\"；mode为date：表示有效日期范围的开始，字符串格式为\"YYYY-MM-DD\" |\n| end | string | - | | mode为time：表示有效时间范围的结束，字符串格式为\"hh:mm\"；mode为date：表示有效日期范围的结束，字符串格式为\"YYYY-MM-DD\" |\n| fields | string | - | | 有效值 year,month,day，表示选择器的粒度 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| year | | 选择器粒度为年 |\n@| month | | 选择器粒度为月份 |\n@| day | | 选择器粒度为天 |\n| custom-item | string | - | | 可为每一列的顶部添加一个自定义的项 |\n| @change | (event: [UniEvent](/component/common.md#unievent)) => void | - | | value 改变时触发 change 事件，event.detail = {value: value} |\n| @columnchange | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 某一列的值改变时触发 columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改变了第几列（下标从0开始），value 的值表示变更值的下标 |\n| @cancel | (event: [UniEvent](/component/common.md#unievent)) => void | - | | 取消选择时触发 |\n| header-text | string | - | | - |\n| level | string | - | | mode=\"region\" 时有效，选择器层级 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| province | | |\n@| city | | |\n@| region | | |\n@| sub-district | | |","event":"","example":"### 示例\n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/picker/picker.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/picker/picker\n\n>Template\n```vue\n\r\n\r\n\r\n\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/miniprogram/dev/component/picker.html)\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| 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/miniprogram/dev/component/picker-view-column.html)\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| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| value | array\\ | - | | picker-view-column 选择的第几项 |\n| indicator-style | string([string.CSSString](/uts/data-type.md#ide-string)) | - | | 设置选择器中间选中框的样式 |\n| indicator-class | string([string.ClassString](/uts/data-type.md#ide-string)) | - | | 设置选择器中间选中框的类名 |\n| mask-style | string([string.CSSString](/uts/data-type.md#ide-string)) | - | | 设置蒙层的样式 |\n| mask-top-style | string([string.CSSString](/uts/data-type.md#ide-string)) | - | | 设置蒙层上半部分的样式 |\n| mask-bottom-style | string([string.CSSString](/uts/data-type.md#ide-string)) | - | | 设置蒙层下半部分的样式 |\n| mask-class | string([string.ClassString](/uts/data-type.md#ide-string)) | - | | 设置蒙层的类名 |\n| @change | (event: [UniPickerViewChangeEvent](#unipickerviewchangeevent)) => void | - | | 当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0
\t\t开始） |\n| @pickstart | eventhandle | - | | - |\n| @pickend | eventhandle | - | | - |","event":"\n### 事件\n#### UniPickerViewChangeEvent\n\n```mermaid\ngraph LR\n \nUniPickerViewChangeEvent -- Extends --> UniCustomEvent<UniPickerViewChangeEventDetail>\n style UniCustomEvent<UniPickerViewChangeEventDetail> color:#42b983\n click UniCustomEvent<UniPickerViewChangeEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniPickerViewChangeEventDetail\n\n\n###### UniPickerViewChangeEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| value | Array\\ | 是 | - | - | - |\n\n","example":"### 示例\n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/picker-view/picker-view.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/picker-view/picker-view\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/picker-view/picker-view\n\n>Template\n```vue\n\r\n\r\n\r\n\r\n\r\n\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) | |","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/miniprogram/dev/component/picker-view.html)\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| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| disabled | boolean | false | | 是否禁用 |\n| value | string | - | | \\ 标识。当该radio 选中时，radio-group的 change 事件会携带radio的value |\n| checked | boolean | false | | \\ 当前是否选中 |\n| backgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | | radio默认的背景颜色 |\n| borderColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#d1d1d1\" | | radio默认的边框颜色 |\n| activeBackgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007AFF\" | | radio选中时的背景颜色，优先级大于color属性 |\n| activeBorderColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"\" | | radio选中时的边框颜色 |\n| foreColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | | radio的图标颜色 |\n| ~~iconColor~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | | radio的图标颜色 (使用foreColor替代) |\n| ~~color~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007AFF\" | | radio的颜色 (使用foreColor替代) |","event":"","example":"### 示例\n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/radio/radio.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/radio/radio\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/radio/radio\n\n>Template\n```vue\n\r\n\r\n\r\n\r\n\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/miniprogram/dev/component/radio.html)\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| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | - | | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| @change | (event: [UniRadioGroupChangeEvent](#uniradiogroupchangeevent)) => void | - | | radio-group 中的选中项发生变化时触发 change 事件，event.detail = {value: 选中项radio的value} |","event":"\n### 事件\n#### UniRadioGroupChangeEvent\n\n```mermaid\ngraph LR\n \nUniRadioGroupChangeEvent -- Extends --> UniCustomEvent<UniRadioGroupChangeEventDetail>\n style UniCustomEvent<UniRadioGroupChangeEventDetail> color:#42b983\n click UniCustomEvent<UniRadioGroupChangeEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniRadioGroupChangeEventDetail\n\n\n###### UniRadioGroupChangeEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| value | string | 是 | - | - | - |\n\n","example":"","children":"### 子组件 @children-tags\n| 子组件 | 兼容性 |\n| :- | :- |\n| [radio](radio.md) | |","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.radio.radio-group)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/radio.html)\n- [微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/component/radio-group.html)\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| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | - | | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| disabled | boolean | - | | 是否禁用 |\n| min | number | 0 | | slider 最小值 |\n| max | number | 100 | | slider 最大值 |\n| step | number | 1 | | slider 步长，取值必须大于 0，并且可被(max - min)整除 |\n| value | number | 0 | | radio当前取值 |\n| activeBackgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | | slider 滑块左侧已选择部分的线条颜色 |\n| backgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#e9e9e9\" | | radio背景条的颜色 |\n| block-size | number | 28 | | radio滑块的大小，取值范围为 12 - 28 |\n| foreColor | string([string.ColorString](/uts/data-type.md#ide-string)) | - | | slider 的滑块背景颜色 |\n| show-value | boolean | false | | 是否显示当前 value |\n| @change | (event: [UniSliderChangeEvent](#unisliderchangeevent)) => void | - | | 完成一次拖动后触发的事件，event.detail = {value: value} |\n| @changing | (event: [UniSliderChangeEvent](#unisliderchangeevent)) => void | - | | 拖动过程中触发的事件，event.detail = {value: value} |\n| color | color | - | | - |\n| selected-color | color | - | | - |\n| ~~block-color~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | | 滑块颜色 (使用foreColor替代) |\n| ~~activeColor~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | | slider 滑块左侧已选择部分的线条颜色 |","event":"\n### 事件\n#### UniSliderChangeEvent\n\n```mermaid\ngraph LR\n \nUniSliderChangeEvent -- Extends --> UniCustomEvent<UniSliderChangeEventDetail>\n style UniCustomEvent<UniSliderChangeEventDetail> color:#42b983\n click UniCustomEvent<UniSliderChangeEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniSliderChangeEventDetail\n\n\n###### UniSliderChangeEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| value | number | 是 | - | - | - |\n\n","example":"### 示例\n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/slider/slider.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/slider/slider\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/slider/slider\n\n>Template\n```vue\n\r\n\r\n\r\n\r\n\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/miniprogram/dev/component/slider.html)\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| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | - | | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| checked | boolean | - | | 是否选中 |\n| type | string | - | | 样式，有效值：switch, checkbox |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| switch | | |\n@| checkbox | | |\n| backgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | - | | switch 的关闭状态背景颜色 |\n| activeBackgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | - | | switch 的开启状态背景颜色 |\n| foreColor | string([string.ColorString](/uts/data-type.md#ide-string)) | - | | switch 的滑块背景颜色 |\n| activeForeColor | string([string.ColorString](/uts/data-type.md#ide-string)) | - | | switch 的开启状态下的滑块背景颜色 |\n| disabled | boolean | - | | 是否禁用 |\n| @change | (event: [UniSwitchChangeEvent](#uniswitchchangeevent)) => void | - | | checked 改变时触发 change 事件，event.detail={ value:checked} |\n| ~~color~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | - | | switch 的颜色，同 css 的 color (使用foreColor替代) |","event":"\n### 事件\n#### UniSwitchChangeEvent\n\n```mermaid\ngraph LR\n \nUniSwitchChangeEvent -- Extends --> UniCustomEvent<UniSwitchChangeEventDetail>\n style UniCustomEvent<UniSwitchChangeEventDetail> color:#42b983\n click UniCustomEvent<UniSwitchChangeEventDetail> \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniSwitchChangeEventDetail\n\n\n###### UniSwitchChangeEventDetail 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| value | boolean | 是 | - | - | - |\n\n","example":"### 示例\n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/switch/switch.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/switch/switch\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/switch/switch\n\n>Template\n```vue\n\r\n\r\n\r\n\r\n\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/miniprogram/dev/component/switch.html)\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| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | - | | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| disabled | boolean | false | | 是否禁用 |\n| value | string | \"\" | | 输入框的初始内容 |\n| placeholder | string | \"\" | | 输入框为空时占位符 |\n| placeholder-style | string | \"\" | | 指定 placeholder 的样式，目前仅支持color,font-size和font-weight |\n| placeholder-class | string([string.ClassString](/uts/data-type.md#ide-string)) | \"\" | | 指定 placeholder 的样式类，目前仅支持color,font-size和font-weight |\n| maxlength | number | \"不限制长度\" | | 最大输入长度，0和正数为合法值，非法值的时候不限制最大长度 |\n| auto-focus | boolean | false | | 自动获取焦点，与`focus`属性对比，此属性只会首次生效。 |\n| focus | boolean | false | | 获取焦点 |\n| confirm-type | return \\| send \\| search \\| next \\| go \\| done | \"return\" | | 设置键盘右下角按钮的文字 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| return | | 换行 |\n@| send | | 发送 |\n@| search | | 搜索 |\n@| next | | 下一个 |\n@| go | | 前往 |\n@| done | | 完成 |\n| cursor | number | 0 | | 指定focus时的光标位置 |\n| confirm-hold | boolean | false | | 点击键盘右下角按钮时是否保持键盘不收起 |\n| auto-height | boolean | false | | 是否自动增高，设置auto-height时，style.height不生效 |\n| fixed | boolean | - | | 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true |\n| cursor-spacing | number | 0 | | 指定光标与键盘的距离，单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 |\n| cursor-color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"\" | | 指定光标颜色 |\n| show-confirm-bar | boolean | - | | 是否显示键盘上方带有”完成“按钮那一栏 |\n| selection-start | number | -1 | | 光标起始位置，自动聚集时有效，需与selection-end搭配使用 |\n| selection-end | number | -1 | | 光标结束位置，自动聚集时有效，需与selection-satrt搭配使用 |\n| adjust-position | boolean | true | | 键盘弹起时，是否自动上推页面 |\n| inputmode | none \\| text \\| decimal \\| numeric \\| tel \\| search \\| email \\| url | \"text\" | | 是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。在符合条件的高版本webview里，uni-app的 web 和 app-vue 平台中可使用本属性。 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| none | | 无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用。 |\n@| text | | 使用用户本地区域设置的标准文本输入键盘。 |\n@| decimal | | 小数输入键盘，包含数字和分隔符（通常是“ . ”或者“ , ”），设备可能也可能不显示减号键。 |\n@| numeric | | 数字输入键盘，所需要的就是 0 到 9 的数字，设备可能也可能不显示减号键。 |\n@| tel | | 电话输入键盘，包含 0 到 9 的数字、星号（*）和井号（#）键。表单输入里面的电话输入通常应该使用 \\ 。 |\n@| search | | 为搜索输入优化的虚拟键盘，比如，返回键可能被重新标记为“搜索”，也可能还有其他的优化。 |\n@| email | | 为邮件地址输入优化的虚拟键盘，通常包含\"@\"符号和其他优化。表单里面的邮件地址输入应该使用 \\ 。 |\n@| url | | 为网址输入优化的虚拟键盘，比如，“/”键会更加明显、历史记录访问等。表单里面的网址输入通常应该使用 \\ 。 |\n| hold-keyboard | boolean | false | | focus时，点击页面的时候不收起键盘 |\n| @confirm | (event: [UniInputConfirmEvent](#uniinputconfirmevent)) => void | - | | 点击完成时， 触发 confirm 事件，event.detail = {value: value} |\n| @input | (event: [UniInputEvent](#uniinputevent)) => void | - | | 当键盘输入时，触发 input 事件，event.detail = {value, cursor}， @input 处理函数的返回值并不会反映到 textarea 上 |\n| @linechange | (event: [UniTextareaLineChangeEvent](#unitextarealinechangeevent)) => void | - | | 输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0} |\n| @blur | (event: [UniTextareaBlurEvent](#unitextareablurevent)) => void | - | | 输入框失去焦点时触发，event.detail = {value, cursor} |\n| @keyboardheightchange | (event: [UniInputKeyboardHeightChangeEvent](#uniinputkeyboardheightchangeevent)) => void | - | | 键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration} |\n| @focus | (event: [UniTextareaFocusEvent](#unitextareafocusevent)) => void | - | | 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度，在基础库 1.9.90 起支持 |\n| disabled | boolean | - | | - |\n| disable-default-padding | boolean | - | | - |\n| adjust-keyboard-to | boolean | - | | *(boolean)*
键盘对齐位置 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| cursor | | |\n@| bottom | | |","event":"\n### 事件\n#### UniInputConfirmEvent\n\n```mermaid\ngraph LR\n \nUniInputConfirmEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputConfirmEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputConfirmEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | 输入框内容 |\n\n\n#### UniInputEvent\n\n```mermaid\ngraph LR\n \nUniInputEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | 输入框内容 |\n@| cursor | number | 是 | - | - | 光标的位置 |\n@| keyCode | number | 是 | - | - | 输入字符的Unicode值 |\n\n\n#### UniTextareaLineChangeEvent\n\n```mermaid\ngraph LR\n \nUniTextareaLineChangeEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniTextareaLineChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniTextareaLineChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| lineCount | number | 是 | - | - | 行数 |\n@| heightRpx | number | 是 | - | - | textarea的高度 |\n@| height | number | 是 | - | - | textarea的高度 |\n\n\n#### UniTextareaBlurEvent\n\n```mermaid\ngraph LR\n \nUniTextareaBlurEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniTextareaBlurEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniTextareaBlurEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | 输入框内容 |\n@| cursor | number | 是 | - | - | 选择区域的起始位置 |\n\n\n#### UniInputKeyboardHeightChangeEvent\n\n```mermaid\ngraph LR\n \nUniInputKeyboardHeightChangeEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputKeyboardHeightChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputKeyboardHeightChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| height | number | 是 | - | - | 键盘高度 |\n@| duration | number | 是 | - | - | 持续时间 |\n\n\n#### UniTextareaFocusEvent\n\n```mermaid\ngraph LR\n \nUniTextareaFocusEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniTextareaFocusEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniTextareaFocusEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| height | number | 是 | - | | 键盘高度 |\n@| value | string | 是 | - | - | 输入框内容 |\n\n","example":"### 示例\n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha//pages/component/textarea/textarea.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/textarea/textarea\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/textarea/textarea\n\n>Template\n```vue\n\r\n\r\n