{"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","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| path | string | \"\" | 动画资源地址，目前只支持绝对路径 |\n| loop | boolean | false | 动画是否循环播放 |\n| autoplay | boolean | false | 动画是否自动播放 |\n| action | string | \"stop\" | 动画操作，可取值 play、pause、stop [action](#action-values) |\n| hidden | boolean | false | 是否隐藏动画 |\n| @ended | (event: [Event](/component/common#event)) => void | - | - |\n\n#### action @action-values \n\n| 值名称 | 描述 |\n| :- | :- |\n| play | 播放 |\n| pause | 暂停 |\n| stop | 停止 |\n\n","event":"","example":"","compatibility":"\n### animation-view 兼容性\n| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- |\n| 5.0 | √ | 3.9+ | 9.0 | √ | x |\n\n ### animation-view 属性兼容性\n| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| path | 5.0 | √ | 3.9+ | 9.0 | √ | x |","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 按钮","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| disabled | boolean | false | 是否禁用 |\n| hover-class | string(string.ClassString) | \"button-hover\" | 指定按下去的样式类。当 hover-class=\"none\" 时，没有点击态效果 |\n| hover-start-time | number | 20 | 按住后多久出现点击态，单位毫秒 |\n| hover-stay-time | number | 70 | 手指松开后点击态保留时间，单位毫秒 |\n| size | string | \"default\" | 按钮的大小 [size](#size-values) |\n| type | string | \"default\" | 按钮的样式类型 [type](#type-values) |\n| plain | boolean | false | 按钮是否镂空，背景色透明 |\n\n#### size @size-values \n\n| 值名称 | 描述 |\n| :- | :- |\n| default | 默认大小 |\n| mini | 小尺寸 |\n\n\n\n#### type @type-values \n\n| 值名称 | 描述 |\n| :- | :- |\n| default | 白色 |\n| primary | 蓝色 |\n| warn | 红色 |\n\n","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/button/button.uvue) \n ```html\n<script>\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 style: 'color:#ffffff;backgroundColor:#1AAD19;borderColor:#1AAD19;'\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 }\r\n }\r\n</script>\r\n\r\n<template>\r\n <view class=\"main\">\r\n <button :disabled=\"disabled_boolean\" :size=\"size_enum[size_enum_current].name\"\r\n :type=\"type_enum[type_enum_current].name\" :plain=\"plain_boolean\" @click=\"button_click\"\r\n @touchstart=\"button_touchstart\" @touchmove=\"button_touchmove\" @touchcancel=\"button_touchcancel\"\r\n @touchend=\"button_touchend\" @tap=\"button_tap\" @longpress=\"button_longpress\" class=\"btn\"\r\n :style=\"default_style ? style : ''\" :hover-class=\"default_style ? 'is-hover' : 'button-hover'\">\r\n {{ text }}\r\n </button>\r\n </view>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\">\r\n <!-- #endif -->\r\n <view class=\"content\">\r\n <boolean-data :defaultValue=\"false\" title=\"按钮是否镂空，背景色透明\" @change=\"change_plain_boolean\"></boolean-data>\r\n <boolean-data :defaultValue=\"false\" title=\"是否禁用\" @change=\"change_disabled_boolean\"></boolean-data>\r\n <boolean-data :defaultValue=\"false\" title=\"修改默认样式和点击效果(高优先)\" @change=\"change_default_style\"></boolean-data>\r\n <enum-data :items=\"size_enum\" title=\"按钮的大小\" @change=\"radio_change_size_enum\"></enum-data>\r\n <enum-data :items=\"type_enum\" title=\"按钮的类型\" @change=\"radio_change_type_enum\"></enum-data>\r\n <input-data :defaultValue=\"text\" title=\"按钮的文案\" type=\"text\" @confirm=\"confirm_text_input\"></input-data>\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n<style>\r\n .main {\r\n padding: 10rpx 0;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.06);\r\n flex-direction: row;\r\n justify-content: center;\r\n }\r\n\r\n .main .list-item {\r\n width: 100%;\r\n height: 200rpx;\r\n border: 1px solid #666;\r\n }\r\n\r\n .is-hover {\r\n color: rgba(255, 255, 255, 0.6);\r\n background-color: #179b16;\r\n border-color: #179b16;\r\n }\r\n</style>\n```","compatibility":"\n### button 兼容性\n| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- |\n| 5.0 | √ | √ | 10.0 | √ | x |\n\n ### button 属性兼容性\n| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| disabled | 5.0 | √ | √ | 10.0 | √ | x |\n| hover-class | 5.0 | √ | √ | 10.0 | √ | x |\n| hover-start-time | 5.0 | √ | √ | 10.0 | √ | x |\n| hover-stay-time | 5.0 | √ | √ | 10.0 | √ | x |\n| size | 5.0 | √ | √ | 10.0 | √ | x |\n| type | 5.0 | √ | √ | 10.0 | √ | x |\n| plain | 5.0 | √ | √ | 10.0 | √ | x |","children":"","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"},"checkbox":{"name":"## checkbox","description":"> 组件类型：UniCheckboxElement \n\n 多选项。在1组check-group中可选择多个","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| disabled | boolean | false | 是否禁用 |\n| value | string | - | checkbox 标识，选中时触发 checkbox-group 的 change 事件，并携带 checkbox 的 value |\n| checked | boolean | false | 当前是否选中，可用来设置默认选中 |\n| color | string(string.ColorString) | \"#007aff\" | checkbox的颜色 |\n| backgroundColor | string(string.ColorString) | \"#ffffff\" | checkbox默认的背景颜色 |\n| borderColor | string(string.ColorString) | \"#d1d1d1\" | checkbox默认的边框颜色 |\n| activeBackgroundColor | string(string.ColorString) | \"#ffffff\" | checkbox选中时的背景颜色 |\n| activeBorderColor | string(string.ColorString) | \"#d1d1d1\" | checkbox选中时的边框颜色 |\n| iconColor | string(string.ColorString) | \"#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 ```html\n<script>\r\ntype ItemType = {\r\n\tvalue : string\r\n\tname : string\r\n\tchecked : boolean\r\n}\r\nexport default {\r\n\tdata() {\r\n\t\treturn {\r\n\t\t\titems: [\r\n\t\t\t\t{\r\n\t\t\t\t\tvalue: 'CHN',\r\n\t\t\t\t\tname: '中国',\r\n\t\t\t\t\tchecked: true,\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\tvalue: 'USA',\r\n\t\t\t\t\tname: '美国',\r\n\t\t\t\t\tchecked: false,\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\tvalue: 'BRA',\r\n\t\t\t\t\tname: '巴西',\r\n\t\t\t\t\tchecked: false,\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\tvalue: 'JPN',\r\n\t\t\t\t\tname: '日本',\r\n\t\t\t\t\tchecked: false,\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\tvalue: 'ENG',\r\n\t\t\t\t\tname: '英国',\r\n\t\t\t\t\tchecked: false,\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\tvalue: 'FRA',\r\n\t\t\t\t\tname: '法国',\r\n\t\t\t\t\tchecked: false,\r\n\t\t\t\t},\r\n\t\t\t] as ItemType[],\r\n\r\n\t\t\ttext: '未选中',\r\n\t\t\twrapText: 'uni-app x，终极跨平台方案\\nuts，大一统语言',\r\n\t\t\tvalue: [] as string[],\r\n\t\t\tdisabled: true,\r\n\t\t\tchecked: true,\r\n\t\t\tcolor: '#007aff',\r\n\t\t\t// 组件属性 autotest\r\n\t\t\tchecked_boolean: false,\r\n\t\t\tdisabled_boolean: false,\r\n\t\t\tcolor_input: \"#007aff\",\r\n\t\t\tbackgroundColor_input: \"#ffffff\",\r\n\t\t\tborderColor_input: \"#d1d1d1\",\r\n\t\t\tactiveBackgroundColor_input: \"#ffffff\",\r\n\t\t\tactiveBorderColor_input: \"#d1d1d1\",\r\n\t\t\ticonColor_input: \"#007aff\"\r\n\t\t}\r\n\t},\r\n\tmethods: {\r\n\t\tcheckboxChange: function (e : CheckboxGroupChangeEvent) {\r\n\t\t\tconst selectedNames : string[] = []\r\n\t\t\tthis.items.forEach((item) => {\r\n\t\t\t\tif (e.detail.value.includes(item.value)) {\r\n\t\t\t\t\tselectedNames.push(item.name)\r\n\t\t\t\t}\r\n\t\t\t})\r\n\t\t\tuni.showToast({\r\n\t\t\t\ticon: 'none',\r\n\t\t\t\ttitle: '当前选中:' + selectedNames.join(','),\r\n\t\t\t})\r\n\t\t},\r\n\t\ttestChange: function (e : CheckboxGroupChangeEvent) {\r\n\t\t\tthis.value = e.detail.value\r\n\t\t},\r\n\t\tcheckbox_click() { console.log(\"组件被点击时触发\") },\r\n\t\tcheckbox_touchstart() { console.log(\"手指触摸动作开始\") },\r\n\t\tcheckbox_touchmove() { console.log(\"手指触摸后移动\") },\r\n\t\tcheckbox_touchcancel() { console.log(\"手指触摸动作被打断，如来电提醒，弹窗\") },\r\n\t\tcheckbox_touchend() { console.log(\"手指触摸动作结束\") },\r\n\t\tcheckbox_tap() { console.log(\"手指触摸后马上离开\") },\r\n\t\tcheckbox_longpress() { console.log(\"如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。\") },\r\n\t\tchange_checked_boolean(checked : boolean) { this.checked_boolean = checked },\r\n\t\tchange_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },\r\n\t\tconfirm_color_input(value : string) { this.color_input = value },\r\n\t\tconfirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },\r\n\t\tconfirm_borderColor_input(value : string) { this.borderColor_input = value },\r\n\t\tconfirm_activeBackgroundColor_input(value : string) { this.activeBackgroundColor_input = value },\r\n\t\tconfirm_activeBorderColor_input(value : string) { this.activeBorderColor_input = value },\r\n\t\tconfirm_iconColor_input(value : string) { this.iconColor_input = value }\r\n\t}\r\n}\r\n</script>\r\n\r\n<template>\r\n <view class=\"main\">\r\n <checkbox\r\n :disabled=\"disabled_boolean\"\r\n :checked=\"checked_boolean\"\r\n :color=\"color_input\"\r\n :backgroundColor=\"backgroundColor_input\"\r\n :borderColor=\"borderColor_input\"\r\n :activeBackgroundColor=\"activeBackgroundColor_input\"\r\n :activeBorderColor=\"activeBorderColor_input\"\r\n :iconColor=\"iconColor_input\"\r\n @click=\"checkbox_click\"\r\n @touchstart=\"checkbox_touchstart\"\r\n @touchmove=\"checkbox_touchmove\"\r\n @touchcancel=\"checkbox_touchcancel\"\r\n @touchend=\"checkbox_touchend\"\r\n @tap=\"checkbox_tap\"\r\n @longpress=\"checkbox_longpress\"\r\n ><text>uni-app-x</text></checkbox\r\n >\r\n </view>\r\n\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\">\r\n <!-- #endif -->\r\n <view class=\"content\">\r\n <page-head title=\"组件属性\"></page-head>\r\n <boolean-data\r\n :defaultValue=\"false\"\r\n title=\"当前是否选中，可用来设置默认选中\"\r\n @change=\"change_checked_boolean\"\r\n ></boolean-data>\r\n <boolean-data\r\n :defaultValue=\"false\"\r\n title=\"是否禁用\"\r\n @change=\"change_disabled_boolean\"\r\n ></boolean-data>\r\n <input-data\r\n defaultValue=\"#007aff\"\r\n title=\"checkbox的颜色\"\r\n type=\"text\"\r\n @confirm=\"confirm_color_input\"\r\n ></input-data>\r\n <input-data\r\n defaultValue=\"#ffffff\"\r\n title=\"checkbox默认的背景颜色\"\r\n type=\"text\"\r\n @confirm=\"confirm_backgroundColor_input\"\r\n ></input-data>\r\n <input-data\r\n defaultValue=\"#d1d1d1\"\r\n title=\"checkbox默认的边框颜色\"\r\n type=\"text\"\r\n @confirm=\"confirm_borderColor_input\"\r\n ></input-data>\r\n <input-data\r\n defaultValue=\"#ffffff\"\r\n title=\"checkbox选中时的背景颜色\"\r\n type=\"text\"\r\n @confirm=\"confirm_activeBackgroundColor_input\"\r\n ></input-data>\r\n <input-data\r\n defaultValue=\"#d1d1d1\"\r\n title=\"checkbox选中时的边框颜色\"\r\n type=\"text\"\r\n @confirm=\"confirm_activeBorderColor_input\"\r\n ></input-data>\r\n <input-data\r\n defaultValue=\"#007aff\"\r\n title=\"checkbox的图标颜色，优先级大于color属性\"\r\n type=\"text\"\r\n @confirm=\"confirm_iconColor_input\"\r\n ></input-data>\r\n </view>\r\n\r\n <view>\r\n <page-head title=\"默认及使用\"></page-head>\r\n <view class=\"uni-padding-wrap uni-common-mt\">\r\n <view class=\"uni-title uni-common-mt\">\r\n <text class=\"uni-title-text\"> 默认样式 </text>\r\n </view>\r\n <view>\r\n <checkbox-group\r\n class=\"uni-flex uni-row checkbox-group\"\r\n @change=\"testChange\"\r\n style=\"flex-wrap: wrap\"\r\n >\r\n <checkbox\r\n value=\"cb\"\r\n :checked=\"checked\"\r\n :color=\"color\"\r\n style=\"margin-right: 30rpx\"\r\n class=\"checkbox cb\"\r\n >选中\r\n </checkbox>\r\n <checkbox\r\n value=\"cb1\"\r\n style=\"margin-right: 30rpx\"\r\n class=\"checkbox cb1\"\r\n >{{ text }}</checkbox\r\n >\r\n <checkbox value=\"cb2\" :disabled=\"disabled\" class=\"checkbox cb2\"\r\n >禁用</checkbox\r\n >\r\n <checkbox\r\n value=\"cb3\"\r\n style=\"margin-top: 20rpx\"\r\n class=\"checkbox cb3\"\r\n >\r\n {{ wrapText }}\r\n </checkbox>\r\n </checkbox-group>\r\n </view>\r\n <view class=\"uni-title uni-common-mt\">\r\n <text class=\"uni-title-text\"> 不同颜色和尺寸的checkbox </text>\r\n </view>\r\n <view>\r\n <checkbox-group class=\"uni-flex uni-row checkbox-group\">\r\n <checkbox\r\n value=\"cb1\"\r\n :checked=\"true\"\r\n color=\"#FFCC33\"\r\n style=\"transform: scale(0.7); margin-right: 30rpx\"\r\n class=\"checkbox\"\r\n >选中\r\n </checkbox>\r\n <checkbox\r\n value=\"cb\"\r\n color=\"#FFCC33\"\r\n style=\"transform: scale(0.7)\"\r\n class=\"checkbox\"\r\n >未选中</checkbox\r\n >\r\n </checkbox-group>\r\n </view>\r\n </view>\r\n\r\n <view class=\"uni-padding-wrap\">\r\n <view class=\"uni-title uni-common-mt\">\r\n <text class=\"uni-title-text\"> 推荐展示样式 </text>\r\n </view>\r\n </view>\r\n <view class=\"uni-list uni-common-pl\">\r\n <checkbox-group @change=\"checkboxChange\" class=\"checkbox-group\">\r\n <checkbox\r\n class=\"uni-list-cell uni-list-cell-pd checkbox\"\r\n v-for=\"(item, index) in items\"\r\n :key=\"item.value\"\r\n :value=\"item.value\"\r\n :checked=\"item.checked\"\r\n :class=\"index < items.length - 1 ? 'uni-list-cell-line' : ''\"\r\n >\r\n {{ item.name }}\r\n </checkbox>\r\n </checkbox-group>\r\n </view>\r\n </view>\r\n\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n<style>\r\n.main {\r\n max-height: 500rpx;\r\n padding: 10rpx 0;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.06);\r\n flex-direction: row;\r\n justify-content: center;\r\n}\r\n\r\n.main .list-item {\r\n width: 100%;\r\n height: 200rpx;\r\n border: 1px solid #666;\r\n}\r\n\r\n.uni-list-cell {\r\n justify-content: flex-start;\r\n}\r\n</style>\r\n\n```","compatibility":"\n### checkbox 兼容性\n| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- |\n| 5.0 | √ | √ | 10.0 | √ | x |\n\n ### checkbox 属性兼容性\n| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| disabled | 5.0 | √ | √ | 10.0 | √ | x |\n| value | 5.0 | √ | √ | 10.0 | √ | x |\n| checked | 5.0 | √ | √ | 10.0 | √ | x |\n| color | 5.0 | √ | √ | 10.0 | √ | x |\n| backgroundColor | 5.0 | x | √ | 10.0 | x | x |\n| borderColor | 5.0 | x | √ | 10.0 | x | x |\n| activeBackgroundColor | 5.0 | x | √ | 10.0 | x | x |\n| activeBorderColor | 5.0 | x | √ | 10.0 | x | x |\n| iconColor | 5.0 | x | √ | 10.0 | x | x |","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组成","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| name | string | - | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| @change | (event: [CheckboxGroupChangeEvent](#checkboxgroupchangeevent)) => void | - | checkbox-group中选中项发生改变是触发 change 事件，detail = {value:[选中的checkbox的value的数组\\]} |","event":"\n### 事件\n#### CheckboxGroupChangeEvent\n\n##### 构造函数\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | Array\\<string\\> | 是 | - | - |\n\n##### CheckboxGroupChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [CheckboxGroupChangeEventDetail](#checkboxgroupchangeeventdetail-values) | 是 | - | - |\n| type | string | 是 | - | 事件类型 |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n###### CheckboxGroupChangeEventDetail 的属性值 @checkboxgroupchangeeventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| ctors | Constructor | 是 | - | - |\n| value | Array\\<string\\> | 是 | - | - |\n\n##### CheckboxGroupChangeEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |\n","example":"","compatibility":"\n### checkbox-group 兼容性\n| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- |\n| 5.0 | √ | √ | 10.0 | √ | x |\n\n ### checkbox-group 属性兼容性\n| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| name | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| @change | 5.0 | √ | √ | 10.0 | √ | x |","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- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.checkbox-group)\n"},"canvas":{"name":"## canvas","description":"> 组件类型：[UniCanvasElement](#unicanvaselement) \n\n 画布","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| canvas-id | string | - | canvas 组件的唯一标识符 |\n| disable-scroll | boolean | - | 当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新 |\n| @error | (event: [Event](/component/common#event)) => void | - | 当发生错误时触发 error 事件，detail = {errMsg: 'something wrong'} |","event":"","example":"","compatibility":"\n### canvas 兼容性\n| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- |\n| 5.0 | √ | √ | 10.0 | √ | x |\n\n ### canvas 属性兼容性\n| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| canvas-id | 5.0 | √ | √ | 10.0 | √ | x |\n| disable-scroll | 5.0 | √ | √ | 10.0 | √ | x |\n| @error | 5.0 | √ | √ | 10.0 | √ | x |","children":"","reference":"\n### 参见\n- [uni-app相关参考](https://uniapp.dcloud.io/component/canvas)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.canvas)\n","component_type":"### UniCanvasElement\n\n#### UniCanvasElement 的方法\n##### getContext(contextId, options?) @getcontext\n\r\nReturns an object that provides methods and properties for drawing and manipulating images and graphics on a canvas element in a document. A context object includes information about colors, line widths, fonts, and other graphic parameters that can be drawn on a canvas.\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| contextId | string | 是 | - | The identifier (ID) of the type of canvas to create. Internet Explorer 9 and Internet Explorer 10 support only a 2-D context using canvas.getContext(\"2d\"); IE11 Preview also supports 3-D or WebGL context using canvas.getContext(\"experimental-webgl\"); [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement/getContext) |\n| options | CanvasRenderingContext2DSettings | 否 | - | - |\n###### 返回值 \n\n| 类型 | 必备 |\n| :- | :- |\n| [CanvasRenderingContext2D](#canvasrenderingcontext2d-values) | 否 | \n\n###### CanvasRenderingContext2D 的属性值 @canvasrenderingcontext2d-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| canvas | HTMLCanvasElement | 是 | - | [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/canvas) |\n| globalAlpha | number | 是 | - | [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/globalAlpha) |\n| globalCompositeOperation | GlobalCompositeOperation | 是 | - | [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation) |\n| fillStyle | string \\\\| [CanvasGradient](#canvasgradient-values) \\\\| [CanvasPattern](#canvaspattern-values) | 是 | - | [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/fillStyle) |\n| strokeStyle | string \\\\| [CanvasGradient](#canvasgradient-values) \\\\| [CanvasPattern](#canvaspattern-values) | 是 | - | [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/strokeStyle) |\n| filter | string | 是 | - | [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/filter) |\n| imageSmoothingEnabled | boolean | 是 | - | [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled) |\n| imageSmoothingQuality | ImageSmoothingQuality | 是 | - | [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/imageSmoothingQuality) |\n| lineCap | CanvasLineCap | 是 | - | [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/lineCap) |\n| lineDashOffset | number | 是 | - | [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/lineDashOffset) |\n| lineJoin | CanvasLineJoin | 是 | - | [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/lineJoin) |\n| lineWidth | number | 是 | - | [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/lineWidth) |\n| miterLimit | number | 是 | - | [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/miterLimit) |\n| shadowBlur | number | 是 | - | [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/shadowBlur) |\n| shadowColor | string | 是 | - | [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/shadowColor) |\n| shadowOffsetX | number | 是 | - | [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/shadowOffsetX) |\n| shadowOffsetY | number | 是 | - | [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/shadowOffsetY) |\n| direction | CanvasDirection | 是 | - | [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/direction) |\n| font | string | 是 | - | [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/font) |\n| fontKerning | CanvasFontKerning | 是 | - | [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/fontKerning) |\n| textAlign | CanvasTextAlign | 是 | - | [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/textAlign) |\n| textBaseline | CanvasTextBaseline | 是 | - | [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/textBaseline) |\n\n###### CanvasRenderingContext2D 的方法 @canvasrenderingcontext2d-values \n\n##### getContextAttributes() @getcontextattributes\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/getContextAttributes)\n\n###### 返回值 \n\n| 类型 |\n| :- |\n| CanvasRenderingContext2DSettings | \n\n\n\n##### drawImage(image, dx, dy) @drawimage\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/drawImage)\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| image | CanvasImageSource | 是 | - | - |\n| dx | number | 是 | - | - |\n| dy | number | 是 | - | - |\n\n\n\n##### beginPath() @beginpath\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/beginPath)\n\n\n\n\n##### clip(fillRule?) @clip\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/clip)\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| fillRule | CanvasFillRule | 否 | - | - |\n\n\n\n##### fill(fillRule?) @fill\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/clip)\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| fillRule | CanvasFillRule | 否 | - | - |\n\n\n\n##### isPointInPath(x, y, fillRule?) @ispointinpath\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/isPointInPath)\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| x | number | 是 | - | - |\n| y | number | 是 | - | - |\n| fillRule | CanvasFillRule | 否 | - | - |\n###### 返回值 \n\n| 类型 |\n| :- |\n| boolean | \n\n\n\n##### isPointInStroke(x, y) @ispointinstroke\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/isPointInStroke)\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| x | number | 是 | - | - |\n| y | number | 是 | - | - |\n###### 返回值 \n\n| 类型 |\n| :- |\n| boolean | \n\n\n\n##### stroke() @stroke\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/stroke)\n\n\n\n\n##### createConicGradient(startAngle, x, y) @createconicgradient\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/createConicGradient)\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| startAngle | number | 是 | - | - |\n| x | number | 是 | - | - |\n| y | number | 是 | - | - |\n###### 返回值 \n\n| 类型 |\n| :- |\n| [CanvasGradient](#canvasgradient-values) | \n\n###### CanvasGradient 的方法 @canvasgradient-values \n\n##### addColorStop(offset, color) @addcolorstop\n\r\nAdds a color stop with the given color to the gradient at the given offset. 0.0 is the offset at one end of the gradient, 1.0 is the offset at the other end.\r\n\r\nThrows an \"IndexSizeError\" DOMException if the offset is out of range. Throws a \"SyntaxError\" DOMException if the color cannot be parsed.\r\n\r\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasGradient/addColorStop)\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| offset | number | 是 | - | - |\n| color | string | 是 | - | - |\n\n\n\n\n\n##### createLinearGradient(x0, y0, x1, y1) @createlineargradient\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/createLinearGradient)\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| x0 | number | 是 | - | - |\n| y0 | number | 是 | - | - |\n| x1 | number | 是 | - | - |\n| y1 | number | 是 | - | - |\n###### 返回值 \n\n| 类型 |\n| :- |\n| [CanvasGradient](#canvasgradient-values) | \n\n\n\n##### createPattern(image, repetition?) @createpattern\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/createPattern)\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| image | CanvasImageSource | 是 | - | - |\n| repetition | string | 否 | - | - |\n###### 返回值 \n\n| 类型 | 必备 |\n| :- | :- |\n| [CanvasPattern](#canvaspattern-values) | 否 | \n\n###### CanvasPattern 的方法 @canvaspattern-values \n\n##### setTransform(transform?) @settransform\n\r\nSets the transformation matrix that will be used when rendering the pattern during a fill or stroke painting operation.\r\n\r\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasPattern/setTransform)\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| transform | DOMMatrix2DInit | 否 | - | - |\n\n\n\n\n\n##### createRadialGradient(x0, y0, r0, x1, y1, r1) @createradialgradient\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/createRadialGradient)\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| x0 | number | 是 | - | - |\n| y0 | number | 是 | - | - |\n| r0 | number | 是 | - | - |\n| x1 | number | 是 | - | - |\n| y1 | number | 是 | - | - |\n| r1 | number | 是 | - | - |\n###### 返回值 \n\n| 类型 |\n| :- |\n| [CanvasGradient](#canvasgradient-values) | \n\n\n\n##### createImageData(sw, sh, settings?) @createimagedata\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/createImageData)\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| sw | number | 是 | - | - |\n| sh | number | 是 | - | - |\n| settings | ImageDataSettings | 否 | - | - |\n###### 返回值 \n\n| 类型 |\n| :- |\n| ImageData | \n\n\n\n##### getImageData(sx, sy, sw, sh, settings?) @getimagedata\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/getImageData)\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| sx | number | 是 | - | - |\n| sy | number | 是 | - | - |\n| sw | number | 是 | - | - |\n| sh | number | 是 | - | - |\n| settings | ImageDataSettings | 否 | - | - |\n###### 返回值 \n\n| 类型 |\n| :- |\n| ImageData | \n\n\n\n##### putImageData(imagedata, dx, dy) @putimagedata\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/putImageData)\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| imagedata | ImageData | 是 | - | - |\n| dx | number | 是 | - | - |\n| dy | number | 是 | - | - |\n\n\n\n##### arc(x, y, radius, startAngle, endAngle, counterclockwise?) @arc\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/arc)\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| x | number | 是 | - | - |\n| y | number | 是 | - | - |\n| radius | number | 是 | - | - |\n| startAngle | number | 是 | - | - |\n| endAngle | number | 是 | - | - |\n| counterclockwise | boolean | 否 | - | - |\n\n\n\n##### arcTo(x1, y1, x2, y2, radius) @arcto\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/arcTo)\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| x1 | number | 是 | - | - |\n| y1 | number | 是 | - | - |\n| x2 | number | 是 | - | - |\n| y2 | number | 是 | - | - |\n| radius | number | 是 | - | - |\n\n\n\n##### bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) @beziercurveto\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/bezierCurveTo)\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| cp1x | number | 是 | - | - |\n| cp1y | number | 是 | - | - |\n| cp2x | number | 是 | - | - |\n| cp2y | number | 是 | - | - |\n| x | number | 是 | - | - |\n| y | number | 是 | - | - |\n\n\n\n##### closePath() @closepath\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/closePath)\n\n\n\n\n##### ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise?) @ellipse\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/ellipse)\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| x | number | 是 | - | - |\n| y | number | 是 | - | - |\n| radiusX | number | 是 | - | - |\n| radiusY | number | 是 | - | - |\n| rotation | number | 是 | - | - |\n| startAngle | number | 是 | - | - |\n| endAngle | number | 是 | - | - |\n| counterclockwise | boolean | 否 | - | - |\n\n\n\n##### lineTo(x, y) @lineto\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/lineTo)\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| x | number | 是 | - | - |\n| y | number | 是 | - | - |\n\n\n\n##### moveTo(x, y) @moveto\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/moveTo)\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| x | number | 是 | - | - |\n| y | number | 是 | - | - |\n\n\n\n##### quadraticCurveTo(cpx, cpy, x, y) @quadraticcurveto\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/quadraticCurveTo)\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| cpx | number | 是 | - | - |\n| cpy | number | 是 | - | - |\n| x | number | 是 | - | - |\n| y | number | 是 | - | - |\n\n\n\n##### rect(x, y, w, h) @rect\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/rect)\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| x | number | 是 | - | - |\n| y | number | 是 | - | - |\n| w | number | 是 | - | - |\n| h | number | 是 | - | - |\n\n\n\n##### roundRect(x, y, w, h, radii?) @roundrect\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/roundRect)\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| x | number | 是 | - | - |\n| y | number | 是 | - | - |\n| w | number | 是 | - | - |\n| h | number | 是 | - | - |\n| radii | number \\\\| DOMPointInit \\\\| Array\\<Union\\> | 否 | - | - |\n\n\n\n##### getLineDash() @getlinedash\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/getLineDash)\n\n###### 返回值 \n\n| 类型 |\n| :- |\n| Array\\<number\\> | \n\n\n\n##### setLineDash(segments) @setlinedash\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/setLineDash)\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| segments | Array\\<number\\> | 是 | - | - |\n\n\n\n##### clearRect(x, y, w, h) @clearrect\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/clearRect)\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| x | number | 是 | - | - |\n| y | number | 是 | - | - |\n| w | number | 是 | - | - |\n| h | number | 是 | - | - |\n\n\n\n##### fillRect(x, y, w, h) @fillrect\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/fillRect)\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| x | number | 是 | - | - |\n| y | number | 是 | - | - |\n| w | number | 是 | - | - |\n| h | number | 是 | - | - |\n\n\n\n##### strokeRect(x, y, w, h) @strokerect\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/strokeRect)\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| x | number | 是 | - | - |\n| y | number | 是 | - | - |\n| w | number | 是 | - | - |\n| h | number | 是 | - | - |\n\n\n\n##### restore() @restore\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/restore)\n\n\n\n\n##### save() @save\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/save)\n\n\n\n\n##### fillText(text, x, y, maxWidth?) @filltext\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/fillText)\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| text | string | 是 | - | - |\n| x | number | 是 | - | - |\n| y | number | 是 | - | - |\n| maxWidth | number | 否 | - | - |\n\n\n\n##### measureText(text) @measuretext\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/measureText)\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| text | string | 是 | - | - |\n###### 返回值 \n\n| 类型 |\n| :- |\n| TextMetrics | \n\n\n\n##### strokeText(text, x, y, maxWidth?) @stroketext\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/strokeText)\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| text | string | 是 | - | - |\n| x | number | 是 | - | - |\n| y | number | 是 | - | - |\n| maxWidth | number | 否 | - | - |\n\n\n\n##### getTransform() @gettransform\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/getTransform)\n\n###### 返回值 \n\n| 类型 |\n| :- |\n| DOMMatrix | \n\n\n\n##### resetTransform() @resettransform\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/resetTransform)\n\n\n\n\n##### rotate(angle) @rotate\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/rotate)\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| angle | number | 是 | - | - |\n\n\n\n##### scale(x, y) @scale\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/scale)\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| x | number | 是 | - | - |\n| y | number | 是 | - | - |\n\n\n\n##### setTransform(a, b, c, d, e, f) @settransform\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/setTransform)\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| a | number | 是 | - | - |\n| b | number | 是 | - | - |\n| c | number | 是 | - | - |\n| d | number | 是 | - | - |\n| e | number | 是 | - | - |\n| f | number | 是 | - | - |\n\n\n\n##### transform(a, b, c, d, e, f) @transform\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/transform)\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| a | number | 是 | - | - |\n| b | number | 是 | - | - |\n| c | number | 是 | - | - |\n| d | number | 是 | - | - |\n| e | number | 是 | - | - |\n| f | number | 是 | - | - |\n\n\n\n##### translate(x, y) @translate\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/translate)\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| x | number | 是 | - | - |\n| y | number | 是 | - | - |\n\n\n\n##### drawFocusIfNeeded(element) @drawfocusifneeded\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/drawFocusIfNeeded)\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| element | [Element](/dom/element.md) | 是 | - | - |\n\n\n\n\n\n##### toDataURL(type?, quality?) @todataurl\n\r\nReturns the content of the current canvas as an image that you can use as a source for another canvas or an HTML element.\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| type | string | 否 | - | The standard MIME type for the image format to return. If you do not specify this parameter, the default value is a PNG format image. [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement/toDataURL) |\n| quality | any | 否 | - | - |\n###### 返回值 \n\n| 类型 |\n| :- |\n| string | \n\n\n"},"image":{"name":"## image","description":"> 组件类型：UniImageElement \n\n 图片","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| src | string(string.ImageURIString) | - | 图片资源地址 |\n| mode | string | \"scaleToFill\" | 图片裁剪、缩放的模式 [mode](#mode-values) |\n| fade-show | boolean | false | 图片显示动画效果 |\n| @error | (event: [ImageErrorEvent](#imageerrorevent)) => void | - | 图片加载错误时触发，event.detail = { errMsg } |\n| @load | (event: [ImageLoadEvent](#imageloadevent)) => void | - | 图片加载完成时触发，event.detail = { width: '图片宽度px', height: '图片高度px' } |\n\n#### mode @mode-values \n\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\n","event":"\n### 事件\n#### ImageErrorEvent\n\n##### ImageErrorEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [ImageErrorEventDetail](#imageerroreventdetail-values) | 是 | - | - |\n| type | string | 是 | - | 事件类型 |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n###### ImageErrorEventDetail 的属性值 @imageerroreventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| errMsg | string | 是 | - | 错误信息 |\n\n##### ImageErrorEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |\n\n#### ImageLoadEvent\n\n##### ImageLoadEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [ImageLoadEventDetail](#imageloadeventdetail-values) | 是 | - | - |\n| type | string | 是 | - | 事件类型 |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n###### ImageLoadEventDetail 的属性值 @imageloadeventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| width | number | 是 | - | 图片宽度 |\n| height | number | 是 | - | 图片高度 |\n\n##### ImageLoadEvent 的方法\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 ```html\n<template>\r\n\t<view>\r\n\t\t<page-head :title=\"title\"></page-head>\r\n\t\t<view class=\"uni-padding-wrap uni-common-mt\">\r\n\t\t\t<view class=\"uni-center\" style=\"background:#FFFFFF;\">\r\n\t\t\t\t<image class=\"image\" :fade-show=\"true\" mode=\"widthFix\" :src=\"imageSrc\" @error=\"error\"\r\n\t\t\t\t\t@load=\"load\"></image>\r\n\t\t\t</view>\r\n\t\t\t<view class=\"uni-btn-v\">\r\n\t\t\t\t<button type=\"primary\" @tap=\"imageFormat\">图片格式示例</button>\r\n\t\t\t</view>\r\n\t\t\t<view class=\"uni-btn-v\">\r\n\t\t\t\t<button type=\"primary\" @tap=\"imageMode\">图片缩放模式示例</button>\r\n\t\t\t</view>\r\n\t\t\t<view class=\"uni-btn-v\">\r\n\t\t\t\t<button type=\"primary\" @tap=\"imagePath\">图片路径示例</button>\r\n\t\t\t</view>\r\n\t\t\t<view class=\"uni-btn-v\">\r\n\t\t\t\t<button type=\"primary\" @tap=\"imageLarge\">大图示例</button>\r\n\t\t\t</view>\r\n\t\t</view>\r\n\t</view>\r\n</template>\r\n<script>\r\n\texport default {\r\n\t\tdata() {\r\n\t\t\treturn {\r\n\t\t\t\ttitle: 'image',\n\t\t\t\timageSrc: \"/static/test-image/logo.png\",\n\t\t\t\tloadError: false\r\n\t\t\t}\r\n\t\t},\r\n\t\tmethods: {\r\n\t\t\terror(event : ImageErrorEvent) {\n\t\t\t\tthis.loadError = true\r\n\t\t\t\tconsole.log(event.type, event.detail);\r\n\t\t\t},\r\n\t\t\tload(event : ImageLoadEvent) {\r\n\t\t\t\tconsole.log(event.type, event.detail);\r\n\t\t\t},\r\n\t\t\timageFormat() {\r\n\t\t\t\tuni.navigateTo({\r\n\t\t\t\t\turl: '/pages/component/image/image-format'\r\n\t\t\t\t});\r\n\t\t\t},\r\n\t\t\timageMode() {\r\n\t\t\t\tuni.navigateTo({\r\n\t\t\t\t\turl: '/pages/component/image/image-mode'\r\n\t\t\t\t});\r\n\t\t\t},\r\n\t\t\timagePath() {\r\n\t\t\t\tuni.navigateTo({\r\n\t\t\t\t\turl: '/pages/component/image/image-path'\r\n\t\t\t\t});\r\n\t\t\t},\r\n\t\t\timageLarge() {\r\n\t\t\t\tuni.navigateTo({\r\n\t\t\t\t\turl: '/pages/component/image/image-large'\r\n\t\t\t\t});\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n</script>\r\n<style>\r\n\t.image {\r\n\t\tmargin: 40rpx auto;\r\n\t\twidth: 200rpx;\r\n\t}\r\n</style>\n\n```","compatibility":"\n### image 兼容性\n| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- |\n| 5.0 | √ | 3.9+ | 9.0 | √ | - |\n\n ### image 属性兼容性\n| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| src | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| mode | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| fade-show | 5.0 | √ | 3.9+ | 9.0 | x | x |","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 \n\n 输入框","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| name | string | - | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| disabled | boolean | false | 是否禁用 |\n| value | string | \"\" | 输入框的初始内容 |\n| type | text \\| number \\| digit \\| tel | \"text\" | input的类型 [type](#type-values) |\n| password | boolean | false | 是否是密码类型 |\n| placeholder | string | \"\" | 输入框为空时占位符 |\n| placeholder-style | string | \"\" | 指定 placeholder 的样式 |\n| placeholder-class | string(string.ClassString) | \"\" | 指定 placeholder 的样式类 |\n| maxlength | number | 140 | 最大输入长度，设置为 -1 的时候不限制最大长度 |\n| cursor-spacing | number | 0 | 指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 |\n| cursor-color | string(string.ColorString) | \"\" | 指定光标颜色 |\n| auto-focus | boolean | false | 自动获取焦点 |\n| focus | boolean | false | 获取焦点 |\n| confirm-type | send \\| search \\| next \\| go \\| done | \"done\" | 设置键盘右下角按钮的文字 [confirm-type](#confirm-type-values) |\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| @input | (event: [InputEvent](#inputevent)) => void | - | 当键盘输入时，触发input事件，event.detail = {value, cursor}，处理函数可以直接 return 一个字符串，将替换输入框的内容。 |\n| @focus | (event: [InputFocusEvent](#inputfocusevent)) => void | - | 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度，在基础库 1.9.90 起支持 |\n| @blur | (event: [InputBlurEvent](#inputblurevent)) => void | - | 输入框失去焦点时触发，event.detail = {value: value} |\n| @keyboardheightchange | (event: [InputKeyboardHeightChangeEvent](#inputkeyboardheightchangeevent)) => void | - | 键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration} |\n| @confirm | (event: [InputConfirmEvent](#inputconfirmevent)) => void | - | 点击完成按钮时触发，event.detail = {value: value} |\n\n#### type @type-values \n\n| 值名称 | 描述 |\n| :- | :- |\n| text | 文本输入键盘 |\n| number | 数字输入键盘 |\n| digit | 带小数点数字输入键盘 |\n| tel | 电话输入键盘 |\n\n\n\n#### confirm-type @confirm-type-values \n\n| 值名称 | 描述 |\n| :- | :- |\n| send | 发送 |\n| search | 搜索 |\n| next | 下一个 |\n| go | 前往 |\n| done | 完成 |\n\n","event":"\n### 事件\n#### InputEvent\n\n##### InputEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [InputEventDetail](#inputeventdetail-values) | 是 | - | - |\n| type | string | 是 | - | 事件类型 |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n###### InputEventDetail 的属性值 @inputeventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | string | 是 | - | 输入框内容 |\n| cursor | number | 是 | - | 光标的位置 |\n| keyCode | number | 是 | - | 输入字符的Unicode值 |\n\n##### InputEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |\n\n#### InputFocusEvent\n\n##### InputFocusEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [InputFocusEventDetail](#inputfocuseventdetail-values) | 是 | - | - |\n| type | string | 是 | - | 事件类型 |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n###### InputFocusEventDetail 的属性值 @inputfocuseventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| height | number | 是 | - | 键盘高度 |\n| value | string | 是 | - | 输入框内容 |\n\n##### InputFocusEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |\n\n#### InputBlurEvent\n\n##### InputBlurEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [InputBlurEventDetail](#inputblureventdetail-values) | 是 | - | - |\n| type | string | 是 | - | 事件类型 |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n###### InputBlurEventDetail 的属性值 @inputblureventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | string | 是 | - | 输入框内容 |\n\n##### InputBlurEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |\n\n#### InputKeyboardHeightChangeEvent\n\n##### InputKeyboardHeightChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [InputKeyboardHeightChangeEventDetail](#inputkeyboardheightchangeeventdetail-values) | 是 | - | - |\n| type | string | 是 | - | 事件类型 |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n###### InputKeyboardHeightChangeEventDetail 的属性值 @inputkeyboardheightchangeeventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| height | number | 是 | - | 键盘高度 |\n| duration | number | 是 | - | 持续时间 |\n\n##### InputKeyboardHeightChangeEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |\n\n#### InputConfirmEvent\n\n##### InputConfirmEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [InputConfirmEventDetail](#inputconfirmeventdetail-values) | 是 | - | - |\n| type | string | 是 | - | 事件类型 |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n###### InputConfirmEventDetail 的属性值 @inputconfirmeventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | string | 是 | - | 输入框内容 |\n\n##### InputConfirmEvent 的方法\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 ```html\n<template>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\">\r\n <!-- #endif -->\r\n <page-head :title=\"title\"></page-head>\r\n <view class=\"uni-common-mt uni-padding-wrap\">\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">设置输入框的初始内容</text>\r\n </view>\r\n <view class=\"uni-input-wrapper\">\r\n <input class=\"uni-input uni-input-default\" value=\"hello uni-app x\" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">type取值（不同输入法表现可能不一致）</text>\r\n </view>\r\n <view class=\"uni-input-wrapper\">\r\n <input class=\"uni-input uni-input-type-text\" type=\"text\" placeholder=\"文本输入键盘\" />\r\n </view>\r\n <view class=\"uni-input-wrapper\">\r\n <input class=\"uni-input uni-input-type-number\" type=\"number\" placeholder=\"数字输入键盘\" />\r\n </view>\r\n <view class=\"uni-input-wrapper\">\r\n <input class=\"uni-input uni-input-type-digit\" type=\"digit\" placeholder=\"带小数点的数字输入键盘\" />\r\n </view>\r\n <view class=\"uni-input-wrapper\">\r\n <input class=\"uni-input uni-input-type-tel\" :type=\"inputTypeTel\" placeholder=\"电话输入键盘\" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">密码输入框</text>\r\n </view>\r\n <view class=\"uni-input-wrapper\">\r\n <input class=\"uni-input uni-input-password\" :password=\"inputPassword\" :value=\"inputPasswordValue\" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">占位符样式</text>\r\n </view>\r\n <view class=\"uni-input-wrapper\">\r\n <input class=\"uni-input uni-input-placeholder1\" :placeholder-style=\"inputPlaceHolderStyle\" placeholder=\"占位符文字颜色为红色\" />\r\n </view>\r\n <view class=\"uni-input-wrapper\">\r\n <input class=\"uni-input uni-input-placeholder2\" :placeholder-class=\"inputPlaceHolderClass\" placeholder=\"占位符背景色为绿色\" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">设置禁用输入框</text>\r\n </view>\r\n <view class=\"uni-input-wrapper\">\r\n <input class=\"uni-input uni-input-disable\" :disabled=\"true\" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">设置最大输入长度</text>\r\n </view>\r\n <view class=\"uni-input-wrapper\">\r\n <input class=\"uni-input uni-input-maxlength\" :maxlength=\"10\" placeholder=\"最大输入长度为10\" :value=\"inputMaxLengthValue\" @input=\"onMaxLengthInput\" :focus=\"inputMaxLengthFocus\" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">设置光标与键盘的距离</text>\r\n </view>\r\n <view class=\"uni-input-wrapper\">\r\n <input class=\"uni-input\" :cursor-spacing=\"1000\" placeholder=\"光标与键盘的距离为1000px\" />\r\n </view>\r\n </view>\n\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">自动获取焦点</text>\r\n </view>\r\n <view class=\"uni-input-wrapper\">\r\n <input class=\"uni-input uni-input-focus\" :focus=\"focus\" @keyboardheightchange=\"inputFocusKeyBoardChange\"/>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">confirm-type取值（不同输入法表现可能不一致）</text>\r\n </view>\r\n <view class=\"uni-input-wrapper\">\r\n <input class=\"uni-input uni-input-confirm-send\" confirmType=\"send\" placeholder=\"键盘右下角按钮显示为发送\" />\r\n </view>\r\n <view class=\"uni-input-wrapper\">\r\n <input class=\"uni-input uni-input-confirm-search\" confirmType=\"search\" placeholder=\"键盘右下角按钮显示为搜索\" />\r\n </view>\r\n <view class=\"uni-input-wrapper\">\r\n <input class=\"uni-input uni-input-confirm-next\" confirmType=\"next\" placeholder=\"键盘右下角按钮显示为下一个\" />\r\n </view>\r\n <view class=\"uni-input-wrapper\">\r\n <input class=\"uni-input uni-input-confirm-go\" confirmType=\"go\" placeholder=\"键盘右下角按钮显示为前往\" />\r\n </view>\r\n <view class=\"uni-input-wrapper\">\r\n <input class=\"uni-input uni-input-confirm-done\" confirmType=\"done\" placeholder=\"键盘右下角按钮显示为完成\" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">点击键盘右下角按钮时保持键盘不收起</text>\r\n </view>\r\n <view class=\"uni-input-wrapper\">\r\n <input class=\"uni-input\" :confirm-hold=\"true\" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\" @click=\"setCursor(4)\">\r\n <text class=\"uni-title-text\">设置输入框聚焦时光标的位置（点击生效）</text>\r\n </view>\r\n <view class=\"uni-input-wrapper\">\r\n <input ref=\"input\" class=\"uni-input\" value=\"0123456789\" :cursor=\"cursor\" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\" @click=\"setSelection(0, 4)\">\r\n <text class=\"uni-title-text\">设置输入框聚焦时光标的起始位置和结束位置（点击生效）</text>\r\n </view>\r\n <view class=\"uni-input-wrapper\">\r\n <input ref=\"input2\" class=\"uni-input\" value=\"0123456789\" :selection-start=\"selectionStart\" :selection-end=\"selectionEnd\" />\r\n </view>\r\n </view>\n\n <view>\n <view class=\"uni-title\" @click=\"changeCursorColor\">\n <text class=\"uni-title-text\">设置光标颜色为透明（点击本行文字生效，再点复位）</text>\n </view>\n <view class=\"uni-input-wrapper\">\n <input class=\"uni-input uni-input-cursor-color\" :cursor-color=\"cursor_color\" value=\"光标颜色\" />\n </view>\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">键盘弹起时，自动上推页面</text>\r\n </view>\r\n <view class=\"uni-input-wrapper\">\r\n <input class=\"uni-input\" :adjust-position=\"true\" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">input事件</text>\r\n <text class=\"uni-subtitle-text\" v-if=\"inputEventDetail\">{{inputEventDetail}}</text>\r\n </view>\r\n <view class=\"uni-input-wrapper\">\r\n <input class=\"uni-input\" @input=\"onInput\" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">focus事件和blur事件</text>\r\n <text class=\"uni-subtitle-text\" v-if=\"focusAndBlurEventDetail\">{{focusAndBlurEventDetail}}</text>\r\n </view>\r\n <view class=\"uni-input-wrapper\">\r\n <input class=\"uni-input\" @focus=\"onFocus\" @blur=\"onBlur\" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">confirm事件</text>\r\n <text class=\"uni-subtitle-text\" v-if=\"confirmEventDetail\">{{confirmEventDetail}}</text>\r\n </view>\r\n <view class=\"uni-input-wrapper\">\r\n <input class=\"uni-input\" @confirm=\"onConfirm\" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">keyboardheightchange事件</text>\r\n <text class=\"uni-subtitle-text\" v-if=\"keyboardHeightChangeEventDetail\">{{keyboardHeightChangeEventDetail}}</text>\r\n </view>\r\n <view class=\"uni-input-wrapper\">\r\n <input class=\"uni-input\" @keyboardheightchange=\"onKeyborardHeightChange\" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">带清除按钮的输入框</text>\r\n </view>\r\n <view class=\"uni-input-wrapper\">\r\n <input class=\"uni-input\" placeholder=\"带清除按钮的输入框\" :value=\"inputClearValue\" @input=\"clearInput\" />\r\n <image class=\"uni-icon\" src=\"/static/icons/clear.png\" v-if=\"showClearIcon\" @click=\"clearIcon\">\r\n </image>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">可查看密码的输入框</text>\r\n </view>\r\n <view class=\"uni-input-wrapper\">\r\n <input class=\"uni-input\" placeholder=\"请输入密码\" :password=\"showPassword\" />\r\n <image class=\"uni-icon\" :src=\"!showPassword ? '/static/icons/eye-active.png' : '/static/icons/eye.png'\" @click=\"changePassword\"></image>\r\n </view>\r\n </view>\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n<script lang=\"uts\">\r\n export default {\r\n data() {\r\n return {\r\n title: 'input',\r\n showClearIcon: false,\r\n inputClearValue: '',\r\n showPassword: true,\r\n cursor: -1,\n cursor_color: \"#3393E2\",\r\n selectionStart: -1,\r\n selectionEnd: -1,\r\n inputEventDetail: '',\r\n focusAndBlurEventDetail: '',\r\n confirmEventDetail: '',\r\n keyboardHeightChangeEventDetail: '',\r\n focus: true,\r\n inputPassword: true,\r\n inputTypeTel: \"tel\",\r\n inputPlaceHolderStyle: \"color:red\",\r\n inputPlaceHolderClass: \"uni-input-placeholder-class\",\n inputMaxLengthValue:\"\",\n onMaxLengthInputValue:\"\",\n inputMaxLengthFocus:false,\n inputPasswordValue:\"\",\n inputFocusKeyBoardChangeValue:true\r\n }\r\n },\r\n methods: {\n inputFocusKeyBoardChange(e:InputKeyboardHeightChangeEvent) {\n this.inputFocusKeyBoardChangeValue = e.detail.height > 50\n },\n onMaxLengthInput(event:InputEvent) {\n this.onMaxLengthInputValue = event.detail.value\n },\r\n setCursor: function (cursor : number) {\r\n (this.$refs['input'] as Element).focus();\r\n this.cursor = cursor;\r\n },\r\n setSelection: function (selectionStart : number, selectionEnd : number) {\r\n (this.$refs['input2'] as Element).focus();\r\n this.selectionStart = selectionStart;\r\n this.selectionEnd = selectionEnd;\r\n },\r\n clearInput: function (event : InputEvent) {\r\n this.inputClearValue = event.detail.value\r\n if (event.detail.value.length > 0) {\r\n this.showClearIcon = true\r\n } else {\r\n this.showClearIcon = false\r\n }\r\n },\r\n clearIcon: function () {\r\n this.inputClearValue = ''\r\n this.showClearIcon = false\r\n },\r\n changePassword: function () {\r\n this.showPassword = !this.showPassword\r\n },\r\n onInput: function (event : InputEvent) {\r\n console.log(\"键盘输入\", JSON.stringify(event.detail));\r\n this.inputEventDetail = JSON.stringify(event.detail)\r\n },\r\n onFocus: function (event : InputFocusEvent) {\r\n console.log(\"输入框聚焦\", JSON.stringify(event.detail));\r\n this.focusAndBlurEventDetail = JSON.stringify(event.detail);\r\n },\r\n onBlur: function (event : InputBlurEvent) {\r\n console.log(\"输入框失去焦点\", JSON.stringify(event.detail));\r\n this.focusAndBlurEventDetail = JSON.stringify(event.detail);\r\n },\r\n onConfirm: function (event : InputConfirmEvent) {\r\n console.log(\"点击完成按钮\", JSON.stringify(event.detail));\r\n this.confirmEventDetail = JSON.stringify(event.detail);\r\n },\r\n onKeyborardHeightChange: function (event : InputKeyboardHeightChangeEvent) {\r\n console.log(\"键盘高度发生变化\", JSON.stringify(event.detail));\r\n this.keyboardHeightChangeEventDetail = JSON.stringify(event.detail);\r\n },\n test_check_input_value():number {\n return this.onMaxLengthInputValue.length\n },\n changeCursorColor(){\n if(this.cursor_color == \"#3393E2\"){\n this.cursor_color = \"transparent\"\n }else{\n this.cursor_color = \"#3393E2\"\n }\n }\r\n }\r\n }\r\n</script>\r\n\r\n<style scoped>\r\n .uni-input-wrapper {\r\n display: flex;\r\n padding: 8px 13px;\r\n margin: 10rpx 0;\r\n flex-direction: row;\r\n flex-wrap: nowrap;\r\n background-color: #ffffff;\r\n }\r\n\r\n .uni-input {\r\n height: 28px;\r\n font-size: 15px;\r\n padding: 0px;\r\n flex: 1;\r\n background-color: #ffffff;\r\n }\r\n\r\n .uni-icon {\r\n width: 24px;\r\n height: 24px;\r\n }\r\n\r\n .uni-input-placeholder-class {\r\n background-color: green;\r\n }\n .uni-input-placeholder-class-ts {\n background-color: orange;\n }\r\n</style>\n\n```","compatibility":"\n### input 兼容性\n| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- |\n| 5.0 | √ | 3.9+ | 9.0 | √ | - |\n\n ### input 属性兼容性\n| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| name | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| cursor-color | 4.4 | x | 3.99 | x | x | x |","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"},"list-item":{"name":"## list-item","description":"> 组件类型：UniListItemElement \n\n list-view组件的唯一合法子组件。每个item是一行","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| type | number | 0 | 对应list-item的类型 list-view 将对同类型条目进行复用，所以合理的类型拆分，可以很好地提升 list-view 性能 |","event":"","example":"","compatibility":"\n### list-item 兼容性\n| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- |\n| 5.0 | x | 3.9+ | 9.0 | x | - |\n\n ### list-item 属性兼容性\n| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| type | 5.0 | x | 3.9+ | 9.0 | x | - |","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.list-item)\n"},"sticky-header":{"name":"## sticky-header","description":"> 组件类型：UniStickyHeaderElement \n\n 吸顶布局容器 \n\n 注意：暂时仅支持作为list-view、sticky-section的子节点, sticky-header不支持css样式！当一个容器视图设置多个sticky-header时，后一个sticky-header会停靠在前一个sticky-header的末尾处。","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| padding | array\\<number> | [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 ```html\n<template>\r\n\t<list-view :scroll-y=\"true\" class=\"page\" rebound=\"false\" show-scrollbar=false :scroll-top=\"scroll_top_input\" :refresher-enabled=\"refresher_enabled_boolean\"\r\n\t:refresher-triggered=\"refresher_triggered_boolean\" @refresherrefresh=\"list_view_refresherrefresh\">\r\n <list-item type = 1>\r\n <swiper indicator-dots=\"true\" circular=\"true\">\r\n <swiper-item v-for=\"i in 3\" :item-id=\"i\">\r\n <image src=\"/static/shuijiao.jpg\" style=\"height: 240px;\"></image>\r\n <text style=\"position: absolute;\">{{i}}</text>\r\n </swiper-item>\r\n </swiper>\r\n </list-item>\r\n <list-item class=\"content-item\" type = 2>\r\n\t\t\t<text class=\"text\">向上滑动页面，体验sticky-header吸顶效果。</text>\r\n\t\t</list-item>\r\n\t\t<sticky-header>\r\n <scroll-view style=\"background-color: #f5f5f5; flex-direction: row;\" :scroll-x=\"true\" :scroll-y=\"false\" :show-scrollbar=\"false\">\r\n <view class=\"flex-row\" style=\"align-self: flex-start; flex-direction: row;\">\r\n <text ref=\"swipertab\" class=\"sift-item\"\r\n v-for=\"(name,index) in sift_item\" @click=\"clickTH(index)\">\r\n {{name}}\r\n </text>\r\n </view>\r\n </scroll-view>\r\n\t\t</sticky-header>\r\n\r\n\t\t<list-item v-for=\"(item,index) in list_item\" :key=\"index\" class=\"content-item\" type = 3>\r\n\t\t\t<text class=\"text\">{{item}}</text>\r\n\t\t</list-item>\r\n\t</list-view>\r\n</template>\r\n\r\n<script>\r\n\texport default {\r\n\t\tdata() {\r\n\t\t\treturn {\r\n\t\t\t\tsift_item: [\"排序\", \"筛选\"],\r\n\t\t\t\tlist_item: [] as Array<string>,\r\n\t\t\t\trefresher_enabled_boolean: true,\r\n\t\t\t\trefresher_triggered_boolean: false,\r\n\t\t\t\tscroll_top_input: 0\r\n\t\t\t}\r\n\t\t},\r\n onLoad() {\r\n let lists : Array<string> = []\r\n for (let i = 0; i < 40; i++) {\r\n lists.push(\"item---\" + i)\r\n }\r\n this.list_item = lists\r\n },\r\n\t\tmethods: {\r\n\t\t\tlist_view_refresherrefresh() {\r\n\t\t\t console.log(\"下拉刷新被触发 \")\r\n\t\t\t this.refresher_triggered_boolean = true\r\n\t\t\t setTimeout(() => {\r\n\t\t\t \tthis.refresher_triggered_boolean = false\r\n\t\t\t }, 1500)\r\n\t\t\t},\r\n\t\t\tconfirm_scroll_top_input(value : number) {\r\n\t\t\t this.scroll_top_input = value\r\n\t\t\t},\r\n clickTH(index:number){\r\n console.log(\"点击表头：\" + index);\r\n }\r\n\t\t}\r\n\t}\r\n</script>\r\n\r\n<style>\r\n\t.page {\r\n\t\tflex: 1;\r\n\t\tbackground-color: #f5f5f5;\r\n\t}\r\n\r\n\t.content-item {\r\n\t\tpadding: 15px;\r\n\t\tmargin: 5px 0;\r\n\t\tbackground-color: #fff;\r\n\t}\r\n\r\n\t.text {\r\n\t\tfont-size: 14px;\r\n\t\tcolor: #666;\r\n\t\tline-height: 20px;\r\n\t}\r\n\r\n .sift-item {\r\n color: #555;\r\n font-size: 16px;\r\n padding: 12px 15px;\r\n }\r\n\r\n</style>\r\n\n```","compatibility":"\n### sticky-header 兼容性\n| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- |\n| 5.0 | x | 3.93 | 9.0 | x | - |\n\n ### sticky-header 属性兼容性\n| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| padding | 5.0 | x | 3.98 | 9.0 | x | - |","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.sticky-header)\n"},"sticky-section":{"name":"## sticky-section","description":"> 组件类型：UniStickySectionElement \n\n 吸顶布局容器 \n\n 注意：暂时仅支持作为list-view的子节点, sticky-section不支持css样式！","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| push-pinned-header | boolean | true | sticky-section元素重叠时是否继续上推 |\n| padding | array\\<number> | [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 ```html\n<template>\r\n <list-view id=\"list-view\" ref=\"list-view\" show-scrollbar=false class=\"page\" :scroll-into-view=\"scrollIntoView\"\n @scroll=\"onScroll\" @scrollend=\"onScrollEnd\" rebound=\"false\">\n <list-item style=\"padding: 10px; margin: 5px 0;align-items: center;\" :type = 20>\n <button @click=\"gotoStickyHeader('C')\" size=\"mini\">跳转到id为C的sticky-header位置上</button>\n </list-item>\r\n <sticky-section v-for=\"(sectionText) in data\" :padding=\"sectionPadding\" :push-pinned-header=\"true\">\r\n <sticky-header :header-id=\"sectionText\" :id=\"sectionText\">\r\n <text class=\"sticky-header-text\">{{sectionText}}</text>\r\n </sticky-header>\r\n <list-item v-for=\"i in 10\" class=\"content-item\" :type=10>\r\n <text class=\"text\">{{sectionText}}--item--content----{{i}}</text>\r\n </list-item>\r\n </sticky-section>\r\n <list-item style=\"padding: 10px; margin: 5px 0;align-items: center;\" :type= 30>\n <!-- <text style=\"color: #aaa\">到底了</text> -->\r\n <button @click=\"toTop\" size=\"mini\">回到顶部</button>\r\n </list-item>\r\n </list-view>\r\n</template>\r\n\r\n<script>\r\n export default {\r\n data() {\r\n return {\r\n data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N'],\r\n sectionPadding: [0, 10, 0, 10] as Array<number>,\n scrollIntoView: \"\",\n scrolling: false\r\n }\r\n },\r\n methods: {\n toTop(){\n this.scrollIntoView = \"\"\n uni.getElementById(\"list-view\")!.scrollTop = 0\n },\r\n //用于自动化测试\r\n listViewScrollByY(y : number) {\r\n const listview = this.$refs[\"list-view\"] as Element\r\n listview.scrollBy(0, y)\r\n },\n gotoStickyHeader(id : string) {\n this.scrollIntoView = id\n },\n onScroll() {\n this.scrolling = true\n },\n onScrollEnd() {\n this.scrolling = false\n //滚动后重置scrollIntoView = \"\"\n if(this.scrollIntoView != \"\") {\n this.scrollIntoView = \"\"\n }\n }\r\n }\r\n }\r\n</script>\r\n\r\n<style>\r\n .page {\r\n flex: 1;\r\n background-color: #f5f5f5;\r\n }\r\n\r\n .sticky-header-text {\r\n font-size: 16px;\r\n padding: 8px;\r\n color: #959595;\r\n background-color: #f5f5f5;\r\n }\r\n\r\n .content-item {\r\n padding: 15px;\r\n margin: 5px 0;\r\n background-color: #fff;\r\n }\r\n</style>\n\n```","compatibility":"\n### sticky-section 兼容性\n| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- |\n| 5.0 | x | 3.98 | 9.0 | x | - |\n\n ### sticky-section 属性兼容性\n| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| push-pinned-header | 5.0 | x | 3.98 | 9.0 | x | - |\n| padding | 5.0 | x | 3.98 | 9.0 | x | - |","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.sticky-section)\n"},"list-view":{"name":"## list-view","description":"> 组件类型：UniListViewElement \n\n 列表组件","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| scroll-x | boolean | false | 允许横向滚动，不支持同时设置scroll-y属性为true，同时设置true时scroll-y生效 |\n| scroll-y | boolean | true | 允许纵向滚动，不支持同时设置scroll-x属性为true，同时设置true时scroll-y生效 |\n| rebound | boolean | true | 控制是否回弹效果 |\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) | - | 值应为某子元素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 表示不使用默认样式 [refresher-default-style](#refresher-default-style-values) |\n| refresher-background | string(string.ColorString) | \"#FFF\" | 设置下拉刷新区域背景颜色 |\n| refresher-triggered | boolean | false | 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发 |\n| custom-nested-scroll | boolean | false | 子元素是否开启嵌套滚动 将滚动事件与父元素协商处理 |\n| @refresherpulling | (event: [RefresherEvent](#refresherevent)) => void | - | 下拉刷新控件被下拉 |\n| @refresherrefresh | (event: [RefresherEvent](#refresherevent)) => void | - | 下拉刷新被触发 |\n| @refresherrestore | (event: [RefresherEvent](#refresherevent)) => void | - | 下拉刷新被复位 |\n| @refresherabort | (event: [RefresherEvent](#refresherevent)) => void | - | 下拉刷新被中止 |\n| @scrolltoupper | (event: [ScrollToUpperEvent](#scrolltoupperevent)) => void | - | 滚动到顶部/左边，会触发 scrolltoupper 事件 |\n| @scrolltolower | (event: [ScrollToLowerEvent](#scrolltolowerevent)) => void | - | 滚动到底部/右边，会触发 scrolltolower 事件 |\n| @scroll | (event: [ScrollEvent](#scrollevent)) => void | - | 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |\n| @scrollend | (event: [ScrollEvent](#scrollevent)) => void | - | 滚动结束时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |\n\n#### refresher-default-style @refresher-default-style-values \n\n| 值名称 | 描述 |\n| :- | :- |\n| black | 深颜色雪花样式 |\n| white | 浅白色雪花样式 |\n| none | 不使用默认样式 |\n\n\n##### refresher-default-style 兼容性\n| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| black | 5.0 | x | 3.9+ | - | - | - |\n| white | 5.0 | x | 3.9+ | - | - | - |\n| none | 5.0 | x | 3.93 | - | - | - |\n","event":"\n### 事件\n#### RefresherEvent\n\n##### RefresherEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [RefresherEventDetail](#refreshereventdetail-values) | 是 | - | - |\n| type | string | 是 | - | 事件类型 |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n###### RefresherEventDetail 的属性值 @refreshereventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| dy | number | 是 | - | - |\n\n##### RefresherEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |\n\n#### ScrollToUpperEvent\n\n##### ScrollToUpperEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [ScrollToUpperEventDetail](#scrolltouppereventdetail-values) | 是 | - | - |\n| type | string | 是 | - | 事件类型 |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n###### ScrollToUpperEventDetail 的属性值 @scrolltouppereventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| direction | string | 是 | - | 滚动方向 top 或 left |\n\n##### ScrollToUpperEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |\n\n#### ScrollToLowerEvent\n\n##### ScrollToLowerEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [ScrollToLowerEventDetail](#scrolltolowereventdetail-values) | 是 | - | - |\n| type | string | 是 | - | 事件类型 |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n###### ScrollToLowerEventDetail 的属性值 @scrolltolowereventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| direction | string | 是 | - | 滚动方向 bottom 或 right |\n\n##### ScrollToLowerEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |\n\n#### ScrollEvent\n\n##### ScrollEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [ScrollEventDetail](#scrolleventdetail-values) | 是 | - | - |\n| type | string | 是 | - | 事件类型 |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n###### ScrollEventDetail 的属性值 @scrolleventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| scrollTop | number | 是 | - | 竖向滚动的距离 |\n| scrollLeft | number | 是 | - | 横向滚动的距离 |\n| scrollHeight | number | 是 | - | 滚动区域的高度 |\n| scrollWidth | number | 是 | - | 滚动区域的宽度 |\n| deltaY | number | 是 | - | 当次滚动事件竖向滚动量 |\n| deltaX | number | 是 | - | 当次滚动事件横向滚动量 |\n\n##### ScrollEvent 的方法\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 ```html\n<script>\r\n import { ItemType } from '@/components/enum-data/enum-data'\r\n export default {\r\n data() {\r\n return {\r\n refresher_triggered_boolean: false,\r\n refresher_enabled_boolean: false,\r\n scroll_with_animation_boolean: false,\r\n show_scrollbar_boolean: false,\r\n rebound_boolean: true,\r\n scroll_y_boolean: true,\r\n scroll_x_boolean: false,\r\n upper_threshold_input: 50,\r\n lower_threshold_input: 50,\r\n scroll_top_input: 0,\r\n scroll_left_input: 0,\r\n refresher_background_input: \"#FFF\",\r\n scrollData: [] as Array<string>,\r\n size_enum: [{ \"value\": 0, \"name\": \"item---0\" }, { \"value\": 3, \"name\": \"item---3\" }] as ItemType[],\r\n scrollIntoView: \"\",\r\n refresherrefresh: false,\r\n refresher_default_style_input: \"black\",\r\n text: ['继续下拉执行刷新', '释放立即刷新', '刷新中', \"\"],\r\n state: 3,\r\n reset: true\r\n }\r\n },\r\n onLoad() {\r\n let lists : Array<string> = []\r\n for (let i = 0; i < 10; i++) {\r\n lists.push(\"item---\" + i)\r\n }\r\n this.scrollData = lists\r\n },\r\n methods: {\r\n list_view_click() { console.log(\"组件被点击时触发\") },\r\n list_view_touchstart() { console.log(\"手指触摸动作开始\") },\r\n list_view_touchmove() { console.log(\"手指触摸后移动\") },\r\n list_view_touchcancel() { console.log(\"手指触摸动作被打断，如来电提醒，弹窗\") },\r\n list_view_touchend() { console.log(\"手指触摸动作结束\") },\r\n list_view_tap() { console.log(\"手指触摸后马上离开\") },\r\n list_view_longpress() { console.log(\"如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。\") },\r\n list_view_refresherpulling(e : RefresherEvent) {\r\n console.log(\"下拉刷新控件被下拉\")\r\n if(this.reset) {\r\n \tif(e.detail.dy > 45) {\r\n \t\tthis.state = 1\r\n \t} else {\r\n \t\tthis.state = 0\r\n \t}\r\n }\r\n },\r\n list_view_refresherrefresh() {\r\n console.log(\"下拉刷新被触发 \")\r\n this.refresherrefresh = true\r\n this.refresher_triggered_boolean = true\r\n this.state = 2\r\n this.reset = false;\r\n setTimeout(() => {\r\n \tthis.refresher_triggered_boolean = false\r\n }, 1500)\r\n },\r\n list_view_refresherrestore() {\r\n this.refresherrefresh = false\r\n this.state = 3\r\n this.reset = true\r\n console.log(\"下拉刷新被复位\")\r\n },\r\n list_view_refresherabort() { console.log(\"下拉刷新被中止\") },\r\n list_view_scrolltoupper(e:ScrollToUpperEvent) { console.log(\"滚动到顶部/左边，会触发 scrolltoupper 事件 direction=\"+e.detail.direction) },\r\n list_view_scrolltolower(e:ScrollToLowerEvent) { console.log(\"滚动到底部/右边，会触发 scrolltolower 事件 direction=\"+e.detail.direction) },\r\n list_view_scroll() { console.log(\"滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}\") },\r\n list_item_click() { console.log(\"list-item组件被点击时触发\") },\r\n list_item_touchstart() { console.log(\"手指触摸list-item组件动作开始\") },\r\n list_item_touchmove() { console.log(\"手指触摸list-item组件后移动\") },\r\n list_item_touchcancel() { console.log(\"手指触摸list-item组件动作被打断，如来电提醒，弹窗\") },\r\n list_item_touchend() { console.log(\"手指触摸list-item组件动作结束\") },\r\n list_item_tap() { console.log(\"手指触摸list-item组件后马上离开\") },\r\n list_item_longpress() { console.log(\"list-item组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。\") },\r\n change_refresher_triggered_boolean(checked : boolean) { this.refresher_triggered_boolean = checked },\r\n change_refresher_enabled_boolean(checked : boolean) { this.refresher_enabled_boolean = checked },\r\n change_scroll_with_animation_boolean(checked : boolean) { this.scroll_with_animation_boolean = checked },\r\n change_show_scrollbar_boolean(checked : boolean) { this.show_scrollbar_boolean = checked },\r\n change_rebound_boolean(checked : boolean) { this.rebound_boolean = checked },\r\n change_scroll_y_boolean(checked : boolean) { this.scroll_y_boolean = checked },\r\n change_scroll_x_boolean(checked : boolean) { this.scroll_x_boolean = checked },\r\n confirm_upper_threshold_input(value : number) { this.upper_threshold_input = value },\r\n confirm_lower_threshold_input(value : number) { this.lower_threshold_input = value },\r\n confirm_scroll_top_input(value : number) { this.scroll_top_input = value },\r\n confirm_scroll_left_input(value : number) { this.scroll_left_input = value },\r\n confirm_refresher_background_input(value : string) { this.refresher_background_input = value },\r\n item_change_size_enum(index : number) { this.scrollIntoView = \"item---\"+index },\r\n //自动化测试例专用\r\n check_scroll_height(): Boolean {\r\n var listElement = this.$refs[\"listview\"] as Element\r\n console.log(\"check_scroll_height--\"+listElement.scrollHeight)\r\n if(listElement.scrollHeight > 2000) {\r\n return true\r\n }\r\n return false\r\n },\r\n //自动化测试例专用\r\n check_scroll_width(): Boolean {\r\n var listElement = this.$refs[\"listview\"] as Element\r\n console.log(\"check_scroll_width\"+listElement.scrollWidth)\r\n if(listElement.scrollWidth > 2000) {\r\n return true\r\n }\r\n return false\r\n },\r\n change_refresher_style_boolean(checked : boolean) {\r\n if(checked) {\r\n this.refresher_default_style_input = \"none\"\r\n } else {\r\n this.refresher_default_style_input = \"black\"\r\n }\r\n }\r\n }\r\n }\r\n</script>\r\n\r\n<template>\r\n <view class=\"main\">\r\n <list-view :scroll-x=\"scroll_x_boolean\" :scroll-y=\"scroll_y_boolean\" :rebound=\"rebound_boolean\"\r\n :upper-threshold=\"upper_threshold_input\" :lower-threshold=\"lower_threshold_input\" :scroll-top=\"scroll_top_input\"\r\n :scroll-left=\"scroll_left_input\" :show-scrollbar=\"show_scrollbar_boolean\" :scroll-into-view=\"scrollIntoView\"\r\n :scroll-with-animation=\"scroll_with_animation_boolean\" :refresher-enabled=\"refresher_enabled_boolean\"\r\n :refresher-background=\"refresher_background_input\" :refresher-triggered=\"refresher_triggered_boolean\"\r\n :refresher-default-style=\"refresher_default_style_input\"\r\n @click=\"list_view_click\" @touchstart=\"list_view_touchstart\" @touchmove=\"list_view_touchmove\"\r\n @touchcancel=\"list_view_touchcancel\" @touchend=\"list_view_touchend\" @tap=\"list_view_tap\"\r\n @longpress=\"list_view_longpress\" @refresherpulling=\"list_view_refresherpulling\"\r\n @refresherrefresh=\"list_view_refresherrefresh\" @refresherrestore=\"list_view_refresherrestore\"\r\n @refresherabort=\"list_view_refresherabort\" @scrolltoupper=\"list_view_scrolltoupper\" ref=\"listview\" \r\n @scrolltolower=\"list_view_scrolltolower\" @scroll=\"list_view_scroll\" style=\"width:100%;\" id=\"listview\">\r\n <list-item\r\n v-for=\"key in scrollData\" :key=\"key\" :id=\"key\" @click=\"list_item_click\" @touchstart=\"list_item_touchstart\"\r\n @touchmove=\"list_item_touchmove\" @touchcancel=\"list_item_touchcancel\" @touchend=\"list_item_touchend\"\r\n @tap=\"list_item_tap\" @longpress=\"list_item_longpress\"\r\n class=\"list-item\">\r\n <text>{{key}}</text>\r\n </list-item>\r\n <list-item slot=\"refresher\" class=\"refresh-box\">\r\n <text class=\"tip-text\">{{text[state]}}</text>\r\n </list-item>\r\n </list-view>\r\n </view>\r\n\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex:1\">\r\n <!-- #endif -->\r\n <view class=\"content\">\r\n <boolean-data :defaultValue=\"false\" title=\"设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发\"\r\n @change=\"change_refresher_triggered_boolean\"></boolean-data>\r\n <boolean-data :defaultValue=\"false\" title=\"开启下拉刷新\" @change=\"change_refresher_enabled_boolean\"></boolean-data>\r\n <boolean-data :defaultValue=\"false\" title=\"开启自定义样式\" @change=\"change_refresher_style_boolean\"></boolean-data>\r\n <boolean-data :defaultValue=\"false\" title=\"是否在设置滚动条位置时使用滚动动画，设置false没有滚动动画\"\r\n @change=\"change_scroll_with_animation_boolean\"></boolean-data>\r\n <boolean-data :defaultValue=\"false\" title=\"控制是否出现滚动条\" @change=\"change_show_scrollbar_boolean\"></boolean-data>\r\n <boolean-data :defaultValue=\"true\" title=\"控制是否回弹效果\" @change=\"change_rebound_boolean\"></boolean-data>\r\n <boolean-data :defaultValue=\"true\" title=\"允许纵向滚动\" @change=\"change_scroll_y_boolean\"></boolean-data>\r\n <boolean-data :defaultValue=\"false\" title=\"允许横向滚动\" @change=\"change_scroll_x_boolean\"></boolean-data>\r\n <input-data defaultValue=\"50\" title=\"距顶部/左边多远时（单位px），触发 scrolltoupper 事件\" type=\"number\"\r\n @confirm=\"confirm_upper_threshold_input\"></input-data>\r\n <input-data defaultValue=\"50\" title=\"距底部/右边多远时（单位px），触发 scrolltolower 事件\" type=\"number\"\r\n @confirm=\"confirm_lower_threshold_input\"></input-data>\r\n <input-data defaultValue=\"0\" title=\"设置竖向滚动条位置\" type=\"number\" @confirm=\"confirm_scroll_top_input\"></input-data>\r\n <input-data defaultValue=\"0\" title=\"设置横向滚动条位置\" type=\"number\" @confirm=\"confirm_scroll_left_input\"></input-data>\r\n <input-data defaultValue=\"#FFF\" title=\"设置下拉刷新区域背景颜色\" type=\"text\"\r\n @confirm=\"confirm_refresher_background_input\"></input-data>\r\n <enum-data :items=\"size_enum\" title=\"通过id位置跳转\" @change=\"item_change_size_enum\"></enum-data>\r\n\r\n\r\n <navigator url=\"/pages/component/list-view/list-view-multiplex\" hover-class=\"none\">\r\n <button type=\"primary\" class=\"button\">\r\n list-view 对list-item复用测试\r\n </button>\r\n </navigator>\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n<style>\r\n .main {\r\n max-height: 500rpx;\r\n padding: 10rpx 0;\r\n border-bottom: 1px solid rgba(0, 0, 0, .06);\r\n flex-direction: row;\r\n justify-content: center;\r\n }\r\n\r\n .main .list-item {\r\n width: 750rpx;\r\n height: 480rpx;\r\n border: 1px solid #666;\r\n background-color: #66ccff;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .tip-text {\r\n \tcolor: #888;\r\n \tfont-size: 12px;\r\n }\r\n\r\n .refresh-box {\r\n justify-content: center;\r\n align-items: center;\r\n flex-direction: row;\r\n height: 45px;\r\n width: 100%;\r\n }\r\n\r\n .button {\r\n \tmargin-top: 30rpx;\r\n }\r\n</style>\r\n\n```","compatibility":"\n### list-view 兼容性\n| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- |\n| 5.0 | x | 3.9+ | 9.0 | x | - |\n\n ### list-view 属性兼容性\n| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| scroll-x | 5.0 | x | 3.9+ | - | - | - |\n| scroll-y | 5.0 | x | 3.9+ | - | - | - |\n| rebound | 5.0 | x | 3.9+ | - | - | - |\n| upper-threshold | 5.0 | x | 3.9+ | - | - | - |\n| lower-threshold | 5.0 | x | 3.9+ | - | - | - |\n| scroll-top | 5.0 | x | 3.9+ | - | - | - |\n| scroll-left | 5.0 | x | 3.9+ | - | - | - |\n| show-scrollbar | 5.0 | x | 3.9+ | - | - | - |\n| scroll-into-view | 5.0 | x | 3.9+ | - | - | - |\n| scroll-with-animation | 5.0 | x | 3.9+ | - | - | - |\n| refresher-enabled | 5.0 | x | 3.9+ | - | - | - |\n| refresher-threshold | 5.0 | x | 3.9+ | - | - | - |\n| refresher-max-drag-distance | 5.0 | x | 3.9+ | - | - | - |\n| refresher-default-style | 5.0 | x | 3.9+ | - | - | - |\n| refresher-background | 5.0 | x | 3.9+ | - | - | - |\n| refresher-triggered | 5.0 | x | 3.9+ | - | - | - |\n| custom-nested-scroll | 5.0 | x | 3.9+ | 9.0 | x | - |\n| @refresherpulling | 5.0 | x | 3.9+ | 9.0 | x | - |\n| @refresherrefresh | 5.0 | x | 3.9+ | 9.0 | x | - |\n| @refresherrestore | 5.0 | x | 3.9+ | 9.0 | x | - |\n| @refresherabort | 5.0 | x | 3.9+ | 9.0 | x | - |\n| @scrolltoupper | 5.0 | x | 3.9+ | 9.0 | x | - |\n| @scrolltolower | 5.0 | x | 3.9+ | 9.0 | x | - |\n| @scroll | 5.0 | x | 3.9+ | 9.0 | x | - |\n| @scrollend | 5.0 | x | 3.9+ | 9.0 | x | - |","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 页面链接","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| target | string | - | 在哪个目标上发生跳转，默认当前应用 |\n| url | string(string.PageURIString) | - | 当前应用内的跳转链接 |\n| open-type | string | - | 跳转方式 [open-type](#open-type-values) |\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 | - | 当 open-type=\"navigateTo\" 或 open-type=\"navigateBack\" 时有效，窗口的显示/关闭的动画类型。 [animation-type](#animation-type-values) |\n| animation-duration | number | - | 当 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\n#### open-type @open-type-values \n\n| 值名称 | 描述 |\n| :- | :- |\n| navigate | 对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能 |\n| redirect | 对应 wx.redirectTo 的功能 |\n| switchTab | 对应 wx.switchTab 的功能 |\n| reLaunch | 对应 wx.reLaunch 的功能 |\n| navigateBack | 对应 wx.navigateBack 的功能 |\n\n\n\n#### animation-type @animation-type-values \n\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\n","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/navigator/navigator.uvue) \n ```html\n<template>\r\n <view>\r\n <page-head :title=\"title\"></page-head>\r\n <view class=\"uni-padding-wrap uni-common-mt\">\r\n <navigator class=\"navigator navigate\" url=\"navigate?title=navigate\">\r\n <button type=\"default\">跳转到新页面</button>\r\n </navigator>\r\n <navigator class=\"navigator redirect\" url=\"redirect?title=redirect\" open-type=\"redirect\">\r\n <button type=\"default\">在当前页打开</button>\r\n </navigator>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script>\r\n export default {\r\n data() {\r\n return {\r\n title: 'navigator'\r\n }\r\n }\r\n }\r\n</script>\r\n\r\n<style>\r\n .navigator {\r\n margin-bottom: 15px;\r\n }\r\n</style>\n```","compatibility":"\n### navigator 兼容性\n| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- |\n| 5.0 | √ | 3.9+ | 9.0 | √ | x |\n\n ### navigator 属性兼容性\n| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| url | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| open-type | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| path | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| animation-type | 5.0 | x | 3.9+ | 9.0 | √ | x |\n| animation-duration | 5.0 | x | 3.9+ | 9.0 | √ | x |","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 的选中框的高度，需要自己设置高度并居中","attrubute":"","event":"","example":"","compatibility":"\n### picker-view-column 兼容性\n| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- |\n| 5.0 | √ | √ | 10.0 | √ | x |\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- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.picker-view-column)\n"},"picker-view":{"name":"## picker-view","description":"> 组件类型：UniPickerViewElement \n\n 嵌入页面的滚动选择器","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| value | array\\<number> | - | picker-view-column 选择的第几项 |\n| indicator-style | string(string.CSSString) | - | 设置选择器中间选中框的样式 |\n| mask-top-style | string(string.CSSString) | - | 设置蒙层上半部分的样式 |\n| mask-bottom-style | string(string.CSSString) | - | 设置蒙层下半部分的样式 |\n| @change | (event: [PickerViewChangeEvent](#pickerviewchangeevent)) => void | - | 当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 \t\t开始） |","event":"\n### 事件\n#### PickerViewChangeEvent\n\n##### 构造函数\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | Array\\<number\\> | 是 | - | - |\n\n##### PickerViewChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [PickerViewChangeEventDetail](#pickerviewchangeeventdetail-values) | 是 | - | - |\n| type | string | 是 | - | 事件类型 |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n###### PickerViewChangeEventDetail 的属性值 @pickerviewchangeeventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| ctors | Constructor | 是 | - | - |\n| value | Array\\<number\\> | 是 | - | - |\n\n##### PickerViewChangeEvent 的方法\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 ```html\n<template>\r\n <view>\r\n <page-head :title=\"title\"></page-head>\r\n <view class=\"uni-padding-wrap\">\r\n <view class=\"uni-title\">\r\n 日期：{{year}}年{{month}}月{{day}}日\r\n </view>\r\n </view>\r\n <picker-view class=\"picker-view\" :indicator-style=\"indicatorStyle\" :value=\"value\" @change=\"bindChange\"\r\n :mask-top-style=\"maskTopStyle\" :mask-bottom-style=\"maskBottomStyle\">\r\n <picker-view-column class=\"picker-view-column\">\r\n <view class=\"item\" v-for=\"(item,index) in years\" :key=\"index\"><text class=\"text\">{{item}}年</text></view>\r\n </picker-view-column>\r\n <picker-view-column class=\"picker-view-column\">\r\n <view class=\"item\" v-for=\"(item,index) in months\" :key=\"index\"><text class=\"text\">{{item}}月</text>\r\n </view>\r\n </picker-view-column>\r\n <picker-view-column class=\"picker-view-column\">\r\n <view class=\"item\" v-for=\"(item,index) in days\" :key=\"index\"><text class=\"text\">{{item}}日</text></view>\r\n </picker-view-column>\r\n </picker-view>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\n export default {\r\n data() {\r\n const date = new Date()\n const _years : number[] = []\n const _year = date.getFullYear()\n const _months : number[] = []\n const _month : number = date.getMonth() + 1\n const _days : number[] = []\n const _day = date.getDate()\n for (let i = 2000; i <= _year; i++) {\n _years.push(i)\n }\n for (let i = 1; i <= 12; i++) {\n _months.push(i)\n }\n for (let i = 1; i <= 31; i++) {\n _days.push(i)\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: {\r\n bindChange(e : PickerViewChangeEvent) {\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</script>\r\n\r\n<style>\r\n .picker-view {\r\n width: 100%;\r\n height: 320px;\r\n margin-top: 10px;\r\n }\r\n\r\n .item {\r\n height: 50px;\r\n }\r\n\r\n .text {\r\n line-height: 50px;\r\n text-align: center;\r\n }\r\n</style>\n\n```","compatibility":"\n### picker-view 兼容性\n| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- |\n| 5.0 | √ | √ | 10.0 | √ | x |\n\n ### picker-view 属性兼容性\n| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| value | 5.0 | √ | √ | 10.0 | √ | x |\n| indicator-style | 5.0 | √ | √ | 10.0 | √ | x |\n| mask-top-style | 5.0 | x | √ | 10.0 | x | x |\n| mask-bottom-style | 5.0 | x | √ | 10.0 | x | x |\n| @change | 5.0 | √ | √ | 10.0 | √ | x |","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 进度条","attrubute":"### 属性 \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| color | string(string.ColorString) | - | 进度条颜色 （请使用 activeColor） |\n| activeColor | string(string.ColorString) | \"#09BB07\" | 已选择的进度条的颜色 |\n| backgroundColor | string(string.ColorString) | \"#EBEBEB\" | 未选择的进度条的颜色 |\n| active | boolean | false | 进度条从左往右的动画 |\n| active-mode | string | \"backwards\" | backwards: 动画从头播；forwards：动画从上次结束点接着播 [active-mode](#active-mode-values) |\n| @activeend | (event: [ProgressActiveendEvent](#progressactiveendevent)) => void | - | 动画完成事件 |\n\n#### active-mode @active-mode-values \n\n| 值名称 | 描述 |\n| :- | :- |\n| backwards | 动画从头播 |\n| forwards | 动画从上次结束点接着播 |\n\n","event":"\n### 事件\n#### ProgressActiveendEvent\n\n##### 构造函数\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | number | 是 | - | - |\n\n##### ProgressActiveendEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [ProgressActiveendEventDetail](#progressactiveendeventdetail-values) | 是 | - | - |\n| type | string | 是 | - | 事件类型 |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n###### ProgressActiveendEventDetail 的属性值 @progressactiveendeventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| ctors | Constructor | 是 | - | - |\n| curPercent | number | 是 | - | - |\n\n##### ProgressActiveendEvent 的方法\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 ```html\n<script>\r\nimport { ItemType } from '@/components/enum-data/enum-data'\r\nexport default {\r\n\tdata() {\r\n\t\treturn {\r\n\t\t\ttitle: 'progress',\r\n\t\t\tpgList: [0, 0, 0, 0] as number[],\r\n\t\t\tcurPercent: 0,\r\n\t\t\tshowInfo: true,\r\n\t\t\tborderRadius: 0,\r\n\t\t\tfontSize: 16,\r\n\t\t\tstrokeWidth: 3,\r\n\t\t\tbackgroundColor: '#EBEBEB',\r\n\r\n\t\t\t// 组件属性 autotest\r\n\t\t\tactive_boolean: false,\r\n\t\t\tshow_info_boolean: false,\r\n\t\t\tduration_input: 30,\r\n\t\t\tpercent_input: 0,\r\n\t\t\tstroke_width_input: 6,\r\n\t\t\tactiveColor_input: \"#09BB07\",\r\n\t\t\tbackgroundColor_input: \"#EBEBEB\",\r\n\t\t\tactive_mode_enum: [{ \"value\": 0, \"name\": \"backwards\" }, { \"value\": 1, \"name\": \"forwards\" }] as ItemType[],\r\n\t\t\tactive_mode_enum_current: 0\r\n\t\t}\r\n\t},\r\n\tmethods: {\r\n\t\tsetProgress() {\r\n\t\t\tthis.pgList = [20, 40, 60, 80] as number[]\r\n\t\t},\r\n\t\tclearProgress() {\r\n\t\t\tthis.pgList = [0, 0, 0, 0] as number[]\r\n\t\t},\r\n\t\tactiveend(e : ProgressActiveendEvent) {\r\n\t\t\tthis.curPercent = e.detail.curPercent\r\n\t\t},\r\n\t\tprogress_touchstart() { console.log(\"手指触摸动作开始\") },\r\n\t\tprogress_touchmove() { console.log(\"手指触摸后移动\") },\r\n\t\tprogress_touchcancel() { console.log(\"手指触摸动作被打断，如来电提醒，弹窗\") },\r\n\t\tprogress_touchend() { console.log(\"手指触摸动作结束\") },\r\n\t\tprogress_tap() { console.log(\"手指触摸后马上离开\") },\r\n\t\tchange_active_boolean(checked : boolean) { this.active_boolean = checked },\r\n\t\tchange_show_info_boolean(checked : boolean) { this.show_info_boolean = checked },\r\n\t\tconfirm_duration_input(value : number) { this.duration_input = value },\r\n\t\tconfirm_percent_input(value : number) { this.percent_input = value },\r\n\t\tconfirm_stroke_width_input(value : number) { this.stroke_width_input = value },\r\n\t\tconfirm_activeColor_input(value : string) { this.activeColor_input = value },\r\n\t\tconfirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },\r\n\t\tradio_change_active_mode_enum(checked : number) { this.active_mode_enum_current = checked }\r\n\t}\r\n}\r\n</script>\r\n\r\n<template>\r\n <view class=\"main\">\r\n <progress\r\n :duration=\"duration_input\"\r\n :percent=\"percent_input\"\r\n :show-info=\"show_info_boolean\"\r\n :stroke-width=\"stroke_width_input\"\r\n :activeColor=\"activeColor_input\"\r\n :backgroundColor=\"backgroundColor_input\"\r\n :active=\"active_boolean\"\r\n :active-mode=\"active_mode_enum[active_mode_enum_current].name\"\r\n @touchstart=\"progress_touchstart\"\r\n @touchmove=\"progress_touchmove\"\r\n @touchcancel=\"progress_touchcancel\"\r\n @touchend=\"progress_touchend\"\r\n @tap=\"progress_tap\"\r\n style=\"width: 80%\"\r\n >\r\n <text>uni-app-x</text>\r\n </progress>\r\n </view>\r\n\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\">\r\n <!-- #endif -->\r\n <view class=\"content\">\r\n <page-head title=\"组件属性\"></page-head>\r\n <boolean-data\r\n :defaultValue=\"false\"\r\n title=\"进度条从左往右的动画\"\r\n @change=\"change_active_boolean\"\r\n ></boolean-data>\r\n <boolean-data\r\n :defaultValue=\"false\"\r\n title=\"在进度条右侧显示百分比\"\r\n @change=\"change_show_info_boolean\"\r\n ></boolean-data>\r\n <input-data\r\n defaultValue=\"30\"\r\n title=\"进度增加1%所需毫秒数\"\r\n type=\"number\"\r\n @confirm=\"confirm_duration_input\"\r\n ></input-data>\r\n <input-data\r\n defaultValue=\"0\"\r\n title=\"百分比0~100\"\r\n type=\"number\"\r\n @confirm=\"confirm_percent_input\"\r\n ></input-data>\r\n <input-data\r\n defaultValue=\"6\"\r\n title=\"进度条线的宽度，单位px\"\r\n type=\"number\"\r\n @confirm=\"confirm_stroke_width_input\"\r\n ></input-data>\r\n <input-data\r\n defaultValue=\"#09BB07\"\r\n title=\"已选择的进度条的颜色\"\r\n type=\"text\"\r\n @confirm=\"confirm_activeColor_input\"\r\n ></input-data>\r\n <input-data\r\n defaultValue=\"#EBEBEB\"\r\n title=\"未选择的进度条的颜色\"\r\n type=\"text\"\r\n @confirm=\"confirm_backgroundColor_input\"\r\n ></input-data>\r\n <enum-data\r\n :items=\"active_mode_enum\"\r\n title=\"backwards: 动画从头播；forwards：动画从上次结束点接着播\"\r\n @change=\"radio_change_active_mode_enum\"\r\n ></enum-data>\r\n </view>\r\n\r\n <view>\r\n <page-head title=\"默认及使用\"></page-head>\r\n <view class=\"uni-padding-wrap uni-common-mt\">\r\n <view class=\"progress-box\">\r\n <progress\r\n :percent=\"pgList[0]\"\r\n :active=\"true\"\r\n :border-radius=\"borderRadius\"\r\n :show-info=\"showInfo\"\r\n :font-size=\"fontSize\"\r\n :stroke-width=\"strokeWidth\"\r\n :background-color=\"backgroundColor\"\r\n class=\"progress p\"\r\n @activeend=\"activeend\"\r\n />\r\n </view>\r\n <view class=\"progress-box\">\r\n <progress\r\n :percent=\"pgList[1]\"\r\n :stroke-width=\"3\"\r\n class=\"progress p1\"\r\n />\r\n </view>\r\n <view class=\"progress-box\">\r\n <progress\r\n :percent=\"pgList[2]\"\r\n :stroke-width=\"3\"\r\n class=\"progress p2\"\r\n />\r\n </view>\r\n <view class=\"progress-box\">\r\n <progress\r\n :percent=\"pgList[3]\"\r\n activeColor=\"#10AEFF\"\r\n :stroke-width=\"3\"\r\n class=\"progress p3\"\r\n />\r\n </view>\r\n <view class=\"progress-control\">\r\n <button type=\"primary\" @click=\"setProgress\" class=\"button\">\r\n 设置进度\r\n </button>\r\n <button type=\"warn\" @click=\"clearProgress\" class=\"button\">\r\n 清除进度\r\n </button>\r\n </view>\r\n </view>\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n<style>\r\n.main {\r\n max-height: 500rpx;\r\n padding: 10rpx 0;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.06);\r\n flex-direction: row;\r\n justify-content: center;\r\n}\r\n\r\n.main .list-item {\r\n width: 100%;\r\n height: 200rpx;\r\n border: 1px solid #666;\r\n}\r\n\r\n.progress-box {\r\n height: 50rpx;\r\n margin-bottom: 60rpx;\r\n}\r\n\r\n.button {\r\n margin-top: 20rpx;\r\n}\r\n</style>\r\n\n```","compatibility":"\n### progress 兼容性\n| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- |\n| 5.0 | √ | √ | 10.0 | √ | x |\n\n ### progress 属性兼容性\n| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| duration | 5.0 | √ | √ | 10.0 | √ | x |\n| percent | 5.0 | √ | √ | 10.0 | √ | x |\n| show-info | 5.0 | √ | √ | 10.0 | √ | x |\n| border-radius | 5.0 | √ | √ | 10.0 | √ | x |\n| font-size | 5.0 | √ | √ | 10.0 | √ | x |\n| stroke-width | 5.0 | √ | √ | 10.0 | √ | x |\n| activeColor | 5.0 | √ | √ | 10.0 | √ | x |\n| backgroundColor | 5.0 | √ | √ | 10.0 | √ | x |\n| active | 5.0 | √ | √ | 10.0 | √ | x |\n| active-mode | 5.0 | √ | √ | 10.0 | √ | x |\n| @activeend | 5.0 | x | √ | 10.0 | x | x |","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个","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| disabled | boolean | false | 是否禁用 |\n| value | string | - | \\<radio/> 标识。当该radio 选中时，radio-group的 change 事件会携带radio的value |\n| checked | boolean | false | \\<radio/> 当前是否选中 |\n| color | string(string.ColorString) | \"#007AFF\" | radio的颜色 |\n| backgroundColor | string(string.ColorString) | \"#ffffff\" | radio默认的背景颜色 |\n| borderColor | string(string.ColorString) | \"#d1d1d1\" | radio默认的边框颜色 |\n| activeBackgroundColor | string(string.ColorString) | \"#007AFF\" | radio选中时的背景颜色，优先级大于color属性 |\n| activeBorderColor | string(string.ColorString) | \"\" | radio选中时的边框颜色 |\n| iconColor | string(string.ColorString) | \"#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 ```html\n<script>\r\ntype ItemType = {\r\n\tvalue : string\r\n\tname : string\r\n}\r\nexport default {\r\n\tdata() {\r\n\t\treturn {\r\n\t\t\titems: [\r\n\t\t\t\t{\r\n\t\t\t\t\tvalue: 'CHN',\r\n\t\t\t\t\tname: '中国',\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\tvalue: 'USA',\r\n\t\t\t\t\tname: '美国',\r\n\t\t\t\t},\r\n\r\n\t\t\t\t{\r\n\t\t\t\t\tvalue: 'BRA',\r\n\t\t\t\t\tname: '巴西',\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\tvalue: 'JPN',\r\n\t\t\t\t\tname: '日本',\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\tvalue: 'ENG',\r\n\t\t\t\t\tname: '英国',\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\tvalue: 'FRA',\r\n\t\t\t\t\tname: '法国',\r\n\t\t\t\t},\r\n\t\t\t] as ItemType[],\r\n\t\t\tcurrent: 0,\r\n\r\n\t\t\tvalue: '',\r\n\t\t\ttext: '未选中',\r\n\t\t\twrapText: 'uni-app x，终极跨平台方案\\nuts，大一统语言',\r\n\t\t\tdisabled: true,\r\n\t\t\tchecked: true,\r\n\t\t\tcolor: '#007aff',\r\n\t\t\t// 组件属性 autotest\r\n\t\t\tchecked_boolean: false,\r\n\t\t\tdisabled_boolean: false,\r\n\t\t\tcolor_input: \"#007AFF\",\r\n\t\t\tbackgroundColor_input: \"#ffffff\",\r\n\t\t\tborderColor_input: \"#d1d1d1\",\r\n\t\t\tactiveBackgroundColor_input: \"#007AFF\",\r\n\t\t\tactiveBorderColor_input: \"\",\r\n\t\t\ticonColor_input: \"#ffffff\"\r\n\t\t}\r\n\t},\r\n\tmethods: {\r\n\t\tradioChange(e : RadioGroupChangeEvent) {\r\n\t\t\tconst selected = this.items.find((item) : boolean => {\r\n\t\t\t\treturn item.value == e.detail.value\r\n\t\t\t})\r\n\t\t\tuni.showToast({\r\n\t\t\t\ticon: 'none',\r\n\t\t\t\ttitle: '当前选中:' + selected?.name,\r\n\t\t\t})\r\n\t\t},\r\n\t\ttestChange(e : RadioGroupChangeEvent) {\r\n\t\t\tthis.value = e.detail.value\r\n\t\t},\r\n\t\tradio_click() { console.log(\"组件被点击时触发\") },\r\n\t\tradio_touchstart() { console.log(\"手指触摸动作开始\") },\r\n\t\tradio_touchmove() { console.log(\"手指触摸后移动\") },\r\n\t\tradio_touchcancel() { console.log(\"手指触摸动作被打断，如来电提醒，弹窗\") },\r\n\t\tradio_touchend() { console.log(\"手指触摸动作结束\") },\r\n\t\tradio_tap() { console.log(\"手指触摸后马上离开\") },\r\n\t\tradio_longpress() { console.log(\"如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。\") },\r\n\t\tchange_checked_boolean(checked : boolean) { this.checked_boolean = checked },\r\n\t\tchange_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },\r\n\t\tconfirm_color_input(value : string) { this.color_input = value },\r\n\t\tconfirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },\r\n\t\tconfirm_borderColor_input(value : string) { this.borderColor_input = value },\r\n\t\tconfirm_activeBackgroundColor_input(value : string) { this.activeBackgroundColor_input = value },\r\n\t\tconfirm_activeBorderColor_input(value : string) { this.activeBorderColor_input = value },\r\n\t\tconfirm_iconColor_input(value : string) { this.iconColor_input = value }\r\n\t}\r\n}\r\n</script>\r\n\r\n<template>\r\n <view class=\"main\">\r\n <radio\r\n :disabled=\"disabled_boolean\"\r\n :checked=\"checked_boolean\"\r\n :color=\"color_input\"\r\n :backgroundColor=\"backgroundColor_input\"\r\n :borderColor=\"borderColor_input\"\r\n :activeBackgroundColor=\"activeBackgroundColor_input\"\r\n :activeBorderColor=\"activeBorderColor_input\"\r\n :iconColor=\"iconColor_input\"\r\n @click=\"radio_click\"\r\n @touchstart=\"radio_touchstart\"\r\n @touchmove=\"radio_touchmove\"\r\n @touchcancel=\"radio_touchcancel\"\r\n @touchend=\"radio_touchend\"\r\n @tap=\"radio_tap\"\r\n @longpress=\"radio_longpress\"\r\n >\r\n <text>uni-app-x</text>\r\n </radio>\r\n </view>\r\n\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\">\r\n <!-- #endif -->\r\n <view class=\"content\">\r\n <page-head title=\"组件属性\"></page-head>\r\n <boolean-data\r\n :defaultValue=\"false\"\r\n title=\"<radio/> 当前是否选中\"\r\n @change=\"change_checked_boolean\"\r\n ></boolean-data>\r\n <boolean-data\r\n :defaultValue=\"false\"\r\n title=\"是否禁用\"\r\n @change=\"change_disabled_boolean\"\r\n ></boolean-data>\r\n <input-data\r\n defaultValue=\"#007AFF\"\r\n title=\"radio的颜色\"\r\n type=\"text\"\r\n @confirm=\"confirm_color_input\"\r\n ></input-data>\r\n <input-data\r\n defaultValue=\"#ffffff\"\r\n title=\"radio默认的背景颜色\"\r\n type=\"text\"\r\n @confirm=\"confirm_backgroundColor_input\"\r\n ></input-data>\r\n <input-data\r\n defaultValue=\"#d1d1d1\"\r\n title=\"radio默认的边框颜色\"\r\n type=\"text\"\r\n @confirm=\"confirm_borderColor_input\"\r\n ></input-data>\r\n <input-data\r\n defaultValue=\"#007AFF\"\r\n title=\"radio选中时的背景颜色，优先级大于color属性\"\r\n type=\"text\"\r\n @confirm=\"confirm_activeBackgroundColor_input\"\r\n ></input-data>\r\n <input-data\r\n defaultValue=\"\"\r\n title=\"radio选中时的边框颜色\"\r\n type=\"text\"\r\n @confirm=\"confirm_activeBorderColor_input\"\r\n ></input-data>\r\n <input-data\r\n defaultValue=\"#ffffff\"\r\n title=\"radio的图标颜色\"\r\n type=\"text\"\r\n @confirm=\"confirm_iconColor_input\"\r\n ></input-data>\r\n </view>\r\n\r\n <view>\r\n <page-head title=\"默认及使用\"></page-head>\r\n <view class=\"uni-padding-wrap\">\r\n <view class=\"uni-title uni-common-mt\">\r\n <text class=\"uni-title-text\"> 默认样式 </text>\r\n </view>\r\n <radio-group\r\n class=\"uni-flex uni-row radio-group\"\r\n @change=\"testChange\"\r\n style=\"flex-wrap: wrap\"\r\n >\r\n <radio\r\n value=\"r\"\r\n :checked=\"checked\"\r\n :color=\"color\"\r\n style=\"margin-right: 30rpx\"\r\n class=\"radio r\"\r\n >选中\r\n </radio>\r\n <radio value=\"r1\" style=\"margin-right: 30rpx\" class=\"radio r1\">{{\r\n text\r\n }}</radio>\r\n <radio value=\"r2\" :disabled=\"disabled\" class=\"radio r2\">禁用</radio>\r\n <radio value=\"r3\" class=\"radio r3\" style=\"margin-top: 20rpx\">{{\r\n wrapText\r\n }}</radio>\r\n </radio-group>\r\n </view>\r\n\r\n <view class=\"uni-padding-wrap\">\r\n <view class=\"uni-title uni-common-mt\">\r\n <text class=\"uni-title-text\"> 不同颜色和尺寸的radio </text>\r\n </view>\r\n <radio-group class=\"uni-flex uni-row radio-group\">\r\n <radio\r\n value=\"r1\"\r\n :checked=\"true\"\r\n color=\"#FFCC33\"\r\n style=\"transform: scale(0.7); margin-right: 30rpx\"\r\n class=\"radio\"\r\n >选中\r\n </radio>\r\n <radio\r\n value=\"r2\"\r\n color=\"#FFCC33\"\r\n style=\"transform: scale(0.7)\"\r\n class=\"radio\"\r\n >未选中</radio\r\n >\r\n </radio-group>\r\n </view>\r\n\r\n <view class=\"uni-padding-wrap\">\r\n <view class=\"uni-title uni-common-mt\">\r\n <text class=\"uni-title-text\"> 推荐展示样式 </text>\r\n </view>\r\n </view>\r\n <view class=\"uni-list uni-common-pl\">\r\n <radio-group @change=\"radioChange\" class=\"radio-group\">\r\n <radio\r\n class=\"uni-list-cell uni-list-cell-pd radio\"\r\n v-for=\"(item, index) in items\"\r\n :key=\"item.value\"\r\n :class=\"index < items.length - 1 ? 'uni-list-cell-line' : ''\"\r\n :value=\"item.value\"\r\n :checked=\"index === current\"\r\n >\r\n {{ item.name }}\r\n </radio>\r\n </radio-group>\r\n </view>\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n<style>\r\n.main {\r\n max-height: 500rpx;\r\n padding: 10rpx 0;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.06);\r\n flex-direction: row;\r\n justify-content: center;\r\n}\r\n\r\n.main .list-item {\r\n width: 100%;\r\n height: 200rpx;\r\n border: 1px solid #666;\r\n}\r\n\r\n.uni-list-cell {\r\n justify-content: flex-start;\r\n}\r\n</style>\r\n\n```","compatibility":"\n### radio 兼容性\n| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- |\n| 5.0 | √ | √ | 10.0 | √ | x |\n\n ### radio 属性兼容性\n| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| disabled | 5.0 | √ | √ | 10.0 | √ | x |\n| value | 5.0 | √ | √ | 10.0 | √ | x |\n| checked | 5.0 | √ | √ | 10.0 | √ | x |\n| color | 5.0 | √ | √ | 10.0 | √ | x |\n| backgroundColor | 5.0 | x | √ | 10.0 | x | x |\n| borderColor | 5.0 | x | √ | 10.0 | x | x |\n| activeBackgroundColor | 5.0 | x | √ | 10.0 | x | x |\n| activeBorderColor | 5.0 | x | √ | 10.0 | x | x |\n| iconColor | 5.0 | x | √ | 10.0 | x | x |","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 组成","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| name | string | - | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| @change | (event: [RadioGroupChangeEvent](#radiogroupchangeevent)) => void | - | radio-group 中的选中项发生变化时触发 change 事件，event.detail = {value: 选中项radio的value} |","event":"\n### 事件\n#### RadioGroupChangeEvent\n\n##### 构造函数\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | string | 是 | - | - |\n\n##### RadioGroupChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [RadioGroupChangeEventDetail](#radiogroupchangeeventdetail-values) | 是 | - | - |\n| type | string | 是 | - | 事件类型 |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n###### RadioGroupChangeEventDetail 的属性值 @radiogroupchangeeventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| ctors | Constructor | 是 | - | - |\n| value | string | 是 | - | - |\n\n##### RadioGroupChangeEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |\n","example":"","compatibility":"\n### radio-group 兼容性\n| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- |\n| 5.0 | √ | √ | 10.0 | √ | x |\n\n ### radio-group 属性兼容性\n| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| name | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| @change | 5.0 | √ | √ | 10.0 | √ | x |","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- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.radio-group)\n"},"form":{"name":"## form","description":"> 组件类型：UniFormElement \n\n 表单","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| disabled | boolean | - | 是否禁用 |\n| @submit | (event: [FormSubmitEvent](#formsubmitevent)) => void | - | 携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'}} |\n| @reset | (event: [FormResetEvent](#formresetevent)) => void | - | 表单重置时会触发 reset 事件 |","event":"\n### 事件\n#### FormSubmitEvent\n\n##### 构造函数\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | [UTSJSONObject](/uts/buildin-object-api/utsjsonobject.md) | 是 | - | - |\n\n##### FormSubmitEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [FormSubmitEventDetail](#formsubmiteventdetail-values) | 是 | - | - |\n| type | string | 是 | - | 事件类型 |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n###### FormSubmitEventDetail 的属性值 @formsubmiteventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| ctors | Constructor | 是 | - | - |\n| value | [UTSJSONObject](/uts/buildin-object-api/utsjsonobject.md) | 是 | - | - |\n\n##### FormSubmitEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |\n\n#### FormResetEvent\n\n##### 构造函数\n##### FormResetEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [FormResetEventDetail](#formreseteventdetail-values) | 是 | - | - |\n| type | string | 是 | - | 事件类型 |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n###### FormResetEventDetail 的属性值 @formreseteventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| ctors | Constructor | 是 | - | - |\n\n##### FormResetEvent 的方法\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 ```html\n<template>\r\n <!-- #ifdef APP -->\r\n <scroll-view class=\"page\">\r\n <!-- #endif -->\r\n <form @submit=\"onFormSubmit\" @reset=\"onFormReset\">\r\n <view class=\"uni-form-item\">\r\n <view class=\"title\">姓名</view>\r\n <input class=\"uni-input\" name=\"nickname\" :value=\"nickname\" placeholder=\"请输入姓名\" />\r\n </view>\r\n <view class=\"uni-form-item\">\r\n <view class=\"title\">性别</view>\r\n <radio-group name=\"gender\" class=\"flex-row\">\r\n <view class=\"group-item\">\r\n <radio :value=\"0\" :checked=\"gender=='0'\" /><text>男</text>\r\n </view>\r\n <view class=\"group-item\">\r\n <radio :value=\"1\" :checked=\"gender=='1'\" /><text>女</text>\r\n </view>\r\n </radio-group>\r\n </view>\r\n <view class=\"uni-form-item\">\r\n <view class=\"title\">爱好</view>\r\n <checkbox-group name=\"loves\" class=\"flex-row\">\r\n <view class=\"group-item\">\r\n <checkbox value=\"0\" :checked=\"loves.indexOf('0')>-1\" /><text>读书</text>\r\n </view>\r\n <view class=\"group-item\">\r\n <checkbox value=\"1\" :checked=\"loves.indexOf('1')>-1\" /><text>写字</text>\r\n </view>\r\n </checkbox-group>\r\n </view>\r\n <view class=\"uni-form-item\">\r\n <view class=\"title\">年龄</view>\r\n <slider name=\"age\" :value=\"age\" :show-value=\"true\"></slider>\r\n </view>\r\n <view class=\"uni-form-item\">\r\n <view class=\"title\">保留选项</view>\r\n <view>\r\n <switch name=\"switch\" :checked=\"switch\" />\r\n </view>\r\n </view>\r\n <view class=\"uni-btn-v flex-row\">\r\n <button class=\"btn btn-submit\" form-type=\"submit\" type=\"primary\">Submit</button>\r\n <button class=\"btn btn-reset\" type=\"default\" form-type=\"reset\">Reset</button>\r\n </view>\r\n </form>\r\n <view class=\"result\">提交的表单数据</view>\r\n <textarea class=\"textarea\" :value=\"formDataText\"></textarea>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n<script>\r\n export default {\r\n data() {\r\n return {\r\n nickname: '',\r\n gender: '0',\r\n age: 18,\r\n loves: ['0'],\r\n switch: true,\r\n formData: {} as UTSJSONObject\r\n }\r\n },\r\n computed: {\r\n formDataText() : string {\r\n return JSON.stringify(this.formData)\r\n }\r\n },\r\n methods: {\r\n onFormSubmit: function (e : FormSubmitEvent) {\r\n this.formData = e.detail.value\r\n },\r\n onFormReset: function (_ : FormResetEvent) {\r\n this.formData = {}\r\n }\r\n }\r\n }\r\n</script>\r\n\r\n<style>\r\n .page {\r\n flex: 1;\r\n padding: 15px;\r\n }\r\n\r\n .flex-row {\r\n flex-direction: row;\r\n }\r\n\r\n .uni-form-item {\r\n padding: 15px 0;\r\n }\r\n\r\n .title {\r\n margin-bottom: 10px;\r\n }\r\n\r\n .group-item {\r\n flex-direction: row;\r\n margin-right: 20px;\r\n }\r\n\r\n .btn {\r\n flex: 1;\r\n }\r\n\r\n .btn-submit {\r\n margin-right: 5px;\r\n }\r\n\r\n .btn-reset {\r\n margin-left: 5px;\r\n }\r\n\r\n .result {\r\n margin-top: 30px;\r\n }\r\n\r\n .textarea {\r\n margin-top: 5px;\r\n background-color: #fff;\r\n }\r\n</style>\r\n\n```","compatibility":"\n### form 兼容性\n| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- |\n| 5.0 | √ | 3.97+ | 9.0 | √ | x |\n\n ### form 属性兼容性\n| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| disabled | 5.0 | √ | 3.97+ | 9.0 | √ | x |","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标签","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| nodes | array \\| string | - | 节点列表 \\| HTML String |\n| selectable | boolean | false | 文本是否可选 |\n| @itemclick | (event: [RichTextItemClickEvent](#richtextitemclickevent)) => void | - | 拦截点击事件（只支持 a、img标签），返回用户自定义数据或img标签的src属性或a标签的href属性。event.detail={ ref \\| src \\| href } |","event":"\n### 事件\n#### RichTextItemClickEvent\n\n##### RichTextItemClickEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [RichTextItemClickEventDetail](#richtextitemclickeventdetail-values) | 是 | - | - |\n| type | string | 是 | - | 事件类型 |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n###### RichTextItemClickEventDetail 的属性值 @richtextitemclickeventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| ref | string | 否 | - | 自定义数据 |\n| src | string | 否 | - | \\<img/>图片链接 |\n| href | string | 否 | - | \\<a/>超链接 |\n\n##### RichTextItemClickEvent 的方法\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 ```html\n<template>\r\n <view>\r\n <page-head title=\"rich-text\"></page-head>\r\n <view class=\"uni-padding-wrap uni-common-mt\">\r\n <view class=\"uni-btn-v\">\r\n <navigator url=\"/pages/component/rich-text/rich-text-tags\">\r\n <button type=\"primary\">rich-text渲染单个HTML标签示例</button>\r\n </navigator>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <navigator url=\"/pages/component/rich-text/rich-text-complex\">\r\n <button type=\"primary\">rich-text渲染复杂HTML示例</button>\r\n </navigator>\r\n </view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-subtitle-text\">selectable</text>\r\n </view>\r\n <view class=\"text-box\">\r\n <rich-text :selectable=\"true\"\r\n nodes=\"<span>hello uni-app x!</span><br/><span>uni-app x，终极跨平台方案</span>\"></rich-text>\r\n </view>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script>\r\n\r\n</script>\r\n\r\n<style>\r\n .text-box {\r\n padding: 40rpx 0;\r\n background-color: white;\r\n }\r\n</style>\n```","compatibility":"\n### rich-text 兼容性\n| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- |\n| 5.0 | √ | 3.9+ | 9.0 | √ | - |\n\n ### rich-text 属性兼容性\n| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| selectable | 5.0 | x | 3.91 | 9.0 | x | - |","children":"","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 可滚动视图容器","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| scroll-x | boolean | false | 允许横向滚动，不支持同时设置scroll-y属性为true，同时设置true时scroll-y生效 |\n| scroll-y | boolean | true | 允许纵向滚动，不支持同时设置scroll-x属性为true，同时设置true时scroll-y生效 |\n| rebound | boolean | true | 控制是否回弹效果 |\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) | - | 值应为某子元素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 表示不使用默认样式 [refresher-default-style](#refresher-default-style-values) |\n| refresher-background | string(string.ColorString) | \"#FFF\" | 设置下拉刷新区域背景颜色 |\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) | \"\" | 嵌套滚动子元素的id属性，不支持ref，scroll-view惯性滚动时会让对应id元素视图进行滚动，子元素滚动时会触发scroll-view的nestedprescroll事件，嵌套子元素需要设置custom-nested-scroll = true |\n| @refresherpulling | (event: [RefresherEvent](#refresherevent)) => void | - | 下拉刷新控件被下拉 |\n| @refresherrefresh | (event: [RefresherEvent](#refresherevent)) => void | - | 下拉刷新被触发 |\n| @refresherrestore | (event: [RefresherEvent](#refresherevent)) => void | - | 下拉刷新被复位 |\n| @refresherabort | (event: [RefresherEvent](#refresherevent)) => void | - | 下拉刷新被中止 |\n| @scrolltoupper | (event: [ScrollToUpperEvent](#scrolltoupperevent)) => void | - | 滚动到顶部/左边，会触发 scrolltoupper 事件 |\n| @scrolltolower | (event: [ScrollToLowerEvent](#scrolltolowerevent)) => void | - | 滚动到底部/右边，会触发 scrolltolower 事件 |\n| @scroll | (event: [ScrollEvent](#scrollevent)) => void | - | 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |\n| @scrollend | (event: [ScrollEvent](#scrollevent)) => void | - | 滚动结束时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |\n| @startnestedscroll | (event: [StartNestedScrollEvent](#startnestedscrollevent)) => Boolean | - | 子元素开始滚动时触发, return ture表示与子元素开启滚动协商 默认return false! event = {node} |\n| @nestedprescroll | (event: [NestedPreScrollEvent](#nestedprescrollevent)) => void | - | 子元素滚动时触发，可执行event.consumed(x,y)告知子元素deltaX、deltaY各消耗多少。子元素将执行差值后的deltaX、deltaY滚动距离。不执行consumed(x,y)则表示父元素不消耗deltaX、deltaY。event = {deltaX, deltaY} |\n| @stopnestedscroll | (event: [StopNestedScrollEvent](#stopnestedscrollevent)) => void | - | 子元素滚动结束或意外终止时触发 |\n\n#### refresher-default-style @refresher-default-style-values \n\n| 值名称 | 描述 |\n| :- | :- |\n| black | 深颜色雪花样式 |\n| white | 浅白色雪花样式 |\n| none | 不使用默认样式 |\n\n\n##### refresher-default-style 兼容性\n| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| black | 5.0 | x | 3.9+ | - | - | - |\n| white | 5.0 | x | 3.9+ | - | - | - |\n| none | 5.0 | x | 3.9+ | - | - | - |\n","event":"\n### 事件\n#### RefresherEvent\n\n##### RefresherEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [RefresherEventDetail](#refreshereventdetail-values) | 是 | - | - |\n| type | string | 是 | - | 事件类型 |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n###### RefresherEventDetail 的属性值 @refreshereventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| dy | number | 是 | - | - |\n\n##### RefresherEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |\n\n#### ScrollToUpperEvent\n\n##### ScrollToUpperEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [ScrollToUpperEventDetail](#scrolltouppereventdetail-values) | 是 | - | - |\n| type | string | 是 | - | 事件类型 |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n###### ScrollToUpperEventDetail 的属性值 @scrolltouppereventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| direction | string | 是 | - | 滚动方向 top 或 left |\n\n##### ScrollToUpperEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |\n\n#### ScrollToLowerEvent\n\n##### ScrollToLowerEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [ScrollToLowerEventDetail](#scrolltolowereventdetail-values) | 是 | - | - |\n| type | string | 是 | - | 事件类型 |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n###### ScrollToLowerEventDetail 的属性值 @scrolltolowereventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| direction | string | 是 | - | 滚动方向 bottom 或 right |\n\n##### ScrollToLowerEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |\n\n#### ScrollEvent\n\n##### ScrollEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [ScrollEventDetail](#scrolleventdetail-values) | 是 | - | - |\n| type | string | 是 | - | 事件类型 |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n###### ScrollEventDetail 的属性值 @scrolleventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| scrollTop | number | 是 | - | 竖向滚动的距离 |\n| scrollLeft | number | 是 | - | 横向滚动的距离 |\n| scrollHeight | number | 是 | - | 滚动区域的高度 |\n| scrollWidth | number | 是 | - | 滚动区域的宽度 |\n| deltaY | number | 是 | - | 当次滚动事件竖向滚动量 |\n| deltaX | number | 是 | - | 当次滚动事件横向滚动量 |\n\n##### ScrollEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |\n\n#### StartNestedScrollEvent\n\n##### StartNestedScrollEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| node | [Element](/dom/element.md) | 是 | - | 开始滚动子节点对象 |\n| isTouch | boolean | 是 | - | 是否由触摸行为发生的Event |\n| type | string | 是 | - | 事件类型 |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n\n##### StartNestedScrollEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |\n\n#### NestedPreScrollEvent\n\n##### NestedPreScrollEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| deltaX | number | 是 | - | x轴滚动距离 |\n| deltaY | number | 是 | - | y轴滚动距离 |\n| isTouch | boolean | 是 | - | 是否由触摸行为发生的Event |\n| type | string | 是 | - | 事件类型 |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n\n##### NestedPreScrollEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| consumed | (consumedX: number, consumedY: number) => void | 是 | - | 通知到子节点x,y轴滚动距离的消耗 |\n| stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |\n\n#### StopNestedScrollEvent\n\n##### StopNestedScrollEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| isTouch | boolean | 是 | - | 是否由触摸行为发生的Event |\n| type | string | 是 | - | 事件类型 |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n\n##### StopNestedScrollEvent 的方法\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 ```html\n<template>\r\n\t<!-- #ifdef APP -->\r\n\t<scroll-view style=\"flex: 1\">\r\n\t\t<!-- #endif -->\r\n\t\t<view>\r\n\t\t\t<page-head title=\"scroll-view,区域滚动视图\"></page-head>\r\n\t\t\t<view class=\"uni-padding-wrap uni-common-mt\">\r\n\t\t\t\t<view class=\"uni-title uni-common-mt\">\r\n\t\t\t\t\t<text class=\"uni-title-text\">Vertical Scroll</text>\r\n\t\t\t\t\t<text class=\"uni-subtitle-text\">纵向滚动</text>\r\n\t\t\t\t</view>\r\n\t\t\t\t<view>\r\n\t\t\t\t\t<scroll-view :scroll-top=\"scrollTop\" :scroll-y=\"true\" class=\"scroll-Y\" scroll-with-animation=\"true\"\r\n\t\t\t\t\t\t@scrolltoupper=\"upper\" @scrolltolower=\"lower\" @scroll=\"scroll\">\r\n\t\t\t\t\t\t<view class=\"scroll-view-item uni-bg-red\"><text class=\"text\">A</text></view>\r\n\t\t\t\t\t\t<view class=\"scroll-view-item uni-bg-green\"><text class=\"text\">B</text></view>\r\n\t\t\t\t\t\t<view class=\"scroll-view-item uni-bg-blue\"><text class=\"text\">C</text></view>\r\n\t\t\t\t\t</scroll-view>\r\n\t\t\t\t</view>\r\n\t\t\t\t<view @tap=\"goTop\" class=\"uni-center uni-common-mt\">\r\n\t\t\t\t\t<text class=\"uni-link\">点击这里返回顶部</text>\r\n\t\t\t\t</view>\r\n\r\n\t\t\t\t<view class=\"uni-title uni-common-mt\">\r\n\t\t\t\t\t<text class=\"uni-title-text\">Horizontal Scroll</text>\r\n\t\t\t\t\t<text class=\"uni-subtitle-text\">横向滚动</text>\r\n\t\t\t\t</view>\r\n\t\t\t\t<view>\r\n\t\t\t\t\t<scroll-view class=\"scroll-view_H\" :scroll-x=\"true\" @scroll=\"scroll\" :scroll-left=\"120\">\r\n\t\t\t\t\t\t<view class=\"scroll-view-item_H uni-bg-red\"><text class=\"text\">A</text></view>\r\n\t\t\t\t\t\t<view class=\"scroll-view-item_H uni-bg-green\"><text class=\"text\">B</text></view>\r\n\t\t\t\t\t\t<view class=\"scroll-view-item_H uni-bg-blue\"><text class=\"text\">C</text></view>\r\n\t\t\t\t\t</scroll-view>\r\n\t\t\t\t</view>\r\n\r\n\t\t\t\t<navigator url=\"/pages/component/scroll-view/scroll-view-props\" hover-class=\"none\">\r\n\t\t\t\t<button type=\"primary\" class=\"button\">\r\n\t\t\t\t\t非下拉刷新的属性示例\r\n\t\t\t\t</button>\r\n\t\t\t\t</navigator>\r\n\t\t\t\t<view class=\"uni-common-pb\"></view>\r\n\t\t\t\t<navigator url=\"/pages/component/scroll-view/scroll-view-refresher-props\" hover-class=\"none\">\r\n\t\t\t\t<button type=\"primary\" class=\"button\">\r\n\t\t\t\t\t下拉刷新的属性示例\r\n\t\t\t\t</button>\r\n\t\t\t\t</navigator>\r\n\t\t\t\t<view class=\"uni-common-pb\"></view>\r\n\t\t\t\t<navigator url=\"/pages/component/scroll-view/scroll-view-refresher\" hover-class=\"none\">\r\n\t\t\t\t<button type=\"primary\" class=\"button\"> 默认下拉刷新示例 </button>\r\n\t\t\t\t</navigator>\r\n\t\t\t\t<view class=\"uni-common-pb\"></view>\r\n\t\t\t\t<navigator url=\"/pages/component/scroll-view/scroll-view-custom-refresher-props\" hover-class=\"none\">\r\n\t\t\t\t<button type=\"primary\" class=\"button\">\r\n\t\t\t\t\t自定义下拉刷新示例\r\n\t\t\t\t</button>\r\n\t\t\t\t</navigator>\r\n\t\t\t\t<view class=\"uni-common-pb\"></view>\r\n\t\t\t</view>\r\n\t\t</view>\r\n\t\t<!-- #ifdef APP -->\r\n\t</scroll-view>\r\n\t<!-- #endif -->\r\n</template>\r\n<script lang=\"uts\">\r\n\texport default {\r\n\t\tdata() {\r\n\t\t\treturn {\r\n\t\t\t\tscrollTop: 0,\r\n\t\t\t\toldScrollTop: 0,\r\n\t\t\t}\r\n\t\t},\r\n\t\tmethods: {\r\n\t\t\tupper: function (e : ScrollToUpperEvent) {\r\n\t\t\t\tconsole.log(e)\r\n\t\t\t},\r\n\t\t\tlower: function (e : ScrollToLowerEvent) {\r\n\t\t\t\tconsole.log(e)\r\n\t\t\t},\r\n\t\t\tscroll: function (e : ScrollEvent) {\r\n\t\t\t\tthis.oldScrollTop = e.detail.scrollTop\r\n\t\t\t},\r\n\t\t\tgoTop: function () {\r\n\t\t\t\t// 解决view层不同步的问题\r\n\t\t\t\tthis.scrollTop = this.oldScrollTop\r\n\t\t\t\tthis.$nextTick(function () {\r\n\t\t\t\t\tthis.scrollTop = 0\r\n\t\t\t\t})\r\n\t\t\t\tuni.showToast({\r\n\t\t\t\t\ticon: 'none',\r\n\t\t\t\t\ttitle: '纵向滚动 scrollTop 值已被修改为 0',\r\n\t\t\t\t})\r\n\t\t\t}\r\n\t\t},\r\n\t}\r\n</script>\r\n\r\n<style>\r\n\t.scroll-Y {\r\n\t\theight: 300rpx;\r\n\t}\r\n\r\n\t.scroll-view_H {\r\n\t\twidth: 100%;\r\n\t\tflex-direction: row;\r\n\t}\r\n\r\n\t.scroll-view-item {\r\n\t\theight: 300rpx;\r\n\t\tjustify-content: center;\r\n\t\talign-items: center;\r\n\t}\r\n\r\n\t.scroll-view-item_H {\r\n\t\twidth: 690rpx;\r\n\t\theight: 300rpx;\r\n\t\tjustify-content: center;\r\n\t\talign-items: center;\r\n\t}\r\n\r\n\t.text {\r\n\t\tfont-size: 36rpx;\r\n\t\tcolor: #ffffff;\r\n\t}\r\n\r\n\t.button {\r\n\t\tmargin-top: 30rpx;\r\n\t}\r\n</style>\r\n\n```","compatibility":"\n### scroll-view 兼容性\n| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- |\n| 5.0 | √ | 3.9+ | 9.0 | √ | - |\n\n ### scroll-view 属性兼容性\n| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| scroll-x | 5.0 | √ | 3.9+ | - | - | - |\n| scroll-y | 5.0 | √ | 3.9+ | - | - | - |\n| rebound | 5.0 | x | 3.9+ | - | - | - |\n| upper-threshold | 5.0 | √ | 3.9+ | - | - | - |\n| lower-threshold | 5.0 | √ | 3.9+ | - | - | - |\n| scroll-top | 5.0 | √ | 3.9+ | - | - | - |\n| scroll-left | 5.0 | √ | 3.9+ | - | - | - |\n| scroll-into-view | 5.0 | √ | 3.9+ | - | - | - |\n| scroll-with-animation | 5.0 | √ | 3.9+ | - | - | - |\n| refresher-enabled | 5.0 | √ | 3.9+ | - | - | - |\n| refresher-threshold | 5.0 | √ | 3.9+ | - | - | - |\n| refresher-max-drag-distance | 5.0 | x | 3.9+ | - | - | - |\n| refresher-default-style | 5.0 | √ | 3.9+ | - | - | - |\n| refresher-background | 5.0 | √ | 3.9+ | - | - | - |\n| refresher-triggered | 5.0 | √ | 3.9+ | - | - | - |\n| show-scrollbar | 5.0 | √ | 3.9+ | - | - | - |\n| custom-nested-scroll | 5.0 | x | 3.9+ | 9.0 | √ | - |\n| nested-scroll-child | 5.0 | x | 3.97 | 9.0 | x | - |\n| @refresherpulling | 5.0 | √ | 3.9+ | 9.0 | √ | - |\n| @refresherrefresh | 5.0 | √ | 3.9+ | 9.0 | √ | - |\n| @refresherrestore | 5.0 | √ | 3.9+ | 9.0 | √ | - |\n| @refresherabort | 5.0 | √ | 3.9+ | 9.0 | √ | - |\n| @scrolltoupper | 5.0 | √ | 3.9+ | 9.0 | √ | - |\n| @scrolltolower | 5.0 | √ | 3.9+ | 9.0 | √ | - |\n| @scroll | 5.0 | √ | 3.9+ | 9.0 | √ | - |\n| @scrollend | 5.0 | √ | 3.9+ | 9.0 | √ | - |\n| @startnestedscroll | 5.0 | x | 3.9+ | 9.0 | x | - |\n| @nestedprescroll | 5.0 | x | 3.9+ | 9.0 | x | - |\n| @stopnestedscroll | 5.0 | x | 3.9+ | 9.0 | x | - |","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 滑动选择器","attrubute":"### 属性 \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| color | string(string.ColorString) | - | slider 背景条的颜色（请使用 backgroundColor） |\n| activeColor | string(string.ColorString) | \"#007aff\" | slider 滑块左侧已选择部分的线条颜色 |\n| backgroundColor | string(string.ColorString) | \"#e9e9e9\" | radio背景条的颜色 |\n| block-size | number | 28 | radio滑块的大小，取值范围为 12 - 28 |\n| block-color | string(string.ColorString) | \"#ffffff\" | 滑块颜色 |\n| show-value | boolean | false | 是否显示当前 value |\n| @change | (event: [SliderChangeEvent](#sliderchangeevent)) => void | - | 完成一次拖动后触发的事件，event.detail = {value: value} |\n| @changing | (event: [SliderChangeEvent](#sliderchangeevent)) => void | - | 拖动过程中触发的事件，event.detail = {value: value} |","event":"\n### 事件\n#### SliderChangeEvent\n\n##### 构造函数\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | number | 是 | - | - |\n\n##### SliderChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [SliderChangeEventDetail](#sliderchangeeventdetail-values) | 是 | - | - |\n| type | string | 是 | - | 事件类型 |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n###### SliderChangeEventDetail 的属性值 @sliderchangeeventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| ctors | Constructor | 是 | - | - |\n| value | number | 是 | - | - |\n\n##### SliderChangeEvent 的方法\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 ```html\n<script>\r\n export default {\r\n data() {\r\n return {\r\n sliderValue: 50,\r\n sliderBlockSize: 20,\r\n sliderBackgroundColor: \"#000000\",\r\n sliderActiveColor: \"#FFCC33\",\r\n sliderBlockColor: \"#8A6DE9\",\r\n // 组件属性 autotest\r\n show_value_boolean: false,\r\n disabled_boolean: false,\r\n min_input: 0,\r\n max_input: 100,\r\n step_input: 1,\r\n value_input: 0,\r\n activeColor_input: \"#007aff\",\r\n backgroundColor_input: \"#e9e9e9\",\r\n block_size_input: 28,\r\n block_color_input: \"#ffffff\",\r\n };\r\n },\r\n methods: {\r\n sliderChange(e : SliderChangeEvent) {\r\n console.log(\"value 发生变化：\" + e.detail.value);\r\n },\r\n slider_click() {\r\n console.log(\"组件被点击时触发\");\r\n },\r\n slider_touchstart() {\r\n console.log(\"手指触摸动作开始\");\r\n },\r\n slider_touchmove() {\r\n console.log(\"手指触摸后移动\");\r\n },\r\n slider_touchcancel() {\r\n console.log(\"手指触摸动作被打断，如来电提醒，弹窗\");\r\n },\r\n slider_touchend() {\r\n console.log(\"手指触摸动作结束\");\r\n },\r\n slider_tap() {\r\n console.log(\"手指触摸后马上离开\");\r\n },\r\n slider_longpress() {\r\n console.log(\r\n \"如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。\"\r\n );\r\n },\r\n slider_change() {\r\n console.log(\"完成一次拖动后触发的事件，event.detail = {value: value}\");\r\n },\r\n slider_changing() {\r\n console.log(\"拖动过程中触发的事件，event.detail = {value: value}\");\r\n },\r\n change_show_value_boolean(checked : boolean) {\r\n this.show_value_boolean = checked;\r\n },\r\n change_disabled_boolean(checked : boolean) {\r\n this.disabled_boolean = checked;\r\n },\r\n confirm_min_input(value : number) {\r\n this.min_input = value;\r\n },\r\n confirm_max_input(value : number) {\r\n this.max_input = value;\r\n },\r\n confirm_step_input(value : number) {\r\n this.step_input = value;\r\n },\r\n confirm_value_input(value : number) {\r\n this.value_input = value;\r\n },\r\n confirm_activeColor_input(value : string) {\r\n this.activeColor_input = value;\r\n },\r\n confirm_backgroundColor_input(value : string) {\r\n this.backgroundColor_input = value;\r\n },\r\n confirm_block_size_input(value : number) {\r\n this.block_size_input = value;\r\n },\r\n confirm_block_color_input(value : string) {\r\n this.block_color_input = value;\r\n },\r\n },\r\n };\r\n</script>\r\n\r\n<template>\r\n <view class=\"main\">\r\n <slider :disabled=\"disabled_boolean\" :min=\"min_input\" :max=\"max_input\" :step=\"step_input\" :value=\"value_input\"\r\n :activeColor=\"activeColor_input\" :backgroundColor=\"backgroundColor_input\" :block-size=\"block_size_input\"\r\n :block-color=\"block_color_input\" :show-value=\"show_value_boolean\" @click=\"slider_click\"\r\n @touchstart=\"slider_touchstart\" @touchmove=\"slider_touchmove\" @touchcancel=\"slider_touchcancel\"\r\n @touchend=\"slider_touchend\" @tap=\"slider_tap\" @longpress=\"slider_longpress\" @change=\"slider_change\"\r\n @changing=\"slider_changing\" style=\"width: 90%\"><text>uni-app-x</text></slider>\r\n </view>\r\n\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\">\r\n <!-- #endif -->\r\n <view class=\"content\">\r\n <page-head title=\"组件属性\"></page-head>\r\n <boolean-data :defaultValue=\"false\" title=\"是否显示当前 value\" @change=\"change_show_value_boolean\"></boolean-data>\r\n <boolean-data :defaultValue=\"false\" title=\"是否禁用\" @change=\"change_disabled_boolean\"></boolean-data>\r\n <input-data defaultValue=\"0\" title=\"slider 最小值\" type=\"number\" @confirm=\"confirm_min_input\"></input-data>\r\n <input-data defaultValue=\"100\" title=\"slider 最大值\" type=\"number\" @confirm=\"confirm_max_input\"></input-data>\r\n <input-data defaultValue=\"1\" title=\"slider 步长，取值必须大于 0，并且可被(max - min)整除\" type=\"number\"\r\n @confirm=\"confirm_step_input\"></input-data>\r\n <input-data defaultValue=\"0\" title=\"radio当前取值\" type=\"number\" @confirm=\"confirm_value_input\"></input-data>\r\n <input-data defaultValue=\"#007aff\" title=\"slider 滑块左侧已选择部分的线条颜色\" type=\"text\"\r\n @confirm=\"confirm_activeColor_input\"></input-data>\r\n <input-data defaultValue=\"#e9e9e9\" title=\"radio背景条的颜色\" type=\"text\"\r\n @confirm=\"confirm_backgroundColor_input\"></input-data>\r\n <input-data defaultValue=\"28\" title=\"radio滑块的大小，取值范围为 12 - 28\" type=\"number\"\r\n @confirm=\"confirm_block_size_input\"></input-data>\r\n <input-data defaultValue=\"#ffffff\" title=\"滑块颜色\" type=\"text\" @confirm=\"confirm_block_color_input\"></input-data>\r\n </view>\r\n\r\n <view class=\"uni-padding-wrap\">\r\n <page-head title=\"默认及使用\"></page-head>\r\n <view class=\"uni-title\">显示当前value</view>\r\n <view>\r\n <slider @change=\"sliderChange\" :value=\"50\" :show-value=\"true\" />\r\n </view>\r\n\r\n <view class=\"uni-title\">设置步进:step=10跳动</view>\r\n <view>\r\n <view class=\"uni-row\">\r\n <text>0</text>\r\n <text class=\"m-l-a\">100</text>\r\n </view>\r\n <slider @change=\"sliderChange\" :value=\"60\" :step=\"10\" />\r\n </view>\r\n\r\n <view class=\"uni-title\">浮点步进:step=0.01跳动</view>\r\n <view>\r\n <slider :value=\"0.5\" :min=\"0\" :max=\"1\" :step=\"0.01\" :show-value=\"true\" />\r\n </view>\r\n\r\n <view class=\"uni-title\">设置最小/最大值</view>\r\n <view>\r\n <slider @change=\"sliderChange\" :value=\"100\" :min=\"50\" :max=\"200\" :show-value=\"true\" />\r\n </view>\r\n\r\n <view class=\"uni-title\">不同颜色和大小的滑块</view>\r\n <view>\r\n <slider class=\"slider-custom-color-and-size\" @change=\"sliderChange\" :value=\"sliderValue\"\r\n :backgroundColor=\"sliderBackgroundColor\" :activeColor=\"sliderActiveColor\" :blockColor=\"sliderBlockColor\"\r\n :block-size=\"sliderBlockSize\" />\r\n </view>\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n<style>\r\n .main {\r\n max-height: 500rpx;\r\n padding: 10rpx 0;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.06);\r\n flex-direction: row;\r\n justify-content: center;\r\n }\r\n\r\n .main .list-item {\r\n width: 100%;\r\n height: 200rpx;\r\n border: 1px solid #666;\r\n }\r\n\r\n .m-l-a {\r\n margin-left: auto;\r\n }\r\n</style>\n```","compatibility":"\n### slider 兼容性\n| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- |\n| 5.0 | √ | 3.9+ | 9.0 | √ | x |\n\n ### slider 属性兼容性\n| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| name | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| disabled | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| min | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| max | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| step | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| value | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| color | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| activeColor | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| backgroundColor | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| block-size | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| block-color | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| show-value | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| @change | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| @changing | 5.0 | √ | 3.9+ | 9.0 | √ | x |","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%","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| item-id | string | - | 该 swiper-item 的标识符 |","event":"","example":"","compatibility":"\n### swiper-item 兼容性\n| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- |\n| 5.0 | √ | 3.9+ | 9.0 | √ | x |\n\n ### swiper-item 属性兼容性\n| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| item-id | 5.0 | √ | 3.9+ | 9.0 | √ | x |","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- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.swiper-item)\n"},"swiper":{"name":"## swiper","description":"> 组件类型：UniSwiperElement \n\n 滑块视图容器","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| indicator-dots | boolean | false | 是否显示面板指示点 |\n| indicator-color | string(string.ColorString) | \"rgba(0, 0, 0, .3)\" | 指示点颜色 |\n| indicator-active-color | string(string.ColorString) | \"#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| circular | boolean | false | 是否采用衔接滑动 |\n| vertical | boolean | false | 滑动方向是否为纵向 |\n| rebound | boolean | false | 控制是否回弹效果 |\n| @change | (event: [SwiperChangeEvent](#swiperchangeevent)) => void | - | current 改变时会触发 change 事件，event.detail = {current: current, source: source} |\n| @transition | (event: [SwiperTransitionEvent](#swipertransitionevent)) => void | - | swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy} |\n| @animationfinish | (event: [SwiperAnimationFinishEvent](#swiperanimationfinishevent)) => void | - | 动画结束时会触发 animationfinish 事件，event.detail = {current: current, source: source} |","event":"\n### 事件\n#### SwiperChangeEvent\n\n##### SwiperChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [SwiperChangeEventDetail](#swiperchangeeventdetail-values) | 是 | - | - |\n| type | string | 是 | - | 事件类型 |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n###### SwiperChangeEventDetail 的属性值 @swiperchangeeventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| current | number | 是 | - | 发生change事件的滑块下标 |\n| source | string | 是 | - | autoplay 自动播放导致swiper变化；touch 用户划动引起swiper变化 |\n\n##### SwiperChangeEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |\n\n#### SwiperTransitionEvent\n\n##### SwiperTransitionEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [SwiperTransitionEventDetail](#swipertransitioneventdetail-values) | 是 | - | - |\n| type | string | 是 | - | 事件类型 |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n###### SwiperTransitionEventDetail 的属性值 @swipertransitioneventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| dx | number | 是 | - | 横向偏移量，单位是逻辑像素px |\n| dy | number | 是 | - | 纵向偏移量，单位是逻辑像素px |\n\n##### SwiperTransitionEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |\n\n#### SwiperAnimationFinishEvent\n\n##### SwiperAnimationFinishEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [SwiperAnimationFinishEventDetail](#swiperanimationfinisheventdetail-values) | 是 | - | - |\n| type | string | 是 | - | 事件类型 |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n###### SwiperAnimationFinishEventDetail 的属性值 @swiperanimationfinisheventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| current | number | 是 | - | 发生动画结束事件的滑块下标 |\n| source | string | 是 | - | autoplay 自动播放导致swiper变化；touch 用户划动引起swiper变化 |\n\n##### SwiperAnimationFinishEvent 的方法\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 ```html\n<template>\r\n\t<!-- #ifdef APP -->\r\n\t<scroll-view style=\"flex: 1\">\r\n\t\t<!-- #endif -->\r\n\t\t<view>\r\n\t\t\t<page-head title=\"swiper,可滑动视图\"></page-head>\r\n\t\t\t<view class=\"uni-margin-wrap\">\r\n\t\t\t\t<swiper class=\"swiper\" :vertical=\"verticalSelect\" :indicator-dots=\"dotsSelect\" :autoplay=\"autoplaySelect\"\n :rebound=\"reboundSelect\"\r\n\t\t\t\t\t:interval=\"intervalSelect\" :circular=\"circularSelect\" :indicator-color=\"indicatorColor\"\r\n\t\t\t\t\t:indicator-active-color=\"indicatorColorActive\" :disable-touch=\"disableTouchSelect\" :current=\"currentVal\"\r\n\t\t\t\t\t:current-item-id=\"currentItemIdVal\" @change=\"swiperChange\" @transition=\"swiperTransition\"\r\n\t\t\t\t\t@animationfinish=\"swiperAnimationfinish\">\r\n\t\t\t\t\t<swiper-item item-id=\"A\">\r\n\t\t\t\t\t\t<view class=\"swiper-item uni-bg-red\"><text class=\"swiper-item-Text\">A</text></view>\r\n\t\t\t\t\t</swiper-item>\r\n\t\t\t\t\t<swiper-item item-id=\"B\">\r\n\t\t\t\t\t\t<view class=\"swiper-item uni-bg-green\"><text class=\"swiper-item-Text\">B</text></view>\r\n\t\t\t\t\t</swiper-item>\r\n\t\t\t\t\t<swiper-item item-id=\"C\">\r\n\t\t\t\t\t\t<view class=\"swiper-item uni-bg-blue\"><text class=\"swiper-item-Text\">C</text></view>\r\n\t\t\t\t\t</swiper-item>\r\n\t\t\t\t</swiper>\r\n\t\t\t</view>\r\n\t\t\t<view class=\"uni-list\">\r\n\t\t\t\t<view class=\"uni-list-cell uni-list-cell-pd\">\r\n\t\t\t\t\t<view class=\"uni-list-cell-db\">是否显示面板指示点</view>\r\n\t\t\t\t\t<switch :checked=\"dotsSelect\" @change=\"dotsChange\" />\r\n\t\t\t\t</view>\r\n\t\t\t\t<view class=\"uni-list-cell uni-list-cell-pd\">\r\n\t\t\t\t\t<view class=\"uni-list-cell-db\">是否自动切换</view>\r\n\t\t\t\t\t<switch :checked=\"autoplaySelect\" @change=\"autoplayChange\" />\r\n\t\t\t\t</view>\r\n\t\t\t\t<view class=\"uni-list-cell uni-list-cell-pd\">\r\n\t\t\t\t\t<view class=\"uni-list-cell-db\">是否循环</view>\r\n\t\t\t\t\t<switch :checked=\"circularSelect\" @change=\"circularChange\" />\r\n\t\t\t\t</view>\n <view class=\"uni-list-cell uni-list-cell-pd\">\n \t<view class=\"uni-list-cell-db\">是否显示rebound效果</view>\n \t<switch :checked=\"reboundSelect\" @change=\"reboundSelectChange\" />\n </view>\r\n\t\t\t\t<view class=\"uni-title\">间隔时间(毫秒)</view>\r\n\t\t\t\t<view>\r\n\t\t\t\t\t<slider @change=\"sliderChange\" :value=\"1000\" :min=\"500\" :max=\"5000\" :show-value=\"true\" />\r\n\t\t\t\t</view>\r\n\t\t\t\t<view class=\"uni-list-cell uni-list-cell-pd\">\r\n\t\t\t\t\t<view class=\"uni-list-cell-db\">定制指示器颜色</view>\r\n\t\t\t\t\t<switch :checked=\"indicatorColorSelect\" @change=\"indicatorColorChange\" />\r\n\t\t\t\t</view>\r\n\t\t\t\t<view class=\"uni-list-cell uni-list-cell-pd\">\r\n\t\t\t\t\t<view class=\"uni-list-cell-db\">纵向</view>\r\n\t\t\t\t\t<switch :checked=\"verticalSelect\" @change=\"verticalChange\" />\r\n\t\t\t\t</view>\r\n\t\t\t\t<view class=\"uni-list-cell uni-list-cell-pd\">\r\n\t\t\t\t\t<view class=\"uni-list-cell-db\">指定current为最后一个元素</view>\r\n\t\t\t\t\t<switch :checked=\"currentSelect\" @change=\"currentChange\" />\r\n\t\t\t\t</view>\r\n\t\t\t\t<view class=\"uni-list-cell uni-list-cell-pd\">\r\n\t\t\t\t\t<view class=\"uni-list-cell-db\">指定current-item-id为最后一个元素</view>\r\n\t\t\t\t\t<switch :checked=\"currentItemIdSelect\" @change=\"currentItemIdChange\" />\r\n\t\t\t\t</view>\r\n\t\t\t\t<view class=\"uni-list-cell uni-list-cell-pd\">\r\n\t\t\t\t\t<view class=\"uni-list-cell-db\">禁止用户 touch 操作</view>\r\n\t\t\t\t\t<switch :checked=\"disableTouchSelect\" @change=\"disableTouchChange\" />\r\n\t\t\t\t</view>\r\n\t\t\t\t<view class=\"uni-list-cell uni-list-cell-pd\">\r\n\t\t\t\t\t<view class=\"uni-list-cell-db\">swiperTransition 是否打印</view>\r\n\t\t\t\t\t<switch :checked=\"swiperTransitionSelect\" @change=\"swiperTransitionChange\" />\r\n\t\t\t\t</view>\r\n\t\t\t\t<view class=\"uni-list-cell uni-list-cell-pd\">\r\n\t\t\t\t\t<view class=\"uni-list-cell-db\">swiperAnimationfinish 是否打印</view>\r\n\t\t\t\t\t<switch :checked=\"swiperAnimationfinishSelect\" @change=\"swiperAnimationfinishChange\" />\r\n\t\t\t\t</view>\r\n\t\t\t\t<view class=\"uni-list-cell uni-list-cell-pd\">\r\n\t\t\t\t\t<view class=\"uni-list-cell-db\">swiperChange 是否打印</view>\r\n\t\t\t\t\t<switch :checked=\"swiperChangeSelect\" @change=\"swiperChangeChange\" />\r\n\t\t\t\t</view>\r\n\t\t\t</view>\r\n\t\t</view>\r\n\t\t<!-- #ifdef APP -->\r\n\t</scroll-view>\r\n\t<!-- #endif -->\r\n</template>\r\n<script>\r\n\texport default {\r\n\t\tdata() {\r\n\t\t\treturn {\r\n\t\t\t\tbackground: ['color1', 'color2', 'color3'],\r\n\t\t\t\tdotsSelect: false,\n reboundSelect:false,\r\n\t\t\t\tautoplaySelect: false,\r\n\t\t\t\tcircularSelect: false,\r\n\t\t\t\tindicatorColorSelect: false,\r\n\t\t\t\tverticalSelect: false,\r\n\t\t\t\tcurrentSelect: false,\r\n\t\t\t\tcurrentItemIdSelect: false,\r\n\t\t\t\tintervalSelect: 2000,\r\n\t\t\t\tindicatorColor: \"\",\r\n\t\t\t\tindicatorColorActive: \"\",\r\n\t\t\t\tcurrentVal: 0,\r\n\t\t\t\tcurrentItemIdVal: \"\",\r\n\t\t\t\tdisableTouchSelect: false,\r\n\t\t\t\tswiperTransitionSelect: false,\r\n\t\t\t\tswiperAnimationfinishSelect: false,\r\n\t\t\t\tswiperChangeSelect: false,\n currentValChange:0\r\n\t\t\t}\r\n\t\t},\n\t\tmethods: {\r\n\r\n\t\t\tswiperChange: function (e : SwiperChangeEvent) {\n this.currentValChange = e.detail.current\n console.log(this.currentValChange)\n\t\t\t\tif (this.swiperChangeSelect) {\r\n\t\t\t\t\tconsole.log(\"swiperChange\")\r\n\t\t\t\t\tconsole.log(e)\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\tswiperTransition: function (e : SwiperTransitionEvent) {\r\n\t\t\t\tif (this.swiperTransitionSelect) {\r\n\t\t\t\t\tconsole.log(\"swiperTransition\")\r\n\t\t\t\t\tconsole.log(e)\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\tswiperAnimationfinish: function (e : SwiperAnimationFinishEvent) {\r\n\t\t\t\tif (this.swiperAnimationfinishSelect) {\r\n\t\t\t\t\tconsole.log(\"swiperAnimationfinish\")\r\n\t\t\t\t\tconsole.log(e)\r\n\t\t\t\t}\r\n\t\t\t},\r\n\r\n\t\t\tdotsChange: function (e : SwitchChangeEvent) {\r\n\t\t\t\tthis.dotsSelect = e.detail.value\r\n\t\t\t},\r\n\t\t\tswiperTransitionChange: function (e : SwitchChangeEvent) {\r\n\t\t\t\tthis.swiperTransitionSelect = e.detail.value\r\n\t\t\t},\r\n\t\t\tswiperChangeChange: function (e : SwitchChangeEvent) {\r\n\t\t\t\tthis.swiperChangeSelect = e.detail.value\r\n\t\t\t},\r\n\t\t\tswiperAnimationfinishChange: function (e : SwitchChangeEvent) {\r\n\t\t\t\tthis.swiperAnimationfinishSelect = e.detail.value\r\n\t\t\t},\r\n\t\t\tautoplayChange: function (e : SwitchChangeEvent) {\r\n\t\t\t\tthis.autoplaySelect = e.detail.value\r\n\t\t\t},\r\n\t\t\tverticalChange: function (e : SwitchChangeEvent) {\r\n\t\t\t\tthis.verticalSelect = e.detail.value\r\n\t\t\t},\r\n\t\t\tdisableTouchChange: function (e : SwitchChangeEvent) {\r\n\t\t\t\tthis.disableTouchSelect = e.detail.value\r\n\t\t\t},\r\n\t\t\tcurrentItemIdChange: function (e : SwitchChangeEvent) {\r\n\t\t\t\tthis.currentItemIdSelect = e.detail.value\r\n\t\t\t\tif (this.currentItemIdSelect) {\r\n\t\t\t\t\tthis.currentItemIdVal = 'C'\r\n\t\t\t\t} else {\r\n\t\t\t\t\tthis.currentItemIdVal = 'A'\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\tcurrentChange: function (e : SwitchChangeEvent) {\r\n\t\t\t\tthis.currentSelect = e.detail.value\r\n\t\t\t\tif (this.currentSelect) {\r\n\t\t\t\t\tthis.currentVal = 2\r\n\t\t\t\t} else {\r\n\t\t\t\t\tthis.currentVal = 0\r\n\t\t\t\t}\r\n\r\n\t\t\t},\r\n\t\t\tcircularChange: function (e : SwitchChangeEvent) {\r\n\t\t\t\tthis.circularSelect = e.detail.value\r\n\t\t\t\tconsole.log(this.circularSelect)\r\n\t\t\t},\n reboundSelectChange: function (e : SwitchChangeEvent) {\n \tthis.reboundSelect = e.detail.value\n \tconsole.log(this.reboundSelect)\n },\r\n\t\t\tsliderChange(e : SliderChangeEvent) {\r\n\t\t\t\tthis.intervalSelect = e.detail.value\r\n\t\t\t},\r\n\t\t\tindicatorColorChange(e : SwitchChangeEvent) {\r\n\t\t\t\tthis.indicatorColorSelect = e.detail.value\r\n\t\t\t\tif (this.indicatorColorSelect) {\r\n\t\t\t\t\t// 选择了定制指示器颜色\r\n\t\t\t\t\tthis.indicatorColor = \"#ff00ff\"\r\n\t\t\t\t\tthis.indicatorColorActive = \"#0000ff\"\r\n\t\t\t\t} else {\r\n\t\t\t\t\t// 没有选择颜色\r\n\t\t\t\t\tthis.indicatorColor = \"\"\r\n\t\t\t\t\tthis.indicatorColorActive = \"\"\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n</script>\r\n\r\n<style>\r\n\t.uni-margin-wrap {\r\n\t\twidth: 690rpx;\r\n\t\twidth: 100%;\r\n\t\t;\r\n\t}\r\n\r\n\t.swiper {\r\n\t\theight: 300rpx;\r\n\t}\r\n\r\n\t.swiper-item {\r\n\t\twidth: 100%;\r\n\t\theight: 300rpx;\r\n\t}\r\n\r\n\t.swiper-item-Text {\r\n\t\twidth: 100%;\r\n\t\ttext-align: center;\r\n\t\tline-height: 300rpx;\r\n\t}\r\n</style>\n\n```","compatibility":"\n### swiper 兼容性\n| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- |\n| 5.0 | √ | 3.9+ | 9.0 | √ | x |\n\n ### swiper 属性兼容性\n| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| indicator-dots | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| indicator-color | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| indicator-active-color | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| disable-touch | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| autoplay | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| current | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| current-item-id | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| interval | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| circular | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| vertical | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| rebound | 5.0 | x | 3.9+ | 9.0 | √ | x |\n| @change | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| @transition | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| @animationfinish | 5.0 | √ | 3.9+ | 9.0 | √ | x |","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 开关选择器","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| name | string | - | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| checked | boolean | - | 是否选中 |\n| color | string(string.ColorString) | - | switch 的颜色，同 css 的 color |\n| disabled | boolean | - | 是否禁用 |\n| @change | (event: [SwitchChangeEvent](#switchchangeevent)) => void | - | checked 改变时触发 change 事件，event.detail={ value:checked} |","event":"\n### 事件\n#### SwitchChangeEvent\n\n##### 构造函数\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | boolean | 是 | - | - |\n\n##### SwitchChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [SwitchChangeEventDetail](#switchchangeeventdetail-values) | 是 | - | - |\n| type | string | 是 | - | 事件类型 |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n###### SwitchChangeEventDetail 的属性值 @switchchangeeventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| ctors | Constructor | 是 | - | - |\n| value | boolean | 是 | - | - |\n\n##### SwitchChangeEvent 的方法\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 ```html\n<template>\r\n <view class=\"uni-padding-wrap\">\r\n <view class=\"uni-common-mt\">\r\n <view class=\"uni-title\">默认样式</view>\r\n <view class=\"flex-row\">\r\n <switch class=\"switch-checked\" :checked=\"checked\" @change=\"switch1Change\" />\r\n <switch @change=\"switch2Change\" />\r\n <!-- <text class=\"switch-checked-value\">{{clickCheckedValue}}</text> -->\r\n </view>\r\n <view class=\"uni-title\">禁用样式</view>\r\n <view class=\"flex-row\">\r\n <switch class=\"switch-checked\" :checked=\"checked\" :disabled=\"true\" />\r\n <switch :disabled=\"true\" />\r\n </view>\r\n <view class=\"uni-title\">不同颜色和尺寸的switch</view>\r\n <view class=\"flex-row\">\r\n <switch class=\"switch-color-checked\" :color=\"color\" style=\"transform:scale(0.7)\" :checked=\"true\" />\r\n <switch class=\"switch-color\" :color=\"color\" style=\"transform:scale(0.7)\" />\r\n </view>\r\n <view class=\"uni-title\">推荐展示样式</view>\r\n </view>\r\n <view class=\"uni-list\">\r\n <view class=\"uni-list-cell uni-list-cell-pd\">\r\n <view class=\"uni-list-cell-db\">开启中</view>\r\n <switch :checked=\"true\" />\r\n </view>\r\n <view class=\"uni-list-cell uni-list-cell-pd\">\r\n <view class=\"uni-list-cell-db\">关闭</view>\r\n <switch />\r\n </view>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\n export default {\r\n data() {\r\n return {\r\n title: 'switch 开关',\r\n checked: true,\r\n color: '#FFCC33',\r\n clickCheckedValue: true\r\n }\r\n },\r\n methods: {\r\n switch1Change: function (e : SwitchChangeEvent) {\r\n this.clickCheckedValue = e.detail.value\r\n console.log('switch1 发生 change 事件，携带值为', e.detail.value)\r\n },\r\n switch2Change: function (e : SwitchChangeEvent) {\r\n console.log('switch2 发生 change 事件，携带值为', e.detail.value)\r\n }\r\n }\r\n }\r\n</script>\r\n\r\n<style>\r\n .flex-row {\r\n flex-direction: row;\r\n }\r\n</style>\n```","compatibility":"\n### switch 兼容性\n| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- |\n| 5.0 | √ | 3.9+ | 9.0 | √ | x |\n\n ### switch 属性兼容性\n| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| name | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| checked | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| color | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| disabled | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| @change | 5.0 | √ | 3.9+ | 9.0 | √ | x |","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 \n\n 文本","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| selectable | boolean | false | 文本是否可选 |\n| space | string | - | 显示连续空格 [space](#space-values) |\n| decode | boolean | false | 是否解码 |\n\n#### space @space-values \n\n| 值名称 | 描述 |\n| :- | :- |\n| ensp | 中文字符空格一半大小 |\n| emsp | 中文字符空格大小 |\n| nbsp | 根据字体设置的空格大小 |\n\n","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/text/text.uvue) \n ```html\n<template>\r\n <view>\r\n <page-head :title=\"title\"></page-head>\r\n <view class=\"uni-padding-wrap uni-common-mt\">\r\n <view class=\"text-box\" scroll-y=\"true\">\r\n <text class=\"text\">{{ text }}</text>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button class=\"uni-btn\" type=\"primary\" :disabled=\"!canAdd\" @click=\"add\">\r\n add line\r\n </button>\r\n <button\r\n class=\"uni-btn\"\r\n type=\"warn\"\r\n :disabled=\"!canRemove\"\r\n @click=\"remove\"\r\n >\r\n remove line\r\n </button>\r\n <button class=\"uni-btn\" type=\"primary\" @click=\"textProps\">\r\n 更多属性示例\r\n </button>\r\n </view>\r\n </view>\r\n </view>\r\n</template>\r\n<script lang=\"uts\">\r\nexport 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</script>\r\n\r\n<style>\r\n.text-box {\r\n margin-bottom: 40rpx;\r\n padding: 40rpx 0;\r\n display: flex;\r\n min-height: 300rpx;\r\n background-color: #ffffff;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.text {\r\n font-size: 30rpx;\r\n color: #353535;\r\n line-height: 54rpx;\r\n text-align: center;\r\n}\r\n</style>\r\n\n```","compatibility":"\n### text 兼容性\n| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- |\n| 5.0 | √ | 3.9+ | 9.0 | √ | - |\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"},"textarea":{"name":"## textarea","description":"> 组件类型：UniTextareaElement \n\n 多行输入框","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| value | string | \"\" | 输入框的初始内容 |\n| placeholder | string | \"\" | 输入框为空时占位符 |\n| placeholder-style | string | \"\" | 指定 placeholder 的样式 |\n| placeholder-class | string(string.ClassString) | \"\" | 指定 placeholder 的样式类 |\n| maxlength | number | 140 | 最大输入长度，设置为 -1 的时候不限制最大长度 |\n| auto-focus | boolean | false | 自动获取焦点 |\n| focus | boolean | false | 获取焦点 |\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) | \"\" | 指定光标颜色 |\n| selection-start | number | -1 | 光标起始位置，自动聚集时有效，需与selection-end搭配使用 |\n| selection-end | number | -1 | 光标结束位置，自动聚集时有效，需与selection-satrt搭配使用 |\n| adjust-position | boolean | true | 键盘弹起时，是否自动上推页面 |\n| @confirm | (event: [InputConfirmEvent](#inputconfirmevent)) => void | - | 点击完成时， 触发 confirm 事件，event.detail = {value: value} |\n| @input | (event: [InputEvent](#inputevent)) => void | - | 当键盘输入时，触发 input 事件，event.detail = {value, cursor}， @input 处理函数的返回值并不会反映到 textarea 上 |\n| @linechange | (event: [TextareaLineChangeEvent](#textarealinechangeevent)) => void | - | 输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0} |\n| @blur | (event: [TextareaBlurEvent](#textareablurevent)) => void | - | 输入框失去焦点时触发，event.detail = {value, cursor} |\n| @keyboardheightchange | (event: [InputKeyboardHeightChangeEvent](#inputkeyboardheightchangeevent)) => void | - | 键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration} |\n| @focus | (event: [TextareaFocusEvent](#textareafocusevent)) => void | - | 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度，在基础库 1.9.90 起支持 |","event":"\n### 事件\n#### InputConfirmEvent\n\n##### InputConfirmEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [InputConfirmEventDetail](#inputconfirmeventdetail-values) | 是 | - | - |\n| type | string | 是 | - | 事件类型 |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n###### InputConfirmEventDetail 的属性值 @inputconfirmeventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | string | 是 | - | 输入框内容 |\n\n##### InputConfirmEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |\n\n#### InputEvent\n\n##### InputEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [InputEventDetail](#inputeventdetail-values) | 是 | - | - |\n| type | string | 是 | - | 事件类型 |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n###### InputEventDetail 的属性值 @inputeventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | string | 是 | - | 输入框内容 |\n| cursor | number | 是 | - | 光标的位置 |\n| keyCode | number | 是 | - | 输入字符的Unicode值 |\n\n##### InputEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |\n\n#### TextareaLineChangeEvent\n\n##### TextareaLineChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [TextareaLineChangeEventDetail](#textarealinechangeeventdetail-values) | 是 | - | - |\n| type | string | 是 | - | 事件类型 |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n###### TextareaLineChangeEventDetail 的属性值 @textarealinechangeeventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| lineCount | number | 是 | - | 行数 |\n| heightRpx | number | 是 | - | textarea的高度 |\n| height | number | 是 | - | textarea的高度 |\n\n##### TextareaLineChangeEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |\n\n#### TextareaBlurEvent\n\n##### TextareaBlurEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [TextareaBlurEventDetail](#textareablureventdetail-values) | 是 | - | - |\n| type | string | 是 | - | 事件类型 |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n###### TextareaBlurEventDetail 的属性值 @textareablureventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | string | 是 | - | 输入框内容 |\n| cursor | number | 是 | - | 选择区域的起始位置 |\n\n##### TextareaBlurEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |\n\n#### InputKeyboardHeightChangeEvent\n\n##### InputKeyboardHeightChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [InputKeyboardHeightChangeEventDetail](#inputkeyboardheightchangeeventdetail-values) | 是 | - | - |\n| type | string | 是 | - | 事件类型 |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n###### InputKeyboardHeightChangeEventDetail 的属性值 @inputkeyboardheightchangeeventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| height | number | 是 | - | 键盘高度 |\n| duration | number | 是 | - | 持续时间 |\n\n##### InputKeyboardHeightChangeEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |\n\n#### TextareaFocusEvent\n\n##### TextareaFocusEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [TextareaFocusEventDetail](#textareafocuseventdetail-values) | 是 | - | - |\n| type | string | 是 | - | 事件类型 |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n###### TextareaFocusEventDetail 的属性值 @textareafocuseventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| height | number | 是 | - | 键盘高度 |\n| value | string | 是 | - | 输入框内容 |\n\n##### TextareaFocusEvent 的方法\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 ```html\n<script>\r\nimport { ItemType } from '@/components/enum-data/enum-data'\r\nexport default {\r\n\tdata() {\r\n\t\treturn {\r\n\t\t\tadjust_position_boolean: false,\r\n\t\t\tshow_confirm_bar_boolean: false,\r\n\t\t\tfixed_boolean: false,\r\n\t\t\tauto_height_boolean: false,\r\n\t\t\tconfirm_hold_boolean: false,\r\n\t\t\tfocus_boolean: false,\r\n\t\t\tauto_focus_boolean: false,\n default_value:\"\",\n maxlength:-1,\r\n\t\t\tinputmode_enum: [{\"value\":0,\"name\":\"none\"},{\"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\"}] as ItemType[],\n cursor_color: \"#3393E2\",\r\n\t\t\tinputmode_enum_current: 0\r\n\t\t}\r\n\t},\n\r\n\tmethods: {\r\n\t\ttextarea_click() { console.log(\"组件被点击时触发\") },\r\n\t\ttextarea_touchstart() { console.log(\"手指触摸动作开始\") },\r\n\t\ttextarea_touchmove() { console.log(\"手指触摸后移动\") },\r\n\t\ttextarea_touchcancel() { console.log(\"手指触摸动作被打断，如来电提醒，弹窗\") },\r\n\t\ttextarea_touchend() { console.log(\"手指触摸动作结束\") },\r\n\t\ttextarea_tap() { console.log(\"手指触摸后马上离开\") },\r\n\t\ttextarea_longpress() { console.log(\"如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。\") },\r\n\t\ttextarea_confirm() { console.log(\"点击完成时， 触发 confirm 事件，event.detail = {value: value}\") },\r\n\t\ttextarea_input() { console.log(\"当键盘输入时，触发 input 事件，event.detail = {value, cursor}， @input 处理函数的返回值并不会反映到 textarea 上\") },\r\n\t\ttextarea_linechange() { console.log(\"输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0}\") },\r\n\t\ttextarea_blur() { console.log(\"输入框失去焦点时触发，event.detail = {value, cursor}\") },\r\n\t\ttextarea_keyboardheightchange() { console.log(\"键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration}\") },\r\n\t\ttextarea_focus() { console.log(\"输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度，在基础库 1.9.90 起支持\") },\r\n\t\tchange_adjust_position_boolean(checked : boolean) { this.adjust_position_boolean = checked },\r\n\t\tchange_show_confirm_bar_boolean(checked : boolean) { this.show_confirm_bar_boolean = checked },\r\n\t\tchange_fixed_boolean(checked : boolean) { this.fixed_boolean = checked },\r\n\t\tchange_auto_height_boolean(checked : boolean) { this.auto_height_boolean = checked },\r\n\t\tchange_confirm_hold_boolean(checked : boolean) { this.confirm_hold_boolean = checked },\r\n\t\tchange_focus_boolean(checked : boolean) { this.focus_boolean = checked },\r\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\"}},\r\n\t\tradio_change_inputmode_enum(checked : number) { this.inputmode_enum_current = checked }\r\n\t}\r\n}\r\n</script>\r\n\r\n<template>\r\n <view class=\"main\">\r\n <textarea\n :value=\"default_value\"\r\n class=\"uni-textarea\"\r\n :auto-focus=\"auto_focus_boolean\"\r\n :focus=\"focus_boolean\"\r\n :confirm-hold=\"confirm_hold_boolean\"\r\n :auto-height=\"auto_height_boolean\"\r\n :fixed=\"fixed_boolean\"\r\n :show-confirm-bar=\"show_confirm_bar_boolean\"\r\n :adjust-position=\"adjust_position_boolean\"\n :cursor-color=\"cursor_color\"\r\n :inputmode=\"inputmode_enum[inputmode_enum_current].name\"\n :maxlength=\"maxlength\"\r\n @click=\"textarea_click\"\r\n @touchstart=\"textarea_touchstart\"\r\n @touchmove=\"textarea_touchmove\"\r\n @touchcancel=\"textarea_touchcancel\"\r\n @touchend=\"textarea_touchend\"\r\n @tap=\"textarea_tap\"\r\n @longpress=\"textarea_longpress\"\r\n @confirm=\"textarea_confirm\"\r\n @input=\"textarea_input\"\r\n @linechange=\"textarea_linechange\"\r\n @blur=\"textarea_blur\"\r\n @keyboardheightchange=\"textarea_keyboardheightchange\"\r\n @focus=\"textarea_focus\"\r\n style=\"padding: 20rpx; border: 1px solid #666\"\r\n />\r\n </view>\r\n\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\">\r\n <!-- #endif -->\r\n <view class=\"content\">\r\n <boolean-data\r\n :defaultValue=\"false\"\r\n title=\"键盘弹起时，是否自动上推页面\"\r\n @change=\"change_adjust_position_boolean\"\r\n ></boolean-data>\n <!-- #ifdef !APP -->\r\n <boolean-data\r\n :defaultValue=\"false\"\r\n title=\"是否显示键盘上方带有”完成“按钮那一栏\"\r\n @change=\"change_show_confirm_bar_boolean\"\r\n ></boolean-data>\r\n <boolean-data\r\n :defaultValue=\"false\"\r\n title=\"如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true\"\r\n @change=\"change_fixed_boolean\"\r\n ></boolean-data>\n <!-- #endif -->\r\n <boolean-data\r\n :defaultValue=\"false\"\r\n title=\"是否自动增高，设置auto-height时，style.height不生效\"\r\n @change=\"change_auto_height_boolean\"\r\n ></boolean-data>\r\n <boolean-data\r\n :defaultValue=\"false\"\r\n title=\"点击键盘右下角按钮时是否保持键盘不收起\"\r\n @change=\"change_confirm_hold_boolean\"\r\n ></boolean-data>\r\n <boolean-data\r\n :defaultValue=\"focus_boolean\"\r\n title=\"获取焦点\"\r\n @change=\"change_focus_boolean\"\r\n ></boolean-data>\r\n <boolean-data\r\n :defaultValue=\"false\"\r\n title=\"自动获取焦点\"\r\n @change=\"change_auto_focus_boolean\"\r\n ></boolean-data>\n <boolean-data\n :defaultValue=\"false\"\n title=\"改变光标颜色为透明\"\n @change=\"change_cursor_color_boolean\"\n ></boolean-data>\r\n <enum-data\r\n :items=\"inputmode_enum\"\r\n title=\"是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。在符合条件的高版本webview里，uni-app的 web 和 app-vue 平台中可使用本属性。\"\r\n @change=\"radio_change_inputmode_enum\"\r\n ></enum-data>\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n<style>\r\n.main {\r\n max-height: 500rpx;\r\n padding: 10rpx 0;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.06);\r\n flex-direction: row;\r\n justify-content: center;\n}\r\n\r\n.main .list-item {\r\n width: 100%;\r\n height: 200rpx;\r\n border: 1px solid #666;\r\n}\r\n</style>\r\n\n```","compatibility":"\n### textarea 兼容性\n| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- |\n| 5.0 | √ | 3.9+ | 9.0 | √ | - |\n\n ### textarea 属性兼容性\n| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| cursor-color | 4.4 | x | 3.99 | x | x | x |\n| @confirm | 5.0 | √ | 3.9+ | - | - | - |\n| @input | 5.0 | √ | 3.9+ | - | - | - |\n| @linechange | 5.0 | √ | 3.9+ | - | - | - |\n| @blur | 5.0 | √ | 3.9+ | - | - | - |\n| @keyboardheightchange | 5.0 | √ | 3.9+ | - | - | - |\n| @focus | 5.0 | √ | 3.9+ | - | - | - |","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"},"video":{"name":"## video","description":"> 组件类型：[UniVideoElement](#univideoelement) \n\n 视频","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| loop | boolean | false | 是否循环播放 |\n| src | string(string.VideoURIString) | - | 视频资源地址 |\n| initial-time | number | - | 指定视频初始播放位置 |\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 | -90 | 设置全屏时视频的方向，不指定则根据宽高比自动判断。有效值为 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 容器大小不一致时，视频的表现形式。 [objectFit](#objectFit-values) |\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| ad-unit-id | string | - | 视频前贴广告单元ID |\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| @play | (event: [Event](/component/common#event)) => void | - | 当开始/继续播放时触发 |\n| @pause | (event: [Event](/component/common#event)) => void | - | 当暂停播放时触发 |\n| @ended | (event: [Event](/component/common#event)) => void | - | 当播放到视频末尾时触发 |\n| @timeupdate | (event: [VideoTimeUpdateEvent](#videotimeupdateevent)) => void | - | 播放进度变化时触发，event.detail = { currentTime, duration }。触发频率 250ms 一次 |\n| @fullscreenchange | (event: [VideoFullScreenChangeEvent](#videofullscreenchangeevent)) => void | - | 当视频进入和退出全屏时触发，event.detail = { fullScreen, direction }，direction取为 vertical 或 horizontal |\n| @waiting | (event: [Event](/component/common#event)) => void | - | 视频出现缓冲时触发 |\n| @error | (event: [VideoErrorEvent](#videoerrorevent)) => void | - | 播放出错时触发 |\n| @progress | (event: [VideoProgressEvent](#videoprogressevent)) => void | - | 加载进度变化时触发，只支持一段加载。event.detail = { buffered }，百分比 |\n| @fullscreenclick | (event: [VideoFullScreenClickEvent](#videofullscreenclickevent)) => void | - | 视频全屏播放时点击屏幕触发。event.detail = { screenX, screenY, screenWidth, screenHeight } |\n| @controlstoggle | (event: [VideoControlsToggleEvent](#videocontrolstoggleevent)) => void | - | 切换 controls 显示隐藏时触发。event.detail = { show } |\n\n#### objectFit @objectFit-values \n\n| 值名称 | 描述 |\n| :- | :- |\n| contain | 包含 |\n| fill | 填充 |\n| cover | 覆盖 |\n\n","event":"\n### 事件\n#### VideoTimeUpdateEvent\n\r\ntimeupdate 事件\r\n播放进度变化时触发\n##### VideoTimeUpdateEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | VideoTimeUpdateEventDetail | 是 | - | - |\n| type | string | 是 | - | - |\n| target | [Element](/dom/element.md) | 否 | - | - |\n| currentTarget | [Element](/dom/element.md) | 否 | - | - |\n| timeStamp | Long | 是 | - | - |\n\n\n#### VideoFullScreenChangeEvent\n\r\nfullscreenchange 事件\r\n当视频进入和退出全屏是触发\n##### VideoFullScreenChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | VideoFullScreenChangeEventDetail | 是 | - | - |\n| type | string | 是 | - | - |\n| target | [Element](/dom/element.md) | 否 | - | - |\n| currentTarget | [Element](/dom/element.md) | 否 | - | - |\n| timeStamp | Long | 是 | - | - |\n\n\n#### VideoErrorEvent\n\r\nerror 事件\r\n视频播放出错时触发\n##### VideoErrorEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [VideoError](#videoerror-values) | 是 | - | - |\n| type | string | 是 | - | - |\n| target | [Element](/dom/element.md) | 否 | - | - |\n| currentTarget | [Element](/dom/element.md) | 否 | - | - |\n| timeStamp | Long | 是 | - | - |\n\n###### VideoError 的属性值 @videoerror-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| errCode | VideoErrorCode | 是 | - | - |\n| errSubject | string | 是 | - | 统一错误主题（模块）名称 |\n| data | any | 否 | - | 错误信息中包含的数据 |\n| cause | [Error](https://uniapp.dcloud.net.cn/tutorial/err-spec.html#unierror) | 否 | - | 源错误信息，可以包含多个错误，详见SourceError |\n| errMsg | string | 是 | - | - |\n\n#### VideoProgressEvent\n\r\nprogress 事件\r\n加载进度变化时触发\n##### VideoProgressEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | VideoProgressEventDetail | 是 | - | - |\n| type | string | 是 | - | - |\n| target | [Element](/dom/element.md) | 否 | - | - |\n| currentTarget | [Element](/dom/element.md) | 否 | - | - |\n| timeStamp | Long | 是 | - | - |\n\n\n#### VideoFullScreenClickEvent\n\r\nfullscreenclick 事件\r\n视频播放全屏播放时点击事件\n##### VideoFullScreenClickEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | VideoFullScreenClickEventDetail | 是 | - | - |\n| type | string | 是 | - | - |\n| target | [Element](/dom/element.md) | 否 | - | - |\n| currentTarget | [Element](/dom/element.md) | 否 | - | - |\n| timeStamp | Long | 是 | - | - |\n\n\n#### VideoControlsToggleEvent\n\r\ncontrolstoggle 事件\r\n切换播放控件显示隐藏时触发\n##### VideoControlsToggleEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | VideoControlsToggleEventDetail | 是 | - | - |\n| type | string | 是 | - | - |\n| target | [Element](/dom/element.md) | 否 | - | - |\n| currentTarget | [Element](/dom/element.md) | 否 | - | - |\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 ```html\n<template>\r\n <view class=\"uni-flex-item\">\r\n <video class=\"video\" ref=\"video\" id=\"video\" :header=\"header\" :src=src :autoplay=\"autoplay\" :loop=\"loop\"\r\n :muted=\"muted\" :initial-time=\"initialTime\" :duration=\"duration\" :controls=\"controls\" :danmu-btn=\"danmuBtn\"\r\n :enable-danmu=\"enableDanmu\" :page-gesture=\"pageGesture\" :direction=\"direction\" :show-progress=\"showProgress\"\r\n :show-fullscreen-btn=\"showFullscreenBtn\" :show-play-btn=\"showPlayBtn\" :show-center-play-btn=\"showCenterPlayBtn\"\r\n :show-loading=\"showLoading\" :enable-progress-gesture=\"enableProgressGesture\" :object-fit=\"objectFit\"\r\n :poster=\"poster\" :show-mute-btn=\"showMuteBtn\" :title=\"title\" :enable-play-gesture=\"enablePlayGesture\"\r\n :vslide-gesture=\"vslideGesture\" :vslide-gesture-in-fullscreen=\"vslideGestureInFullscreen\" :codec=\"codec\"\r\n :http-cache=\"httpCache\" :play-strategy=\"playStrategy\" :danmu-list=\"danmuList\" @play=\"onPlay\" @pause=\"onPause\"\r\n @ended=\"onEnded\" @timeupdate=\"onTimeUpdate\" @waiting=\"onWaiting\" @error=\"onError\" @progress=\"onProgress\"\r\n @fullscreenclick=\"onFullScreenClick\" @controlstoggle=\"onControlsToggle\" @fullscreenchange=\"onFullScreenChange\">\r\n </video>\r\n <scroll-view class=\"uni-padding-wrap uni-common-mt uni-flex-item\">\r\n <view class=\"uni-btn-v\">\r\n <navigator url=\"/pages/component/video/video-format\">\r\n <button type=\"primary\">视频格式示例</button>\r\n </navigator>\r\n </view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">API示例</text>\r\n </View>\r\n <view class=\"uni-btn-v\">\r\n <button type=\"primary\" @click=\"play\">播放</button>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button type=\"primary\" @click=\"pause\">暂停</button>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button type=\"primary\" @click=\"seek(pos)\">跳转到指定位置</button>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button type=\"primary\" @click=\"requestFullScreen(requestFullScreenOptions)\">进入全屏</button>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button type=\"primary\" @click=\"exitFullScreen\">退出全屏</button>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button type=\"primary\" @click=\"stop\">停止</button>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button type=\"primary\" @click=\"sendDanmu(danmu)\">发送弹幕</button>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button type=\"primary\" @click=\"playbackRate(rate)\">设置倍速</button>\r\n </view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">属性示例</text>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button type=\"primary\" @click=\"setSrc(_src)\">设置播放资源</button>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button type=\"primary\" @click=\"setAutoplay()\">设置是否自动播放（未播放时设置有效）</button>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button type=\"primary\" @click=\"setLoop()\">设置是否循环播放（本次播放完成后生效）</button>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button type=\"primary\" @click=\"setMuted()\">设置是否静音播放</button>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button type=\"primary\" @click=\"setInitialTime(_initialTime)\">设置初始播放位置（本次播放完成后生效）</button>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button type=\"primary\" @click=\"setDuration(_duration)\">设置视频时长（未播放时设置有效）</button>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button type=\"primary\" @click=\"setControls()\">设置是否显示默认播放控件</button>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button type=\"primary\" @click=\"setDanmuBtn()\">设置是否显示弹幕按钮</button>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button type=\"primary\" @click=\"setPageGesture()\">非全屏模式下，设置是否开启亮度与音量调节手势</button>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button type=\"primary\" @click=\"setDirection(_direction)\">设置全屏时视频的方向</button>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button type=\"primary\" @click=\"setShowProgress()\">设置是否显示进度条</button>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button type=\"primary\" @click=\"setShowFullscreenBtn()\">设置是否显示全屏按钮</button>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button type=\"primary\" @click=\"setShowPlayBtn()\">设置是否显示视频底部控制栏的播放按钮</button>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button type=\"primary\" @click=\"setShowCenterPlayBtn()\">设置是否显示视频中间的播放按钮</button>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button type=\"primary\" @click=\"setShowLoading()\">设置是否显示loading控件</button>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button type=\"primary\" @click=\"setEnableProgressGesture()\">设置是否开启控制进度的手势</button>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button type=\"primary\" @click=\"setObjectFit(_objectFit)\">设置视频大小与video容器大小不一致时，视频的表现形式</button>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button type=\"primary\" @click=\"setPoster(_poster)\">设置视频封面</button>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button type=\"primary\" @click=\"setShowMuteBtn()\">设置是否显示静音按钮</button>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button type=\"primary\" @click=\"setTitle(_title)\">设置视频标题</button>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button type=\"primary\" @click=\"setEnablePlayGesture()\">设置是否开启播放手势</button>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button type=\"primary\" @click=\"setVslideGesture()\">非全屏模式下，设置是否开启亮度与音量调节手势</button>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button type=\"primary\" @click=\"setVslideGestureInFullscreen()\">全屏模式下，设置是否开启亮度与音量调节手势</button>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button type=\"primary\" @click=\"setCodec(_codec)\">设置解码器（未播放时设置有效）</button>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button type=\"primary\" @click=\"setHttpCache()\">设置是否对http、https视频源开启本地缓存（未播放时设置有效）</button>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button type=\"primary\" @click=\"setPlayStrategy(_playStrategy)\">设置播放策略（未播放时设置有效）</button>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button type=\"primary\" @click=\"setHeader(_header)\">设置header</button>\r\n </view>\r\n </scroll-view>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\n export default {\r\n onReady() {\r\n this.videoContext = uni.createVideoContext('video', this);\r\n },\r\n data() {\r\n return {\r\n videoContext: null as VideoContext | null,\r\n // 属性\r\n src: \"https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v\",\r\n _src: \"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app-video-courses.mp4\",\r\n autoplay: false,\r\n loop: false,\r\n muted: false,\r\n initialTime: 0,\r\n _initialTime: 6,\r\n duration: -1,\r\n _duration: 60,\r\n controls: true,\r\n danmuList: [{\r\n text: '要显示的文本',\r\n color: '#FF0000',\r\n time: 3\r\n }, {\r\n text: '要显示的文本2',\r\n color: '#31ff23',\r\n time: 5\r\n }, {\r\n text: '要显示的文本3',\r\n color: '#f13ef8',\r\n time: 7\r\n }, {\r\n text: '要显示的文本4',\r\n color: '#4972f8',\r\n time: 9\r\n }, {\r\n text: '要显示的文本5',\r\n color: '#000000',\r\n time: 11\r\n }] as Array<Danmu>,\r\n danmuBtn: false,\r\n enableDanmu: true,\r\n pageGesture: false,\r\n direction: -90,\r\n _direction: 0,\r\n requestFullScreenOptions: {\r\n direction: -90\r\n } as RequestFullScreenOptions,\r\n showProgress: true,\r\n showFullscreenBtn: true,\r\n showPlayBtn: true,\r\n showCenterPlayBtn: true,\r\n showLoading: true,\r\n enableProgressGesture: true,\r\n objectFit: \"contain\",\r\n _objectFit: \"fill\",\r\n poster: \"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-android.png\",\r\n _poster: \"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-ios.png\",\r\n showMuteBtn: false,\r\n title: \"video-component\",\r\n _title: \"video-component video-component\",\r\n enablePlayGesture: false,\r\n vslideGesture: false,\r\n vslideGestureInFullscreen: true,\r\n codec: \"hardware\",\r\n _codec: \"software\",\r\n httpCache: true,\r\n playStrategy: 0,\r\n _playStrategy: 2,\r\n header: {\r\n 'User-Agent': 'header test'\r\n } as UTSJSONObject,\r\n _header: {\r\n 'User-Agent': 'header test2'\r\n } as UTSJSONObject,\r\n // API\r\n pos: 10,\r\n rate: 1.5,\r\n danmu: {\r\n text: '要显示的文本',\r\n color: '#FF0000'\r\n } as Danmu,\r\n // 自动化测试\r\n isPlaying: false,\r\n isPause: false,\r\n isFullScreen: false\r\n }\r\n },\r\n methods: {\r\n // API\r\n play: function () {\r\n console.log(\"play\");\r\n this.videoContext?.play();\r\n },\r\n pause: function () {\r\n console.log(\"pause\");\r\n (uni.getElementById(\"video\") as UniVideoElement).pause(); //as写法测试。注意id不对时as会崩溃\r\n // this.videoContext?.pause();\r\n },\r\n seek: function (pos : number) {\r\n console.log(\"seek -> \" + pos);\r\n this.videoContext?.seek(pos);\r\n },\r\n requestFullScreen: function (options : RequestFullScreenOptions | null) {\r\n console.log(\"requestFullScreen -> \" + options);\r\n this.videoContext?.requestFullScreen(options);\r\n },\r\n exitFullScreen: function () {\r\n console.log(\"exitFullScreen\");\r\n this.videoContext?.exitFullScreen();\r\n },\r\n stop: function () {\r\n console.log(\"stop\");\r\n uni.getElementById<UniVideoElement>(\"video\")?.stop(); //泛型写法测试\r\n // this.videoContext?.stop();\r\n },\r\n sendDanmu: function (danmu : Danmu) {\r\n console.log(\"sendDanmu -> \" + danmu);\r\n this.videoContext?.sendDanmu(danmu);\r\n },\r\n playbackRate: function (rate : number) {\r\n console.log(\"playbackRate -> \" + rate);\r\n this.videoContext?.playbackRate(rate);\r\n },\r\n // 属性\r\n setSrc: function (src : string) {\r\n this.src = src;\r\n console.log(\"src -> \" + this.src)\r\n },\r\n setAutoplay: function () {\r\n this.autoplay = !this.autoplay;\r\n console.log(\"autoplay -> \" + this.autoplay)\r\n },\r\n setLoop: function () {\r\n this.loop = !this.loop;\r\n console.log(\"loop -> \" + this.loop)\r\n },\r\n setMuted: function () {\r\n this.muted = !this.muted;\r\n console.log(\"muted -> \" + this.muted)\r\n },\r\n setInitialTime: function (initialTime : number) {\r\n this.initialTime = initialTime;\r\n console.log(\"initialTime -> \" + this.initialTime)\r\n },\r\n setDuration: function (duration : number) {\r\n this.duration = duration;\r\n console.log(\"duration -> \" + this.duration)\r\n },\r\n setControls: function () {\r\n this.controls = !this.controls;\r\n console.log(\"controls -> \" + this.controls)\r\n },\r\n setDanmuBtn: function () {\r\n this.danmuBtn = !this.danmuBtn;\r\n console.log(\"danmuBtn -> \" + this.danmuBtn)\r\n },\r\n setPageGesture: function () {\r\n this.pageGesture = !this.pageGesture;\r\n console.log(\"pageGesture -> \" + this.pageGesture)\r\n },\r\n setDirection: function (direction : number) {\r\n this.direction = direction;\r\n console.log(\"direction -> \" + this.direction)\r\n },\r\n setShowProgress: function () {\r\n this.showProgress = !this.showProgress;\r\n console.log(\"showProgress -> \" + this.showProgress)\r\n },\r\n setShowFullscreenBtn: function () {\r\n this.showFullscreenBtn = !this.showFullscreenBtn;\r\n console.log(\"showFullscreenBtn -> \" + this.showFullscreenBtn)\r\n },\r\n setShowPlayBtn: function () {\r\n this.showPlayBtn = !this.showPlayBtn;\r\n console.log(\"showPlayBtn -> \" + this.showPlayBtn)\r\n },\r\n setShowCenterPlayBtn: function () {\r\n this.showCenterPlayBtn = !this.showCenterPlayBtn;\r\n console.log(\"showCenterPlayBtn -> \" + this.showCenterPlayBtn)\r\n },\r\n setShowLoading: function () {\r\n this.showLoading = !this.showLoading;\r\n console.log(\"showLoading -> \" + this.showLoading)\r\n },\r\n setEnableProgressGesture: function () {\r\n this.enableProgressGesture = !this.enableProgressGesture;\r\n console.log(\"enableProgressGesture -> \" + this.enableProgressGesture)\r\n },\r\n setObjectFit: function (objectFit : string) {\r\n this.objectFit = objectFit;\r\n console.log(\"objectFit -> \" + this.objectFit)\r\n },\r\n setPoster: function (poster : string) {\r\n this.poster = poster;\r\n console.log(\"poster -> \" + this.poster)\r\n },\r\n setShowMuteBtn: function () {\r\n this.showMuteBtn = !this.showMuteBtn;\r\n console.log(\"showMuteBtn -> \" + this.showMuteBtn)\r\n },\r\n setTitle: function (title : string) {\r\n this.title = title;\r\n console.log(\"title -> \" + this.title)\r\n },\r\n setEnablePlayGesture: function () {\r\n this.enablePlayGesture = !this.enablePlayGesture;\r\n console.log(\"enablePlayGesture -> \" + this.enablePlayGesture)\r\n },\r\n setVslideGesture: function () {\r\n this.vslideGesture = !this.vslideGesture;\r\n console.log(\"vslideGesture -> \" + this.vslideGesture)\r\n },\r\n setVslideGestureInFullscreen: function () {\r\n this.vslideGestureInFullscreen = !this.vslideGestureInFullscreen;\r\n console.log(\"vslideGestureInFullscreen -> \" + this.vslideGestureInFullscreen)\r\n },\r\n setCodec: function (codec : string) {\r\n this.codec = codec;\r\n console.log(\"codec -> \" + this.codec)\r\n },\r\n setHttpCache: function () {\r\n this.httpCache = !this.httpCache;\r\n console.log(\"httpCache -> \" + this.httpCache)\r\n },\r\n setPlayStrategy: function (playStrategy : number) {\r\n this.playStrategy = playStrategy;\r\n console.log(\"playStrategy -> \" + this.playStrategy)\r\n },\r\n setHeader: function (header : UTSJSONObject) {\r\n this.header = header;\r\n console.log(\"header -> \" + this.header)\r\n },\r\n // 事件\r\n onPlay: function (res : Event) {\r\n console.log(res.type);\r\n this.isPlaying = true;\r\n this.isPause = false;\r\n },\r\n onPause: function (res : Event) {\r\n console.log(res.type);\r\n this.isPlaying = false;\r\n this.isPause = true;\r\n },\r\n onEnded: function (res : Event) {\r\n console.log(res.type);\r\n },\r\n onTimeUpdate: function (res : VideoTimeUpdateEvent) {\r\n console.log(res.type + \" -> \" + JSON.stringify(res.detail));\r\n },\r\n onFullScreenChange: function (res : VideoFullScreenChangeEvent) {\r\n console.log(res.type + \" -> \" + JSON.stringify(res.detail));\r\n this.isFullScreen = !this.isFullScreen;\r\n },\r\n onWaiting: function (res : Event) {\r\n console.log(res.type);\r\n },\r\n onError: function (res : VideoErrorEvent) {\r\n console.log(res.type + \" -> \" + JSON.stringify(res.detail));\r\n },\r\n onProgress: function (res : VideoProgressEvent) {\r\n console.log(res.type + \" -> \" + JSON.stringify(res.detail));\r\n },\r\n onFullScreenClick: function (res : VideoFullScreenClickEvent) {\r\n console.log(res.type + \" -> \" + JSON.stringify(res.detail));\r\n },\r\n onControlsToggle: function (res : VideoControlsToggleEvent) {\r\n console.log(res.type + \" -> \" + JSON.stringify(res.detail));\r\n }\r\n }\r\n }\r\n</script>\r\n\r\n<style>\r\n .video {\r\n width: 750rpx;\r\n height: 400rpx;\r\n }\r\n</style>\r\n\n```","compatibility":"\n### video 兼容性\n| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- |\n| 5.0 | √ | 3.9+ | 9.0 | √ | - |\n\n ### video 属性兼容性\n| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| play-btn-position | 5.0 | x | x | 9.0 | x | - |\n| auto-pause-if-navigate | 5.0 | x | x | 9.0 | x | - |\n| auto-pause-if-open-native | 5.0 | x | x | 9.0 | x | - |\n| ad-unit-id | 5.0 | x | x | 9.0 | x | - |\n| poster-for-crawler | 5.0 | x | x | 9.0 | x | - |\n| is-live | 5.0 | x | x | 9.0 | x | - |","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\n\r\nvideo元素对象\n#### UniVideoElement 的方法\n##### play() @play\n\r\n播放\n\n\n\n\n##### pause() @pause\n\r\n暂停\n\n\n\n\n##### seek(position) @seek\n\r\n跳转到指定位置\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| position | number | 是 | - | 跳转到指定位置(秒) |\n\n\n\n##### stop() @stop\n\r\n停止视频\n\n\n\n\n##### sendDanmu(danmu) @senddanmu\n\r\n发送弹幕\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| danmu | [Danmu](#danmu-values) | 是 | - | 弹幕数据 |\n###### Danmu 的属性值 @danmu-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| text | string | 否 | - | 弹幕文字 |\n| color | string | 否 | - | 弹幕颜色 |\n| time | number | 否 | - | 显示时刻 |\n\n\n\n\n##### playbackRate(rate) @playbackrate\n\r\n设置倍速播放\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| rate | number | 是 | - | 支持倍率 0.5/0.8/1.0/1.25/1.5 |\n\n\n\n##### requestFullScreen(direction) @requestfullscreen\n\r\n进入全屏\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| direction | [RequestFullScreenOptions](#requestfullscreenoptions-values) | 是 | - | 0\\|正常竖向, 90\\|屏幕逆时针90度, -90\\|屏幕顺时针90度 |\n###### RequestFullScreenOptions 的属性值 @requestfullscreenoptions-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| direction | number | 否 | - | direction - 0: 正常竖向 - 90: 屏幕逆时针90度 - -90: 屏幕顺时针90度 |\n\n\n\n\n##### exitFullScreen() @exitfullscreen\n\r\n退出全屏\n\n\n\n"},"unicloud-db":{"name":"## unicloud-db","description":"> 组件类型：UniCloudDBElement \n\n 是一个数据库查询组件，它将clientDB的API封装为组件，进一步减少开发者使用所需的代码量。","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| id | string(string.IDString) | - | 唯一标识 |\n| v-slot:default | string | - | {data, loading, hasMore, pagination, error} [v-slot:default](#v-slot-default-values) |\n| collection | string(string.DBCollectionString) | - | 表名 |\n| field | string(string.DBFieldString) | - | 查询字段，多个字段用 `,` 分割 |\n| where | string(string.JQLString) | - | 查询条件 |\n| orderby | string | - | 排序字段及正序倒叙设置 |\n| groupby | string | - | 对数据进行分组 |\n| group-field | string | - | 对数据进行分组统计 |\n| distinct | boolean | - | 是否对数据查询结果中重复的记录进行去重 [distinct](#distinct-values) |\n| page-data | string | - | add 多次查询的集合, replace 当前查询的集合 [page-data](#page-data-values) |\n| page-current | number | - | 当前页 |\n| page-size | number | - | 每页数据数量 |\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 [loadtime](#loadtime-values) |\n| @load | (data : Array\\<UTSJSONObject>, ended : boolean, pagination : [UTSJSONObject](/uts/buildin-object-api/utsjsonobject.md)) => void | - | 成功回调。如联网返回结果后，想修改下数据再渲染界面，则在本方法里对data进行修改 |\n| @error | (event: [Event](/component/common#event)) => void | - | 失败回调 |\n\n#### v-slot:default @v-slot-default-values \n\n| 值名称 | 描述 |\n| :- | :- |\n| data | 查询结果，类型为Array\\<UTSJSONObject> |\n| loading | 查询中的状态。可根据此状态，在template中通过v-if显示等待内容 |\n| hasMore | 是否有更多数据。可根据此状态，在template中通过v-if显示没有更多数据了 |\n| error | 查询错误。可根据此状态，在template中通过v-if显示等待内容 |\n| pagination | 分页属性 [pagination](#pagination-values) |\n\n\n\n##### pagination @pagination-values \n\n| 值名称 | 描述 |\n| :- | :- |\n| current | 当前页号 |\n| size | 分页大小 |\n| count | 数据库的总数据量, 设置 :getcount=true 时有效 |\n\n\n\n#### distinct @distinct-values \n\n| 值名称 | 描述 |\n| :- | :- |\n| true | 去重 |\n| false | 不去重 |\n\n\n\n#### page-data @page-data-values \n\n| 值名称 | 描述 |\n| :- | :- |\n| add | 多次查询的集合 |\n| replace | 当前查询的集合 |\n\n\n\n#### loadtime @loadtime-values \n\n| 值名称 | 描述 |\n| :- | :- |\n| auto | 页面就绪后或属性变化后加载数据，默认为auto |\n| onready | 页面就绪后不自动加载数据，属性变化后加载。适合在onLoad中接收上个页面的参数作为where条件时 |\n| manual | 手动模式，不自动加载数据。如果涉及到分页，需要先手动修改当前页，在调用加载数据 |\n\n","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 ```html\n<template>\r\n <view class=\"content\">\r\n <unicloud-db ref=\"udb\" v-slot:default=\"{data, pagination, loading, error}\"\r\n :collection=\"collection\" :getcount=\"true\" loadtime=\"manual\">\r\n <list-view v-if=\"data.length>0\" ref=\"listView\" class=\"list\" :scroll-y=\"true\" @scrolltolower=\"loadMore()\">\r\n <list-item class=\"list-item\" v-for=\"(item, _) in data\">\r\n <view class=\"list-item-fill\">\r\n <text>{{item}}</text>\r\n </view>\r\n <view>\r\n <text class=\"list-item-remove\" @click=\"remove(item.getString('_id')!)\">❌</text>\r\n </view>\r\n </list-item>\r\n </list-view>\r\n <text class=\"loading\" v-if=\"loading\">Loading...</text>\r\n <view v-if=\"error!=null\">{{error.errMsg}}</view>\r\n <view class=\"pagination\" v-if=\"data.length>0\">\r\n <text class=\"pagination-item\">{{data.length}} / {{pagination.count}}</text>\r\n </view>\r\n </unicloud-db>\r\n <view class=\"btn-group\">\r\n <button class=\"btn\" @click=\"add()\">Add</button>\r\n <button class=\"btn\" @click=\"get()\">Get</button>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script>\r\n const db = uniCloud.databaseForJQL()\r\n\r\n export default {\r\n data() {\r\n return {\r\n collection: 'unicloud-db-test',\r\n collectionList: [\r\n db.collection('book').where('name == \"水浒传\"').getTemp(),\r\n ] as UTSJSONObject[],\r\n $uniCloudElement: null as UniCloudDBElement | null,\r\n $isTesting: false,\r\n $addResult: {},\r\n $updateResult: {},\r\n $removeResult: {}\r\n }\r\n },\r\n onReady() {\r\n this.$uniCloudElement = this.$refs['udb'] as UniCloudDBElement\r\n this.get();\r\n },\r\n onPullDownRefresh() {\r\n this.$uniCloudElement!.loadData({\r\n clear: true,\r\n success: (_ : UniCloudDBGetResult) => {\r\n uni.stopPullDownRefresh()\r\n }\r\n })\r\n },\r\n methods: {\r\n loadMore() {\r\n this.$uniCloudElement!.loadMore()\r\n },\r\n get() {\r\n this.$uniCloudElement!.loadData({\r\n clear: true\r\n })\r\n },\r\n add() {\r\n const value = {\r\n title: \"title-\" + Date.now(),\r\n comment: \"comment\" + Date.now()\r\n };\r\n this.$uniCloudElement!.add(value, {\r\n showToast: false,\r\n success: (res : UniCloudDBAddResult) => {\r\n this.$addResult = {\r\n id: res.id\r\n };\r\n this.get();\r\n },\r\n fail: (err : any | null) => {\r\n this.showError(err)\r\n }\r\n })\r\n },\r\n update(id : string) {\r\n const value = {\r\n title: \"title-\" + Date.now(),\r\n comment: \"comment\" + Date.now()\r\n };\r\n this.$uniCloudElement!.update(id, value, {\r\n showToast: false,\r\n needLoading: true,\r\n needConfirm: false,\r\n loadingTitle: \"正在更新...\",\r\n success: (res : UniCloudDBUpdateResult) => {\r\n this.$updateResult = {\r\n updated: res.updated\r\n }\r\n },\r\n fail: (err : any | null) => {\r\n this.showError(err)\r\n }\r\n })\r\n },\r\n remove(id : string) {\r\n this.$uniCloudElement!.remove(id, {\r\n showToast: false,\r\n needConfirm: false,\r\n needLoading: false,\r\n success: (res : UniCloudDBRemoveResult) => {\r\n this.$removeResult = {\r\n deleted: res.deleted\r\n }\r\n },\r\n fail: (err : any | null) => {\r\n this.showError(err)\r\n }\r\n })\r\n },\r\n onQueryLoad(data : Array<UTSJSONObject>, ended : boolean, pagination : UTSJSONObject) {\r\n console.log(data, ended, pagination);\r\n },\r\n showError(err : any | null) {\r\n const error = err as UniCloudError\r\n uni.showModal({\r\n content: error.errMsg,\r\n showCancel: false\r\n })\r\n }\r\n }\r\n }\r\n</script>\r\n\r\n<style>\r\n .content {\r\n flex: 1;\r\n flex-direction: column;\r\n }\r\n\r\n .list {\r\n flex: 1;\r\n flex-direction: column;\r\n }\r\n\r\n .list-item {\r\n flex-direction: row;\r\n padding: 10px;\r\n }\r\n\r\n .list-item-fill {\r\n flex: 1;\r\n }\r\n\r\n .list-item-remove {\r\n padding: 10px;\r\n }\r\n\r\n .loading {\r\n padding: 10px;\r\n text-align: center;\r\n }\r\n\r\n .pagination {\r\n flex-direction: row;\r\n background-color: #f2f2f2;\r\n }\r\n\r\n .pagination-item {\r\n margin: auto;\r\n padding: 5px 10px;\r\n }\r\n\r\n .btn-group {\r\n flex-direction: row;\r\n }\r\n\r\n .btn {\r\n flex: 1;\r\n margin: 10px;\r\n }\r\n</style>\r\n\n```","compatibility":"\n### unicloud-db 兼容性\n| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- |\n| 5.0 | √ | 3.93+ | 9.0 | √ | x |\n\n ### unicloud-db 属性兼容性\n| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| v-slot:default | 5.0 | √ | 3.93+ | 9.0 | √ | x |\n| collection | 5.0 | √ | 3.93+ | 9.0 | √ | x |\n| field | 5.0 | √ | 3.93+ | 9.0 | √ | x |\n| where | 5.0 | √ | 3.93+ | 9.0 | √ | x |\n| orderby | 5.0 | √ | 3.93+ | 9.0 | √ | x |\n| groupby | 5.0 | √ | 3.93+ | 9.0 | √ | x |\n| group-field | 5.0 | √ | 3.93+ | 9.0 | √ | x |\n| distinct | 5.0 | √ | 3.93+ | 9.0 | √ | x |\n| page-data | 5.0 | √ | 3.93+ | 9.0 | √ | x |\n| page-current | 5.0 | √ | 3.93+ | 9.0 | √ | x |\n| page-size | 5.0 | √ | 3.93+ | 9.0 | √ | x |\n| getcount | 5.0 | √ | 3.93+ | 9.0 | √ | x |\n| gettree | 5.0 | √ | 3.93+ | 9.0 | √ | x |\n| startwith | 5.0 | √ | 3.93+ | 9.0 | √ | x |\n| limitlevel | 5.0 | √ | 3.93+ | 9.0 | √ | x |\n| manual | 5.0 | √ | 3.93+ | 9.0 | √ | x |\n| loadtime | 5.0 | 3.1.10+ | 3.93+ | 9.0 | 3.1.10+ | x |\n| @load | 5.0 | √ | 3.93+ | 9.0 | √ | x |\n| @error | 5.0 | √ | 3.93+ | 9.0 | √ | x |","children":"","reference":"\n### 参见\n- [unicloud-db组件教程](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"},"view":{"name":"## view","description":"> 组件类型：UniViewElement \n\n 基本视图容器","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| hover-class | string(string.ClassString) | \"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 ```html\n<template>\r\n <page-head title=\"view\"></page-head>\r\n <view class=\"main\" :hover-class=\"hover_class ? 'is-parent-hover' : 'none'\">\r\n <view class=\"test-view\" :hover-class=\"hover_class ? 'is-hover' : 'none'\" :hover-stop-propagation=\"stop_propagation\"\r\n :hover-start-time=\"start_time\" :hover-stay-time=\"stay_time\">\r\n </view>\r\n </view>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\">\r\n <!-- #endif -->\r\n <view class=\"content\">\r\n <boolean-data :defaultValue=\"false\" title=\"是否指定按下去的样式类\" @change=\"change_hover_class_boolean\"></boolean-data>\r\n <boolean-data :defaultValue=\"false\" title=\"是否阻止本节点的祖先节点出现点击态\"\r\n @change=\"change_stop_propagation_boolean\"></boolean-data>\r\n <enum-data :items=\"start_time_enum\" title=\"按住后多久出现点击态\" @change=\"radio_change_start_time_enum\"></enum-data>\r\n <enum-data :items=\"stay_time_enum\" title=\"手指松开后点击态保留时间\" @change=\"radio_change_stay_time_enum\"></enum-data>\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n<script>\r\n import { ItemType } from '@/components/enum-data/enum-data'\r\n export default {\r\n data() {\r\n return {\r\n hover_class: false,\r\n stop_propagation: false,\r\n start_time: 50,\r\n stay_time: 400,\r\n start_time_enum: [{ \"value\": 50, \"name\": \"50毫秒\" }, { \"value\": 200, \"name\": \"200毫秒\" }] as ItemType[],\r\n stay_time_enum: [{ \"value\": 400, \"name\": \"400毫秒\" }, { \"value\": 200, \"name\": \"200毫秒\" }] as ItemType[]\r\n }\r\n },\r\n methods: {\r\n change_hover_class_boolean(checked : boolean) {\r\n this.hover_class = checked\r\n },\r\n change_stop_propagation_boolean(checked : boolean) {\r\n this.stop_propagation = checked\r\n },\r\n radio_change_start_time_enum(time : number) {\r\n this.start_time = time\r\n },\r\n radio_change_stay_time_enum(time : number) {\r\n this.stay_time = time\r\n },\r\n },\r\n }\r\n</script>\r\n\r\n<style>\r\n .main {\r\n padding: 10rpx 0;\r\n flex-direction: row;\r\n justify-content: center;\r\n }\r\n\r\n .test-view {\r\n height: 200px;\r\n width: 200px;\r\n background-color: white;\r\n }\r\n\r\n .text {\r\n color: #777;\r\n font-size: 26rpx;\r\n }\r\n\r\n .is-hover {\r\n background-color: #179b16;\r\n }\r\n\r\n .is-parent-hover {\r\n background-color: #aa0000;\r\n }\r\n</style>\r\n\n```","compatibility":"\n### view 兼容性\n| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- |\n| 5.0 | √ | 3.9+ | - | - | - |\n\n ### view 属性兼容性\n| | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| hover-class | 5.0 | √ | 3.9+ | - | - | - |\n| hover-stop-propagation | 5.0 | √ | 3.9+ | - | - | - |\n| hover-start-time | 5.0 | √ | 3.9+ | - | - | - |\n| hover-stay-time | 5.0 | √ | 3.9+ | - | - | - |","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 承载网页的容器","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| src | string(string.URIString) | - | webview 指向网页的链接 |\n| webview-styles | webviewstyles | {\"progress\":{\"color\":\"#00FF00\"}} | webview 的样式 |\n| @message | (event: [WebViewMessageEvent](#webviewmessageevent)) => void | - | 网页向应用 postMessage 时触发。e.detail = { data } |\n| @error | (event: [WebViewErrorEvent](#webviewerrorevent)) => void | - | 网页加载错误时触发。e.detail = { errSubject, errCode, errMsg } |\n| @loaded | (event: [WebViewLoadedEvent](#webviewloadedevent)) => void | - | 网页加载完成后触发。e.detail = { url } |\n| @loading | (event: [WebViewLoadingEvent](#webviewloadingevent)) => void | - | 网页加载中触发。e.detail = { url } |\n| @download | (event: [WebViewDownloadEvent](#webviewdownloadevent)) => void | - | 点击网页中可下载链接时触发。e.detail = { url, userAgent, contentDisposition, mimetype, contentLength } |","event":"\n### 事件\n#### WebViewMessageEvent\n\n##### WebViewMessageEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| type | string | 是 | - | 事件类型，固定值message |\n| detail | [WebViewMessageEventDetail](#webviewmessageeventdetail-values) | 是 | - | - |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n###### WebViewMessageEventDetail 的属性值 @webviewmessageeventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| data | Map\\<string, any> | 否 | - | 消息包含的数据 |\n\n##### WebViewMessageEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |\n\n#### WebViewErrorEvent\n\n##### WebViewErrorEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| type | string | 是 | - | 事件类型，固定值error |\n| detail | [WebViewErrorEventDetail](#webviewerroreventdetail-values) | 是 | - | - |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n###### WebViewErrorEventDetail 的属性值 @webviewerroreventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| errSubject | string | 是 | - | 统一错误主题（模块）名称，固定值uni-web-view |\n| errCode | number | 是 | - | 统一错误码 100001 ssl error 100002 page error 100003 http error |\n| errMsg | string | 是 | - | 统一错误描述信息 |\n\n##### WebViewErrorEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |\n\n#### WebViewLoadedEvent\n\n##### WebViewLoadedEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| type | string | 是 | - | 事件类型，固定值loaded |\n| detail | [WebViewLoadedEventDetail](#webviewloadedeventdetail-values) | 是 | - | - |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n###### WebViewLoadedEventDetail 的属性值 @webviewloadedeventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| url | string | 是 | - | 加载完成的网页链接 |\n\n##### WebViewLoadedEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |\n\n#### WebViewLoadingEvent\n\n##### WebViewLoadingEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| type | string | 是 | - | 事件类型，固定值loading |\n| detail | [WebViewLoadingEventDetail](#webviewloadingeventdetail-values) | 是 | - | - |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n###### WebViewLoadingEventDetail 的属性值 @webviewloadingeventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| url | string | 是 | - | 加载中的网页链接 |\n| type | string | 是 | - | 事件类型 |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n###### WebViewLoadingEventDetail 的方法 @webviewloadingeventdetail-values \n\n##### stopPropagation() @stoppropagation\n\r\n阻止当前事件的进一步传播\n\n\n\n\n##### preventDefault() @preventdefault\n\r\n阻止当前事件的默认行为\n\n\n\n\n##### WebViewLoadingEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |\n\n#### WebViewDownloadEvent\n\n##### WebViewDownloadEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| type | string | 是 | - | 事件类型，固定值download |\n| detail | [WebViewDownloadEventDetail](#webviewdownloadeventdetail-values) | 是 | - | - |\n| target | [Element](/dom/element.md) | 是 | - | 触发事件的组件 |\n| currentTarget | [Element](/dom/element.md) | 是 | - | 当前组件 |\n| timeStamp | number | 是 | - | 事件发生时的时间戳 |\n\n###### WebViewDownloadEventDetail 的属性值 @webviewdownloadeventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| url | string | 是 | - | 下载链接 |\n| userAgent | string | 是 | - | 用户代理 |\n| contentDisposition | string | 是 | - | 指示回复的内容该以何种形式展示，是以内联的形式（即网页或者页面的一部分），还是以附件的形式下载并保存到本地 |\n| mimetype | string | 是 | - | 媒体类型 |\n| contentLength | number | 是 | - | 文件大小 |\n\n##### WebViewDownloadEvent 的方法\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 ```html\n<template>\r\n <view class=\"uni-flex-item\">\r\n <web-view id=\"web-view\" class=\"uni-flex-item\" :src=\"src\" :webview-styles=\"webview_styles\" @message=\"message\"\r\n @error=\"error\" @loading=\"loading\" @loaded=\"loaded\" @download=\"download\">\r\n </web-view>\r\n <view class=\"uni-padding-wrap uni-common-mt\">\r\n <view class=\"uni-input-v\">\r\n <input class=\"uni-input\" confirmType=\"go\" placeholder=\"输入网址跳转\" @confirm=\"confirm\" />\r\n </view>\r\n <view class=\"uni-row uni-btn-v\">\r\n <button class=\"uni-flex-item\" type=\"primary\" @click=\"back\">后退</button>\r\n <button class=\"uni-btn-ml uni-flex-item\" type=\"primary\" @click=\"forward\">前进</button>\r\n </view>\r\n <view class=\"uni-row uni-btn-v\">\r\n <button class=\"uni-flex-item\" type=\"primary\" @click=\"reload\">重新加载</button>\r\n <button class=\"uni-btn-ml uni-flex-item\" type=\"primary\" @click=\"stop\">停止加载</button>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button type=\"primary\" @click=\"nativeToWeb\">原生和Web通信</button>\r\n </view>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script>\r\n export default {\r\n data() {\r\n return {\r\n src: 'https://www.dcloud.io',\r\n webview_styles: {\r\n progress: {\r\n color: '#FF3333'\r\n }\r\n },\r\n webviewContext: null as WebviewContext | null,\r\n loadError: false\r\n }\r\n },\r\n onReady() {\r\n this.webviewContext = uni.createWebviewContext('web-view', this)\r\n },\r\n methods: {\r\n back() {\r\n this.webviewContext?.back();\r\n },\r\n forward() {\r\n this.webviewContext?.forward();\r\n },\r\n reload() {\r\n this.webviewContext?.reload();\r\n },\r\n stop() {\r\n this.webviewContext?.stop();\r\n },\r\n nativeToWeb() {\r\n this.webviewContext?.evalJS(\"alert('hello uni-app x')\");\r\n },\r\n message(event : WebViewMessageEvent) {\r\n console.log(JSON.stringify(event));\r\n },\r\n error(event : WebViewErrorEvent) {\r\n this.loadError = true\r\n console.log(JSON.stringify(event));\r\n },\r\n loading(event : WebViewLoadingEvent) {\r\n console.log(JSON.stringify(event));\r\n },\r\n loaded(event : WebViewLoadedEvent) {\r\n console.log(JSON.stringify(event));\r\n },\r\n download(event : WebViewDownloadEvent) {\r\n console.log(JSON.stringify(event));\r\n uni.showModal({\r\n content: \"下载链接: \" + event.detail.url + \"\\n文件大小: \" + event.detail.contentLength / 1024 + \"KB\",\r\n showCancel: false\r\n });\r\n },\r\n confirm(event : InputConfirmEvent) {\r\n console.log(JSON.stringify(event));\r\n let url = event.detail.value;\r\n if (!url.startsWith('https://') && !url.startsWith('http://')) {\r\n url = 'https://' + url;\r\n }\r\n this.src = url;\r\n }\r\n }\r\n }\r\n</script>\r\n\r\n<style>\r\n .uni-input-v {\r\n padding: 10rpx 0;\r\n }\r\n\r\n .uni-btn-ml {\r\n margin-left: 10rpx;\r\n }\r\n</style>\r\n\n```","compatibility":"\n### web-view 兼容性\n| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- |\n| 5.0 | √ | 3.9+ | 9.0 | √ | - |\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\n\r\nweb-view元素对象\n#### UniWebViewElement 的方法\n##### back() @back\n\r\n后退\n\n\n\n\n##### forward() @forward\n\r\n前进\n\n\n\n\n##### reload() @reload\n\r\n重新加载\n\n\n\n\n##### stop() @stop\n\r\n停止加载\n\n\n\n\n##### evalJS(js) @evaljs\n\r\n原生和WebView通信（执行JS脚本）\n##### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| js | string | 是 | - | - |\n\n\n"}}
