diff --git a/docs/.vuepress/utils/utsComJson.json b/docs/.vuepress/utils/utsComJson.json index fc59ade7921095641d2b1fa3d82c5da288e4fb3f..0705c4f84b283150b8c5eb55c9d7467deb1f24bf 100644 --- a/docs/.vuepress/utils/utsComJson.json +++ b/docs/.vuepress/utils/utsComJson.json @@ -1 +1 @@ -{"animation-view":{"name":"## animation-view","description":"Lottie 动画\n> 本 Component 是 uni ext component，需下载插件：[animation-view](https://ext.dcloud.net.cn/plugin?name=uni-animation-view)\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| path | string | \"\" | | 动画资源地址，目前只支持绝对路径 |\n| loop | boolean | false | | 动画是否循环播放 |\n| autoplay | boolean | false | | 动画是否自动播放 |\n| action | string | \"stop\" | | 动画操作，可取值 play、pause、stop |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| play | | 播放 |\n@| pause | | 暂停 |\n@| stop | | 停止 |\n| hidden | boolean | false | | 是否隐藏动画 |\n| @ended | (event: [UniEvent](/component/common#unievent)) => void | - | | - |","event":"","example":"","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| - | 3.9 | 4.11 |\n","children":"","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/animation-view)\n- [插件市场](https://ext.dcloud.net.cn/plugin?id=10674)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/animation-view.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.animation-view)\n"},"button":{"name":"## button","description":"> 组件类型：UniButtonElement \n\n 按钮","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| disabled | boolean | false | | 是否禁用 |\n| hover-class | string([string.ClassString](/uts/data-type.md#ide-string)) | \"button-hover\" | | 指定按下去的样式类。当 hover-class=\"none\" 时，没有点击态效果 |\n| hover-start-time | number | 20 | | 按住后多久出现点击态，单位毫秒 |\n| hover-stay-time | number | 70 | | 手指松开后点击态保留时间，单位毫秒 |\n| size | string | \"default\" | | 按钮的大小 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| default | | 默认大小 |\n@| mini | | 小尺寸 |\n| type | string | \"default\" | | 按钮的样式类型 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| default | | 白色 |\n@| primary | | 蓝色 |\n@| warn | | 红色 |\n| plain | boolean | false | | 按钮是否镂空，背景色透明 |\n| loading | boolean | - | | 名称前是否带 loading 图标 |\n| form-type | string | - | | 用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| submit | | 提交表单 |\n@| reset | | 重置表单 |","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>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'\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: 'uni-app-x'\r\n }\r\n },\r\n methods: {\r\n button_click() {\r\n console.log(\"组件被点击时触发\")\r\n this.count++\r\n },\r\n button_touchstart() { console.log(\"手指触摸动作开始\") },\r\n button_touchmove() { console.log(\"手指触摸后移动\") },\r\n button_touchcancel() { console.log(\"手指触摸动作被打断，如来电提醒，弹窗\") },\r\n button_touchend() { console.log(\"手指触摸动作结束\") },\r\n button_tap() { console.log(\"手指触摸后马上离开\") },\r\n button_longpress() { console.log(\"如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。\") },\r\n change_plain_boolean(checked : boolean) { this.plain_boolean = checked },\r\n change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },\r\n change_default_style(checked : boolean) { this.default_style = checked },\r\n radio_change_size_enum(checked : number) { this.size_enum_current = checked },\r\n radio_change_type_enum(checked : number) { this.type_enum_current = checked },\r\n confirm_text_input(value : string) { this.text = value },\r\n navigateToChild() {\r\n uni.navigateTo({\r\n url: 'buttonstatus',\r\n })\r\n },\r\n //用于自动化测试\r\n checkUniButtonElement() : boolean {\r\n const button = uni.getElementById(\"testButton\")\r\n if (button != null && button instanceof UniButtonElement) {\r\n return true\r\n }\r\n return false\r\n }\r\n }\r\n }\r\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/button)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/button.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.button)\n"},"canvas":{"name":"## canvas","description":"> 组件类型：UniCanvasElement \n\n 画布","attribute":"","event":"","example":"","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.21 | x | x |\n","children":"","reference":"\n### 参见\n- [参见uni-app相关文档](https://doc.dcloud.net.cn/uni-app-x/component/canvas.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.canvas)\n"},"checkbox":{"name":"## checkbox","description":"> 组件类型：UniCheckboxElement \n\n 多选项。在1组check-group中可选择多个","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| disabled | boolean | false | | 是否禁用 |\n| value | string | - | | checkbox 标识，选中时触发 checkbox-group 的 change 事件，并携带 checkbox 的 value |\n| checked | boolean | false | | 当前是否选中，可用来设置默认选中 |\n| color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | | checkbox的颜色 |\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| ~~iconColor~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | | checkbox的图标颜色，优先级大于color属性 |\n| foreColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | | checkbox的图标颜色，优先级大于color属性 |","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>Template\n```vue\n\r\n\r\n\r\n\r\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:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/checkbox)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/checkbox-group.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.checkbox)\n"},"checkbox-group":{"name":"## checkbox-group","description":"> 组件类型：UniCheckboxGroupElement \n\n 多项组，内部由多个checkbox组成","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##### UniCheckboxGroupChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniCheckboxGroupChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | Array\\ | 是 | - | - | - |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniCheckboxGroupChangeEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n","example":"","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"### 子组件 @children-tags \n - [checkbox](#checkbox)","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/checkbox)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/checkbox-group.html)\n"},"image":{"name":"## image","description":"> 组件类型：UniImageElement \n\n 图片","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| src | string([string.ImageURIString](/uts/data-type.md#ide-string)) | - | | 图片资源地址 |\n| mode | string | \"scaleToFill\" | | 图片裁剪、缩放的模式 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| scaleToFill | | 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 |\n@| aspectFit | | 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 |\n@| aspectFill | | 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取 |\n@| widthFix | | 宽度不变，高度自动变化，保持原图宽高比不变 |\n@| heightFix | | 高度不变，宽度自动变化，保持原图宽高比不变 |\n@| top | | 不缩放图片，只显示图片的顶部区域 |\n@| bottom | | 不缩放图片，只显示图片的底部区域 |\n@| center | | 不缩放图片，只显示图片的中间区域 |\n@| left | | 不缩放图片，只显示图片的左边区域 |\n@| right | | 不缩放图片，只显示图片的右边区域 |\n@| top left | | 不缩放图片，只显示图片的左上边区域 |\n@| top right | | 不缩放图片，只显示图片的右上边区域 |\n@| bottom left | | 不缩放图片，只显示图片的左下边区域 |\n@| bottom right | | 不缩放图片，只显示图片的右下边区域 |\n| lazy-load | boolean | false | | 图片懒加载。只针对page与scroll-view下的image有效 |\n| fade-show | boolean | false | | 图片显示动画效果 |\n| draggable | boolean | false | | 鼠标长按是否能拖动图片(仅H5平台) |\n| @error | (event: [UniImageErrorEvent](#uniimageerrorevent)) => void | - | | 图片加载错误时触发，event.detail = { errMsg } |\n| @load | (event: [UniImageLoadEvent](#uniimageloadevent)) => void | - | | 图片加载完成时触发，event.detail = { width: '图片宽度px', height: '图片高度px' } |","event":"\n### 事件\n#### UniImageErrorEvent\n\n##### UniImageErrorEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniImageErrorEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| errMsg | string | 是 | - | - | 错误信息 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniImageErrorEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniImageLoadEvent\n\n##### UniImageLoadEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniImageLoadEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| width | number | 是 | - | - | 图片宽度 |\n@| height | number | 是 | - | - | 图片高度 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniImageLoadEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/image/image.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/image/image\n>Template\n```vue\n\r\n\r\n\n\n```\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n title: 'image',\r\n imageSrc: \"/static/test-image/logo.png\" as string.ImageURIString,\r\n loadError: false,\n // 自动化测试\n autoTest: false,\n setCookieImage: \"\",\n verifyCookieImage: \"\"\r\n }\r\n },\r\n methods: {\r\n error(event : ImageErrorEvent) {\r\n this.loadError = true\r\n console.log(event.type, event.detail);\r\n },\r\n load(event : ImageLoadEvent) {\r\n console.log(event.type, event.detail);\r\n },\r\n imageFormat() {\r\n uni.navigateTo({\r\n url: '/pages/component/image/image-format'\r\n });\r\n },\r\n imageMode() {\r\n uni.navigateTo({\r\n url: '/pages/component/image/image-mode'\r\n });\r\n },\r\n imagePath() {\r\n uni.navigateTo({\r\n url: '/pages/component/image/image-path'\r\n });\r\n },\r\n imageLarge() {\r\n uni.navigateTo({\r\n url: '/pages/component/image/image-large'\r\n });\r\n }\r\n }\r\n }\r\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/image)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/image.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.image)\n"},"input":{"name":"## input","description":"> 组件类型：[UniInputElement](#uniinputelement) \n\n 输入框","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | - | | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| disabled | boolean | false | | 是否禁用 |\n| value | string | \"\" | | 输入框的初始内容 |\n| type | text \\| number \\| digit \\| tel | \"text\" | | input的类型 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| text | | 文本输入键盘 |\n@| number | | 数字输入键盘 |\n@| digit | | 带小数点数字输入键盘 |\n@| tel | | 电话输入键盘 |\n| password | boolean | false | | 是否是密码类型 |\n| placeholder | string | \"\" | | 输入框为空时占位符 |\n| placeholder-style | string | \"\" | | 指定 placeholder 的样式 |\n| placeholder-class | string([string.ClassString](/uts/data-type.md#ide-string)) | \"\" | | 指定 placeholder 的样式类，目前仅支持color,font-size和font-weight |\n| maxlength | number | \"不限制长度\" | | 最大输入长度，0和正数为合法值，非法值的时候不限制最大长度 |\n| cursor-spacing | number | 0 | | 指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 |\n| cursor-color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"\" | | 指定光标颜色 |\n| auto-focus | boolean | false | | 自动获取焦点 |\n| focus | boolean | false | | 获取焦点 |\n| confirm-type | send \\| search \\| next \\| go \\| done | \"done\" | | 设置键盘右下角按钮的文字，仅在 type为text 时生效。 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| send | | 发送 |\n@| search | | 搜索 |\n@| next | | 下一个 |\n@| go | | 前往 |\n@| done | | 完成 |\n| confirm-hold | boolean | false | | 点击键盘右下角按钮时是否保持键盘不收起 |\n| cursor | number | 0 | | 指定focus时的光标位置 |\n| selection-start | number | -1 | | 光标起始位置，自动聚集时有效，需与selection-end搭配使用 |\n| selection-end | number | -1 | | 光标结束位置，自动聚集时有效，需与selection-satrt搭配使用 |\n| adjust-position | boolean | true | | 键盘弹起时，是否自动上推页面 |\n| hold-keyboard | boolean | false | | focus时，点击页面的时候不收起键盘 |\n| inputmode | none \\| text \\| decimal \\| numeric \\| tel \\| search \\| email \\| url | \"text\" | | 是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。在符合条件的高版本webview里，uni-app的 web 和 app-vue 平台中可使用本属性。 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| none | | 无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用。 |\n@| text | | 使用用户本地区域设置的标准文本输入键盘。 |\n@| decimal | | 小数输入键盘，包含数字和分隔符（通常是“ . ”或者“ , ”），设备可能也可能不显示减号键。 |\n@| numeric | | 数字输入键盘，所需要的就是 0 到 9 的数字，设备可能也可能不显示减号键。 |\n@| tel | | 电话输入键盘，包含 0 到 9 的数字、星号（*）和井号（#）键。表单输入里面的电话输入通常应该使用 \\ 。 |\n@| search | | 为搜索输入优化的虚拟键盘，比如，返回键可能被重新标记为“搜索”，也可能还有其他的优化。 |\n@| email | | 为邮件地址输入优化的虚拟键盘，通常包含\"@\"符号和其他优化。表单里面的邮件地址输入应该使用 \\ 。 |\n@| url | | 为网址输入优化的虚拟键盘，比如，“/”键会更加明显、历史记录访问等。表单里面的网址输入通常应该使用 \\ 。 |\n| @input | (event: [UniInputEvent](#uniinputevent)) => void | - | | 当键盘输入时，触发input事件，event.detail = {value, cursor}，处理函数可以直接 return 一个字符串，将替换输入框的内容。 |\n| @focus | (event: [UniInputFocusEvent](#uniinputfocusevent)) => void | - | | 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度 |\n| @blur | (event: [UniInputBlurEvent](#uniinputblurevent)) => void | - | | 输入框失去焦点时触发，event.detail = {value: value} |\n| @keyboardheightchange | (event: [UniInputKeyboardHeightChangeEvent](#uniinputkeyboardheightchangeevent)) => void | - | | 键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration} |\n| @confirm | (event: [UniInputConfirmEvent](#uniinputconfirmevent)) => void | - | | 点击完成按钮时触发，event.detail = {value: value} |","event":"\n### 事件\n#### UniInputEvent\n\n##### UniInputEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | 输入框内容 |\n@| cursor | number | 是 | - | - | 光标的位置 |\n@| keyCode | number | 是 | - | - | 输入字符的Unicode值 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniInputEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniInputFocusEvent\n\n##### UniInputFocusEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputFocusEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| height | number | 是 | - | | 键盘高度 |\n@| value | string | 是 | - | - | 输入框内容 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniInputFocusEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniInputBlurEvent\n\n##### UniInputBlurEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputBlurEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | 输入框内容 |\n@| cursor | number | 是 | - | - | 选择区域的起始位置 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniInputBlurEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniInputKeyboardHeightChangeEvent\n\n##### UniInputKeyboardHeightChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputKeyboardHeightChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| height | number | 是 | - | - | 键盘高度 |\n@| duration | number | 是 | - | - | 持续时间 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniInputKeyboardHeightChangeEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniInputConfirmEvent\n\n##### UniInputConfirmEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputConfirmEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | 输入框内容 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniInputConfirmEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/input/input.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/input/input\n>Template\n```vue\n\n\n\n\n\n```\n>Script\n```uts\n\n export default {\n data() {\n return {\n title: 'input',\n showClearIcon: false,\n inputClearValue: '',\n showPassword: true,\n cursor: -1,\n cursor_color: \"#3393E2\",\n selectionStart: -1,\n selectionEnd: -1,\n inputEventDetail: '',\n focusAndBlurEventDetail: '',\n confirmEventDetail: '',\n keyboardHeightChangeEventDetail: '',\n focus: true,\n inputPassword: true,\n inputTypeTel: \"tel\",\n inputPlaceHolderStyle: \"color:red\",\n inputPlaceHolderClass: \"uni-input-placeholder-class\" as string.ClassString ,\n inputMaxLengthValue: \"\",\n onMaxLengthInputValue: \"\",\n inputMaxLengthFocus: false,\n inputPasswordValue: \"cipher\",\n inputFocusKeyBoardChangeValue: true,\n holdKeyboard: false,\n keyboardHeight: 0,\n focusedForKeyboardHeightChangeTest: false,\n demoValue: '123'\n }\n },\n methods: {\n inputFocusKeyBoardChange(e : UniInputKeyboardHeightChangeEvent) {\n this.inputFocusKeyBoardChangeValue = e.detail.height > 50\n },\n onMaxLengthInput(event : UniInputEvent) {\n this.onMaxLengthInputValue = event.detail.value\n },\n setCursor: function (cursor : number) {\n (this.$refs['input'] as UniInputElement).focus();\n this.cursor = cursor;\n },\n onCursorBlurChange(){\n this.cursor = 0\n },\n setSelection: function (selectionStart : number, selectionEnd : number) {\n (this.$refs['input2'] as UniInputElement).focus();\n this.selectionStart = selectionStart;\n this.selectionEnd = selectionEnd;\n },\n onSelectionBlurChange(){\n this.selectionEnd = 0;\n },\n clearInput: function (event : UniInputEvent) {\n this.inputClearValue = event.detail.value\n if (event.detail.value.length > 0) {\n this.showClearIcon = true\n } else {\n this.showClearIcon = false\n }\n },\n clearIcon: function () {\n this.inputClearValue = ''\n this.showClearIcon = false\n },\n changePassword: function () {\n this.showPassword = !this.showPassword\n },\n onInput: function (event : UniInputEvent) {\n console.log(\"键盘输入\", JSON.stringify(event.detail));\n this.inputEventDetail = JSON.stringify(event.detail)\n },\n onFocus: function (event : UniInputFocusEvent) {\n console.log(\"输入框聚焦\", JSON.stringify(event.detail));\n this.focusAndBlurEventDetail = JSON.stringify(event.detail);\n },\n onBlur: function (event : UniInputBlurEvent) {\n console.log(\"输入框失去焦点\", JSON.stringify(event.detail));\n this.focusAndBlurEventDetail = JSON.stringify(event.detail);\n },\n onConfirm: function (event : UniInputConfirmEvent) {\n console.log(\"点击完成按钮\", JSON.stringify(event.detail));\n this.confirmEventDetail = JSON.stringify(event.detail);\n },\n onKeyborardHeightChange: function (event : UniInputKeyboardHeightChangeEvent) {\n console.log(\"键盘高度发生变化\", JSON.stringify(event.detail));\n this.keyboardHeightChangeEventDetail = JSON.stringify(event.detail);\n this.keyboardHeight = event.detail.height;\n },\n test_check_input_value() : number {\n return this.onMaxLengthInputValue.length\n },\n changeCursorColor(event : UniSwitchChangeEvent) {\n const checked = event.detail.value;\n if (checked) {\n this.cursor_color = \"red\"\n } else {\n this.cursor_color = \"#3393E2\"\n }\n const input = uni.getElementById(\"uni-input-cursor-color\")\n input?.focus()\n },\n changeHoldKeyboard(event : UniSwitchChangeEvent) {\n const checked = event.detail.value;\n this.holdKeyboard = checked\n }\n }\n }\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/input)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/input.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.input)\n","component_type":"### UniInputElement\ninput元素对象\n#### UniInputElement 的属性值\n| 名称 | 类型 | 必填 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | 是 | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| type | string | 是 | input的类型 |\n| disabled | boolean | 是 | 是否禁用 |\n| autofocus | boolean | 是 | 自动获取焦点 |\n| value | string | 是 | 输入框的初始内容 |"},"list-item":{"name":"## list-item","description":"> 组件类型：UniListItemElement \n\n list-view组件的唯一合法子组件。每个item是一行","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| type | number | 0 | | 对应list-item的类型 list-view 将对同类型条目进行复用，所以合理的类型拆分，可以很好地提升 list-view 性能 |","event":"","example":"","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.02 | 3.9 | 4.11 |\n","children":"","reference":""},"sticky-header":{"name":"## sticky-header","description":"> 组件类型：UniStickyHeaderElement \n\n 吸顶布局容器

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

注意：暂时仅支持作为list-view的子节点, sticky-section不支持css样式！","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>Template\n```vue\n\r\n\r\n\r\n\r\n\r\n\n```\n>Script\n```uts\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 }\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)\n listview.scrollTop = y\r\n },\r\n gotoStickyHeader(id : string) {\n // #ifdef APP\r\n this.scrollIntoView = id\n // #endif\n // #ifdef WEB\n console.log(\"web端不支持该功能\")\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 }\n }\r\n }\r\n }\r\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.02 | 3.98 | 4.11 |\n","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.sticky-section)\n"},"list-view":{"name":"## list-view","description":"> 组件类型：UniListViewElement \n\n 列表组件","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| direction | string | \"vertical\" | | 滚动方向，可取值 none、horizontal、vertical，默认值vertical。注：iOS 平台仅支持vertical |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| none | | 禁止滚动 |\n@| horizontal | | 横向滚动 |\n@| vertical | | 竖向滚动 |\n| ~~scroll-x~~ | boolean | false | | 允许横向滚动，不支持同时设置scroll-y属性为true，同时设置true时scroll-y生效。已废弃，请改用direction |\n| ~~scroll-y~~ | boolean | true | | 允许纵向滚动，不支持同时设置scroll-x属性为true，同时设置true时scroll-y生效。已废弃，请改用direction |\n| ~~rebound~~ | boolean | true | | 控制是否回弹效果。已废弃，请改用bounces |\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} |","event":"\n### 事件\n#### UniRefresherEvent\n\n##### UniRefresherEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniRefresherEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| dy | number | 是 | - | - | - |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniRefresherEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniScrollToUpperEvent\n\n##### UniScrollToUpperEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniScrollToUpperEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| direction | string | 是 | - | - | 滚动方向 top 或 left |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniScrollToUpperEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniScrollToLowerEvent\n\n##### UniScrollToLowerEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniScrollToLowerEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| direction | string | 是 | - | - | 滚动方向 bottom 或 right |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniScrollToLowerEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniScrollEvent\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| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniScrollEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/list-view/list-view.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/list-view/list-view\n>Template\n```vue\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'\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 // 在web端scroll事件event参数中detail类型报错，先条件编译处理\n // #ifndef WEB\n scrollDetailTest:null as UniScrollEventDetail|null,\n scrollEndDetailTest:null as UniScrollEventDetail|null,\n // #endif\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 // #ifndef WEB\n this.scrollDetailTest = e.detail\n // #endif\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 // #ifndef WEB\n this.scrollEndDetailTest = e.detail\n // #endif\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:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.02 | 3.9 | 4.11 |\n","children":"### 子组件 @children-tags \n - [list-item](#list-item)\n- [sticky-header](https://uniapp.dcloud.net.cn/uni-app-x/component/sticky.html#sticky-header)\n- [sticky-section](https://uniapp.dcloud.net.cn/uni-app-x/component/sticky.html#sticky-section)","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.list-view)\n"},"navigator":{"name":"## navigator","description":"> 组件类型：UniNavigatorElement \n\n 页面链接","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| target | string | - | | 在哪个目标上发生跳转，默认当前应用 |\n| url | string([string.PageURIString](/uts/data-type.md#ide-string)) | - | | 当前应用内的跳转链接 |\n| open-type | string | \"navigate\" | | 跳转方式 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| navigate | | 对应 uni.navigateTo 或 navigateToMiniProgram 的功能 |\n@| redirect | | 对应 uni.redirectTo 的功能 |\n@| switchTab | | 对应 uni.switchTab 的功能 |\n@| reLaunch | | 对应 uni.reLaunch 的功能 |\n@| navigateBack | | 对应 uni.navigateBack 的功能 |\n| delta | number | - | | 当 open-type 为 navigateBack 时有效，表示回退的层数 |\n| app-id | string | - | - | 当target=\"miniProgram\"时有效，要打开的小程序 appId |\n| path | string | - | | 当target=\"miniProgram\"时有效，打开的页面路径，如果为空则打开首页 |\n| extra-data | object | - | - | 当target=\"miniProgram\"时有效，需要传递给目标应用的数据，目标应用可在 App.onLaunch()，App.onShow() 中获取到这份数据 |\n| version | string | - | - | 当target=\"miniProgram\"时有效，要打开的小程序版本，有效值 develop（开发版），trial（体验版），release（正式版），仅在当前小程序为开发版或体验版时此参数有效；如果当前小程序是体验版或正式版，则打开的小程序必定是正式版 |\n| animation-type | string | \"pop-in/out\" | | 当 open-type=\"navigateTo\" 或 open-type=\"navigateBack\" 时有效，窗口的显示/关闭的动画类型。 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| auto | - | 自动选择动画效果 |\n@| none | - | 无动画效果 |\n@| slide-in-right | - | 从右侧横向滑动效果 |\n@| slide-in-left | - | 左侧横向滑动效果 |\n@| slide-in-top | - | 从上侧竖向滑动效果 |\n@| slide-in-bottom | - | 从下侧竖向滑动效果 |\n@| fade-in | - | 从透明到不透明逐渐显示效果 |\n@| zoom-out | - | 从小到大逐渐放大显示效果 |\n@| zoom-fade-out | - | 从小到大逐渐放大并且从透明到不透明逐渐显示效果 |\n@| pop-in | - | 从右侧平移入栈动画效果 |\n@| slide-out-right | - | 横向向右侧滑出屏幕动画 |\n@| slide-out-left | - | 横向向左侧滑出屏幕动画 |\n@| slide-out-top | - | 竖向向上侧滑出屏幕动画 |\n@| slide-out-bottom | - | 竖向向下侧滑出屏幕动画 |\n@| fade-out | - | 从不透明到透明逐渐隐藏动画 |\n@| zoom-in | - | 从大逐渐缩小关闭动画 |\n@| zoom-fade-in | - | 从大逐渐缩小并且从不透明到透明逐渐隐藏关闭动画 |\n@| pop-out | - | 从右侧平移出栈动画效果 |\n| animation-duration | number | 300 | | 当 open-type=\"navigateTo\" 或 open-type=\"navigateBack\" 时有效，窗口的显示/关闭动画的持续时间。 |\n| hover-class | string | - | - | 指定按下去的样式类。当 hover-class=\"none\" 时，没有点击态效果 |\n| hover-stop-propagation | boolean | - | - | 指定是否阻止本节点的祖先节点出现点击态 |\n| hover-start-time | number | - | - | 按住后多久出现点击态，单位毫秒 |\n| hover-stay-time | number | - | - | 手指松开后点击态保留时间，单位毫秒 |\n| render-link | boolean | true | | 是否给 navigator 组件加一层 a 标签控制 ssr 渲染 |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/navigator/navigator.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/navigator/navigator\n>Template\n```vue\n\n\n\n\n\n\n```\n>Script\n```uts\n\n export default {\n data() {\n return {\n title: 'navigator'\n }\n }\n }\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/navigator)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/navigator.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.navigator)\n"},"picker-view-column":{"name":"## picker-view-column","description":"仅可放置于 picker-view 中，其子节点未继承 picker-view 的选中框的高度，需要自己设置高度并居中","attribute":"","event":"","example":"","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.net.cn/component/picker-view.html#picker-view-column)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/picker-view.html)\n"},"picker-view":{"name":"## picker-view","description":"> 组件类型：UniPickerViewElement \n\n 嵌入页面的滚动选择器","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| value | array\\ | - | | picker-view-column 选择的第几项 |\n| indicator-style | string([string.CSSString](/uts/data-type.md#ide-string)) | - | | 设置选择器中间选中框的样式 |\n| indicator-class | string([string.ClassString](/uts/data-type.md#ide-string)) | - | | 设置选择器中间选中框的类名 |\n| mask-style | string([string.CSSString](/uts/data-type.md#ide-string)) | - | | 设置蒙层的样式 |\n| mask-top-style | string([string.CSSString](/uts/data-type.md#ide-string)) | - | | 设置蒙层上半部分的样式 |\n| mask-bottom-style | string([string.CSSString](/uts/data-type.md#ide-string)) | - | | 设置蒙层下半部分的样式 |\n| mask-class | string([string.ClassString](/uts/data-type.md#ide-string)) | - | | 设置蒙层的类名 |\n| @change | (event: [UniPickerViewChangeEvent](#unipickerviewchangeevent)) => void | - | | 当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0
\t\t开始） |","event":"\n### 事件\n#### UniPickerViewChangeEvent\n\n##### UniPickerViewChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniPickerViewChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | Array\\ | 是 | - | - | - |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniPickerViewChangeEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/picker-view/picker-view.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/picker-view/picker-view\n>Template\n```vue\n\r\n\r\n\r\n\r\n\n\n```\n>Script\n```uts\n\n import { state, setEventCallbackNum } from '@/store/index.uts'\r\n export default {\r\n data() {\r\n const date = new Date()\r\n const _years : number[] = []\r\n const _year = date.getFullYear()\r\n const _months : number[] = []\r\n const _month : number = date.getMonth() + 1\r\n const _days : number[] = []\r\n const _day = date.getDate()\r\n for (let i = 2000; i <= _year; i++) {\r\n _years.push(i)\r\n }\r\n for (let i = 1; i <= 12; i++) {\r\n _months.push(i)\r\n }\r\n for (let i = 1; i <= 31; i++) {\r\n _days.push(i)\r\n }\r\n return {\r\n title: 'picker-view',\r\n years: _years as number[],\r\n year: _year as number,\r\n months: _months as number[],\r\n month: _month as number,\r\n days: _days as number[],\r\n day: _day as number,\r\n value: [_year - 2000, _month - 1, _day - 1] as number[],\r\n result: [] as number[],\r\n indicatorStyle: 'height: 50px;',\r\n maskTopStyle: '',\r\n maskBottomStyle: ''\r\n }\r\n },\r\n methods: {\n // 自动化测试\n getEventCallbackNum() : number {\n return state.eventCallbackNum\n },\n // 自动化测试\n setEventCallbackNum(num : number) {\n setEventCallbackNum(num)\n },\r\n bindChange(e : UniPickerViewChangeEvent) {\n // 自动化测试\n console.log(e.target?.tagName,e.type);\n if ((e.target?.tagName ?? '').includes('PICKER-VIEW')) {\n this.setEventCallbackNum(state.eventCallbackNum + 1)\n }\n if (e.type === 'change') {\n this.setEventCallbackNum(state.eventCallbackNum + 2)\n }\n\r\n const val = e.detail.value\r\n this.result = val\r\n this.year = this.years[val[0]]\r\n this.month = this.months[val[1]]\r\n this.day = this.days[val[2]]\r\n },\r\n setValue() {\r\n this.value = [0, 0, 0] as number[]\r\n },\r\n setValue1() {\r\n this.value = [10, 10, 10] as number[]\r\n },\r\n }\r\n }\r\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"### 子组件 @children-tags \n - [picker-view-column](#picker-view-column)","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/picker-view)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/picker-view.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.picker-view)\n"},"progress":{"name":"## progress","description":"> 组件类型：UniProgressElement \n\n 进度条","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| duration | number | 30 | | 进度增加1%所需毫秒数 |\n| percent | number | 0 | | 百分比0~100 |\n| show-info | boolean | false | | 在进度条右侧显示百分比 |\n| border-radius | number | 0 | | 圆角大小 |\n| font-size | number | 16 | | 右侧百分比字体大小 |\n| stroke-width | number | 6 | | 进度条线的宽度，单位px |\n| activeColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#09BB07\" | | 已选择的进度条的颜色 |\n| backgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#EBEBEB\" | | 未选择的进度条的颜色 |\n| active | boolean | false | | 进度条从左往右的动画 |\n| active-mode | string | \"backwards\" | | backwards: 动画从头播；forwards：动画从上次结束点接着播 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| backwards | | 动画从头播 |\n@| forwards | | 动画从上次结束点接着播 |\n| @activeend | (event: [UniProgressActiveendEvent](#uniprogressactiveendevent)) => void | - | | 动画完成事件 |","event":"\n### 事件\n#### UniProgressActiveendEvent\n\n##### UniProgressActiveendEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniProgressActiveendEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| curPercent | number | 是 | - | - | - |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniProgressActiveendEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/progress/progress.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/progress/progress\n>Template\n```vue\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'\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:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/progress)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/progress.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.progress)\n"},"radio":{"name":"## radio","description":"> 组件类型：UniRadioElement \n\n 单选项。在1组radio-group中只能选中1个","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| disabled | boolean | false | | 是否禁用 |\n| value | string | - | | \\ 标识。当该radio 选中时，radio-group的 change 事件会携带radio的value |\n| checked | boolean | false | | \\ 当前是否选中 |\n| color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007AFF\" | | radio的颜色 |\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| ~~iconColor~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | | radio的图标颜色 |\n| foreColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | | radio的图标颜色 |","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>Template\n```vue\n\r\n\r\n\r\n\r\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:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/radio)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/radio-group.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.radio)\n"},"radio-group":{"name":"## radio-group","description":"> 组件类型：UniRadioGroupElement \n\n 单选组，内部由多个 radio 组成","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##### UniRadioGroupChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniRadioGroupChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | - |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniRadioGroupChangeEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n","example":"","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"### 子组件 @children-tags \n - [radio](#radio)","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/radio)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/radio-group.html)\n"},"form":{"name":"## form","description":"> 组件类型：UniFormElement \n\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 事件 |","event":"\n### 事件\n#### UniFormSubmitEvent\n\n##### UniFormSubmitEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniFormSubmitEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | [UTSJSONObject](/uts/buildin-object-api/utsjsonobject.md) | 是 | - | - | - |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniFormSubmitEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniFormResetEvent\n\n##### UniFormResetEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | UniFormResetEventDetail | 是 | - | - | - |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniFormResetEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/form/form.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/form/form\n>Template\n```vue\n\n\n\n\n\n\n```\n>Script\n```uts\n\n export default {\n data() {\n return {\n nickname: '',\n gender: '0',\n age: 18,\n loves: ['0'],\n switch: true,\n comment:'',\n formData: {} as UTSJSONObject\n }\n },\n computed: {\n formDataText() : string {\n return JSON.stringify(this.formData)\n }\n },\n methods: {\n onFormSubmit: function (e : UniFormSubmitEvent) {\n this.formData = e.detail.value\n },\n onFormReset: function (_ : UniFormResetEvent) {\n this.formData = {}\n }\n }\n }\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.97 | 4.11 |\n","children":"","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/form)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/form.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form)\n"},"rich-text":{"name":"## rich-text","description":"> 组件类型：UniRichTextElement \n\n 富文本。可渲染文字样式、图片、超链接。支持部分HTML标签","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={ ref \\| src \\| href } |","event":"\n### 事件\n#### UniRichTextItemClickEvent\n\n##### UniRichTextItemClickEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniRichTextItemClickEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| ref | string \\| null | 否 | - | - | 自定义数据 |\n@| src | string \\| null | 否 | - | - | \\图片链接 |\n@| href | string \\| null | 否 | - | - | \\超链接 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniRichTextItemClickEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/rich-text/rich-text.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/rich-text/rich-text\n>Template\n```vue\n\n\n\n\n\n\n```\n>Script\n```uts\n\n\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/rich-text)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/rich-text.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.rich-text)\n"},"scroll-view":{"name":"## scroll-view","description":"> 组件类型：UniScrollViewElement \n\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| ~~scroll-x~~ | boolean | false | | 允许横向滚动，不支持同时设置scroll-y属性为true，同时设置true时scroll-y生效。已废弃，请改用direction |\n| ~~scroll-y~~ | boolean | true | | 允许纵向滚动，不支持同时设置scroll-x属性为true，同时设置true时scroll-y生效。已废弃，请改用direction |\n| ~~rebound~~ | boolean | true | | 控制是否回弹效果。已废弃，请改用bounces |\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 | - | | 子元素滚动结束或意外终止时触发 |","event":"\n### 事件\n#### UniRefresherEvent\n\n##### UniRefresherEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniRefresherEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| dy | number | 是 | - | - | - |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniRefresherEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniScrollToUpperEvent\n\n##### UniScrollToUpperEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniScrollToUpperEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| direction | string | 是 | - | - | 滚动方向 top 或 left |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniScrollToUpperEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniScrollToLowerEvent\n\n##### UniScrollToLowerEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniScrollToLowerEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| direction | string | 是 | - | - | 滚动方向 bottom 或 right |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniScrollToLowerEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniScrollEvent\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| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniScrollEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniStartNestedScrollEvent\n\n##### UniStartNestedScrollEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| node | [UniElement](/dom/unielement.md) | 是 | - | | 开始滚动子节点对象 |\n| isTouch | boolean | 是 | - | | 是否由触摸行为发生的Event |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniStartNestedScrollEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniNestedPreScrollEvent\n\n##### UniNestedPreScrollEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| deltaX | number | 是 | - | - | x轴滚动距离 |\n| deltaY | number | 是 | - | - | y轴滚动距离 |\n| isTouch | boolean | 是 | - | | 是否由触摸行为发生的Event |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniNestedPreScrollEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| consumed | (consumedX: number, consumedY: number) => void | 是 | - | - | 通知到子节点x,y轴滚动距离的消耗 |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniStopNestedScrollEvent\n\n##### UniStopNestedScrollEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| isTouch | boolean | 是 | - | - | 是否由触摸行为发生的Event |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniStopNestedScrollEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/scroll-view/scroll-view.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/scroll-view/scroll-view\n>Template\n```vue\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 export default {\n data() {\n return {\n scrollTop: 0,\n oldScrollTop: 0,\n scrollLeft:120,\n showScrollbar: true,\n // 自动化测试\n isScrollTest:'',\n isScrolltolowerTest:'',\n isScrolltoupperTest:'',\n // 在web端scroll事件event参数中detail类型报错，先条件编译处理\n // #ifndef WEB\n scrollDetailTest:null as UniScrollEventDetail|null,\n scrollEndDetailTest:null as UniScrollEventDetail|null,\n // #endif\n }\n },\n methods: {\n upper: function (e : UniScrollToUpperEvent) {\n console.log('滚动到顶部/左边',e)\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 lower: function (e : UniScrollToLowerEvent) {\n console.log('滚动到底部/右边',e)\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 scroll: function (e : UniScrollEvent) {\n // #ifndef WEB\n this.scrollDetailTest = e.detail\n // #endif\n this.checkEventTest({\n type:e.type,\n target:e.target,\n currentTarget:e.currentTarget\n } as ScrollEventTest,'scroll')\n this.oldScrollTop = e.detail.scrollTop\n },\n end: function (e : UniScrollEvent){\n console.log('滚动结束时触发',e)\n // #ifndef WEB\n this.scrollEndDetailTest = e.detail\n // #endif\n this.checkEventTest({\n type:e.type,\n target:e.target,\n currentTarget:e.currentTarget\n } as ScrollEventTest,'scrollend')\n },\n goTop: function () {\n // 解决view层不同步的问题\n this.scrollTop = this.oldScrollTop\n this.$nextTick(function () {\n this.scrollTop = 0\n })\n uni.showToast({\n icon: 'none',\n title: '纵向滚动 scrollTop 值已被修改为 0',\n })\n },\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 }\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/scroll-view)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/scroll-view.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.scroll-view)\n"},"slider":{"name":"## slider","description":"> 组件类型：UniSliderElement \n\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| ~~activeColor~~ | 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| ~~block-color~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | | 滑块颜色 |\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} |","event":"\n### 事件\n#### UniSliderChangeEvent\n\n##### UniSliderChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniSliderChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | number | 是 | - | - | - |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniSliderChangeEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/slider/slider.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/slider/slider\n>Template\n```vue\n\n\n\n\n\n\n```\n>Script\n```uts\n\n export default {\n data() {\n return {\n sliderValue: 50,\n sliderBlockSize: 20,\n sliderBackgroundColor: \"#000000\",\n sliderActiveColor: \"#FFCC33\",\n sliderBlockColor: \"#8A6DE9\",\n // 组件属性 autotest\n show_value_boolean: false,\n disabled_boolean: false,\n min_input: 0,\n max_input: 100,\n step_input: 1,\n value_input: 0,\n activeColor_input: \"#007aff\",\n backgroundColor_input: \"#e9e9e9\",\n block_size_input: 28,\n block_color_input: \"#ffffff\",\n };\n },\n methods: {\n sliderChange(e : UniSliderChangeEvent) {\n console.log(\"value 发生变化：\" + e.detail.value);\n },\n slider_click() {\n console.log(\"组件被点击时触发\");\n },\n slider_touchstart() {\n console.log(\"手指触摸动作开始\");\n },\n slider_touchmove() {\n console.log(\"手指触摸后移动\");\n },\n slider_touchcancel() {\n console.log(\"手指触摸动作被打断，如来电提醒，弹窗\");\n },\n slider_touchend() {\n console.log(\"手指触摸动作结束\");\n },\n slider_tap() {\n console.log(\"手指触摸后马上离开\");\n },\n slider_longpress() {\n console.log(\n \"如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。\"\n );\n },\n slider_change() {\n console.log(\"完成一次拖动后触发的事件，event.detail = {value: value}\");\n },\n slider_changing() {\n console.log(\"拖动过程中触发的事件，event.detail = {value: value}\");\n },\n change_show_value_boolean(checked : boolean) {\n this.show_value_boolean = checked;\n },\n change_disabled_boolean(checked : boolean) {\n this.disabled_boolean = checked;\n },\n confirm_min_input(value : number) {\n this.min_input = value;\n },\n confirm_max_input(value : number) {\n this.max_input = value;\n },\n confirm_step_input(value : number) {\n this.step_input = value;\n },\n confirm_value_input(value : number) {\n this.value_input = value;\n },\n confirm_activeColor_input(value : string) {\n this.activeColor_input = value;\n },\n confirm_backgroundColor_input(value : string) {\n this.backgroundColor_input = value;\n },\n confirm_block_size_input(value : number) {\n this.block_size_input = value;\n },\n confirm_block_color_input(value : string) {\n this.block_color_input = value;\n },\n },\n };\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/slider)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/slider.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.slider)\n"},"swiper-item":{"name":"## swiper-item","description":"> 组件类型：UniSwiperItemElement \n\n swiper的唯一合法子组件。每个swiper-item代表一个滑块。宽高自动设置为100%","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| item-id | string | - | | 该 swiper-item 的标识符 |","event":"","example":"","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.net.cn/component/swiper.html#swiper-item)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/swiper.html)\n"},"swiper":{"name":"## swiper","description":"> 组件类型：UniSwiperElement \n\n 滑块视图容器","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| indicator-dots | boolean | false | | 是否显示面板指示点 |\n| indicator-color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"rgba(0, 0, 0, .3)\" | | 指示点颜色 |\n| indicator-active-color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#000000\" | | 当前选中的指示点颜色 |\n| disable-touch | boolean | false | | 是否禁止用户 touch 操作 |\n| autoplay | boolean | false | | 是否自动切换 |\n| current | number | 0 | | 当前所在滑块的 index |\n| current-item-id | string | - | | 当前所在滑块的 item-id ，不能与 current 被同时指定 |\n| interval | number | 3000 | | 自动切换时间间隔 |\n| duration | number | - | | 滑动动画时长 |\n| circular | boolean | false | | 是否采用衔接滑动 |\n| vertical | boolean | false | | 滑动方向是否为纵向 |\n| rebound | boolean | true | | 控制是否回弹效果 |\n| @change | (event: [UniSwiperChangeEvent](#uniswiperchangeevent)) => void | - | | current 改变时会触发 change 事件，event.detail = {current: current, source: source} |\n| @transition | (event: [UniSwiperTransitionEvent](#uniswipertransitionevent)) => void | - | | swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy} |\n| @animationfinish | (event: [UniSwiperAnimationFinishEvent](#uniswiperanimationfinishevent)) => void | - | | 动画结束时会触发 animationfinish 事件，event.detail = {current: current, source: source} |","event":"\n### 事件\n#### UniSwiperChangeEvent\n\n##### 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| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniSwiperChangeEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniSwiperTransitionEvent\n\n##### UniSwiperTransitionEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniSwiperTransitionEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| dx | number | 是 | - | - | 横向偏移量，单位是逻辑像素px |\n@| dy | number | 是 | - | - | 纵向偏移量，单位是逻辑像素px |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniSwiperTransitionEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniSwiperAnimationFinishEvent\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| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniSwiperAnimationFinishEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/swiper/swiper.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/swiper/swiper\n>Template\n```vue\n\r\n\r\n\r\n\r\n\n\n```\n>Script\n```uts\n\n type SwiperEventTest = {\n type: string;\n target: UniElement | null;\n currentTarget: UniElement | null;\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,\n // 自动化测试\n // 在android端以下事件event参数中detail类型报错，先条件编译处理\n // #ifndef APP-ANDROID\n changeDetailTest:null as UniSwiperChangeDetail | null,\n transitionDetailTest:null as UniSwiperTransitionDetail | null,\n animationfinishDetailTest:null as UniSwiperAnimationFinishDetail | null,\n // #endif\n isChangeTest:'',\n isTransitionTest:'',\n isAnimationfinishTest:''\n }\r\n },\n methods: {\r\n swiperChange: function (e : UniSwiperChangeEvent) {\n // #ifndef APP-ANDROID\n this.changeDetailTest = e.detail\n // #endif\n this.checkEventTest({\n type:e.type,\n target:e.target,\n currentTarget:e.currentTarget\n } as SwiperEventTest,'change')\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) {\n // #ifndef APP-ANDROID\n this.transitionDetailTest = e.detail\n // #endif\n this.checkEventTest({\n type:e.type,\n target:e.target,\n currentTarget:e.currentTarget\n } as SwiperEventTest,'transition')\n if (this.swiperTransitionSelect) {\r\n console.log(\"swiperTransition\")\r\n console.log(e)\r\n }\r\n },\r\n swiperAnimationfinish: function (e : UniSwiperAnimationFinishEvent) {\n // #ifndef APP-ANDROID\n this.animationfinishDetailTest = e.detail\n // #endif\n this.checkEventTest({\n type:e.type,\n target:e.target,\n currentTarget:e.currentTarget\n } as SwiperEventTest,'animationfinish')\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获取）\n checkEventTest(e:SwiperEventTest, 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 'change':\n this.isChangeTest = result\n break;\n case 'transition':\n this.isTransitionTest = result\n break;\n case 'animationfinish':\n this.isAnimationfinishTest = result\n break;\n default:\n break;\n }\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) {\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:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"### 子组件 @children-tags \n - [swiper-item](#swiper-item)","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/swiper)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/swiper.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.swiper)\n"},"switch":{"name":"## switch","description":"> 组件类型：UniSwitchElement \n\n 开关选择器","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | - | | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| checked | boolean | - | | 是否选中 |\n| type | string | - | | 样式，有效值：switch, checkbox |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| switch | | - |\n@| checkbox | | - |\n| ~~color~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | - | | switch 的颜色，同 css 的 color |\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} |","event":"\n### 事件\n#### UniSwitchChangeEvent\n\n##### UniSwitchChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniSwitchChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | boolean | 是 | - | - | - |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniSwitchChangeEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/switch/switch.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/switch/switch\n>Template\n```vue\n\n\n\n\n\n\n```\n>Script\n```uts\n\n export default {\n data() {\n return {\n title: 'switch 开关',\n checked: true,\n color: '#FFCC33',\n clickCheckedValue: true\n }\n },\n methods: {\n switch1Change: function (e : UniSwitchChangeEvent) {\n this.clickCheckedValue = e.detail.value\n console.log('switch1 发生 change 事件，携带值为', e.detail.value)\n },\n switch2Change: function (e : UniSwitchChangeEvent) {\n console.log('switch2 发生 change 事件，携带值为', e.detail.value)\n }\n }\n }\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/switch)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/switch.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.switch)\n"},"text":{"name":"## text","description":"> 组件类型：[UniTextElement](#unitextelement) \n\n 文本","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| selectable | boolean | false | | 文本是否可选 |\n| space | string | - | | 显示连续空格 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| ensp | | 中文字符空格一半大小 |\n@| emsp | | 中文字符空格大小 |\n@| nbsp | | 根据字体设置的空格大小 |\n| decode | boolean | false | | 是否解码 (app平台如需解析字符实体，需要配置为 true) |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/text/text.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/text/text\n>Template\n```vue\n\n\r\n\r\n\r\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:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"### 子组件 @children-tags \n - [text](#text)","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/text)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/text.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.text)\n","component_type":"### UniTextElement\ntext元素对象\n#### UniTextElement 的属性值\n| 名称 | 类型 | 必填 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| value | string | 是 | 只读属性 text元素的文案内容 |\n#### UniTextElement 的方法\n##### getTextExtra() @gettextextra\n\n\n###### 返回值 \n\n| 类型 | 必备 |\n| :- | :- |\n| any \\| null | 否 |\n \n\n###### getTextExtra 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 4.0 | 4.11 |\n\n"},"textarea":{"name":"## textarea","description":"> 组件类型：[UniTextareaElement](#unitextareaelement) \n\n 多行输入框","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | - | | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| value | string | \"\" | | 输入框的初始内容 |\n| placeholder | string | \"\" | | 输入框为空时占位符 |\n| placeholder-style | string | \"\" | | 指定 placeholder 的样式 |\n| placeholder-class | string([string.ClassString](/uts/data-type.md#ide-string)) | \"\" | | 指定 placeholder 的样式类，目前仅支持color,font-size和font-weight |\n| maxlength | number | \"不限制长度\" | | 最大输入长度，0和正数为合法值，非法值的时候不限制最大长度 |\n| auto-focus | boolean | false | | 自动获取焦点 |\n| focus | boolean | false | | 获取焦点 |\n| confirm-type | return \\| send \\| search \\| next \\| go \\| done | \"return\" | | 设置键盘右下角按钮的文字 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| return | | 换行 |\n@| send | | 发送 |\n@| search | | 搜索 |\n@| next | | 下一个 |\n@| go | | 前往 |\n@| done | | 完成 |\n| cursor | number | 0 | | 指定focus时的光标位置 |\n| confirm-hold | boolean | false | | 点击键盘右下角按钮时是否保持键盘不收起 |\n| auto-height | boolean | false | | 是否自动增高，设置auto-height时，style.height不生效 |\n| cursor-spacing | number | 0 | | 指定光标与键盘的距离，单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 |\n| cursor-color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"\" | | 指定光标颜色 |\n| selection-start | number | -1 | | 光标起始位置，自动聚集时有效，需与selection-end搭配使用 |\n| selection-end | number | -1 | | 光标结束位置，自动聚集时有效，需与selection-satrt搭配使用 |\n| adjust-position | boolean | true | | 键盘弹起时，是否自动上推页面 |\n| hold-keyboard | boolean | false | | focus时，点击页面的时候不收起键盘 |\n| @confirm | (event: [UniInputConfirmEvent](#uniinputconfirmevent)) => void | - | | 点击完成时， 触发 confirm 事件，event.detail = {value: value} |\n| @input | (event: [UniInputEvent](#uniinputevent)) => void | - | | 当键盘输入时，触发 input 事件，event.detail = {value, cursor}， @input 处理函数的返回值并不会反映到 textarea 上 |\n| @linechange | (event: [UniTextareaLineChangeEvent](#unitextarealinechangeevent)) => void | - | | 输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0} |\n| @blur | (event: [UniTextareaBlurEvent](#unitextareablurevent)) => void | - | | 输入框失去焦点时触发，event.detail = {value, cursor} |\n| @keyboardheightchange | (event: [UniInputKeyboardHeightChangeEvent](#uniinputkeyboardheightchangeevent)) => void | - | | 键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration} |\n| @focus | (event: [UniTextareaFocusEvent](#unitextareafocusevent)) => void | - | | 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度，在基础库 1.9.90 起支持 |","event":"\n### 事件\n#### UniInputConfirmEvent\n\n##### UniInputConfirmEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputConfirmEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | 输入框内容 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniInputConfirmEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniInputEvent\n\n##### UniInputEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | 输入框内容 |\n@| cursor | number | 是 | - | - | 光标的位置 |\n@| keyCode | number | 是 | - | - | 输入字符的Unicode值 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniInputEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniTextareaLineChangeEvent\n\n##### UniTextareaLineChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniTextareaLineChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| lineCount | number | 是 | - | - | 行数 |\n@| heightRpx | number | 是 | - | - | textarea的高度 |\n@| height | number | 是 | - | - | textarea的高度 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniTextareaLineChangeEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniTextareaBlurEvent\n\n##### UniTextareaBlurEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniTextareaBlurEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | 输入框内容 |\n@| cursor | number | 是 | - | - | 选择区域的起始位置 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniTextareaBlurEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniInputKeyboardHeightChangeEvent\n\n##### UniInputKeyboardHeightChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputKeyboardHeightChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| height | number | 是 | - | - | 键盘高度 |\n@| duration | number | 是 | - | - | 持续时间 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniInputKeyboardHeightChangeEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniTextareaFocusEvent\n\n##### UniTextareaFocusEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniTextareaFocusEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| height | number | 是 | - | | 键盘高度 |\n@| value | string | 是 | - | - | 输入框内容 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniTextareaFocusEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/textarea/textarea.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/textarea/textarea\n>Template\n```vue\n\n\n\n\n\n\n```\n>Script\n```uts\n\nimport { ItemType } from '@/components/enum-data/enum-data'\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tadjust_position_boolean: false,\n\t\t\tshow_confirm_bar_boolean: false,\n\t\t\tfixed_boolean: false,\n\t\t\tauto_height_boolean: false,\n\t\t\tconfirm_hold_boolean: false,\n\t\t\tfocus_boolean: true,\n\t\t\tauto_focus_boolean: false,\n default_value:\"1\\n2\\n3\\n4\\n5\\n6\",\n maxlength:-1,\n\t\t\tinputmode_enum: [{\"value\":1,\"name\":\"text\"},{\"value\":2,\"name\":\"decimal\"},{\"value\":3,\"name\":\"numeric\"},{\"value\":4,\"name\":\"tel\"},{\"value\":5,\"name\":\"search\"},{\"value\":6,\"name\":\"email\"},{\"value\":7,\"name\":\"url\"},{\"value\":0,\"name\":\"none\"}] as ItemType[],\n confirm_type_list: [{\"value\":0,\"name\":\"return\"},{\"value\":1,\"name\":\"done\"},{\"value\":2,\"name\":\"send\"},{\"value\":3,\"name\":\"search\"},{\"value\":4,\"name\":\"next\"},{\"value\":5,\"name\":\"go\"}] as ItemType[],\n cursor_color: \"#3393E2\",\n cursor: 0,\n\t\t\tinputmode_enum_current: 0,\n confirm_type_current: 0,\n placeholder_value: \"请输入\",\n defaultModel:'123'\n\t\t}\n\t},\n\n\tmethods: {\n\t\ttextarea_click() { console.log(\"组件被点击时触发\") },\n\t\ttextarea_touchstart() { console.log(\"手指触摸动作开始\") },\n\t\ttextarea_touchmove() { console.log(\"手指触摸后移动\") },\n\t\ttextarea_touchcancel() { console.log(\"手指触摸动作被打断，如来电提醒，弹窗\") },\n\t\ttextarea_touchend() { console.log(\"手指触摸动作结束\") },\n\t\ttextarea_tap() { console.log(\"手指触摸后马上离开\") },\n\t\ttextarea_longpress() { console.log(\"如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。\") },\n\t\ttextarea_confirm() { console.log(\"点击完成时， 触发 confirm 事件，event.detail = {value: value}\") },\n\t\ttextarea_input() { console.log(\"当键盘输入时，触发 input 事件，event.detail = {value, cursor}， @input 处理函数的返回值并不会反映到 textarea 上\") },\n\t\ttextarea_linechange() { console.log(\"输入框行数变化时调用，event.detail = {height: 0, height: 0, lineCount: 0}\") },\n\t\ttextarea_blur() { console.log(\"输入框失去焦点时触发，event.detail = {value, cursor}\") },\n\t\ttextarea_keyboardheightchange() { console.log(\"键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration}\") },\n\t\ttextarea_focus() { console.log(\"输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度\") },\n\t\tchange_adjust_position_boolean(checked : boolean) { this.adjust_position_boolean = checked },\n\t\tchange_show_confirm_bar_boolean(checked : boolean) { this.show_confirm_bar_boolean = checked },\n\t\tchange_fixed_boolean(checked : boolean) { this.fixed_boolean = checked },\n\t\tchange_auto_height_boolean(checked : boolean) { this.auto_height_boolean = checked },\n\t\tchange_confirm_hold_boolean(checked : boolean) { this.confirm_hold_boolean = checked },\n\t\tchange_focus_boolean(checked : boolean) { this.focus_boolean = checked },\n\t\tchange_auto_focus_boolean(checked : boolean) { this.auto_focus_boolean = checked },\n change_cursor_color_boolean(checked : boolean) { if(checked){ this.cursor_color = \"transparent\"} else {this.cursor_color = \"#3393E2\"}},\n\t\tradio_change_inputmode_enum(checked : number) { this.inputmode_enum_current = checked },\n radio_change_confirm_type(checked : number) { this.confirm_type_current = checked }\n\t}\n}\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/textarea)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/textarea.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.textarea)\n","component_type":"### UniTextareaElement\ntextarea元素对象\n#### UniTextareaElement 的属性值\n| 名称 | 类型 | 必填 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | 是 | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| type | string | 是 | input的类型 |\n| disabled | boolean | 是 | 是否禁用 |\n| autofocus | boolean | 是 | 自动获取焦点 |\n| value | string | 是 | 输入框的初始内容 |"},"video":{"name":"## video","description":"> 组件类型：[UniVideoElement](#univideoelement) \n\n 视频","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| loop | boolean | false | | 是否循环播放 |\n| src | string([string.VideoURIString](/uts/data-type.md#ide-string)) | - | | 视频资源地址 |\n| initial-time | number | 0 | | 指定视频初始播放位置 |\n| duration | number | - | | 指定视频长度 |\n| controls | boolean | true | | 是否显示默认播放控件（播放/暂停按钮、播放进度、时间） |\n| danmu-list | array | - | | 弹幕列表 |\n| danmu-btn | boolean | false | | 是否显示弹幕按钮，只在初始化时有效，不能动态变更 |\n| enable-danmu | boolean | false | | 是否展示弹幕，只在初始化时有效，不能动态变更 |\n| autoplay | boolean | false | | 是否自动播放 |\n| muted | boolean | false | | 是否静音播放 |\n| page-gesture | boolean | false | | 在非全屏模式下，是否开启亮度与音量调节手势 |\n| direction | number | - | | 设置全屏时视频的方向，不指定则根据宽高比自动判断。有效值为 0（正常竖向）, 90（屏幕逆时针90度）, -90（屏幕顺时针90度） |\n| show-progress | boolean | true | | 若不设置，宽度大于240时才会显示 |\n| show-fullscreen-btn | boolean | true | | 是否显示全屏按钮 |\n| show-play-btn | boolean | true | | 是否显示视频底部控制栏的播放按钮 |\n| show-center-play-btn | boolean | true | | 是否显示视频中间的播放按钮 |\n| show-loading | boolean | true | | 是否显示loading控件 |\n| enable-progress-gesture | boolean | true | | 是否开启控制进度的手势 |\n| objectFit | string | \"contain\" | | 当视频大小与 video 容器大小不一致时，视频的表现形式。 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| contain | | 包含 |\n@| fill | | 填充 |\n@| cover | | 覆盖 |\n| poster | string | - | | 视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效 |\n| show-mute-btn | boolean | false | | 是否显示静音按钮 |\n| title | string | - | | 视频的标题，全屏时在顶部展示 |\n| play-btn-position | string | - | | 播放按钮的位置 |\n| enable-play-gesture | boolean | false | | 是否开启播放手势，即双击切换播放、暂停 |\n| auto-pause-if-navigate | boolean | - | | 当跳转到其它页面时，是否自动暂停本页面的视频 |\n| auto-pause-if-open-native | boolean | - | | 当跳转到其它小程序宿主原生页面时，是否自动暂停本页面的视频 |\n| vslide-gesture | boolean | false | | 在非全屏模式下，是否开启亮度与音量调节手势（同 page-gesture） |\n| vslide-gesture-in-fullscreen | boolean | true | | 在全屏模式下，是否开启亮度与音量调节手势 |\n| poster-for-crawler | string | - | | 用于给搜索等场景作为视频封面展示，建议使用无播放 icon 的视频封面图，只支持网络地址 |\n| codec | string | \"hardware\" | | 解码器选择 |\n| http-cache | boolean | false | | 是否对 http、https 视频源开启本地缓存 |\n| play-strategy | number | 0 | | 播放策略 |\n| is-live | boolean | - | | 是否为直播源 |\n| @loadedmetadata | (event: [UniVideoLoadedMetadataEvent](#univideoloadedmetadataevent)) => void | - | | 视频元数据加载完成时触发 |\n| @play | (event: [UniEvent](/component/common#unievent)) => void | - | | 当开始/继续播放时触发 |\n| @pause | (event: [UniEvent](/component/common#unievent)) => void | - | | 当暂停播放时触发 |\n| @ended | (event: [UniEvent](/component/common#unievent)) => void | - | | 当播放到视频末尾时触发 |\n| @timeupdate | (event: [UniVideoTimeUpdateEvent](#univideotimeupdateevent)) => void | - | | 播放进度变化时触发，event.detail = { currentTime, duration }。触发频率 250ms 一次 |\n| @fullscreenchange | (event: [UniVideoFullScreenChangeEvent](#univideofullscreenchangeevent)) => void | - | | 当视频进入和退出全屏时触发，event.detail = { fullScreen, direction }，direction取为 vertical 或 horizontal |\n| @waiting | (event: [UniEvent](/component/common#unievent)) => void | - | | 视频出现缓冲时触发 |\n| @error | (event: [UniVideoErrorEvent](#univideoerrorevent)) => void | - | | 播放出错时触发 |\n| @progress | (event: [UniVideoProgressEvent](#univideoprogressevent)) => void | - | | 加载进度变化时触发，只支持一段加载。event.detail = { buffered }，百分比 |\n| @fullscreenclick | (event: [UniVideoFullScreenClickEvent](#univideofullscreenclickevent)) => void | - | | 视频全屏播放时点击屏幕触发。event.detail = { screenX, screenY, screenWidth, screenHeight } |\n| @controlstoggle | (event: [UniVideoControlsToggleEvent](#univideocontrolstoggleevent)) => void | - | | 切换 controls 显示隐藏时触发。event.detail = { show } |","event":"\n### 事件\n#### UniVideoTimeUpdateEvent\ntimeupdate 事件
播放进度变化时触发\n##### UniVideoTimeUpdateEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniVideoTimeUpdateEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| currentTime | number | 是 | - | - | 当前进度 |\n@| duration | number | 是 | - | - | 总进度 |\n| type | string | 是 | - | - | - |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | Long | 是 | - | - | - |\n\n\n#### UniVideoFullScreenChangeEvent\nfullscreenchange 事件
当视频进入和退出全屏是触发\n##### UniVideoFullScreenChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniVideoFullScreenChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| fullScreen | boolean | 是 | - | - | 是否全屏 |\n@| direction | string | 是 | - | - | 横竖屏，取值 vertical 或 horizontal |\n| type | string | 是 | - | - | - |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | Long | 是 | - | - | - |\n\n\n#### UniVideoErrorEvent\nerror 事件
视频播放出错时触发\n##### UniVideoErrorEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **VideoError** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| errCode | 100001 \\| 200001 \\| 300001 | 是 | - | - | 统一错误码
100001 网络错误
200001 内部错误
300001 SDK错误 |\n@| errSubject | string | 是 | - | - | 统一错误主题（模块）名称 |\n@| data | any \\| null | 否 | - | - | 错误信息中包含的数据 |\n@| cause | [Error](https://uniapp.dcloud.net.cn/tutorial/err-spec.html#unierror) \\| null | 否 | - | - | UTS错误信息对象 |\n@| errMsg | string | 是 | - | - | - |\n| type | string | 是 | - | - | - |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | Long | 是 | - | - | - |\n\n\n#### UniVideoProgressEvent\nprogress 事件
加载进度变化时触发\n##### UniVideoProgressEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniVideoProgressEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| buffered | number | 是 | - | - | 加载进度百分比 |\n| type | string | 是 | - | - | - |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | Long | 是 | - | - | - |\n\n\n#### UniVideoFullScreenClickEvent\nfullscreenclick 事件
视频播放全屏播放时点击事件\n##### UniVideoFullScreenClickEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniVideoFullScreenClickEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| screenX | number | 是 | - | - | 点击点相对于屏幕左侧边缘的 X 轴坐标 |\n@| screenY | number | 是 | - | - | 点击点相对于屏幕顶部边缘的 Y 轴坐标 |\n@| screenWidth | number | 是 | - | - | 屏幕总宽度 |\n@| screenHeight | number | 是 | - | - | 屏幕总高度 |\n| type | string | 是 | - | - | - |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | Long | 是 | - | - | - |\n\n\n#### UniVideoControlsToggleEvent\ncontrolstoggle 事件
切换播放控件显示隐藏时触发\n##### UniVideoControlsToggleEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniVideoControlsToggleEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| show | boolean | 是 | - | - | 是否显示 |\n| type | string | 是 | - | - | - |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | Long | 是 | - | - | - |\n\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/video/video.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/video/video\n>Template\n```vue\n\n\n\n\n\n\n```\n>Script\n```uts\n\n export default {\n onReady() {\n this.videoContext = uni.createVideoContext('video', this);\n },\n data() {\n return {\n videoContext: null as VideoContext | null,\n // 属性\n src: \"https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.mp4\",\n _src: \"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app-video-courses.mp4\",\n autoplay: false,\n loop: false,\n muted: false,\n initialTime: 0,\n _initialTime: 6,\n duration: 0,\n _duration: 60,\n controls: true,\n danmuList: [{\n text: '要显示的文本',\n color: '#FF0000',\n time: 3\n }, {\n text: '要显示的文本2',\n color: '#31ff23',\n time: 5\n }, {\n text: '要显示的文本3',\n color: '#f13ef8',\n time: 7\n }, {\n text: '要显示的文本4',\n color: '#4972f8',\n time: 9\n }, {\n text: '要显示的文本5',\n color: '#000000',\n time: 11\n }] as Array,\n danmuBtn: false,\n enableDanmu: true,\n pageGesture: false,\n direction: -1,\n _direction: 0,\n requestFullScreenOptions: {\n direction: -90\n } as RequestFullScreenOptions,\n showProgress: true,\n showFullscreenBtn: true,\n showPlayBtn: true,\n showCenterPlayBtn: true,\n showLoading: true,\n enableProgressGesture: true,\n objectFit: \"contain\",\n _objectFit: \"fill\",\n poster: \"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-android.png\",\n _poster: \"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-ios.png\",\n showMuteBtn: false,\n title: \"video-component\",\n _title: \"video-component video-component\",\n enablePlayGesture: false,\n vslideGesture: false,\n vslideGestureInFullscreen: true,\n codec: \"hardware\",\n _codec: \"software\",\n httpCache: true,\n playStrategy: 0,\n _playStrategy: 2,\n header: {\n 'User-Agent': 'User-Agent test',\n 'header': 'header test',\n 'cookie': 'cookie test'\n } as UTSJSONObject,\n _header: {\n 'User-Agent': 'User-Agent test2',\n 'header': 'header test2',\n 'cookie': 'cookie test2'\n } as UTSJSONObject,\n // API\n pos: 10,\n rate: 1.5,\n danmu: {\n text: '要显示的文本',\n color: '#FF0000'\n } as Danmu,\n // 自动化测试\n autoTest: false,\n isPlaying: false,\n isPause: false,\n isError: false,\n localSrc: ''\n }\n },\n onLoad() {\n },\n methods: {\n // API\n play: function () {\n console.log(\"play\");\n this.videoContext?.play();\n },\n pause: function () {\n console.log(\"pause\");\n (uni.getElementById(\"video\") as UniVideoElement).pause(); //as写法测试。注意id不对时as会崩溃\n // this.videoContext?.pause();\n },\n seek: function (pos : number) {\n console.log(\"seek -> \" + pos);\n this.videoContext?.seek(pos);\n },\n requestFullScreen: function (options : RequestFullScreenOptions | null) {\n console.log(\"requestFullScreen -> \" + options);\n this.videoContext?.requestFullScreen(options);\n },\n exitFullScreen: function () {\n console.log(\"exitFullScreen\");\n this.videoContext?.exitFullScreen();\n },\n stop: function () {\n console.log(\"stop\");\n uni.getElementById(\"video\")?.stop(); //泛型写法测试\n // this.videoContext?.stop();\n },\n sendDanmu: function (danmu : Danmu) {\n console.log(\"sendDanmu -> \" + danmu);\n this.videoContext?.sendDanmu(danmu);\n },\n playbackRate: function (rate : number) {\n console.log(\"playbackRate -> \" + rate);\n this.videoContext?.playbackRate(rate);\n },\n // 属性\n setSrc: function (src : string) {\n this.src = src;\n console.log(\"src -> \" + this.src)\n },\n setAutoplay: function () {\n this.autoplay = !this.autoplay;\n console.log(\"autoplay -> \" + this.autoplay)\n },\n setLoop: function () {\n this.loop = !this.loop;\n console.log(\"loop -> \" + this.loop)\n },\n setMuted: function () {\n this.muted = !this.muted;\n console.log(\"muted -> \" + this.muted)\n },\n setInitialTime: function (initialTime : number) {\n this.initialTime = initialTime;\n console.log(\"initialTime -> \" + this.initialTime)\n },\n setDuration: function (duration : number) {\n this.duration = duration;\n console.log(\"duration -> \" + this.duration)\n },\n setControls: function () {\n this.controls = !this.controls;\n console.log(\"controls -> \" + this.controls)\n },\n setDanmuBtn: function () {\n this.danmuBtn = !this.danmuBtn;\n console.log(\"danmuBtn -> \" + this.danmuBtn)\n },\n setPageGesture: function () {\n this.pageGesture = !this.pageGesture;\n console.log(\"pageGesture -> \" + this.pageGesture)\n },\n setDirection: function (direction : number) {\n this.direction = direction;\n console.log(\"direction -> \" + this.direction)\n },\n setShowProgress: function () {\n this.showProgress = !this.showProgress;\n console.log(\"showProgress -> \" + this.showProgress)\n },\n setShowFullscreenBtn: function () {\n this.showFullscreenBtn = !this.showFullscreenBtn;\n console.log(\"showFullscreenBtn -> \" + this.showFullscreenBtn)\n },\n setShowPlayBtn: function () {\n this.showPlayBtn = !this.showPlayBtn;\n console.log(\"showPlayBtn -> \" + this.showPlayBtn)\n },\n setShowCenterPlayBtn: function () {\n this.showCenterPlayBtn = !this.showCenterPlayBtn;\n console.log(\"showCenterPlayBtn -> \" + this.showCenterPlayBtn)\n },\n setShowLoading: function () {\n this.showLoading = !this.showLoading;\n console.log(\"showLoading -> \" + this.showLoading)\n },\n setEnableProgressGesture: function () {\n this.enableProgressGesture = !this.enableProgressGesture;\n console.log(\"enableProgressGesture -> \" + this.enableProgressGesture)\n },\n setObjectFit: function (objectFit : string) {\n this.objectFit = objectFit;\n console.log(\"objectFit -> \" + this.objectFit)\n },\n setPoster: function (poster : string) {\n this.poster = poster;\n console.log(\"poster -> \" + this.poster)\n },\n setShowMuteBtn: function () {\n this.showMuteBtn = !this.showMuteBtn;\n console.log(\"showMuteBtn -> \" + this.showMuteBtn)\n },\n setTitle: function (title : string) {\n this.title = title;\n console.log(\"title -> \" + this.title)\n },\n setEnablePlayGesture: function () {\n this.enablePlayGesture = !this.enablePlayGesture;\n console.log(\"enablePlayGesture -> \" + this.enablePlayGesture)\n },\n setVslideGesture: function () {\n this.vslideGesture = !this.vslideGesture;\n console.log(\"vslideGesture -> \" + this.vslideGesture)\n },\n setVslideGestureInFullscreen: function () {\n this.vslideGestureInFullscreen = !this.vslideGestureInFullscreen;\n console.log(\"vslideGestureInFullscreen -> \" + this.vslideGestureInFullscreen)\n },\n setCodec: function (codec : string) {\n this.codec = codec;\n console.log(\"codec -> \" + this.codec)\n },\n setHttpCache: function () {\n this.httpCache = !this.httpCache;\n console.log(\"httpCache -> \" + this.httpCache)\n },\n setPlayStrategy: function (playStrategy : number) {\n this.playStrategy = playStrategy;\n console.log(\"playStrategy -> \" + this.playStrategy)\n },\n setHeader: function (header : UTSJSONObject) {\n this.header = header;\n console.log(\"header -> \" + JSON.stringify(this.header))\n },\n // 事件\n onPlay: function (res : UniEvent) {\n console.log(res.type);\n this.isPlaying = true;\n this.isPause = false;\n },\n onPause: function (res : UniEvent) {\n console.log(res.type);\n this.isPlaying = false;\n this.isPause = true;\n },\n onEnded: function (res : UniEvent) {\n console.log(res.type);\n },\n onTimeUpdate: function (res : UniVideoTimeUpdateEvent) {\n console.log(res.type + \" -> \" + JSON.stringify(res.detail));\n },\n onFullScreenChange: function (res : UniVideoFullScreenChangeEvent) {\n console.log(res.type + \" -> \" + JSON.stringify(res.detail));\n },\n onWaiting: function (res : UniEvent) {\n console.log(res.type);\n },\n onError: function (res : UniVideoErrorEvent) {\n console.log(res.type + \" -> \" + JSON.stringify(res.detail));\n this.isError = true;\n },\n onProgress: function (res : UniVideoProgressEvent) {\n console.log(res.type + \" -> \" + JSON.stringify(res.detail));\n },\n onFullScreenClick: function (res : UniVideoFullScreenClickEvent) {\n console.log(res.type + \" -> \" + JSON.stringify(res.detail));\n },\n onControlsToggle: function (res : UniVideoControlsToggleEvent) {\n console.log(res.type + \" -> \" + JSON.stringify(res.detail));\n },\n onSrcInputConfirm(event : UniInputConfirmEvent) {\n this.src = event.detail.value;\n },\n // 自动化测试\n downloadSource() {\n uni.downloadFile({\n url: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.mp4',\n success: (res) => {\n this.localSrc = res.tempFilePath;\n this.autoTest = true;\n },\n fail: (_) => {\n this.isError = true;\n }\n })\n }\n }\n }\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/video)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/video.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.video)\n","component_type":"### UniVideoElement\nvideo元素对象\n#### UniVideoElement 的方法\n##### play() @play\n播放\n\n\n###### play 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| - | - | - |\n\n\n##### pause() @pause\n暂停\n\n\n###### pause 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| - | - | - |\n\n\n##### seek(position) @seek\n跳转到指定位置\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| position | number | 是 | - | - | 跳转到指定位置(秒) | \n\n\n###### seek 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| - | - | - |\n\n\n##### stop() @stop\n停止视频\n\n\n###### stop 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| - | - | - |\n\n\n##### sendDanmu(danmu) @senddanmu\n发送弹幕\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| danmu | **Danmu** | 是 | - | - | 弹幕数据 |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| text | string \\| null | 否 | - | - | 弹幕文字 |\n@| color | string \\| null | 否 | - | - | 弹幕颜色 |\n@| time | number \\| null | 否 | - | - | 显示时刻 | \n\n\n###### sendDanmu 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| - | - | - |\n\n\n##### playbackRate(rate) @playbackrate\n设置倍速播放\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| rate | number | 是 | - | - | 支持倍率 0.5/0.8/1.0/1.25/1.5 | \n\n\n###### playbackRate 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| - | - | - |\n\n\n##### requestFullScreen(direction?) @requestfullscreen\n进入全屏\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| direction | **RequestFullScreenOptions** | 否 | - | - | 0\\|正常竖向, 90\\|屏幕逆时针90度, -90\\|屏幕顺时针90度 |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| direction | number \\| null | 否 | - | - | direction
- 0: 正常竖向
- 90: 屏幕逆时针90度
- -90: 屏幕顺时针90度 | \n\n\n###### requestFullScreen 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| - | - | - |\n\n\n##### exitFullScreen() @exitfullscreen\n退出全屏\n\n\n###### exitFullScreen 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| - | - | - |\n\n"},"unicloud-db":{"name":"## unicloud-db","description":"> 组件类型：[UniCloudDBElement](#uniclouddbelement) \n\n 是一个数据库查询组件，它将clientDB的API封装为组件，进一步减少开发者使用所需的代码量。","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| id | string([string.IDString](/uts/data-type.md#ide-string)) | - | - | 唯一标识 |\n| v-slot:default | string | - | | {data, loading, hasMore, pagination, error} |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| data | - | 查询结果，类型为Array\\ |\n@| loading | - | 查询中的状态。可根据此状态，在template中通过v-if显示等待内容 |\n@| hasMore | - | 是否有更多数据。可根据此状态，在template中通过v-if显示没有更多数据了 |\n@| error | - | 查询错误。可根据此状态，在template中通过v-if显示等待内容 |\n@| pagination | - | 分页属性 |\n@@| 值名称 | 兼容性 | 描述 |\n@@| :- | :-: | :- |\n@@| current | - | 当前页号 |\n@@| size | - | 分页大小 |\n@@| count | - | 数据库的总数据量, 设置 :getcount=true 时有效 |\n| collection | string([string.DBCollectionString](/uts/data-type.md#ide-string)) | - | | 表名 |\n| field | string([string.DBFieldString](/uts/data-type.md#ide-string)) | - | | 查询字段，多个字段用 `,` 分割 |\n| where | string([string.JQLString](/uts/data-type.md#ide-string)) | - | | 查询条件 |\n| orderby | string | - | | 排序字段及正序倒叙设置 |\n| groupby | string | - | | 对数据进行分组 |\n| group-field | string | - | | 对数据进行分组统计 |\n| distinct | boolean | - | | 是否对数据查询结果中重复的记录进行去重 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| true | - | 去重 |\n@| false | - | 不去重 |\n| page-data | string | - | | add 多次查询的集合, replace 当前查询的集合 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| add | - | 多次查询的集合 |\n@| replace | - | 当前查询的集合 |\n| page-current | number | - | | 当前页 |\n| page-size | number | - | | 每页数据数量 |\n| getone | boolean | - | | 指定查询结果是否返回数组第一条数据，默认 false。在false情况下返回的是数组，即便只有一条结果，也需要\\[0]方式获取。在true下，直接返回结果数据，少一层数组 |\n| getcount | boolean | - | | 是否查询总数量 |\n| gettree | boolean | - | | 是否查询树状结构数据 |\n| startwith | string | - | | gettree的第一层级条件，此初始条件可以省略，不传startWith时默认从最顶级开始查询 |\n| limitlevel | number | - | | gettree查询返回的树的最大层级。超过设定层级的节点不会返回。默认10级，最大15，最小1 |\n| manual | boolean | - | | 是否手动加载数据，默认为 false，页面onLoad时自动联网加载数据 |\n| loadtime | string | - | | 加载数据时机，默认auto，可选值 auto\\|onready\\|manual |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| auto | - | 页面就绪后或属性变化后加载数据，默认为auto |\n@| onready | - | 页面就绪后不自动加载数据，属性变化后加载。适合在onLoad中接收上个页面的参数作为where条件时 |\n@| manual | - | 手动模式，不自动加载数据。如果涉及到分页，需要先手动修改当前页，在调用加载数据 |\n| ~~action~~ | string([string.ClientDBActionString](/uts/data-type.md#ide-string)) | - | | 云端执行数据库查询的前或后，触发某个action函数操作，进行预处理或后处理(推荐改用JQL触发器) |\n| @load | (data : Array\\, ended : boolean, pagination : [UTSJSONObject](/uts/buildin-object-api/utsjsonobject.md)) => void | - | | 成功回调。如联网返回结果后，想修改下数据再渲染界面，则在本方法里对data进行修改 |\n| @error | (event: [UniEvent](/component/common#unievent)) => void | - | | 失败回调 |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/unicloud-db/unicloud-db.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/unicloud-db/unicloud-db\n>Template\n```vue\n\n\n\n\n\n\n```\n>Script\n```uts\n\n const db = uniCloud.databaseForJQL()\n\n export default {\n data() {\n return {\n collection: 'unicloud-db-test',\n collectionList: [\n db.collection('book').where('name == \"水浒传\"').getTemp(),\n ] as UTSJSONObject[],\n $uniCloudElement: null as UniCloudDBElement | null,\n $isTesting: false,\n $addResult: {},\n $updateResult: {},\n $removeResult: {}\n }\n },\n onReady() {\n this.$uniCloudElement = this.$refs['udb'] as UniCloudDBElement\n this.get();\n },\n onPullDownRefresh() {\n this.$uniCloudElement!.loadData({\n clear: true,\n success: (_ : UniCloudDBGetResult) => {\n uni.stopPullDownRefresh()\n }\n })\n },\n methods: {\n loadMore() {\n this.$uniCloudElement!.loadMore()\n },\n get() {\n this.$uniCloudElement!.loadData({\n clear: true\n })\n },\n add() {\n const value = {\n title: \"title-\" + Date.now(),\n comment: \"comment\" + Date.now()\n };\n this.$uniCloudElement!.add(value, {\n showToast: false,\n success: (res : UniCloudDBAddResult) => {\n this.$addResult = {\n id: res.id\n };\n this.get();\n },\n fail: (err : any | null) => {\n this.showError(err)\n }\n })\n },\n update(id : string) {\n const value = {\n title: \"title-\" + Date.now(),\n comment: \"comment\" + Date.now()\n };\n this.$uniCloudElement!.update(id, value, {\n showToast: false,\n needLoading: true,\n needConfirm: false,\n loadingTitle: \"正在更新...\",\n success: (res : UniCloudDBUpdateResult) => {\n this.$updateResult = {\n updated: res.updated\n }\n },\n fail: (err : any | null) => {\n this.showError(err)\n }\n })\n },\n remove(id : string) {\n this.$uniCloudElement!.remove(id, {\n showToast: false,\n needConfirm: false,\n needLoading: false,\n success: (res : UniCloudDBRemoveResult) => {\n this.$removeResult = {\n deleted: res.deleted\n }\n },\n fail: (err : any | null) => {\n this.showError(err)\n }\n })\n },\n onQueryLoad(data : Array, ended : boolean, pagination : UTSJSONObject) {\n console.log(data, ended, pagination);\n },\n showError(err : any | null) {\n const error = err as UniCloudError\n uni.showModal({\n content: error.errMsg,\n showCancel: false\n })\n }\n }\n }\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.93 | 4.11 |\n","children":"","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/uniCloud/unicloud-db)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/unicloud-db.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.unicloud-db)\n","component_type":"### UniCloudDBElement\n\n#### UniCloudDBElement 的属性值\n| 名称 | 类型 | 必填 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| dataList | Array\\ | 是 | 已加载的数据 |\n#### UniCloudDBElement 的方法\n##### loadData(options?) @loaddata\n加载数据
当 \\ 组件的 manual 属性设为 true 或者 loadtime 属性设置为 manual 时，不会在页面初始化时联网查询数据，此时需要通过本方法在需要的时候手动加载数据。\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| options | **UniCloudDBComponentLoadDataOptions** | 否 | - | - | 可选参数 |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| clear | boolean \\| null | 否 | false | - | 是否清空数据 |\n@| current | number \\| null | 否 | - | - | 当前第几页 |\n@| success | (res?: T \\| null) => void \\| null | 否 | - | - | 成功回调 |\n@| fail | (err?: any \\| null) => void \\| null | 否 | - | - | 失败回调 |\n@| complete | () => void \\| null | 否 | - | - | 完成回调 | \n\n\n###### loadData 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| - | - | - |\n\n\n##### loadMore() @loadmore\n加载更多数据
在列表的加载下一页场景下，使用ref方式访问组件方法，加载更多数据，每加载成功一次，当前页 +1\n\n\n###### loadMore 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| - | - | - |\n\n\n##### add(value, options?) @add\n新增数据\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| value | [UTSJSONObject](/uts/buildin-object-api/utsjsonobject.md) | 是 | - | - | 如果属性名存在，且类型为UTSJSONObject返回对应的结果，不存在返回null |\n| options | **UniCloudDBComponentAddOptions** | 否 | - | - | 可选参数 |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| showToast | boolean \\| null | 否 | true | - | 是否显示 Toast |\n@| toastTitle | string \\| null | 否 | - | - | Toast 标题 |\n@| needLoading | boolean \\| null | 否 | true | - | 是否需要 Loading |\n@| loadingTitle | string \\| null | 否 | - | - | Loading 标题 |\n@| success | (res?: T \\| null) => void \\| null | 否 | - | - | 成功回调 |\n@| fail | (err?: any \\| null) => void \\| null | 否 | - | - | 失败回调 |\n@| complete | () => void \\| null | 否 | - | - | 完成回调 | \n\n\n###### add 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| - | - | - |\n\n\n##### remove() @remove\n移除数据\n\n\n###### remove 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| - | - | - |\n\n\n##### remove() @remove\n移除数据\n\n\n###### remove 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| - | - | - |\n\n\n##### update(id, value, options?) @update\n更新数据\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| id | string | 是 | - | - | 数据库字段的唯一标识. |\n| value | [UTSJSONObject](/uts/buildin-object-api/utsjsonobject.md) | 是 | - | - | 需要修改的新数据. |\n| options | **UniCloudDBComponentUpdateOptions** | 否 | - | - | 可选参数 |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| showToast | boolean \\| null | 否 | true | - | 是否显示更新后 Toast |\n@| toastTitle | string \\| null | 否 | \"\" | - | 更新成功后 Toast 标题 |\n@| confirmTitle | string \\| null | 否 | - | - | 确认框标题 |\n@| confirmContent | string \\| null | 否 | - | - | 确认框内容 |\n@| needConfirm | boolean \\| null | 否 | true | - | 是否显示更新确认框 |\n@| needLoading | boolean \\| null | 否 | true | - | 是否需要 Loading |\n@| loadingTitle | string \\| null | 否 | - | - | Loading 标题 |\n@| success | (res?: T \\| null) => void \\| null | 否 | - | - | 成功回调 |\n@| fail | (err?: any \\| null) => void \\| null | 否 | - | - | 失败回调 |\n@| complete | () => void \\| null | 否 | - | - | 完成回调 | \n\n\n###### update 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| - | - | - |\n\n"},"view":{"name":"## view","description":"> 组件类型：UniViewElement \n\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>Template\n```vue\n\n\n\n\n\n```\n>Script\n```uts\n\n import { ItemType } from '@/components/enum-data/enum-data'\n export default {\n data() {\n return {\n hover_class: false,\n stop_propagation: false,\n start_time: 50,\n stay_time: 400,\n start_time_enum: [{ \"value\": 50, \"name\": \"50毫秒\" }, { \"value\": 200, \"name\": \"200毫秒\" }] as ItemType[],\n stay_time_enum: [{ \"value\": 400, \"name\": \"400毫秒\" }, { \"value\": 200, \"name\": \"200毫秒\" }] as ItemType[]\n }\n },\n methods: {\n change_hover_class_boolean(checked : boolean) {\n this.hover_class = checked\n },\n change_stop_propagation_boolean(checked : boolean) {\n this.stop_propagation = checked\n },\n radio_change_start_time_enum(time : number) {\n this.start_time = time\n },\n radio_change_stay_time_enum(time : number) {\n this.stay_time = time\n },\n },\n }\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/view)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/view.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view)\n"},"web-view":{"name":"## web-view","description":"> 组件类型：[UniWebViewElement](#uniwebviewelement) \n\n 承载网页的容器","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| src | string([string.HTMLURIString](/uts/data-type.md#ide-string)) | - | | webview 指向网页的链接 |\n| webview-styles | **WebViewStyles** | {\"progress\":{\"color\":\"#00FF00\"}} | | webview 网络地址页面加载进度条样式 |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| progress | **WebViewProgressStyles** \\| boolean | 是 | false | - | 网络地址页面加载进度条样式，设置为 false 时表示不显示加载进度条。 |\n@@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@@| :- | :- | :- | :- | :-: | :- |\n@@| color | [string.ColorString](/uts/data-type.md#ide-string) | 是 | - | - | 网页加载进度条颜色，默认值为 #00FF00 。 |\n@\n| horizontalScrollBarAccess | boolean | true | | 设置是否显示横向滚动条 |\n| verticalScrollBarAccess | boolean | true | | 设置是否显示纵向滚动条 |\n| @message | (event: [UniWebViewMessageEvent](#uniwebviewmessageevent)) => void | - | | 网页向应用 postMessage 时触发。e.detail = { data } |\n| @error | (event: [UniWebViewErrorEvent](#uniwebviewerrorevent)) => void | - | | 网页加载错误时触发。e.detail = { errSubject, errCode, errMsg, url, fullUrl, src } |\n| @load | (event: [UniWebViewLoadEvent](#uniwebviewloadevent)) => void | - | | 网页加载完成后触发。e.detail = { url, src } |\n| ~~@loaded~~ | (event: [UniWebViewLoadEvent](#uniwebviewloadevent)) => void | - | - | 网页加载完成后触发。e.detail = { url, src }。已废弃，请改用load |\n| @loading | (event: [UniWebViewLoadingEvent](#uniwebviewloadingevent)) => void | - | | 网页加载中触发。e.detail = { url, src } |\n| @download | (event: [UniWebViewDownloadEvent](#uniwebviewdownloadevent)) => void | - | | 点击网页中可下载链接时触发。e.detail = { url, userAgent, contentDisposition, mimetype, contentLength } |","event":"\n### 事件\n#### UniWebViewMessageEvent\n\n##### UniWebViewMessageEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| type | string | 是 | - | - | 事件类型，固定值message |\n| detail | **UniWebViewMessageEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| data | Array\\<[UTSJSONObject](/uts/buildin-object-api/utsjsonobject.md)\\> | 是 | - | - | 消息包含的数据，4.13版本之前类型为Map\\ \\| null，4.13版本（含）之后类型为Array\\ |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniWebViewMessageEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniWebViewErrorEvent\n\n##### UniWebViewErrorEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| type | string | 是 | - | - | 事件类型，固定值error |\n| detail | **UniWebViewErrorEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| errSubject | string | 是 | - | - | 统一错误主题（模块）名称，固定值uni-web-view |\n@| errCode | 100001 \\| 100002 \\| 100003 | 是 | - | - | 统一错误码
100001 ssl error
100002 page error
100003 http error |\n@| errMsg | string | 是 | - | - | 统一错误描述信息 |\n@| url | string | 是 | - | - | 加载错误的网页链接，非完整链接，仅包含scheme://authority部分，4.13版本起支持 |\n@| fullUrl | string | 是 | - | - | 加载错误的网页链接，完整链接，4.13版本起支持 |\n@| src | string | 是 | - | - | 加载错误的网页链接，完整链接，4.13版本起支持 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniWebViewErrorEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniWebViewLoadEvent\n\n##### UniWebViewLoadEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| type | string | 是 | - | - | 事件类型，固定值load |\n| detail | **UniWebViewLoadEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| ~~url~~ | string | 是 | - | - | 加载完成的网页链接 **4.13版本起废弃，请改用src** |\n@| src | string | 是 | - | - | 加载完成的网页链接，4.13版本起支持 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniWebViewLoadEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniWebViewLoadingEvent\n\n##### UniWebViewLoadingEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| type | string | 是 | - | - | 事件类型，固定值loading |\n| detail | **UniWebViewLoadingEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| ~~url~~ | string | 是 | - | - | 加载中的网页链接 **4.13版本起废弃，请改用src** |\n@| src | string | 是 | - | - | 加载中的网页链接，4.13版本起支持 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniWebViewLoadingEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniWebViewDownloadEvent\n\n##### UniWebViewDownloadEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| type | string | 是 | - | - | 事件类型，固定值download |\n| detail | **UniWebViewDownloadEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| url | string | 是 | - | - | 下载链接 |\n@| userAgent | string | 是 | - | - | 用户代理 |\n@| contentDisposition | string | 是 | - | - | 指示回复的内容该以何种形式展示，是以内联的形式（即网页或者页面的一部分），还是以附件的形式下载并保存到本地 |\n@| mimetype | string | 是 | - | - | 媒体类型 |\n@| contentLength | number | 是 | - | - | 文件大小 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniWebViewDownloadEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/web-view/web-view.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/web-view/web-view\n>Template\n```vue\n\n\n\n\n\n\n```\n>Script\n```uts\n\n export default {\n data() {\n return {\n src: 'https://www.dcloud.io',\n webview_styles: {\n progress: {\n color: '#FF3333'\n }\n },\n webviewContext: null as WebviewContext | null,\n loadError: false,\n horizontalScrollBarAccess: true,\n verticalScrollBarAccess: true\n }\n },\n onReady() {\n // #ifdef APP\n // TODO web 实现createWebviewContext\n this.webviewContext = uni.createWebviewContext('web-view', this)\n // #endif\n },\n methods: {\n back() {\n this.webviewContext?.back();\n },\n forward() {\n this.webviewContext?.forward();\n },\n reload() {\n this.webviewContext?.reload();\n },\n stop() {\n this.webviewContext?.stop();\n },\n nativeToWeb() {\n this.webviewContext?.evalJS(\"alert('hello uni-app x')\");\n },\n message(event : UniWebViewMessageEvent) {\n console.log(JSON.stringify(event));\n },\n error(event : UniWebViewErrorEvent) {\n this.loadError = true\n console.log(JSON.stringify(event));\n },\n loading(event : UniWebViewLoadingEvent) {\n console.log(JSON.stringify(event));\n },\n load(event : UniWebViewLoadEvent) {\n console.log(JSON.stringify(event));\n },\n download(event : UniWebViewDownloadEvent) {\n console.log(JSON.stringify(event));\n uni.showModal({\n content: \"下载链接: \" + event.detail.url + \"\\n文件大小: \" + event.detail.contentLength / 1024 + \"KB\",\n showCancel: false\n });\n },\n confirm(event : UniInputConfirmEvent) {\n console.log(JSON.stringify(event));\n let url = event.detail.value;\n if (!url.startsWith('https://') && !url.startsWith('http://')) {\n url = 'https://' + url;\n }\n this.src = url;\n },\n changeHorizontalScrollBarAccess(event : UniSwitchChangeEvent) {\n this.horizontalScrollBarAccess = event.detail.value;\n },\n changeVerticalScrollBarAccess(event : UniSwitchChangeEvent) {\n this.verticalScrollBarAccess = event.detail.value;\n }\n }\n }\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/web-view)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/web-view.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.web-view)\n","component_type":"### UniWebViewElement\nweb-view元素对象\n#### UniWebViewElement 的方法\n##### back() @back\n后退\n\n\n###### back 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 4.0 | 4.11 |\n\n\n##### forward() @forward\n前进\n\n\n###### forward 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 4.0 | 4.11 |\n\n\n##### reload() @reload\n重新加载\n\n\n###### reload 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 4.0 | 4.11 |\n\n\n##### stop() @stop\n停止加载\n\n\n###### stop 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 4.0 | 4.11 |\n\n\n##### evalJS(js) @evaljs\n原生和WebView通信（执行JS脚本）\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| js | string | 是 | - | - | - | \n\n\n###### evalJS 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 4.0 | 4.11 |\n\n"},"nested-scroll-body":{"name":"## nested-scroll-body","description":"> 组件类型：UniNestedScrollHeaderElement \n\n scroll-view 嵌套模式场景中属于嵌套内层 scroll-view 的父节点，仅支持作为 \\ 嵌套模式的直接子节点。不支持复数子节点，渲染时会取其第一个子节点来渲染","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 ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/nested-scroll-body/nested-scroll-body\n>Template\n```vue\n\n\n\n\n\n\n```\n>Script\n```uts\n\n import refreshBox from '../../template/custom-refresher/refresh-box/refresh-box.uvue';\n\texport default {\n components: { refreshBox },\n\t\tdata() {\n\t\t\treturn {\n scrollData: [] as Array,\n scrollTop: 0,\n refresherTriggered: false,\n pullingDistance: 0,\n resetting: false\n\t\t\t}\n\t\t},\n computed: {\n \tstate() : number {\n \t\tif (this.resetting) {\n \t\t\treturn 3;\n \t\t}\n \t\tif (this.refresherTriggered) {\n \t\t\treturn 2\n \t\t}\n \t\tif (this.pullingDistance > 45) {\n \t\t\treturn 1\n \t\t} else {\n \t\t\treturn 0;\n \t\t}\n \t}\n },\n onLoad() {\n \tlet lists : Array = []\n \tfor (let i = 0; i < 30; i++) {\n \t\tlists.push(\"item---\" + i)\n \t}\n \tthis.scrollData = lists\n },\n\t\tmethods: {\n onRefresherpulling(e : RefresherEvent) {\n \tthis.pullingDistance = e.detail.dy;\n },\n onRefresherrefresh() {\n \tthis.refresherTriggered = true\n \tsetTimeout(() => {\n \t\tthis.refresherTriggered = false\n \t\tthis.resetting = true;\n \t}, 1500)\n },\n onRefreshrestore() {\n this.pullingDistance = 0\n \tthis.resetting = false;\n },\n //自动化测试使用\n testBodyScrollBy(y: number) {\n this.scrollTop = y\n }\n\t\t}\n\t}\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| x | 4.11 | 4.11 |\n","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.nested-scroll-body)\n"},"nested-scroll-header":{"name":"## nested-scroll-header","description":"> 组件类型：UniNestedScrollHeaderElement \n\n scroll-view 嵌套模式场景中属于外层 scroll-view 的节点，仅支持作为 \\ 嵌套模式的直接子节点。不支持复数子节点，渲染时会取其第一个子节点来渲染","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 ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/nested-scroll-header/nested-scroll-header\n>Template\n```vue\n\n\n\n\n\n\n```\n>Script\n```uts\n\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n scrollData: [] as Array,\n\t\t\t}\n\t\t},\n onLoad() {\n \tlet lists : Array = []\n \tfor (let i = 0; i < 30; i++) {\n \t\tlists.push(\"item---\" + i)\n \t}\n \tthis.scrollData = lists\n },\n\t\tmethods: {\n\t\t}\n\t}\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| x | 4.11 | 4.11 |\n","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.nested-scroll-header)\n"}} \ No newline at end of file +{"animation-view":{"name":"## animation-view","description":"Lottie 动画\n> 本 Component 是 uni ext component，需下载插件：[animation-view](https://ext.dcloud.net.cn/plugin?name=uni-animation-view)\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| path | string | \"\" | | 动画资源地址，目前只支持绝对路径 |\n| loop | boolean | false | | 动画是否循环播放 |\n| autoplay | boolean | false | | 动画是否自动播放 |\n| action | string | \"stop\" | | 动画操作，可取值 play、pause、stop |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| play | | 播放 |\n@| pause | | 暂停 |\n@| stop | | 停止 |\n| hidden | boolean | false | | 是否隐藏动画 |\n| @ended | (event: [UniEvent](/component/common#unievent)) => void | - | | - |","event":"","example":"","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| - | 3.9 | 4.11 |\n","children":"","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/animation-view)\n- [插件市场](https://ext.dcloud.net.cn/plugin?id=10674)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/animation-view.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.animation-view)\n"},"button":{"name":"## button","description":"> 组件类型：UniButtonElement \n\n 按钮","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| disabled | boolean | false | | 是否禁用 |\n| hover-class | string([string.ClassString](/uts/data-type.md#ide-string)) | \"button-hover\" | | 指定按下去的样式类。当 hover-class=\"none\" 时，没有点击态效果 |\n| hover-start-time | number | 20 | | 按住后多久出现点击态，单位毫秒 |\n| hover-stay-time | number | 70 | | 手指松开后点击态保留时间，单位毫秒 |\n| size | string | \"default\" | | 按钮的大小 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| default | | 默认大小 |\n@| mini | | 小尺寸 |\n| type | string | \"default\" | | 按钮的样式类型 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| default | | 白色 |\n@| primary | | 蓝色 |\n@| warn | | 红色 |\n| plain | boolean | false | | 按钮是否镂空，背景色透明 |\n| loading | boolean | - | | 名称前是否带 loading 图标 |\n| form-type | string | - | | 用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| submit | | 提交表单 |\n@| reset | | 重置表单 |","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>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'\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: 'uni-app-x'\r\n }\r\n },\r\n methods: {\r\n button_click() {\r\n console.log(\"组件被点击时触发\")\r\n this.count++\r\n },\r\n button_touchstart() { console.log(\"手指触摸动作开始\") },\r\n button_touchmove() { console.log(\"手指触摸后移动\") },\r\n button_touchcancel() { console.log(\"手指触摸动作被打断，如来电提醒，弹窗\") },\r\n button_touchend() { console.log(\"手指触摸动作结束\") },\r\n button_tap() { console.log(\"手指触摸后马上离开\") },\r\n button_longpress() { console.log(\"如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。\") },\r\n change_plain_boolean(checked : boolean) { this.plain_boolean = checked },\r\n change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },\r\n change_default_style(checked : boolean) { this.default_style = checked },\r\n radio_change_size_enum(checked : number) { this.size_enum_current = checked },\r\n radio_change_type_enum(checked : number) { this.type_enum_current = checked },\r\n confirm_text_input(value : string) { this.text = value },\r\n navigateToChild() {\r\n uni.navigateTo({\r\n url: 'buttonstatus',\r\n })\r\n },\r\n //用于自动化测试\r\n checkUniButtonElement() : boolean {\r\n const button = uni.getElementById(\"testButton\")\r\n if (button != null && button instanceof UniButtonElement) {\r\n return true\r\n }\r\n return false\r\n }\r\n }\r\n }\r\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/button)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/button.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.button)\n"},"canvas":{"name":"## canvas","description":"> 组件类型：UniCanvasElement \n\n 画布","attribute":"","event":"","example":"","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.21 | x | x |\n","children":"","reference":"\n### 参见\n- [参见uni-app相关文档](https://doc.dcloud.net.cn/uni-app-x/component/canvas.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.canvas)\n"},"checkbox":{"name":"## checkbox","description":"> 组件类型：UniCheckboxElement \n\n 多选项。在1组check-group中可选择多个","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| disabled | boolean | false | | 是否禁用 |\n| value | string | - | | checkbox 标识，选中时触发 checkbox-group 的 change 事件，并携带 checkbox 的 value |\n| checked | boolean | false | | 当前是否选中，可用来设置默认选中 |\n| color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | | checkbox的颜色 |\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| ~~iconColor~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | | checkbox的图标颜色，优先级大于color属性 |\n| foreColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | | checkbox的图标颜色，优先级大于color属性 |","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>Template\n```vue\n\r\n\r\n\r\n\r\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:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/checkbox)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/checkbox-group.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.checkbox)\n"},"checkbox-group":{"name":"## checkbox-group","description":"> 组件类型：UniCheckboxGroupElement \n\n 多项组，内部由多个checkbox组成","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##### UniCheckboxGroupChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniCheckboxGroupChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | Array\\ | 是 | - | - | - |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniCheckboxGroupChangeEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n","example":"","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"### 子组件 @children-tags \n - [checkbox](#checkbox)","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/checkbox)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/checkbox-group.html)\n"},"image":{"name":"## image","description":"> 组件类型：UniImageElement \n\n 图片","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| src | string([string.ImageURIString](/uts/data-type.md#ide-string)) | - | | 图片资源地址 |\n| mode | string | \"scaleToFill\" | | 图片裁剪、缩放的模式 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| scaleToFill | | 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 |\n@| aspectFit | | 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 |\n@| aspectFill | | 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取 |\n@| widthFix | | 宽度不变，高度自动变化，保持原图宽高比不变 |\n@| heightFix | | 高度不变，宽度自动变化，保持原图宽高比不变 |\n@| top | | 不缩放图片，只显示图片的顶部区域 |\n@| bottom | | 不缩放图片，只显示图片的底部区域 |\n@| center | | 不缩放图片，只显示图片的中间区域 |\n@| left | | 不缩放图片，只显示图片的左边区域 |\n@| right | | 不缩放图片，只显示图片的右边区域 |\n@| top left | | 不缩放图片，只显示图片的左上边区域 |\n@| top right | | 不缩放图片，只显示图片的右上边区域 |\n@| bottom left | | 不缩放图片，只显示图片的左下边区域 |\n@| bottom right | | 不缩放图片，只显示图片的右下边区域 |\n| lazy-load | boolean | false | | 图片懒加载。只针对page与scroll-view下的image有效 |\n| fade-show | boolean | false | | 图片显示动画效果 |\n| draggable | boolean | false | | 鼠标长按是否能拖动图片(仅H5平台) |\n| @error | (event: [UniImageErrorEvent](#uniimageerrorevent)) => void | - | | 图片加载错误时触发，event.detail = { errMsg } |\n| @load | (event: [UniImageLoadEvent](#uniimageloadevent)) => void | - | | 图片加载完成时触发，event.detail = { width: '图片宽度px', height: '图片高度px' } |","event":"\n### 事件\n#### UniImageErrorEvent\n\n##### UniImageErrorEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniImageErrorEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| errMsg | string | 是 | - | - | 错误信息 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniImageErrorEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniImageLoadEvent\n\n##### UniImageLoadEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniImageLoadEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| width | number | 是 | - | - | 图片宽度 |\n@| height | number | 是 | - | - | 图片高度 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniImageLoadEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/image/image.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/image/image\n>Template\n```vue\n\r\n\r\n\n\n```\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n title: 'image',\r\n imageSrc: \"/static/test-image/logo.png\" as string.ImageURIString,\r\n loadError: false,\n // 自动化测试\n autoTest: false,\n setCookieImage: \"\",\n verifyCookieImage: \"\"\r\n }\r\n },\r\n methods: {\r\n error(event : ImageErrorEvent) {\r\n this.loadError = true\r\n console.log(event.type, event.detail);\r\n },\r\n load(event : ImageLoadEvent) {\r\n console.log(event.type, event.detail);\r\n },\r\n imageFormat() {\r\n uni.navigateTo({\r\n url: '/pages/component/image/image-format'\r\n });\r\n },\r\n imageMode() {\r\n uni.navigateTo({\r\n url: '/pages/component/image/image-mode'\r\n });\r\n },\r\n imagePath() {\r\n uni.navigateTo({\r\n url: '/pages/component/image/image-path'\r\n });\r\n },\r\n imageLarge() {\r\n uni.navigateTo({\r\n url: '/pages/component/image/image-large'\r\n });\r\n }\r\n }\r\n }\r\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/image)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/image.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.image)\n"},"input":{"name":"## input","description":"> 组件类型：[UniInputElement](#uniinputelement) \n\n 输入框","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | - | | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| disabled | boolean | false | | 是否禁用 |\n| value | string | \"\" | | 输入框的初始内容 |\n| type | text \\| number \\| digit \\| tel | \"text\" | | input的类型 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| text | | 文本输入键盘 |\n@| number | | 数字输入键盘 |\n@| digit | | 带小数点数字输入键盘 |\n@| tel | | 电话输入键盘 |\n| password | boolean | false | | 是否是密码类型 |\n| placeholder | string | \"\" | | 输入框为空时占位符 |\n| placeholder-style | string | \"\" | | 指定 placeholder 的样式 |\n| placeholder-class | string([string.ClassString](/uts/data-type.md#ide-string)) | \"\" | | 指定 placeholder 的样式类，目前仅支持color,font-size和font-weight |\n| maxlength | number | \"不限制长度\" | | 最大输入长度，0和正数为合法值，非法值的时候不限制最大长度 |\n| cursor-spacing | number | 0 | | 指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 |\n| cursor-color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"\" | | 指定光标颜色 |\n| auto-focus | boolean | false | | 自动获取焦点，与`focus`属性对比，此属性只会首次生效。 |\n| focus | boolean | false | | 获取焦点 |\n| confirm-type | send \\| search \\| next \\| go \\| done | \"done\" | | 设置键盘右下角按钮的文字，仅在 type为text 时生效。 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| send | | 发送 |\n@| search | | 搜索 |\n@| next | | 下一个 |\n@| go | | 前往 |\n@| done | | 完成 |\n| confirm-hold | boolean | false | | 点击键盘右下角按钮时是否保持键盘不收起 |\n| cursor | number | 0 | | 指定focus时的光标位置 |\n| selection-start | number | -1 | | 光标起始位置，自动聚集时有效，需与selection-end搭配使用 |\n| selection-end | number | -1 | | 光标结束位置，自动聚集时有效，需与selection-satrt搭配使用 |\n| adjust-position | boolean | true | | 键盘弹起时，是否自动上推页面 |\n| hold-keyboard | boolean | false | | focus时，点击页面的时候不收起键盘 |\n| inputmode | none \\| text \\| decimal \\| numeric \\| tel \\| search \\| email \\| url | \"text\" | | 是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。在符合条件的高版本webview里，uni-app的 web 和 app-vue 平台中可使用本属性。 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| none | | 无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用。 |\n@| text | | 使用用户本地区域设置的标准文本输入键盘。 |\n@| decimal | | 小数输入键盘，包含数字和分隔符（通常是“ . ”或者“ , ”），设备可能也可能不显示减号键。 |\n@| numeric | | 数字输入键盘，所需要的就是 0 到 9 的数字，设备可能也可能不显示减号键。 |\n@| tel | | 电话输入键盘，包含 0 到 9 的数字、星号（*）和井号（#）键。表单输入里面的电话输入通常应该使用 \\ 。 |\n@| search | | 为搜索输入优化的虚拟键盘，比如，返回键可能被重新标记为“搜索”，也可能还有其他的优化。 |\n@| email | | 为邮件地址输入优化的虚拟键盘，通常包含\"@\"符号和其他优化。表单里面的邮件地址输入应该使用 \\ 。 |\n@| url | | 为网址输入优化的虚拟键盘，比如，“/”键会更加明显、历史记录访问等。表单里面的网址输入通常应该使用 \\ 。 |\n| @input | (event: [UniInputEvent](#uniinputevent)) => void | - | | 当键盘输入时，触发input事件，event.detail = {value, cursor}，处理函数可以直接 return 一个字符串，将替换输入框的内容。 |\n| @focus | (event: [UniInputFocusEvent](#uniinputfocusevent)) => void | - | | 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度 |\n| @blur | (event: [UniInputBlurEvent](#uniinputblurevent)) => void | - | | 输入框失去焦点时触发，event.detail = {value: value} |\n| @keyboardheightchange | (event: [UniInputKeyboardHeightChangeEvent](#uniinputkeyboardheightchangeevent)) => void | - | | 键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration} |\n| @confirm | (event: [UniInputConfirmEvent](#uniinputconfirmevent)) => void | - | | 点击完成按钮时触发，event.detail = {value: value} |","event":"\n### 事件\n#### UniInputEvent\n\n##### UniInputEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | 输入框内容 |\n@| cursor | number | 是 | - | - | 光标的位置 |\n@| keyCode | number | 是 | - | - | 输入字符的Unicode值 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniInputEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniInputFocusEvent\n\n##### UniInputFocusEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputFocusEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| height | number | 是 | - | | 键盘高度 |\n@| value | string | 是 | - | - | 输入框内容 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniInputFocusEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniInputBlurEvent\n\n##### UniInputBlurEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputBlurEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | 输入框内容 |\n@| cursor | number | 是 | - | - | 选择区域的起始位置 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniInputBlurEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniInputKeyboardHeightChangeEvent\n\n##### UniInputKeyboardHeightChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputKeyboardHeightChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| height | number | 是 | - | - | 键盘高度 |\n@| duration | number | 是 | - | - | 持续时间 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniInputKeyboardHeightChangeEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniInputConfirmEvent\n\n##### UniInputConfirmEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputConfirmEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | 输入框内容 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniInputConfirmEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/input/input.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/input/input\n>Template\n```vue\n\n\n\n\n\n```\n>Script\n```uts\n\n export default {\n data() {\n return {\n title: 'input',\n showClearIcon: false,\n inputClearValue: '',\n showPassword: true,\n cursor: -1,\n cursor_color: \"#3393E2\",\n selectionStart: -1,\n selectionEnd: -1,\n inputEventDetail: '',\n focusAndBlurEventDetail: '',\n confirmEventDetail: '',\n keyboardHeightChangeEventDetail: '',\n focus: true,\n inputPassword: true,\n inputTypeTel: \"tel\",\n inputPlaceHolderStyle: \"color:red\",\n inputPlaceHolderClass: \"uni-input-placeholder-class\" as string.ClassString ,\n inputMaxLengthValue: \"\",\n onMaxLengthInputValue: \"\",\n inputMaxLengthFocus: false,\n inputPasswordValue: \"cipher\",\n inputFocusKeyBoardChangeValue: true,\n holdKeyboard: false,\n keyboardHeight: 0,\n focusedForKeyboardHeightChangeTest: false,\n demoValue: '123'\n }\n },\n methods: {\n inputFocusKeyBoardChange(e : UniInputKeyboardHeightChangeEvent) {\n this.inputFocusKeyBoardChangeValue = e.detail.height > 50\n },\n onMaxLengthInput(event : UniInputEvent) {\n this.onMaxLengthInputValue = event.detail.value\n },\n setCursor: function (cursor : number) {\n (this.$refs['input'] as UniInputElement).focus();\n this.cursor = cursor;\n },\n onCursorBlurChange(){\n this.cursor = 0\n },\n setSelection: function (selectionStart : number, selectionEnd : number) {\n (this.$refs['input2'] as UniInputElement).focus();\n this.selectionStart = selectionStart;\n this.selectionEnd = selectionEnd;\n },\n onSelectionBlurChange(){\n this.selectionEnd = 0;\n },\n clearInput: function (event : UniInputEvent) {\n this.inputClearValue = event.detail.value\n if (event.detail.value.length > 0) {\n this.showClearIcon = true\n } else {\n this.showClearIcon = false\n }\n },\n clearIcon: function () {\n this.inputClearValue = ''\n this.showClearIcon = false\n },\n changePassword: function () {\n this.showPassword = !this.showPassword\n },\n onInput: function (event : UniInputEvent) {\n console.log(\"键盘输入\", JSON.stringify(event.detail));\n this.inputEventDetail = JSON.stringify(event.detail)\n },\n onFocus: function (event : UniInputFocusEvent) {\n console.log(\"输入框聚焦\", JSON.stringify(event.detail));\n this.focusAndBlurEventDetail = JSON.stringify(event.detail);\n },\n onBlur: function (event : UniInputBlurEvent) {\n console.log(\"输入框失去焦点\", JSON.stringify(event.detail));\n this.focusAndBlurEventDetail = JSON.stringify(event.detail);\n },\n onConfirm: function (event : UniInputConfirmEvent) {\n console.log(\"点击完成按钮\", JSON.stringify(event.detail));\n this.confirmEventDetail = JSON.stringify(event.detail);\n },\n onKeyborardHeightChange: function (event : UniInputKeyboardHeightChangeEvent) {\n console.log(\"键盘高度发生变化\", JSON.stringify(event.detail));\n this.keyboardHeightChangeEventDetail = JSON.stringify(event.detail);\n this.keyboardHeight = event.detail.height;\n },\n test_check_input_value() : number {\n return this.onMaxLengthInputValue.length\n },\n changeCursorColor(event : UniSwitchChangeEvent) {\n const checked = event.detail.value;\n if (checked) {\n this.cursor_color = \"red\"\n } else {\n this.cursor_color = \"#3393E2\"\n }\n const input = uni.getElementById(\"uni-input-cursor-color\")\n input?.focus()\n },\n changeHoldKeyboard(event : UniSwitchChangeEvent) {\n const checked = event.detail.value;\n this.holdKeyboard = checked\n }\n }\n }\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/input)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/input.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.input)\n","component_type":"### UniInputElement\ninput元素对象\n#### UniInputElement 的属性值\n| 名称 | 类型 | 必填 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | 是 | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| type | string | 是 | input的类型 |\n| disabled | boolean | 是 | 是否禁用 |\n| autofocus | boolean | 是 | 自动获取焦点 |\n| value | string | 是 | 输入框的初始内容 |"},"list-item":{"name":"## list-item","description":"> 组件类型：UniListItemElement \n\n list-view组件的唯一合法子组件。每个item是一行","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| type | number | 0 | | 对应list-item的类型 list-view 将对同类型条目进行复用，所以合理的类型拆分，可以很好地提升 list-view 性能 |","event":"","example":"","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.02 | 3.9 | 4.11 |\n","children":"","reference":""},"sticky-header":{"name":"## sticky-header","description":"> 组件类型：UniStickyHeaderElement \n\n 吸顶布局容器

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

注意：暂时仅支持作为list-view的子节点, sticky-section不支持css样式！","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>Template\n```vue\n\r\n\r\n\r\n\r\n\r\n\n```\n>Script\n```uts\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 }\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)\n listview.scrollTop = y\r\n },\r\n gotoStickyHeader(id : string) {\n // #ifdef APP\r\n this.scrollIntoView = id\n // #endif\n // #ifdef WEB\n console.log(\"web端不支持该功能\")\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 }\n }\r\n }\r\n }\r\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.02 | 3.98 | 4.11 |\n","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.sticky-section)\n"},"list-view":{"name":"## list-view","description":"> 组件类型：UniListViewElement \n\n 列表组件","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| direction | string | \"vertical\" | | 滚动方向，可取值 none、horizontal、vertical，默认值vertical。注：iOS 平台仅支持vertical |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| none | | 禁止滚动 |\n@| horizontal | | 横向滚动 |\n@| vertical | | 竖向滚动 |\n| ~~scroll-x~~ | boolean | false | | 允许横向滚动，不支持同时设置scroll-y属性为true，同时设置true时scroll-y生效。已废弃，请改用direction |\n| ~~scroll-y~~ | boolean | true | | 允许纵向滚动，不支持同时设置scroll-x属性为true，同时设置true时scroll-y生效。已废弃，请改用direction |\n| ~~rebound~~ | boolean | true | | 控制是否回弹效果。已废弃，请改用bounces |\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} |","event":"\n### 事件\n#### UniRefresherEvent\n\n##### UniRefresherEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniRefresherEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| dy | number | 是 | - | - | - |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniRefresherEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniScrollToUpperEvent\n\n##### UniScrollToUpperEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniScrollToUpperEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| direction | string | 是 | - | - | 滚动方向 top 或 left |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniScrollToUpperEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniScrollToLowerEvent\n\n##### UniScrollToLowerEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniScrollToLowerEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| direction | string | 是 | - | - | 滚动方向 bottom 或 right |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniScrollToLowerEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniScrollEvent\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| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniScrollEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/list-view/list-view.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/list-view/list-view\n>Template\n```vue\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'\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 // 在web端scroll事件event参数中detail类型报错，先条件编译处理\n // #ifndef WEB\n scrollDetailTest:null as UniScrollEventDetail|null,\n scrollEndDetailTest:null as UniScrollEventDetail|null,\n // #endif\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 // #ifndef WEB\n this.scrollDetailTest = e.detail\n // #endif\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 // #ifndef WEB\n this.scrollEndDetailTest = e.detail\n // #endif\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:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.02 | 3.9 | 4.11 |\n","children":"### 子组件 @children-tags \n - [list-item](#list-item)\n- [sticky-header](https://uniapp.dcloud.net.cn/uni-app-x/component/sticky.html#sticky-header)\n- [sticky-section](https://uniapp.dcloud.net.cn/uni-app-x/component/sticky.html#sticky-section)","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.list-view)\n"},"navigator":{"name":"## navigator","description":"> 组件类型：UniNavigatorElement \n\n 页面链接","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| target | string | - | | 在哪个目标上发生跳转，默认当前应用 |\n| url | string([string.PageURIString](/uts/data-type.md#ide-string)) | - | | 当前应用内的跳转链接 |\n| open-type | string | \"navigate\" | | 跳转方式 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| navigate | | 对应 uni.navigateTo 或 navigateToMiniProgram 的功能 |\n@| redirect | | 对应 uni.redirectTo 的功能 |\n@| switchTab | | 对应 uni.switchTab 的功能 |\n@| reLaunch | | 对应 uni.reLaunch 的功能 |\n@| navigateBack | | 对应 uni.navigateBack 的功能 |\n| delta | number | - | | 当 open-type 为 navigateBack 时有效，表示回退的层数 |\n| app-id | string | - | - | 当target=\"miniProgram\"时有效，要打开的小程序 appId |\n| path | string | - | | 当target=\"miniProgram\"时有效，打开的页面路径，如果为空则打开首页 |\n| extra-data | object | - | - | 当target=\"miniProgram\"时有效，需要传递给目标应用的数据，目标应用可在 App.onLaunch()，App.onShow() 中获取到这份数据 |\n| version | string | - | - | 当target=\"miniProgram\"时有效，要打开的小程序版本，有效值 develop（开发版），trial（体验版），release（正式版），仅在当前小程序为开发版或体验版时此参数有效；如果当前小程序是体验版或正式版，则打开的小程序必定是正式版 |\n| animation-type | string | \"pop-in/out\" | | 当 open-type=\"navigateTo\" 或 open-type=\"navigateBack\" 时有效，窗口的显示/关闭的动画类型。 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| auto | - | 自动选择动画效果 |\n@| none | - | 无动画效果 |\n@| slide-in-right | - | 从右侧横向滑动效果 |\n@| slide-in-left | - | 左侧横向滑动效果 |\n@| slide-in-top | - | 从上侧竖向滑动效果 |\n@| slide-in-bottom | - | 从下侧竖向滑动效果 |\n@| fade-in | - | 从透明到不透明逐渐显示效果 |\n@| zoom-out | - | 从小到大逐渐放大显示效果 |\n@| zoom-fade-out | - | 从小到大逐渐放大并且从透明到不透明逐渐显示效果 |\n@| pop-in | - | 从右侧平移入栈动画效果 |\n@| slide-out-right | - | 横向向右侧滑出屏幕动画 |\n@| slide-out-left | - | 横向向左侧滑出屏幕动画 |\n@| slide-out-top | - | 竖向向上侧滑出屏幕动画 |\n@| slide-out-bottom | - | 竖向向下侧滑出屏幕动画 |\n@| fade-out | - | 从不透明到透明逐渐隐藏动画 |\n@| zoom-in | - | 从大逐渐缩小关闭动画 |\n@| zoom-fade-in | - | 从大逐渐缩小并且从不透明到透明逐渐隐藏关闭动画 |\n@| pop-out | - | 从右侧平移出栈动画效果 |\n| animation-duration | number | 300 | | 当 open-type=\"navigateTo\" 或 open-type=\"navigateBack\" 时有效，窗口的显示/关闭动画的持续时间。 |\n| hover-class | string | - | - | 指定按下去的样式类。当 hover-class=\"none\" 时，没有点击态效果 |\n| hover-stop-propagation | boolean | - | - | 指定是否阻止本节点的祖先节点出现点击态 |\n| hover-start-time | number | - | - | 按住后多久出现点击态，单位毫秒 |\n| hover-stay-time | number | - | - | 手指松开后点击态保留时间，单位毫秒 |\n| render-link | boolean | true | | 是否给 navigator 组件加一层 a 标签控制 ssr 渲染 |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/navigator/navigator.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/navigator/navigator\n>Template\n```vue\n\n\n\n\n\n\n```\n>Script\n```uts\n\n export default {\n data() {\n return {\n title: 'navigator'\n }\n }\n }\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/navigator)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/navigator.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.navigator)\n"},"picker-view-column":{"name":"## picker-view-column","description":"仅可放置于 picker-view 中，其子节点未继承 picker-view 的选中框的高度，需要自己设置高度并居中","attribute":"","event":"","example":"","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.net.cn/component/picker-view.html#picker-view-column)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/picker-view.html)\n"},"picker-view":{"name":"## picker-view","description":"> 组件类型：UniPickerViewElement \n\n 嵌入页面的滚动选择器","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| value | array\\ | - | | picker-view-column 选择的第几项 |\n| indicator-style | string([string.CSSString](/uts/data-type.md#ide-string)) | - | | 设置选择器中间选中框的样式 |\n| indicator-class | string([string.ClassString](/uts/data-type.md#ide-string)) | - | | 设置选择器中间选中框的类名 |\n| mask-style | string([string.CSSString](/uts/data-type.md#ide-string)) | - | | 设置蒙层的样式 |\n| mask-top-style | string([string.CSSString](/uts/data-type.md#ide-string)) | - | | 设置蒙层上半部分的样式 |\n| mask-bottom-style | string([string.CSSString](/uts/data-type.md#ide-string)) | - | | 设置蒙层下半部分的样式 |\n| mask-class | string([string.ClassString](/uts/data-type.md#ide-string)) | - | | 设置蒙层的类名 |\n| @change | (event: [UniPickerViewChangeEvent](#unipickerviewchangeevent)) => void | - | | 当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0
\t\t开始） |","event":"\n### 事件\n#### UniPickerViewChangeEvent\n\n##### UniPickerViewChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniPickerViewChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | Array\\ | 是 | - | - | - |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniPickerViewChangeEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/picker-view/picker-view.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/picker-view/picker-view\n>Template\n```vue\n\r\n\r\n\r\n\r\n\n\n```\n>Script\n```uts\n\n import { state, setEventCallbackNum } from '@/store/index.uts'\r\n export default {\r\n data() {\r\n const date = new Date()\r\n const _years : number[] = []\r\n const _year = date.getFullYear()\r\n const _months : number[] = []\r\n const _month : number = date.getMonth() + 1\r\n const _days : number[] = []\r\n const _day = date.getDate()\r\n for (let i = 2000; i <= _year; i++) {\r\n _years.push(i)\r\n }\r\n for (let i = 1; i <= 12; i++) {\r\n _months.push(i)\r\n }\r\n for (let i = 1; i <= 31; i++) {\r\n _days.push(i)\r\n }\r\n return {\r\n title: 'picker-view',\r\n years: _years as number[],\r\n year: _year as number,\r\n months: _months as number[],\r\n month: _month as number,\r\n days: _days as number[],\r\n day: _day as number,\r\n value: [_year - 2000, _month - 1, _day - 1] as number[],\r\n result: [] as number[],\r\n indicatorStyle: 'height: 50px;',\r\n maskTopStyle: '',\r\n maskBottomStyle: ''\r\n }\r\n },\r\n methods: {\n // 自动化测试\n getEventCallbackNum() : number {\n return state.eventCallbackNum\n },\n // 自动化测试\n setEventCallbackNum(num : number) {\n setEventCallbackNum(num)\n },\r\n bindChange(e : UniPickerViewChangeEvent) {\n // 自动化测试\n console.log(e.target?.tagName,e.type);\n if ((e.target?.tagName ?? '').includes('PICKER-VIEW')) {\n this.setEventCallbackNum(state.eventCallbackNum + 1)\n }\n if (e.type === 'change') {\n this.setEventCallbackNum(state.eventCallbackNum + 2)\n }\n\r\n const val = e.detail.value\r\n this.result = val\r\n this.year = this.years[val[0]]\r\n this.month = this.months[val[1]]\r\n this.day = this.days[val[2]]\r\n },\r\n setValue() {\r\n this.value = [0, 0, 0] as number[]\r\n },\r\n setValue1() {\r\n this.value = [10, 10, 10] as number[]\r\n },\r\n }\r\n }\r\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"### 子组件 @children-tags \n - [picker-view-column](#picker-view-column)","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/picker-view)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/picker-view.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.picker-view)\n"},"progress":{"name":"## progress","description":"> 组件类型：UniProgressElement \n\n 进度条","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| duration | number | 30 | | 进度增加1%所需毫秒数 |\n| percent | number | 0 | | 百分比0~100 |\n| show-info | boolean | false | | 在进度条右侧显示百分比 |\n| border-radius | number | 0 | | 圆角大小 |\n| font-size | number | 16 | | 右侧百分比字体大小 |\n| stroke-width | number | 6 | | 进度条线的宽度，单位px |\n| activeColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#09BB07\" | | 已选择的进度条的颜色 |\n| backgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#EBEBEB\" | | 未选择的进度条的颜色 |\n| active | boolean | false | | 进度条从左往右的动画 |\n| active-mode | string | \"backwards\" | | backwards: 动画从头播；forwards：动画从上次结束点接着播 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| backwards | | 动画从头播 |\n@| forwards | | 动画从上次结束点接着播 |\n| @activeend | (event: [UniProgressActiveendEvent](#uniprogressactiveendevent)) => void | - | | 动画完成事件 |","event":"\n### 事件\n#### UniProgressActiveendEvent\n\n##### UniProgressActiveendEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniProgressActiveendEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| curPercent | number | 是 | - | - | - |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniProgressActiveendEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/progress/progress.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/progress/progress\n>Template\n```vue\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'\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:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/progress)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/progress.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.progress)\n"},"radio":{"name":"## radio","description":"> 组件类型：UniRadioElement \n\n 单选项。在1组radio-group中只能选中1个","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| disabled | boolean | false | | 是否禁用 |\n| value | string | - | | \\ 标识。当该radio 选中时，radio-group的 change 事件会携带radio的value |\n| checked | boolean | false | | \\ 当前是否选中 |\n| color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007AFF\" | | radio的颜色 |\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| ~~iconColor~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | | radio的图标颜色 |\n| foreColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | | radio的图标颜色 |","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>Template\n```vue\n\r\n\r\n\r\n\r\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:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/radio)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/radio-group.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.radio)\n"},"radio-group":{"name":"## radio-group","description":"> 组件类型：UniRadioGroupElement \n\n 单选组，内部由多个 radio 组成","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##### UniRadioGroupChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniRadioGroupChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | - |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniRadioGroupChangeEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n","example":"","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"### 子组件 @children-tags \n - [radio](#radio)","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/radio)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/radio-group.html)\n"},"form":{"name":"## form","description":"> 组件类型：UniFormElement \n\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 事件 |","event":"\n### 事件\n#### UniFormSubmitEvent\n\n##### UniFormSubmitEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniFormSubmitEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | [UTSJSONObject](/uts/buildin-object-api/utsjsonobject.md) | 是 | - | - | - |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniFormSubmitEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniFormResetEvent\n\n##### UniFormResetEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | UniFormResetEventDetail | 是 | - | - | - |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniFormResetEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/form/form.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/form/form\n>Template\n```vue\n\n\n\n\n\n\n```\n>Script\n```uts\n\n export default {\n data() {\n return {\n nickname: '',\n gender: '0',\n age: 18,\n loves: ['0'],\n switch: true,\n comment:'',\n formData: {} as UTSJSONObject\n }\n },\n computed: {\n formDataText() : string {\n return JSON.stringify(this.formData)\n }\n },\n methods: {\n onFormSubmit: function (e : UniFormSubmitEvent) {\n this.formData = e.detail.value\n },\n onFormReset: function (_ : UniFormResetEvent) {\n this.formData = {}\n }\n }\n }\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.97 | 4.11 |\n","children":"","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/form)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/form.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form)\n"},"rich-text":{"name":"## rich-text","description":"> 组件类型：UniRichTextElement \n\n 富文本。可渲染文字样式、图片、超链接。支持部分HTML标签","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={ ref \\| src \\| href } |","event":"\n### 事件\n#### UniRichTextItemClickEvent\n\n##### UniRichTextItemClickEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniRichTextItemClickEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| ref | string \\| null | 否 | - | - | 自定义数据 |\n@| src | string \\| null | 否 | - | - | \\图片链接 |\n@| href | string \\| null | 否 | - | - | \\超链接 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniRichTextItemClickEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/rich-text/rich-text.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/rich-text/rich-text\n>Template\n```vue\n\n\n\n\n\n\n```\n>Script\n```uts\n\n\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/rich-text)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/rich-text.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.rich-text)\n"},"scroll-view":{"name":"## scroll-view","description":"> 组件类型：UniScrollViewElement \n\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| ~~scroll-x~~ | boolean | false | | 允许横向滚动，不支持同时设置scroll-y属性为true，同时设置true时scroll-y生效。已废弃，请改用direction |\n| ~~scroll-y~~ | boolean | true | | 允许纵向滚动，不支持同时设置scroll-x属性为true，同时设置true时scroll-y生效。已废弃，请改用direction |\n| ~~rebound~~ | boolean | true | | 控制是否回弹效果。已废弃，请改用bounces |\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 | - | | 子元素滚动结束或意外终止时触发 |","event":"\n### 事件\n#### UniRefresherEvent\n\n##### UniRefresherEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniRefresherEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| dy | number | 是 | - | - | - |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniRefresherEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniScrollToUpperEvent\n\n##### UniScrollToUpperEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniScrollToUpperEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| direction | string | 是 | - | - | 滚动方向 top 或 left |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniScrollToUpperEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniScrollToLowerEvent\n\n##### UniScrollToLowerEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniScrollToLowerEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| direction | string | 是 | - | - | 滚动方向 bottom 或 right |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniScrollToLowerEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniScrollEvent\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| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniScrollEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniStartNestedScrollEvent\n\n##### UniStartNestedScrollEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| node | [UniElement](/dom/unielement.md) | 是 | - | | 开始滚动子节点对象 |\n| isTouch | boolean | 是 | - | | 是否由触摸行为发生的Event |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniStartNestedScrollEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniNestedPreScrollEvent\n\n##### UniNestedPreScrollEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| deltaX | number | 是 | - | - | x轴滚动距离 |\n| deltaY | number | 是 | - | - | y轴滚动距离 |\n| isTouch | boolean | 是 | - | | 是否由触摸行为发生的Event |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniNestedPreScrollEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| consumed | (consumedX: number, consumedY: number) => void | 是 | - | - | 通知到子节点x,y轴滚动距离的消耗 |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniStopNestedScrollEvent\n\n##### UniStopNestedScrollEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| isTouch | boolean | 是 | - | - | 是否由触摸行为发生的Event |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniStopNestedScrollEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/scroll-view/scroll-view.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/scroll-view/scroll-view\n>Template\n```vue\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 export default {\n data() {\n return {\n scrollTop: 0,\n oldScrollTop: 0,\n scrollLeft:120,\n showScrollbar: true,\n // 自动化测试\n isScrollTest:'',\n isScrolltolowerTest:'',\n isScrolltoupperTest:'',\n // 在web端scroll事件event参数中detail类型报错，先条件编译处理\n // #ifndef WEB\n scrollDetailTest:null as UniScrollEventDetail|null,\n scrollEndDetailTest:null as UniScrollEventDetail|null,\n // #endif\n }\n },\n methods: {\n upper: function (e : UniScrollToUpperEvent) {\n console.log('滚动到顶部/左边',e)\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 lower: function (e : UniScrollToLowerEvent) {\n console.log('滚动到底部/右边',e)\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 scroll: function (e : UniScrollEvent) {\n // #ifndef WEB\n this.scrollDetailTest = e.detail\n // #endif\n this.checkEventTest({\n type:e.type,\n target:e.target,\n currentTarget:e.currentTarget\n } as ScrollEventTest,'scroll')\n this.oldScrollTop = e.detail.scrollTop\n },\n end: function (e : UniScrollEvent){\n console.log('滚动结束时触发',e)\n // #ifndef WEB\n this.scrollEndDetailTest = e.detail\n // #endif\n this.checkEventTest({\n type:e.type,\n target:e.target,\n currentTarget:e.currentTarget\n } as ScrollEventTest,'scrollend')\n },\n goTop: function () {\n // 解决view层不同步的问题\n this.scrollTop = this.oldScrollTop\n this.$nextTick(function () {\n this.scrollTop = 0\n })\n uni.showToast({\n icon: 'none',\n title: '纵向滚动 scrollTop 值已被修改为 0',\n })\n },\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 }\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/scroll-view)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/scroll-view.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.scroll-view)\n"},"slider":{"name":"## slider","description":"> 组件类型：UniSliderElement \n\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| ~~activeColor~~ | 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| ~~block-color~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | | 滑块颜色 |\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} |","event":"\n### 事件\n#### UniSliderChangeEvent\n\n##### UniSliderChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniSliderChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | number | 是 | - | - | - |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniSliderChangeEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/slider/slider.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/slider/slider\n>Template\n```vue\n\n\n\n\n\n\n```\n>Script\n```uts\n\n export default {\n data() {\n return {\n sliderValue: 50,\n sliderBlockSize: 20,\n sliderBackgroundColor: \"#000000\",\n sliderActiveColor: \"#FFCC33\",\n sliderBlockColor: \"#8A6DE9\",\n // 组件属性 autotest\n show_value_boolean: false,\n disabled_boolean: false,\n min_input: 0,\n max_input: 100,\n step_input: 1,\n value_input: 0,\n activeColor_input: \"#007aff\",\n backgroundColor_input: \"#e9e9e9\",\n block_size_input: 28,\n block_color_input: \"#ffffff\",\n };\n },\n methods: {\n sliderChange(e : UniSliderChangeEvent) {\n console.log(\"value 发生变化：\" + e.detail.value);\n },\n slider_click() {\n console.log(\"组件被点击时触发\");\n },\n slider_touchstart() {\n console.log(\"手指触摸动作开始\");\n },\n slider_touchmove() {\n console.log(\"手指触摸后移动\");\n },\n slider_touchcancel() {\n console.log(\"手指触摸动作被打断，如来电提醒，弹窗\");\n },\n slider_touchend() {\n console.log(\"手指触摸动作结束\");\n },\n slider_tap() {\n console.log(\"手指触摸后马上离开\");\n },\n slider_longpress() {\n console.log(\n \"如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。\"\n );\n },\n slider_change() {\n console.log(\"完成一次拖动后触发的事件，event.detail = {value: value}\");\n },\n slider_changing() {\n console.log(\"拖动过程中触发的事件，event.detail = {value: value}\");\n },\n change_show_value_boolean(checked : boolean) {\n this.show_value_boolean = checked;\n },\n change_disabled_boolean(checked : boolean) {\n this.disabled_boolean = checked;\n },\n confirm_min_input(value : number) {\n this.min_input = value;\n },\n confirm_max_input(value : number) {\n this.max_input = value;\n },\n confirm_step_input(value : number) {\n this.step_input = value;\n },\n confirm_value_input(value : number) {\n this.value_input = value;\n },\n confirm_activeColor_input(value : string) {\n this.activeColor_input = value;\n },\n confirm_backgroundColor_input(value : string) {\n this.backgroundColor_input = value;\n },\n confirm_block_size_input(value : number) {\n this.block_size_input = value;\n },\n confirm_block_color_input(value : string) {\n this.block_color_input = value;\n },\n },\n };\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/slider)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/slider.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.slider)\n"},"swiper-item":{"name":"## swiper-item","description":"> 组件类型：UniSwiperItemElement \n\n swiper的唯一合法子组件。每个swiper-item代表一个滑块。宽高自动设置为100%","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| item-id | string | - | | 该 swiper-item 的标识符 |","event":"","example":"","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.net.cn/component/swiper.html#swiper-item)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/swiper.html)\n"},"swiper":{"name":"## swiper","description":"> 组件类型：UniSwiperElement \n\n 滑块视图容器","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| indicator-dots | boolean | false | | 是否显示面板指示点 |\n| indicator-color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"rgba(0, 0, 0, .3)\" | | 指示点颜色 |\n| indicator-active-color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#000000\" | | 当前选中的指示点颜色 |\n| disable-touch | boolean | false | | 是否禁止用户 touch 操作 |\n| autoplay | boolean | false | | 是否自动切换 |\n| current | number | 0 | | 当前所在滑块的 index |\n| current-item-id | string | - | | 当前所在滑块的 item-id ，不能与 current 被同时指定 |\n| interval | number | 3000 | | 自动切换时间间隔 |\n| duration | number | - | | 滑动动画时长 |\n| circular | boolean | false | | 是否采用衔接滑动 |\n| vertical | boolean | false | | 滑动方向是否为纵向 |\n| rebound | boolean | true | | 控制是否回弹效果 |\n| @change | (event: [UniSwiperChangeEvent](#uniswiperchangeevent)) => void | - | | current 改变时会触发 change 事件，event.detail = {current: current, source: source} |\n| @transition | (event: [UniSwiperTransitionEvent](#uniswipertransitionevent)) => void | - | | swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy} |\n| @animationfinish | (event: [UniSwiperAnimationFinishEvent](#uniswiperanimationfinishevent)) => void | - | | 动画结束时会触发 animationfinish 事件，event.detail = {current: current, source: source} |","event":"\n### 事件\n#### UniSwiperChangeEvent\n\n##### 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| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniSwiperChangeEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniSwiperTransitionEvent\n\n##### UniSwiperTransitionEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniSwiperTransitionEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| dx | number | 是 | - | - | 横向偏移量，单位是逻辑像素px |\n@| dy | number | 是 | - | - | 纵向偏移量，单位是逻辑像素px |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniSwiperTransitionEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniSwiperAnimationFinishEvent\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| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniSwiperAnimationFinishEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/swiper/swiper.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/swiper/swiper\n>Template\n```vue\n\r\n\r\n\r\n\r\n\n\n```\n>Script\n```uts\n\n type SwiperEventTest = {\n type: string;\n target: UniElement | null;\n currentTarget: UniElement | null;\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,\n // 自动化测试\n changeDetailTest:null as UniSwiperChangeEventDetail | null,\n transitionDetailTest:null as UniSwiperTransitionEventDetail | null,\n animationfinishDetailTest:null as UniSwiperAnimationFinishEventDetail | null,\n isChangeTest:'',\n isTransitionTest:'',\n isAnimationfinishTest:''\n }\r\n },\n methods: {\r\n swiperChange: function (e : UniSwiperChangeEvent) {\n this.changeDetailTest = e.detail\n this.checkEventTest({\n type:e.type,\n target:e.target,\n currentTarget:e.currentTarget\n } as SwiperEventTest,'change')\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) {\n this.transitionDetailTest = e.detail\n this.checkEventTest({\n type:e.type,\n target:e.target,\n currentTarget:e.currentTarget\n } as SwiperEventTest,'transition')\n if (this.swiperTransitionSelect) {\r\n console.log(\"swiperTransition\")\r\n console.log(e)\r\n }\r\n },\r\n swiperAnimationfinish: function (e : UniSwiperAnimationFinishEvent) {\n this.animationfinishDetailTest = e.detail\n this.checkEventTest({\n type:e.type,\n target:e.target,\n currentTarget:e.currentTarget\n } as SwiperEventTest,'animationfinish')\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获取）\n checkEventTest(e:SwiperEventTest, 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 'change':\n this.isChangeTest = result\n break;\n case 'transition':\n this.isTransitionTest = result\n break;\n case 'animationfinish':\n this.isAnimationfinishTest = result\n break;\n default:\n break;\n }\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) {\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:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"### 子组件 @children-tags \n - [swiper-item](#swiper-item)","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/swiper)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/swiper.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.swiper)\n"},"switch":{"name":"## switch","description":"> 组件类型：UniSwitchElement \n\n 开关选择器","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | - | | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| checked | boolean | - | | 是否选中 |\n| type | string | - | | 样式，有效值：switch, checkbox |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| switch | | - |\n@| checkbox | | - |\n| ~~color~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | - | | switch 的颜色，同 css 的 color |\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} |","event":"\n### 事件\n#### UniSwitchChangeEvent\n\n##### UniSwitchChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniSwitchChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | boolean | 是 | - | - | - |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniSwitchChangeEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/switch/switch.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/switch/switch\n>Template\n```vue\n\n\n\n\n\n\n```\n>Script\n```uts\n\n export default {\n data() {\n return {\n title: 'switch 开关',\n checked: true,\n color: '#FFCC33',\n clickCheckedValue: true\n }\n },\n methods: {\n switch1Change: function (e : UniSwitchChangeEvent) {\n this.clickCheckedValue = e.detail.value\n console.log('switch1 发生 change 事件，携带值为', e.detail.value)\n },\n switch2Change: function (e : UniSwitchChangeEvent) {\n console.log('switch2 发生 change 事件，携带值为', e.detail.value)\n }\n }\n }\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/switch)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/switch.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.switch)\n"},"text":{"name":"## text","description":"> 组件类型：[UniTextElement](#unitextelement) \n\n 文本","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| selectable | boolean | false | | 文本是否可选 |\n| space | string | - | | 显示连续空格 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| ensp | | 中文字符空格一半大小 |\n@| emsp | | 中文字符空格大小 |\n@| nbsp | | 根据字体设置的空格大小 |\n| decode | boolean | false | | 是否解码 (app平台如需解析字符实体，需要配置为 true) |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/text/text.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/text/text\n>Template\n```vue\n\n\r\n\r\n\r\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:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"### 子组件 @children-tags \n - [text](#text)","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/text)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/text.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.text)\n","component_type":"### UniTextElement\ntext元素对象\n#### UniTextElement 的属性值\n| 名称 | 类型 | 必填 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| value | string | 是 | 只读属性 text元素的文案内容 |\n#### UniTextElement 的方法\n##### getTextExtra() @gettextextra\n\n\n###### 返回值 \n\n| 类型 | 必备 |\n| :- | :- |\n| any \\| null | 否 |\n \n\n###### getTextExtra 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 4.0 | 4.11 |\n\n"},"textarea":{"name":"## textarea","description":"> 组件类型：[UniTextareaElement](#unitextareaelement) \n\n 多行输入框","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | - | | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| value | string | \"\" | | 输入框的初始内容 |\n| placeholder | string | \"\" | | 输入框为空时占位符 |\n| placeholder-style | string | \"\" | | 指定 placeholder 的样式 |\n| placeholder-class | string([string.ClassString](/uts/data-type.md#ide-string)) | \"\" | | 指定 placeholder 的样式类，目前仅支持color,font-size和font-weight |\n| maxlength | number | \"不限制长度\" | | 最大输入长度，0和正数为合法值，非法值的时候不限制最大长度 |\n| auto-focus | boolean | false | | 自动获取焦点，与`focus`属性对比，此属性只会首次生效。 |\n| focus | boolean | false | | 获取焦点 |\n| confirm-type | return \\| send \\| search \\| next \\| go \\| done | \"return\" | | 设置键盘右下角按钮的文字 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| return | | 换行 |\n@| send | | 发送 |\n@| search | | 搜索 |\n@| next | | 下一个 |\n@| go | | 前往 |\n@| done | | 完成 |\n| cursor | number | 0 | | 指定focus时的光标位置 |\n| confirm-hold | boolean | false | | 点击键盘右下角按钮时是否保持键盘不收起 |\n| auto-height | boolean | false | | 是否自动增高，设置auto-height时，style.height不生效 |\n| cursor-spacing | number | 0 | | 指定光标与键盘的距离，单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 |\n| cursor-color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"\" | | 指定光标颜色 |\n| selection-start | number | -1 | | 光标起始位置，自动聚集时有效，需与selection-end搭配使用 |\n| selection-end | number | -1 | | 光标结束位置，自动聚集时有效，需与selection-satrt搭配使用 |\n| adjust-position | boolean | true | | 键盘弹起时，是否自动上推页面 |\n| hold-keyboard | boolean | false | | focus时，点击页面的时候不收起键盘 |\n| @confirm | (event: [UniInputConfirmEvent](#uniinputconfirmevent)) => void | - | | 点击完成时， 触发 confirm 事件，event.detail = {value: value} |\n| @input | (event: [UniInputEvent](#uniinputevent)) => void | - | | 当键盘输入时，触发 input 事件，event.detail = {value, cursor}， @input 处理函数的返回值并不会反映到 textarea 上 |\n| @linechange | (event: [UniTextareaLineChangeEvent](#unitextarealinechangeevent)) => void | - | | 输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0} |\n| @blur | (event: [UniTextareaBlurEvent](#unitextareablurevent)) => void | - | | 输入框失去焦点时触发，event.detail = {value, cursor} |\n| @keyboardheightchange | (event: [UniInputKeyboardHeightChangeEvent](#uniinputkeyboardheightchangeevent)) => void | - | | 键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration} |\n| @focus | (event: [UniTextareaFocusEvent](#unitextareafocusevent)) => void | - | | 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度，在基础库 1.9.90 起支持 |","event":"\n### 事件\n#### UniInputConfirmEvent\n\n##### UniInputConfirmEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputConfirmEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | 输入框内容 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniInputConfirmEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniInputEvent\n\n##### UniInputEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | 输入框内容 |\n@| cursor | number | 是 | - | - | 光标的位置 |\n@| keyCode | number | 是 | - | - | 输入字符的Unicode值 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniInputEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniTextareaLineChangeEvent\n\n##### UniTextareaLineChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniTextareaLineChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| lineCount | number | 是 | - | - | 行数 |\n@| heightRpx | number | 是 | - | - | textarea的高度 |\n@| height | number | 是 | - | - | textarea的高度 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniTextareaLineChangeEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniTextareaBlurEvent\n\n##### UniTextareaBlurEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniTextareaBlurEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | 输入框内容 |\n@| cursor | number | 是 | - | - | 选择区域的起始位置 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniTextareaBlurEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniInputKeyboardHeightChangeEvent\n\n##### UniInputKeyboardHeightChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputKeyboardHeightChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| height | number | 是 | - | - | 键盘高度 |\n@| duration | number | 是 | - | - | 持续时间 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniInputKeyboardHeightChangeEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniTextareaFocusEvent\n\n##### UniTextareaFocusEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniTextareaFocusEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| height | number | 是 | - | | 键盘高度 |\n@| value | string | 是 | - | - | 输入框内容 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniTextareaFocusEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/textarea/textarea.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/textarea/textarea\n>Template\n```vue\n\n\n\n\n\n\n```\n>Script\n```uts\n\nimport { ItemType } from '@/components/enum-data/enum-data'\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tadjust_position_boolean: false,\n\t\t\tshow_confirm_bar_boolean: false,\n\t\t\tfixed_boolean: false,\n\t\t\tauto_height_boolean: false,\n\t\t\tconfirm_hold_boolean: false,\n\t\t\tfocus_boolean: true,\n\t\t\tauto_focus_boolean: false,\n default_value:\"1\\n2\\n3\\n4\\n5\\n6\",\n maxlength:-1,\n\t\t\tinputmode_enum: [{\"value\":1,\"name\":\"text\"},{\"value\":2,\"name\":\"decimal\"},{\"value\":3,\"name\":\"numeric\"},{\"value\":4,\"name\":\"tel\"},{\"value\":5,\"name\":\"search\"},{\"value\":6,\"name\":\"email\"},{\"value\":7,\"name\":\"url\"},{\"value\":0,\"name\":\"none\"}] as ItemType[],\n confirm_type_list: [{\"value\":0,\"name\":\"return\"},{\"value\":1,\"name\":\"done\"},{\"value\":2,\"name\":\"send\"},{\"value\":3,\"name\":\"search\"},{\"value\":4,\"name\":\"next\"},{\"value\":5,\"name\":\"go\"}] as ItemType[],\n cursor_color: \"#3393E2\",\n cursor: 0,\n\t\t\tinputmode_enum_current: 0,\n confirm_type_current: 0,\n placeholder_value: \"请输入\",\n defaultModel:'123'\n\t\t}\n\t},\n\n\tmethods: {\n\t\ttextarea_click() { console.log(\"组件被点击时触发\") },\n\t\ttextarea_touchstart() { console.log(\"手指触摸动作开始\") },\n\t\ttextarea_touchmove() { console.log(\"手指触摸后移动\") },\n\t\ttextarea_touchcancel() { console.log(\"手指触摸动作被打断，如来电提醒，弹窗\") },\n\t\ttextarea_touchend() { console.log(\"手指触摸动作结束\") },\n\t\ttextarea_tap() { console.log(\"手指触摸后马上离开\") },\n\t\ttextarea_longpress() { console.log(\"如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。\") },\n\t\ttextarea_confirm() { console.log(\"点击完成时， 触发 confirm 事件，event.detail = {value: value}\") },\n\t\ttextarea_input() { console.log(\"当键盘输入时，触发 input 事件，event.detail = {value, cursor}， @input 处理函数的返回值并不会反映到 textarea 上\") },\n\t\ttextarea_linechange() { console.log(\"输入框行数变化时调用，event.detail = {height: 0, height: 0, lineCount: 0}\") },\n\t\ttextarea_blur() { console.log(\"输入框失去焦点时触发，event.detail = {value, cursor}\") },\n\t\ttextarea_keyboardheightchange() { console.log(\"键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration}\") },\n\t\ttextarea_focus() { console.log(\"输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度\") },\n\t\tchange_adjust_position_boolean(checked : boolean) { this.adjust_position_boolean = checked },\n\t\tchange_show_confirm_bar_boolean(checked : boolean) { this.show_confirm_bar_boolean = checked },\n\t\tchange_fixed_boolean(checked : boolean) { this.fixed_boolean = checked },\n\t\tchange_auto_height_boolean(checked : boolean) { this.auto_height_boolean = checked },\n\t\tchange_confirm_hold_boolean(checked : boolean) { this.confirm_hold_boolean = checked },\n\t\tchange_focus_boolean(checked : boolean) { this.focus_boolean = checked },\n\t\tchange_auto_focus_boolean(checked : boolean) { this.auto_focus_boolean = checked },\n change_cursor_color_boolean(checked : boolean) { if(checked){ this.cursor_color = \"transparent\"} else {this.cursor_color = \"#3393E2\"}},\n\t\tradio_change_inputmode_enum(checked : number) { this.inputmode_enum_current = checked },\n radio_change_confirm_type(checked : number) { this.confirm_type_current = checked }\n\t}\n}\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/textarea)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/textarea.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.textarea)\n","component_type":"### UniTextareaElement\ntextarea元素对象\n#### UniTextareaElement 的属性值\n| 名称 | 类型 | 必填 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | 是 | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| type | string | 是 | input的类型 |\n| disabled | boolean | 是 | 是否禁用 |\n| autofocus | boolean | 是 | 自动获取焦点 |\n| value | string | 是 | 输入框的初始内容 |"},"video":{"name":"## video","description":"> 组件类型：[UniVideoElement](#univideoelement) \n\n 视频","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| loop | boolean | false | | 是否循环播放 |\n| src | string([string.VideoURIString](/uts/data-type.md#ide-string)) | - | | 视频资源地址 |\n| initial-time | number | 0 | | 指定视频初始播放位置 |\n| duration | number | - | | 指定视频长度 |\n| controls | boolean | true | | 是否显示默认播放控件（播放/暂停按钮、播放进度、时间） |\n| danmu-list | array | - | | 弹幕列表 |\n| danmu-btn | boolean | false | | 是否显示弹幕按钮，只在初始化时有效，不能动态变更 |\n| enable-danmu | boolean | false | | 是否展示弹幕，只在初始化时有效，不能动态变更 |\n| autoplay | boolean | false | | 是否自动播放 |\n| muted | boolean | false | | 是否静音播放 |\n| page-gesture | boolean | false | | 在非全屏模式下，是否开启亮度与音量调节手势 |\n| direction | number | - | | 设置全屏时视频的方向，不指定则根据宽高比自动判断。有效值为 0（正常竖向）, 90（屏幕逆时针90度）, -90（屏幕顺时针90度） |\n| show-progress | boolean | true | | 若不设置，宽度大于240时才会显示 |\n| show-fullscreen-btn | boolean | true | | 是否显示全屏按钮 |\n| show-play-btn | boolean | true | | 是否显示视频底部控制栏的播放按钮 |\n| show-center-play-btn | boolean | true | | 是否显示视频中间的播放按钮 |\n| show-loading | boolean | true | | 是否显示loading控件 |\n| enable-progress-gesture | boolean | true | | 是否开启控制进度的手势 |\n| objectFit | string | \"contain\" | | 当视频大小与 video 容器大小不一致时，视频的表现形式。 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| contain | | 包含 |\n@| fill | | 填充 |\n@| cover | | 覆盖 |\n| poster | string | - | | 视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效 |\n| show-mute-btn | boolean | false | | 是否显示静音按钮 |\n| title | string | - | | 视频的标题，全屏时在顶部展示 |\n| play-btn-position | string | - | | 播放按钮的位置 |\n| enable-play-gesture | boolean | false | | 是否开启播放手势，即双击切换播放、暂停 |\n| auto-pause-if-navigate | boolean | - | | 当跳转到其它页面时，是否自动暂停本页面的视频 |\n| auto-pause-if-open-native | boolean | - | | 当跳转到其它小程序宿主原生页面时，是否自动暂停本页面的视频 |\n| vslide-gesture | boolean | false | | 在非全屏模式下，是否开启亮度与音量调节手势（同 page-gesture） |\n| vslide-gesture-in-fullscreen | boolean | true | | 在全屏模式下，是否开启亮度与音量调节手势 |\n| poster-for-crawler | string | - | | 用于给搜索等场景作为视频封面展示，建议使用无播放 icon 的视频封面图，只支持网络地址 |\n| codec | string | \"hardware\" | | 解码器选择 |\n| http-cache | boolean | false | | 是否对 http、https 视频源开启本地缓存 |\n| play-strategy | number | 0 | | 播放策略 |\n| is-live | boolean | - | | 是否为直播源 |\n| @loadedmetadata | (event: [UniVideoLoadedMetadataEvent](#univideoloadedmetadataevent)) => void | - | | 视频元数据加载完成时触发 |\n| @play | (event: [UniEvent](/component/common#unievent)) => void | - | | 当开始/继续播放时触发 |\n| @pause | (event: [UniEvent](/component/common#unievent)) => void | - | | 当暂停播放时触发 |\n| @ended | (event: [UniEvent](/component/common#unievent)) => void | - | | 当播放到视频末尾时触发 |\n| @timeupdate | (event: [UniVideoTimeUpdateEvent](#univideotimeupdateevent)) => void | - | | 播放进度变化时触发，event.detail = { currentTime, duration }。触发频率 250ms 一次 |\n| @fullscreenchange | (event: [UniVideoFullScreenChangeEvent](#univideofullscreenchangeevent)) => void | - | | 当视频进入和退出全屏时触发，event.detail = { fullScreen, direction }，direction取为 vertical 或 horizontal |\n| @waiting | (event: [UniEvent](/component/common#unievent)) => void | - | | 视频出现缓冲时触发 |\n| @error | (event: [UniVideoErrorEvent](#univideoerrorevent)) => void | - | | 播放出错时触发 |\n| @progress | (event: [UniVideoProgressEvent](#univideoprogressevent)) => void | - | | 加载进度变化时触发，只支持一段加载。event.detail = { buffered }，百分比 |\n| @fullscreenclick | (event: [UniVideoFullScreenClickEvent](#univideofullscreenclickevent)) => void | - | | 视频全屏播放时点击屏幕触发。event.detail = { screenX, screenY, screenWidth, screenHeight } |\n| @controlstoggle | (event: [UniVideoControlsToggleEvent](#univideocontrolstoggleevent)) => void | - | | 切换 controls 显示隐藏时触发。event.detail = { show } |","event":"\n### 事件\n#### UniVideoTimeUpdateEvent\ntimeupdate 事件
播放进度变化时触发\n##### UniVideoTimeUpdateEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniVideoTimeUpdateEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| currentTime | number | 是 | - | - | 当前进度 |\n@| duration | number | 是 | - | - | 总进度 |\n| type | string | 是 | - | - | - |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | Long | 是 | - | - | - |\n\n\n#### UniVideoFullScreenChangeEvent\nfullscreenchange 事件
当视频进入和退出全屏是触发\n##### UniVideoFullScreenChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniVideoFullScreenChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| fullScreen | boolean | 是 | - | - | 是否全屏 |\n@| direction | string | 是 | - | - | 横竖屏，取值 vertical 或 horizontal |\n| type | string | 是 | - | - | - |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | Long | 是 | - | - | - |\n\n\n#### UniVideoErrorEvent\nerror 事件
视频播放出错时触发\n##### UniVideoErrorEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **VideoError** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| errCode | 100001 \\| 200001 \\| 300001 | 是 | - | - | 统一错误码
100001 网络错误
200001 内部错误
300001 SDK错误 |\n@| errSubject | string | 是 | - | - | 统一错误主题（模块）名称 |\n@| data | any \\| null | 否 | - | - | 错误信息中包含的数据 |\n@| cause | [Error](https://uniapp.dcloud.net.cn/tutorial/err-spec.html#unierror) \\| null | 否 | - | - | UTS错误信息对象 |\n@| errMsg | string | 是 | - | - | - |\n| type | string | 是 | - | - | - |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | Long | 是 | - | - | - |\n\n\n#### UniVideoProgressEvent\nprogress 事件
加载进度变化时触发\n##### UniVideoProgressEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniVideoProgressEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| buffered | number | 是 | - | - | 加载进度百分比 |\n| type | string | 是 | - | - | - |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | Long | 是 | - | - | - |\n\n\n#### UniVideoFullScreenClickEvent\nfullscreenclick 事件
视频播放全屏播放时点击事件\n##### UniVideoFullScreenClickEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniVideoFullScreenClickEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| screenX | number | 是 | - | - | 点击点相对于屏幕左侧边缘的 X 轴坐标 |\n@| screenY | number | 是 | - | - | 点击点相对于屏幕顶部边缘的 Y 轴坐标 |\n@| screenWidth | number | 是 | - | - | 屏幕总宽度 |\n@| screenHeight | number | 是 | - | - | 屏幕总高度 |\n| type | string | 是 | - | - | - |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | Long | 是 | - | - | - |\n\n\n#### UniVideoControlsToggleEvent\ncontrolstoggle 事件
切换播放控件显示隐藏时触发\n##### UniVideoControlsToggleEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniVideoControlsToggleEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| show | boolean | 是 | - | - | 是否显示 |\n| type | string | 是 | - | - | - |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | Long | 是 | - | - | - |\n\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/video/video.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/video/video\n>Template\n```vue\n\n\n\n\n\n\n```\n>Script\n```uts\n\n export default {\n onReady() {\n this.videoContext = uni.createVideoContext('video', this);\n },\n data() {\n return {\n videoContext: null as VideoContext | null,\n // 属性\n src: \"https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.mp4\",\n _src: \"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app-video-courses.mp4\",\n autoplay: false,\n loop: false,\n muted: false,\n initialTime: 0,\n _initialTime: 6,\n duration: 0,\n _duration: 60,\n controls: true,\n danmuList: [{\n text: '要显示的文本',\n color: '#FF0000',\n time: 3\n }, {\n text: '要显示的文本2',\n color: '#31ff23',\n time: 5\n }, {\n text: '要显示的文本3',\n color: '#f13ef8',\n time: 7\n }, {\n text: '要显示的文本4',\n color: '#4972f8',\n time: 9\n }, {\n text: '要显示的文本5',\n color: '#000000',\n time: 11\n }] as Array,\n danmuBtn: false,\n enableDanmu: true,\n pageGesture: false,\n direction: -1,\n _direction: 0,\n requestFullScreenOptions: {\n direction: -90\n } as RequestFullScreenOptions,\n showProgress: true,\n showFullscreenBtn: true,\n showPlayBtn: true,\n showCenterPlayBtn: true,\n showLoading: true,\n enableProgressGesture: true,\n objectFit: \"contain\",\n _objectFit: \"fill\",\n poster: \"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-android.png\",\n _poster: \"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-ios.png\",\n showMuteBtn: false,\n title: \"video-component\",\n _title: \"video-component video-component\",\n enablePlayGesture: false,\n vslideGesture: false,\n vslideGestureInFullscreen: true,\n codec: \"hardware\",\n _codec: \"software\",\n httpCache: true,\n playStrategy: 0,\n _playStrategy: 2,\n header: {\n 'User-Agent': 'User-Agent test',\n 'header': 'header test',\n 'cookie': 'cookie test'\n } as UTSJSONObject,\n _header: {\n 'User-Agent': 'User-Agent test2',\n 'header': 'header test2',\n 'cookie': 'cookie test2'\n } as UTSJSONObject,\n // API\n pos: 10,\n rate: 1.5,\n danmu: {\n text: '要显示的文本',\n color: '#FF0000'\n } as Danmu,\n // 自动化测试\n autoTest: false,\n isPlaying: false,\n isPause: false,\n isError: false,\n localSrc: ''\n }\n },\n onLoad() {\n },\n methods: {\n // API\n play: function () {\n console.log(\"play\");\n this.videoContext?.play();\n },\n pause: function () {\n console.log(\"pause\");\n (uni.getElementById(\"video\") as UniVideoElement).pause(); //as写法测试。注意id不对时as会崩溃\n // this.videoContext?.pause();\n },\n seek: function (pos : number) {\n console.log(\"seek -> \" + pos);\n this.videoContext?.seek(pos);\n },\n requestFullScreen: function (options : RequestFullScreenOptions | null) {\n console.log(\"requestFullScreen -> \" + options);\n this.videoContext?.requestFullScreen(options);\n },\n exitFullScreen: function () {\n console.log(\"exitFullScreen\");\n this.videoContext?.exitFullScreen();\n },\n stop: function () {\n console.log(\"stop\");\n uni.getElementById(\"video\")?.stop(); //泛型写法测试\n // this.videoContext?.stop();\n },\n sendDanmu: function (danmu : Danmu) {\n console.log(\"sendDanmu -> \" + danmu);\n this.videoContext?.sendDanmu(danmu);\n },\n playbackRate: function (rate : number) {\n console.log(\"playbackRate -> \" + rate);\n this.videoContext?.playbackRate(rate);\n },\n // 属性\n setSrc: function (src : string) {\n this.src = src;\n console.log(\"src -> \" + this.src)\n },\n setAutoplay: function () {\n this.autoplay = !this.autoplay;\n console.log(\"autoplay -> \" + this.autoplay)\n },\n setLoop: function () {\n this.loop = !this.loop;\n console.log(\"loop -> \" + this.loop)\n },\n setMuted: function () {\n this.muted = !this.muted;\n console.log(\"muted -> \" + this.muted)\n },\n setInitialTime: function (initialTime : number) {\n this.initialTime = initialTime;\n console.log(\"initialTime -> \" + this.initialTime)\n },\n setDuration: function (duration : number) {\n this.duration = duration;\n console.log(\"duration -> \" + this.duration)\n },\n setControls: function () {\n this.controls = !this.controls;\n console.log(\"controls -> \" + this.controls)\n },\n setDanmuBtn: function () {\n this.danmuBtn = !this.danmuBtn;\n console.log(\"danmuBtn -> \" + this.danmuBtn)\n },\n setPageGesture: function () {\n this.pageGesture = !this.pageGesture;\n console.log(\"pageGesture -> \" + this.pageGesture)\n },\n setDirection: function (direction : number) {\n this.direction = direction;\n console.log(\"direction -> \" + this.direction)\n },\n setShowProgress: function () {\n this.showProgress = !this.showProgress;\n console.log(\"showProgress -> \" + this.showProgress)\n },\n setShowFullscreenBtn: function () {\n this.showFullscreenBtn = !this.showFullscreenBtn;\n console.log(\"showFullscreenBtn -> \" + this.showFullscreenBtn)\n },\n setShowPlayBtn: function () {\n this.showPlayBtn = !this.showPlayBtn;\n console.log(\"showPlayBtn -> \" + this.showPlayBtn)\n },\n setShowCenterPlayBtn: function () {\n this.showCenterPlayBtn = !this.showCenterPlayBtn;\n console.log(\"showCenterPlayBtn -> \" + this.showCenterPlayBtn)\n },\n setShowLoading: function () {\n this.showLoading = !this.showLoading;\n console.log(\"showLoading -> \" + this.showLoading)\n },\n setEnableProgressGesture: function () {\n this.enableProgressGesture = !this.enableProgressGesture;\n console.log(\"enableProgressGesture -> \" + this.enableProgressGesture)\n },\n setObjectFit: function (objectFit : string) {\n this.objectFit = objectFit;\n console.log(\"objectFit -> \" + this.objectFit)\n },\n setPoster: function (poster : string) {\n this.poster = poster;\n console.log(\"poster -> \" + this.poster)\n },\n setShowMuteBtn: function () {\n this.showMuteBtn = !this.showMuteBtn;\n console.log(\"showMuteBtn -> \" + this.showMuteBtn)\n },\n setTitle: function (title : string) {\n this.title = title;\n console.log(\"title -> \" + this.title)\n },\n setEnablePlayGesture: function () {\n this.enablePlayGesture = !this.enablePlayGesture;\n console.log(\"enablePlayGesture -> \" + this.enablePlayGesture)\n },\n setVslideGesture: function () {\n this.vslideGesture = !this.vslideGesture;\n console.log(\"vslideGesture -> \" + this.vslideGesture)\n },\n setVslideGestureInFullscreen: function () {\n this.vslideGestureInFullscreen = !this.vslideGestureInFullscreen;\n console.log(\"vslideGestureInFullscreen -> \" + this.vslideGestureInFullscreen)\n },\n setCodec: function (codec : string) {\n this.codec = codec;\n console.log(\"codec -> \" + this.codec)\n },\n setHttpCache: function () {\n this.httpCache = !this.httpCache;\n console.log(\"httpCache -> \" + this.httpCache)\n },\n setPlayStrategy: function (playStrategy : number) {\n this.playStrategy = playStrategy;\n console.log(\"playStrategy -> \" + this.playStrategy)\n },\n setHeader: function (header : UTSJSONObject) {\n this.header = header;\n console.log(\"header -> \" + JSON.stringify(this.header))\n },\n // 事件\n onPlay: function (res : UniEvent) {\n console.log(res.type);\n this.isPlaying = true;\n this.isPause = false;\n },\n onPause: function (res : UniEvent) {\n console.log(res.type);\n this.isPlaying = false;\n this.isPause = true;\n },\n onEnded: function (res : UniEvent) {\n console.log(res.type);\n },\n onTimeUpdate: function (res : UniVideoTimeUpdateEvent) {\n console.log(res.type + \" -> \" + JSON.stringify(res.detail));\n },\n onFullScreenChange: function (res : UniVideoFullScreenChangeEvent) {\n console.log(res.type + \" -> \" + JSON.stringify(res.detail));\n },\n onWaiting: function (res : UniEvent) {\n console.log(res.type);\n },\n onError: function (res : UniVideoErrorEvent) {\n console.log(res.type + \" -> \" + JSON.stringify(res.detail));\n this.isError = true;\n },\n onProgress: function (res : UniVideoProgressEvent) {\n console.log(res.type + \" -> \" + JSON.stringify(res.detail));\n },\n onFullScreenClick: function (res : UniVideoFullScreenClickEvent) {\n console.log(res.type + \" -> \" + JSON.stringify(res.detail));\n },\n onControlsToggle: function (res : UniVideoControlsToggleEvent) {\n console.log(res.type + \" -> \" + JSON.stringify(res.detail));\n },\n onSrcInputConfirm(event : UniInputConfirmEvent) {\n this.src = event.detail.value;\n },\n // 自动化测试\n downloadSource() {\n uni.downloadFile({\n url: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.mp4',\n success: (res) => {\n this.localSrc = res.tempFilePath;\n this.autoTest = true;\n },\n fail: (_) => {\n this.isError = true;\n }\n })\n }\n }\n }\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/video)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/video.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.video)\n","component_type":"### UniVideoElement\nvideo元素对象\n#### UniVideoElement 的方法\n##### play() @play\n播放\n\n\n###### play 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| - | - | - |\n\n\n##### pause() @pause\n暂停\n\n\n###### pause 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| - | - | - |\n\n\n##### seek(position) @seek\n跳转到指定位置\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| position | number | 是 | - | - | 跳转到指定位置(秒) | \n\n\n###### seek 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| - | - | - |\n\n\n##### stop() @stop\n停止视频\n\n\n###### stop 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| - | - | - |\n\n\n##### sendDanmu(danmu) @senddanmu\n发送弹幕\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| danmu | **Danmu** | 是 | - | - | 弹幕数据 |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| text | string \\| null | 否 | - | - | 弹幕文字 |\n@| color | string \\| null | 否 | - | - | 弹幕颜色 |\n@| time | number \\| null | 否 | - | - | 显示时刻 | \n\n\n###### sendDanmu 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| - | - | - |\n\n\n##### playbackRate(rate) @playbackrate\n设置倍速播放\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| rate | number | 是 | - | - | 支持倍率 0.5/0.8/1.0/1.25/1.5 | \n\n\n###### playbackRate 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| - | - | - |\n\n\n##### requestFullScreen(direction?) @requestfullscreen\n进入全屏\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| direction | **RequestFullScreenOptions** | 否 | - | - | 0\\|正常竖向, 90\\|屏幕逆时针90度, -90\\|屏幕顺时针90度 |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| direction | number \\| null | 否 | - | - | direction
- 0: 正常竖向
- 90: 屏幕逆时针90度
- -90: 屏幕顺时针90度 | \n\n\n###### requestFullScreen 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| - | - | - |\n\n\n##### exitFullScreen() @exitfullscreen\n退出全屏\n\n\n###### exitFullScreen 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| - | - | - |\n\n"},"unicloud-db":{"name":"## unicloud-db","description":"> 组件类型：[UniCloudDBElement](#uniclouddbelement) \n\n 是一个数据库查询组件，它将clientDB的API封装为组件，进一步减少开发者使用所需的代码量。","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| id | string([string.IDString](/uts/data-type.md#ide-string)) | - | - | 唯一标识 |\n| v-slot:default | string | - | | {data, loading, hasMore, pagination, error} |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| data | - | 查询结果，类型为Array\\ |\n@| loading | - | 查询中的状态。可根据此状态，在template中通过v-if显示等待内容 |\n@| hasMore | - | 是否有更多数据。可根据此状态，在template中通过v-if显示没有更多数据了 |\n@| error | - | 查询错误。可根据此状态，在template中通过v-if显示等待内容 |\n@| pagination | - | 分页属性 |\n@@| 值名称 | 兼容性 | 描述 |\n@@| :- | :-: | :- |\n@@| current | - | 当前页号 |\n@@| size | - | 分页大小 |\n@@| count | - | 数据库的总数据量, 设置 :getcount=true 时有效 |\n| collection | string([string.DBCollectionString](/uts/data-type.md#ide-string)) | - | | 表名 |\n| field | string([string.DBFieldString](/uts/data-type.md#ide-string)) | - | | 查询字段，多个字段用 `,` 分割 |\n| where | string([string.JQLString](/uts/data-type.md#ide-string)) | - | | 查询条件 |\n| orderby | string | - | | 排序字段及正序倒叙设置 |\n| groupby | string | - | | 对数据进行分组 |\n| group-field | string | - | | 对数据进行分组统计 |\n| distinct | boolean | - | | 是否对数据查询结果中重复的记录进行去重 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| true | - | 去重 |\n@| false | - | 不去重 |\n| page-data | string | - | | add 多次查询的集合, replace 当前查询的集合 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| add | - | 多次查询的集合 |\n@| replace | - | 当前查询的集合 |\n| page-current | number | - | | 当前页 |\n| page-size | number | - | | 每页数据数量 |\n| getone | boolean | - | | 指定查询结果是否返回数组第一条数据，默认 false。在false情况下返回的是数组，即便只有一条结果，也需要\\[0]方式获取。在true下，直接返回结果数据，少一层数组 |\n| getcount | boolean | - | | 是否查询总数量 |\n| gettree | boolean | - | | 是否查询树状结构数据 |\n| startwith | string | - | | gettree的第一层级条件，此初始条件可以省略，不传startWith时默认从最顶级开始查询 |\n| limitlevel | number | - | | gettree查询返回的树的最大层级。超过设定层级的节点不会返回。默认10级，最大15，最小1 |\n| manual | boolean | - | | 是否手动加载数据，默认为 false，页面onLoad时自动联网加载数据 |\n| loadtime | string | - | | 加载数据时机，默认auto，可选值 auto\\|onready\\|manual |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| auto | - | 页面就绪后或属性变化后加载数据，默认为auto |\n@| onready | - | 页面就绪后不自动加载数据，属性变化后加载。适合在onLoad中接收上个页面的参数作为where条件时 |\n@| manual | - | 手动模式，不自动加载数据。如果涉及到分页，需要先手动修改当前页，在调用加载数据 |\n| ~~action~~ | string([string.ClientDBActionString](/uts/data-type.md#ide-string)) | - | | 云端执行数据库查询的前或后，触发某个action函数操作，进行预处理或后处理(推荐改用JQL触发器) |\n| @load | (data : Array\\, ended : boolean, pagination : [UTSJSONObject](/uts/buildin-object-api/utsjsonobject.md)) => void | - | | 成功回调。如联网返回结果后，想修改下数据再渲染界面，则在本方法里对data进行修改 |\n| @error | (event: [UniEvent](/component/common#unievent)) => void | - | | 失败回调 |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/unicloud-db/unicloud-db.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/unicloud-db/unicloud-db\n>Template\n```vue\n\n\n\n\n\n\n```\n>Script\n```uts\n\n const db = uniCloud.databaseForJQL()\n\n export default {\n data() {\n return {\n collection: 'unicloud-db-test',\n collectionList: [\n db.collection('book').where('name == \"水浒传\"').getTemp(),\n ] as UTSJSONObject[],\n $uniCloudElement: null as UniCloudDBElement | null,\n $isTesting: false,\n $addResult: {},\n $updateResult: {},\n $removeResult: {}\n }\n },\n onReady() {\n this.$uniCloudElement = this.$refs['udb'] as UniCloudDBElement\n this.get();\n },\n onPullDownRefresh() {\n this.$uniCloudElement!.loadData({\n clear: true,\n success: (_ : UniCloudDBGetResult) => {\n uni.stopPullDownRefresh()\n }\n })\n },\n methods: {\n loadMore() {\n this.$uniCloudElement!.loadMore()\n },\n get() {\n this.$uniCloudElement!.loadData({\n clear: true\n })\n },\n add() {\n const value = {\n title: \"title-\" + Date.now(),\n comment: \"comment\" + Date.now()\n };\n this.$uniCloudElement!.add(value, {\n showToast: false,\n success: (res : UniCloudDBAddResult) => {\n this.$addResult = {\n id: res.id\n };\n this.get();\n },\n fail: (err : any | null) => {\n this.showError(err)\n }\n })\n },\n update(id : string) {\n const value = {\n title: \"title-\" + Date.now(),\n comment: \"comment\" + Date.now()\n };\n this.$uniCloudElement!.update(id, value, {\n showToast: false,\n needLoading: true,\n needConfirm: false,\n loadingTitle: \"正在更新...\",\n success: (res : UniCloudDBUpdateResult) => {\n this.$updateResult = {\n updated: res.updated\n }\n },\n fail: (err : any | null) => {\n this.showError(err)\n }\n })\n },\n remove(id : string) {\n this.$uniCloudElement!.remove(id, {\n showToast: false,\n needConfirm: false,\n needLoading: false,\n success: (res : UniCloudDBRemoveResult) => {\n this.$removeResult = {\n deleted: res.deleted\n }\n },\n fail: (err : any | null) => {\n this.showError(err)\n }\n })\n },\n onQueryLoad(data : Array, ended : boolean, pagination : UTSJSONObject) {\n console.log(data, ended, pagination);\n },\n showError(err : any | null) {\n const error = err as UniCloudError\n uni.showModal({\n content: error.errMsg,\n showCancel: false\n })\n }\n }\n }\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.93 | 4.11 |\n","children":"","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/uniCloud/unicloud-db)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/unicloud-db.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.unicloud-db)\n","component_type":"### UniCloudDBElement\n\n#### UniCloudDBElement 的属性值\n| 名称 | 类型 | 必填 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| dataList | Array\\ | 是 | 已加载的数据 |\n#### UniCloudDBElement 的方法\n##### loadData(options?) @loaddata\n加载数据
当 \\ 组件的 manual 属性设为 true 或者 loadtime 属性设置为 manual 时，不会在页面初始化时联网查询数据，此时需要通过本方法在需要的时候手动加载数据。\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| options | **UniCloudDBComponentLoadDataOptions** | 否 | - | - | 可选参数 |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| clear | boolean \\| null | 否 | false | - | 是否清空数据 |\n@| current | number \\| null | 否 | - | - | 当前第几页 |\n@| success | (res?: T \\| null) => void \\| null | 否 | - | - | 成功回调 |\n@| fail | (err?: any \\| null) => void \\| null | 否 | - | - | 失败回调 |\n@| complete | () => void \\| null | 否 | - | - | 完成回调 | \n\n\n###### loadData 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| - | - | - |\n\n\n##### loadMore() @loadmore\n加载更多数据
在列表的加载下一页场景下，使用ref方式访问组件方法，加载更多数据，每加载成功一次，当前页 +1\n\n\n###### loadMore 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| - | - | - |\n\n\n##### add(value, options?) @add\n新增数据\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| value | [UTSJSONObject](/uts/buildin-object-api/utsjsonobject.md) | 是 | - | - | 如果属性名存在，且类型为UTSJSONObject返回对应的结果，不存在返回null |\n| options | **UniCloudDBComponentAddOptions** | 否 | - | - | 可选参数 |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| showToast | boolean \\| null | 否 | true | - | 是否显示 Toast |\n@| toastTitle | string \\| null | 否 | - | - | Toast 标题 |\n@| needLoading | boolean \\| null | 否 | true | - | 是否需要 Loading |\n@| loadingTitle | string \\| null | 否 | - | - | Loading 标题 |\n@| success | (res?: T \\| null) => void \\| null | 否 | - | - | 成功回调 |\n@| fail | (err?: any \\| null) => void \\| null | 否 | - | - | 失败回调 |\n@| complete | () => void \\| null | 否 | - | - | 完成回调 | \n\n\n###### add 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| - | - | - |\n\n\n##### remove() @remove\n移除数据\n\n\n###### remove 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| - | - | - |\n\n\n##### remove() @remove\n移除数据\n\n\n###### remove 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| - | - | - |\n\n\n##### update(id, value, options?) @update\n更新数据\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| id | string | 是 | - | - | 数据库字段的唯一标识. |\n| value | [UTSJSONObject](/uts/buildin-object-api/utsjsonobject.md) | 是 | - | - | 需要修改的新数据. |\n| options | **UniCloudDBComponentUpdateOptions** | 否 | - | - | 可选参数 |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| showToast | boolean \\| null | 否 | true | - | 是否显示更新后 Toast |\n@| toastTitle | string \\| null | 否 | \"\" | - | 更新成功后 Toast 标题 |\n@| confirmTitle | string \\| null | 否 | - | - | 确认框标题 |\n@| confirmContent | string \\| null | 否 | - | - | 确认框内容 |\n@| needConfirm | boolean \\| null | 否 | true | - | 是否显示更新确认框 |\n@| needLoading | boolean \\| null | 否 | true | - | 是否需要 Loading |\n@| loadingTitle | string \\| null | 否 | - | - | Loading 标题 |\n@| success | (res?: T \\| null) => void \\| null | 否 | - | - | 成功回调 |\n@| fail | (err?: any \\| null) => void \\| null | 否 | - | - | 失败回调 |\n@| complete | () => void \\| null | 否 | - | - | 完成回调 | \n\n\n###### update 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| - | - | - |\n\n"},"view":{"name":"## view","description":"> 组件类型：UniViewElement \n\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>Template\n```vue\n\n\n\n\n\n```\n>Script\n```uts\n\n import { ItemType } from '@/components/enum-data/enum-data'\n export default {\n data() {\n return {\n hover_class: false,\n stop_propagation: false,\n start_time: 50,\n stay_time: 400,\n start_time_enum: [{ \"value\": 50, \"name\": \"50毫秒\" }, { \"value\": 200, \"name\": \"200毫秒\" }] as ItemType[],\n stay_time_enum: [{ \"value\": 400, \"name\": \"400毫秒\" }, { \"value\": 200, \"name\": \"200毫秒\" }] as ItemType[]\n }\n },\n methods: {\n change_hover_class_boolean(checked : boolean) {\n this.hover_class = checked\n },\n change_stop_propagation_boolean(checked : boolean) {\n this.stop_propagation = checked\n },\n radio_change_start_time_enum(time : number) {\n this.start_time = time\n },\n radio_change_stay_time_enum(time : number) {\n this.stay_time = time\n },\n },\n }\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/view)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/view.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view)\n"},"web-view":{"name":"## web-view","description":"> 组件类型：[UniWebViewElement](#uniwebviewelement) \n\n 承载网页的容器","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| src | string([string.HTMLURIString](/uts/data-type.md#ide-string)) | - | | webview 指向网页的链接 |\n| webview-styles | **WebViewStyles** | {\"progress\":{\"color\":\"#00FF00\"}} | | webview 网络地址页面加载进度条样式 |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| progress | **WebViewProgressStyles** \\| boolean | 是 | false | - | 网络地址页面加载进度条样式，设置为 false 时表示不显示加载进度条。 |\n@@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@@| :- | :- | :- | :- | :-: | :- |\n@@| color | [string.ColorString](/uts/data-type.md#ide-string) | 是 | - | - | 网页加载进度条颜色，默认值为 #00FF00 。 |\n@\n| horizontalScrollBarAccess | boolean | true | | 设置是否显示横向滚动条 |\n| verticalScrollBarAccess | boolean | true | | 设置是否显示纵向滚动条 |\n| @message | (event: [UniWebViewMessageEvent](#uniwebviewmessageevent)) => void | - | | 网页向应用 postMessage 时触发。e.detail = { data } |\n| @error | (event: [UniWebViewErrorEvent](#uniwebviewerrorevent)) => void | - | | 网页加载错误时触发。e.detail = { errSubject, errCode, errMsg, url, fullUrl, src } |\n| @load | (event: [UniWebViewLoadEvent](#uniwebviewloadevent)) => void | - | | 网页加载完成后触发。e.detail = { url, src } |\n| ~~@loaded~~ | (event: [UniWebViewLoadEvent](#uniwebviewloadevent)) => void | - | - | 网页加载完成后触发。e.detail = { url, src }。已废弃，请改用load |\n| @loading | (event: [UniWebViewLoadingEvent](#uniwebviewloadingevent)) => void | - | | 网页加载中触发。e.detail = { url, src } |\n| @download | (event: [UniWebViewDownloadEvent](#uniwebviewdownloadevent)) => void | - | | 点击网页中可下载链接时触发。e.detail = { url, userAgent, contentDisposition, mimetype, contentLength } |","event":"\n### 事件\n#### UniWebViewMessageEvent\n\n##### UniWebViewMessageEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| type | string | 是 | - | - | 事件类型，固定值message |\n| detail | **UniWebViewMessageEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| data | Array\\<[UTSJSONObject](/uts/buildin-object-api/utsjsonobject.md)\\> | 是 | - | - | 消息包含的数据，4.13版本之前类型为Map\\ \\| null，4.13版本（含）之后类型为Array\\ |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniWebViewMessageEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniWebViewErrorEvent\n\n##### UniWebViewErrorEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| type | string | 是 | - | - | 事件类型，固定值error |\n| detail | **UniWebViewErrorEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| errSubject | string | 是 | - | - | 统一错误主题（模块）名称，固定值uni-web-view |\n@| errCode | 100001 \\| 100002 \\| 100003 | 是 | - | - | 统一错误码
100001 ssl error
100002 page error
100003 http error |\n@| errMsg | string | 是 | - | - | 统一错误描述信息 |\n@| url | string | 是 | - | - | 加载错误的网页链接，非完整链接，仅包含scheme://authority部分，4.13版本起支持 |\n@| fullUrl | string | 是 | - | - | 加载错误的网页链接，完整链接，4.13版本起支持 |\n@| src | string | 是 | - | - | 加载错误的网页链接，完整链接，4.13版本起支持 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniWebViewErrorEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniWebViewLoadEvent\n\n##### UniWebViewLoadEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| type | string | 是 | - | - | 事件类型，固定值load |\n| detail | **UniWebViewLoadEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| ~~url~~ | string | 是 | - | - | 加载完成的网页链接 **4.13版本起废弃，请改用src** |\n@| src | string | 是 | - | - | 加载完成的网页链接，4.13版本起支持 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniWebViewLoadEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniWebViewLoadingEvent\n\n##### UniWebViewLoadingEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| type | string | 是 | - | - | 事件类型，固定值loading |\n| detail | **UniWebViewLoadingEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| ~~url~~ | string | 是 | - | - | 加载中的网页链接 **4.13版本起废弃，请改用src** |\n@| src | string | 是 | - | - | 加载中的网页链接，4.13版本起支持 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniWebViewLoadingEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n\n#### UniWebViewDownloadEvent\n\n##### UniWebViewDownloadEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| type | string | 是 | - | - | 事件类型，固定值download |\n| detail | **UniWebViewDownloadEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| url | string | 是 | - | - | 下载链接 |\n@| userAgent | string | 是 | - | - | 用户代理 |\n@| contentDisposition | string | 是 | - | - | 指示回复的内容该以何种形式展示，是以内联的形式（即网页或者页面的一部分），还是以附件的形式下载并保存到本地 |\n@| mimetype | string | 是 | - | - | 媒体类型 |\n@| contentLength | number | 是 | - | - | 文件大小 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniWebViewDownloadEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | | 阻止当前事件的默认行为
|\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/web-view/web-view.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/web-view/web-view\n>Template\n```vue\n\n\n\n\n\n\n```\n>Script\n```uts\n\n export default {\n data() {\n return {\n src: 'https://www.dcloud.io',\n webview_styles: {\n progress: {\n color: '#FF3333'\n }\n },\n webviewContext: null as WebviewContext | null,\n loadError: false,\n horizontalScrollBarAccess: true,\n verticalScrollBarAccess: true\n }\n },\n onReady() {\n // #ifdef APP\n // TODO web 实现createWebviewContext\n this.webviewContext = uni.createWebviewContext('web-view', this)\n // #endif\n },\n methods: {\n back() {\n this.webviewContext?.back();\n },\n forward() {\n this.webviewContext?.forward();\n },\n reload() {\n this.webviewContext?.reload();\n },\n stop() {\n this.webviewContext?.stop();\n },\n nativeToWeb() {\n this.webviewContext?.evalJS(\"alert('hello uni-app x')\");\n },\n message(event : UniWebViewMessageEvent) {\n console.log(JSON.stringify(event));\n },\n error(event : UniWebViewErrorEvent) {\n this.loadError = true\n console.log(JSON.stringify(event));\n },\n loading(event : UniWebViewLoadingEvent) {\n console.log(JSON.stringify(event));\n },\n load(event : UniWebViewLoadEvent) {\n console.log(JSON.stringify(event));\n },\n download(event : UniWebViewDownloadEvent) {\n console.log(JSON.stringify(event));\n uni.showModal({\n content: \"下载链接: \" + event.detail.url + \"\\n文件大小: \" + event.detail.contentLength / 1024 + \"KB\",\n showCancel: false\n });\n },\n confirm(event : UniInputConfirmEvent) {\n console.log(JSON.stringify(event));\n let url = event.detail.value;\n if (!url.startsWith('https://') && !url.startsWith('http://')) {\n url = 'https://' + url;\n }\n this.src = url;\n },\n changeHorizontalScrollBarAccess(event : UniSwitchChangeEvent) {\n this.horizontalScrollBarAccess = event.detail.value;\n },\n changeVerticalScrollBarAccess(event : UniSwitchChangeEvent) {\n this.verticalScrollBarAccess = event.detail.value;\n }\n }\n }\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/web-view)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/web-view.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.web-view)\n","component_type":"### UniWebViewElement\nweb-view元素对象\n#### UniWebViewElement 的方法\n##### back() @back\n后退\n\n\n###### back 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 4.0 | 4.11 |\n\n\n##### forward() @forward\n前进\n\n\n###### forward 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 4.0 | 4.11 |\n\n\n##### reload() @reload\n重新加载\n\n\n###### reload 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 4.0 | 4.11 |\n\n\n##### stop() @stop\n停止加载\n\n\n###### stop 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 4.0 | 4.11 |\n\n\n##### evalJS(js) @evaljs\n原生和WebView通信（执行JS脚本）\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| js | string | 是 | - | - | - | \n\n\n###### evalJS 兼容性 \n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 4.0 | 4.11 |\n\n"},"nested-scroll-body":{"name":"## nested-scroll-body","description":"> 组件类型：UniNestedScrollHeaderElement \n\n scroll-view 嵌套模式场景中属于嵌套内层 scroll-view 的父节点，仅支持作为 \\ 嵌套模式的直接子节点。不支持复数子节点，渲染时会取其第一个子节点来渲染","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 ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/nested-scroll-body/nested-scroll-body\n>Template\n```vue\n\n\n\n\n\n\n```\n>Script\n```uts\n\n import refreshBox from '../../template/custom-refresher/refresh-box/refresh-box.uvue';\n\texport default {\n components: { refreshBox },\n\t\tdata() {\n\t\t\treturn {\n scrollData: [] as Array,\n scrollTop: 0,\n refresherTriggered: false,\n pullingDistance: 0,\n resetting: false\n\t\t\t}\n\t\t},\n computed: {\n \tstate() : number {\n \t\tif (this.resetting) {\n \t\t\treturn 3;\n \t\t}\n \t\tif (this.refresherTriggered) {\n \t\t\treturn 2\n \t\t}\n \t\tif (this.pullingDistance > 45) {\n \t\t\treturn 1\n \t\t} else {\n \t\t\treturn 0;\n \t\t}\n \t}\n },\n onLoad() {\n \tlet lists : Array = []\n \tfor (let i = 0; i < 30; i++) {\n \t\tlists.push(\"item---\" + i)\n \t}\n \tthis.scrollData = lists\n },\n\t\tmethods: {\n onRefresherpulling(e : RefresherEvent) {\n \tthis.pullingDistance = e.detail.dy;\n },\n onRefresherrefresh() {\n \tthis.refresherTriggered = true\n \tsetTimeout(() => {\n \t\tthis.refresherTriggered = false\n \t\tthis.resetting = true;\n \t}, 1500)\n },\n onRefreshrestore() {\n this.pullingDistance = 0\n \tthis.resetting = false;\n },\n //自动化测试使用\n testBodyScrollBy(y: number) {\n this.scrollTop = y\n }\n\t\t}\n\t}\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| x | 4.11 | 4.11 |\n","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.nested-scroll-body)\n"},"nested-scroll-header":{"name":"## nested-scroll-header","description":"> 组件类型：UniNestedScrollHeaderElement \n\n scroll-view 嵌套模式场景中属于外层 scroll-view 的节点，仅支持作为 \\ 嵌套模式的直接子节点。不支持复数子节点，渲染时会取其第一个子节点来渲染","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 ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/nested-scroll-header/nested-scroll-header\n>Template\n```vue\n\n\n\n\n\n\n```\n>Script\n```uts\n\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n scrollData: [] as Array,\n\t\t\t}\n\t\t},\n onLoad() {\n \tlet lists : Array = []\n \tfor (let i = 0; i < 30; i++) {\n \t\tlists.push(\"item---\" + i)\n \t}\n \tthis.scrollData = lists\n },\n\t\tmethods: {\n\t\t}\n\t}\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| x | 4.11 | 4.11 |\n","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.nested-scroll-header)\n"}} \ No newline at end of file