diff --git a/docs/.vuepress/utils/utsComJson.json b/docs/.vuepress/utils/utsComJson.json
index 0e51e565b3c9f8cd8152ffaf1d9292a2edd117f3..3920e7843a005ee0660892db07b549540ab935c2 100644
--- a/docs/.vuepress/utils/utsComJson.json
+++ b/docs/.vuepress/utils/utsComJson.json
@@ -1 +1 @@
-{"animation-view":{"name":"## animation-view","description":"Lottie 动画","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 | Any | - | - |\n\n#### action @action-values \n\n| 值名称 | 描述 |\n| :- | :- |\n| play | 播放 |\n| pause | 暂停 |\n| stop | 停止 |\n\n","event":"","example":"","compatibility":"\n### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| animation-view | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| path | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n","children":"","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/animation-view)\n- [插件市场](https://ext.dcloud.net.cn/plugin?id=10674)\n"},"button":{"name":"## button","description":"按钮","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| disabled | Boolean | false | 是否禁用 |\n| hover-class | 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/master/pages/component/button/button.uvue) \n ```html\n<script>\r\n  import { type ItemType } from '@/components/enum-data/enum-data.vue'\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### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| button | 5.0 | √ | √ | 10.0 | √ | x |\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 |\n","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/button)\n"},"checkbox":{"name":"## checkbox","description":"多选项。在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 | ColorString | #007aff | checkbox的颜色 |\n| backgroundColor | ColorString | #ffffff | checkbox默认的背景颜色 |\n| borderColor | ColorString | #d1d1d1 | checkbox默认的边框颜色 |\n| activeBackgroundColor | ColorString | #ffffff | checkbox选中时的背景颜色 |\n| activeBorderColor | ColorString | #d1d1d1 | checkbox选中时的边框颜色 |\n| iconColor | ColorString | #007aff | checkbox的图标颜色，优先级大于color属性 |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/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 nvue\">\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### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| checkbox | 5.0 | √ | √ | 10.0 | √ | x |\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 |\n","children":"","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/checkbox)\n"},"checkbox-group":{"name":"## checkbox-group","description":"多项组，内部由多个checkbox组成","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\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##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | T | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### CheckboxGroupChangeEventDetail\n\n##### 构造函数\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | Array\\<string\\> | 是 | - | - |\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | Array\\<string\\> | 是 | - | - |\n\n","example":"","compatibility":"\n### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| checkbox-group | 5.0 | √ | √ | 10.0 | √ | x |\n| @change | 5.0 | √ | √ | 10.0 | √ | x |\n","children":"### 子组件 @children-tags \n - [checkbox](#checkbox)","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/checkbox)\n"},"image":{"name":"## image","description":"图片","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| src | 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 rigth | 不缩放图片，只显示图片的右上边区域 |\n| bottom left | 不缩放图片，只显示图片的左下边区域 |\n| bottom right | 不缩放图片，只显示图片的右下边区域 |\n\n","event":"\n### 事件\n#### ImageErrorEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [ImageErrorEventdetail](#imageerroreventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### ImageErrorEventdetail 属性值 @imageerroreventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| errMsg | string | 是 | - |  错误信息 |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### ImageLoadEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [ImageLoadEventdetail](#imageloadeventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### ImageLoadEventdetail 属性值 @imageloadeventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| width | number | 是 | - |  图片宽度 |\n| height | number | 是 | - |  图片高度 |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/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### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| image | 5.0 | √ | 3.9+ | 9.0 | √ | - |\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 |\n","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/image)\n"},"input":{"name":"## input","description":"输入框","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| disabled | Boolean | false | 是否禁用 |\n| value | String |  | 输入框的初始内容 |\n| type | String | text | input的类型 [type](#type-values) |\n| password | Boolean | false | 是否是密码类型 |\n| placeholder | String |  | 输入框为空时占位符 |\n| placeholder-style | String |  | 指定 placeholder 的样式 |\n| placeholder-class | String |  | 指定 placeholder 的样式类 |\n| maxlength | Number | 140 | 最大输入长度，设置为 -1 的时候不限制最大长度 |\n| cursor-spacing | Number | 0 | 指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 |\n| auto-focus | Boolean | false | 自动获取焦点 |\n| focus | Boolean | false | 获取焦点 |\n| confirm-type | String | 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##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [InputEventdetail](#inputeventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/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##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### InputFocusEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [InputFocusEventdetail](#inputfocuseventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### InputFocusEventdetail 属性值 @inputfocuseventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| height | number | 是 | - |  键盘高度 |\n| value | string | 是 | - |  输入框内容 |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### InputBlurEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [InputBlurEventdetail](#inputblureventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### InputBlurEventdetail 属性值 @inputblureventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | string | 是 | - |  输入框内容 |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### InputKeyboardHeightChangeEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [InputKeyboardHeightChangeEventdetail](#inputkeyboardheightchangeeventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### InputKeyboardHeightChangeEventdetail 属性值 @inputkeyboardheightchangeeventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| height | number | 是 | - |  键盘高度 |\n| duration | number | 是 | - |  持续时间 |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### InputConfirmEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [InputConfirmEventdetail](#inputconfirmeventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### InputConfirmEventdetail 属性值 @inputconfirmeventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | string | 是 | - |  输入框内容 |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/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>\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-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>\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,\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      }\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### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| input | 5.0 | √ | 3.9+ | 9.0 | √ | - |\n","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/input)\n"},"list-item":{"name":"## list-item","description":"list-view组件的唯一合法子组件。每个item是一行","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| type | Number | 0 | 对应list-item的类型 list-view 将对同类型条目进行复用，所以合理的类型拆分，可以很好地提升 list-view 性能 |","event":"","example":"","compatibility":"\n### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| list-item | 5.0 | x | 3.9+ | 9.0 | x | - |\n| type | 5.0 | x | 3.9+ | 9.0 | x | - |\n","children":"","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/uni-app-x/component/list-view#list-item)\n"},"list-view":{"name":"## list-view","description":"列表组件","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 | - | 值应为某子元素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！list-view暂时不支持使用自定义样式 |\n| refresher-background | String | #FFF | 设置下拉刷新区域背景颜色 |\n| refresher-triggered | Boolean | false | 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发 |\n| custom-nested-scroll | Boolean | - | 子元素是否开启嵌套滚动 将滚动事件与父元素协商处理 |\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} |","event":"\n### 事件\n#### RefresherEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [RefresherEventdetail](#refreshereventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### RefresherEventdetail 属性值 @refreshereventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| dy | number | 是 | - | - |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### ScrollToUpperEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [ScrollToUpperEventdetail](#scrolltouppereventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### ScrollToUpperEventdetail 属性值 @scrolltouppereventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| direction | string | 是 | - |  滚动方向 top 或 left |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### ScrollToLowerEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [ScrollToLowerEventdetail](#scrolltolowereventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### ScrollToLowerEventdetail 属性值 @scrolltolowereventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| direction | string | 是 | - |  滚动方向 bottom 或 right |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### ScrollEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [ScrollEventdetail](#scrolleventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/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##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/pages/component/list-view/list-view.uvue) \n ```html\n<script>\n  import { type ItemType } from '@/components/enum-data/enum-data.vue'\n  export default {\n    data() {\n      return {\n        refresher_triggered_boolean: false,\n        refresher_enabled_boolean: false,\n        scroll_with_animation_boolean: false,\n        show_scrollbar_boolean: true,\n        rebound_boolean: true,\n        scroll_y_boolean: true,\n        scroll_x_boolean: false,\n        upper_threshold_input: 50,\n        lower_threshold_input: 50,\n        scroll_top_input: 0,\n        scroll_left_input: 0,\n        refresher_background_input: \"#FFF\",\n        scrollData: [] as Array<string>,\n        size_enum: [{ \"value\": 0, \"name\": \"item---0\" }, { \"value\": 3, \"name\": \"item---3\" }] as ItemType[],\n        scrollIntoView: \"\",\n        refresherrefresh: false\n      }\n    },\n    onLoad() {\n      let lists : Array<string> = []\n      for (let i = 0; i < 10; i++) {\n        lists.push(\"item---\" + i)\n      }\n      this.scrollData = lists\n    },\n    methods: {\n      list_view_click() { console.log(\"组件被点击时触发\") },\n      list_view_touchstart() { console.log(\"手指触摸动作开始\") },\n      list_view_touchmove() { console.log(\"手指触摸后移动\") },\n      list_view_touchcancel() { console.log(\"手指触摸动作被打断，如来电提醒，弹窗\") },\n      list_view_touchend() { console.log(\"手指触摸动作结束\") },\n      list_view_tap() { console.log(\"手指触摸后马上离开\") },\n      list_view_longpress() { console.log(\"如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。\") },\n      list_view_refresherpulling() { console.log(\"下拉刷新控件被下拉\") },\n      list_view_refresherrefresh() {\n        console.log(\"下拉刷新被触发 \")\n        this.refresherrefresh = true\n        this.refresher_triggered_boolean = true\n        setTimeout(function(){\n        \tthis.refresher_triggered_boolean = false\n        }, 1500)\n      },\n      list_view_refresherrestore() {\n        this.refresherrefresh = false\n        console.log(\"下拉刷新被复位\")\n      },\n      list_view_refresherabort() { console.log(\"下拉刷新被中止\") },\n      list_view_scrolltoupper(e:ScrollToUpperEvent) { console.log(\"滚动到顶部/左边，会触发 scrolltoupper 事件  direction=\"+e.detail.direction) },\n      list_view_scrolltolower(e:ScrollToLowerEvent) { console.log(\"滚动到底部/右边，会触发 scrolltolower 事件  direction=\"+e.detail.direction) },\n      list_view_scroll() { console.log(\"滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}\") },\n      list_item_click() { console.log(\"list-item组件被点击时触发\") },\n      list_item_touchstart() { console.log(\"手指触摸list-item组件动作开始\") },\n      list_item_touchmove() { console.log(\"手指触摸list-item组件后移动\") },\n      list_item_touchcancel() { console.log(\"手指触摸list-item组件动作被打断，如来电提醒，弹窗\") },\n      list_item_touchend() { console.log(\"手指触摸list-item组件动作结束\") },\n      list_item_tap() { console.log(\"手指触摸list-item组件后马上离开\") },\n      list_item_longpress() { console.log(\"list-item组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。\") },\n      change_refresher_triggered_boolean(checked : boolean) { this.refresher_triggered_boolean = checked },\n      change_refresher_enabled_boolean(checked : boolean) { this.refresher_enabled_boolean = checked },\n      change_scroll_with_animation_boolean(checked : boolean) { this.scroll_with_animation_boolean = checked },\n      change_show_scrollbar_boolean(checked : boolean) { this.show_scrollbar_boolean = checked },\n      change_rebound_boolean(checked : boolean) { this.rebound_boolean = checked },\n      change_scroll_y_boolean(checked : boolean) { this.scroll_y_boolean = checked },\n      change_scroll_x_boolean(checked : boolean) { this.scroll_x_boolean = checked },\n      confirm_upper_threshold_input(value : number) { this.upper_threshold_input = value },\n      confirm_lower_threshold_input(value : number) { this.lower_threshold_input = value },\n      confirm_scroll_top_input(value : number) { this.scroll_top_input = value },\n      confirm_scroll_left_input(value : number) { this.scroll_left_input = value },\n      confirm_refresher_background_input(value : string) { this.refresher_background_input = value },\n      item_change_size_enum(index : number) { this.scrollIntoView = \"item---\"+index },\r\n      //自动化测试例专用\n      check_scroll_height(): Boolean {\r\n        var listElement = this.$refs[\"listview\"] as Element\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      },\n      //自动化测试例专用\r\n      check_scroll_width(): Boolean {\r\n        var listElement = this.$refs[\"listview\"] as Element\n        console.log(\"check_scroll_width\"+listElement.scrollWidth)\n        if(listElement.scrollWidth > 2000) {\n          return true\n        }\r\n        return false\r\n      }\n    }\n  }\n</script>\n\n<template>\n  <view class=\"main\">\n    <list-view :scroll-x=\"scroll_x_boolean\" :scroll-y=\"scroll_y_boolean\" :rebound=\"rebound_boolean\"\n      :upper-threshold=\"upper_threshold_input\" :lower-threshold=\"lower_threshold_input\" :scroll-top=\"scroll_top_input\"\n      :scroll-left=\"scroll_left_input\" :show-scrollbar=\"show_scrollbar_boolean\" :scroll-into-view=\"scrollIntoView\"\n      :scroll-with-animation=\"scroll_with_animation_boolean\" :refresher-enabled=\"refresher_enabled_boolean\"\n      :refresher-background=\"refresher_background_input\" :refresher-triggered=\"refresher_triggered_boolean\"\n      @click=\"list_view_click\" @touchstart=\"list_view_touchstart\" @touchmove=\"list_view_touchmove\"\n      @touchcancel=\"list_view_touchcancel\" @touchend=\"list_view_touchend\" @tap=\"list_view_tap\"\n      @longpress=\"list_view_longpress\" @refresherpulling=\"list_view_refresherpulling\"\n      @refresherrefresh=\"list_view_refresherrefresh\" @refresherrestore=\"list_view_refresherrestore\"\n      @refresherabort=\"list_view_refresherabort\" @scrolltoupper=\"list_view_scrolltoupper\" ref=\"listview\" id=\"listview\"\n      @scrolltolower=\"list_view_scrolltolower\" @scroll=\"list_view_scroll\" style=\"width:100%;\">\n      <list-item\n        v-for=\"key in scrollData\" :key=\"key\" :id=\"key\" @click=\"list_item_click\" @touchstart=\"list_item_touchstart\"\n        @touchmove=\"list_item_touchmove\" @touchcancel=\"list_item_touchcancel\" @touchend=\"list_item_touchend\"\n        @tap=\"list_item_tap\" @longpress=\"list_item_longpress\"\n        class=\"list-item\">\n        <text>{{key}}</text>\n      </list-item>\n    </list-view>\n  </view>\n\n  <!-- #ifdef APP -->\n  <scroll-view style=\"flex:1\">\n    <!-- #endif -->\n    <view class=\"content nvue\">\n      <boolean-data :defaultValue=\"false\" title=\"设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发\"\n        @change=\"change_refresher_triggered_boolean\"></boolean-data>\n      <boolean-data :defaultValue=\"false\" title=\"开启下拉刷新\" @change=\"change_refresher_enabled_boolean\"></boolean-data>\n      <boolean-data :defaultValue=\"false\" title=\"是否在设置滚动条位置时使用滚动动画，设置false没有滚动动画\"\n        @change=\"change_scroll_with_animation_boolean\"></boolean-data>\n      <boolean-data :defaultValue=\"true\" title=\"控制是否出现滚动条\" @change=\"change_show_scrollbar_boolean\"></boolean-data>\n      <boolean-data :defaultValue=\"true\" title=\"控制是否回弹效果\" @change=\"change_rebound_boolean\"></boolean-data>\n      <boolean-data :defaultValue=\"true\" title=\"允许纵向滚动\" @change=\"change_scroll_y_boolean\"></boolean-data>\n      <boolean-data :defaultValue=\"false\" title=\"允许横向滚动\" @change=\"change_scroll_x_boolean\"></boolean-data>\n      <input-data defaultValue=\"50\" title=\"距顶部/左边多远时（单位px），触发 scrolltoupper 事件\" type=\"number\"\n        @confirm=\"confirm_upper_threshold_input\"></input-data>\n      <input-data defaultValue=\"50\" title=\"距底部/右边多远时（单位px），触发 scrolltolower 事件\" type=\"number\"\n        @confirm=\"confirm_lower_threshold_input\"></input-data>\n      <input-data defaultValue=\"0\" title=\"设置竖向滚动条位置\" type=\"number\" @confirm=\"confirm_scroll_top_input\"></input-data>\n      <input-data defaultValue=\"0\" title=\"设置横向滚动条位置\" type=\"number\" @confirm=\"confirm_scroll_left_input\"></input-data>\n      <input-data defaultValue=\"#FFF\" title=\"设置下拉刷新区域背景颜色\" type=\"text\"\n        @confirm=\"confirm_refresher_background_input\"></input-data>\n      <enum-data :items=\"size_enum\" title=\"通过id位置跳转\" @change=\"item_change_size_enum\"></enum-data>\n    </view>\n    <!-- #ifdef APP -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<style>\n  .main {\n    max-height: 500rpx;\n    padding: 10rpx 0;\n    border-bottom: 1px solid rgba(0, 0, 0, .06);\n    flex-direction: row;\n    justify-content: center;\n  }\n\n  .main .list-item {\n    width: 750rpx;\n    height: 480rpx;\n    border: 1px solid #666;\n    background-color: #66ccff;\n    align-items: center;\n    justify-content: center;\n  }\n</style>\n\n```","compatibility":"\n### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| list-view | 5.0 | x | 3.9+ | 9.0 | x | - |\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","children":"### 子组件 @children-tags \n - [list-item](#list-item)","reference":""},"navigator":{"name":"## navigator","description":"页面链接","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| target | String | - | 在哪个目标上发生跳转，默认当前应用 |\n| url | 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/master/pages/component/navigator/navigator.uvue) \n ```html\n<template>\n  <view>\n    <page-head :title=\"title\"></page-head>\n    <view class=\"uni-padding-wrap uni-common-mt\">\n      <navigator class=\"navigator navigate\" url=\"navigate?title=navigate\">\n        <button type=\"default\">跳转到新页面</button>\n      </navigator>\n      <navigator class=\"navigator redirect\" url=\"redirect?title=redirect\" open-type=\"redirect\">\n        <button type=\"default\">在当前页打开</button>\n      </navigator>\n    </view>\n  </view>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        title: 'navigator'\n      }\n    }\n  }\n</script>\n\n<style>\n  .navigator {\n    margin-bottom: 15px;\n  }\n</style>\n```","compatibility":"\n### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| navigator | 5.0 | √ | 3.9+ | 9.0 | √ | x |\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 | √ | 3.9+ | 9.0 | √ | x |\n| animation-duration | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n","children":"","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/navigator)\n"},"picker-view-column":{"name":"## picker-view-column","description":"仅可放置于 picker-view 中，其子节点未继承 picker-view 的选中框的高度，需要自己设置高度并居中","attrubute":"","event":"","example":"","compatibility":"\n### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| picker-view-column | 5.0 | √ | √ | 10.0 | √ | x |\n","children":"","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.net.cn/component/picker-view.html#picker-view-column)\n"},"picker-view":{"name":"## picker-view","description":"嵌入页面的滚动选择器","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| value | Array\\<Number> | - | picker-view-column 选择的第几项 |\n| indicator-style | CSSString | - | 设置选择器中间选中框的样式 |\n| mask-top-style | CSSString | - | 设置蒙层上半部分的样式 |\n| mask-bottom-style | 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##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | T | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### PickerViewChangeEventDetail\n\n##### 构造函数\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | Array\\<number\\> | 是 | - | - |\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | Array\\<number\\> | 是 | - | - |\n\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/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\t\t\tclickView() {\r\n\t\t\t\t\r\n\t\t\t},\r\n            bindChange(e : PickerViewChangeEvent) {\r\n                const val = e.detail.value\r\n                this.result = val\r\n                this.year = this.years[val[0]]\r\n                this.month = this.months[val[1]]\r\n                this.day = this.days[val[2]]\r\n            },\r\n            setValue() {\r\n                this.value = [0, 0, 0] as number[]\r\n            },\r\n            setValue1() {\r\n                this.value = [10, 10, 10] as number[]\r\n            },\r\n        }\r\n    }\r\n</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```","compatibility":"\n### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| picker-view | 5.0 | √ | √ | 10.0 | √ | x |\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 |\n","children":"### 子组件 @children-tags \n - [picker-view-column](#picker-view-column)","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/picker-view)\n"},"progress":{"name":"## progress","description":"进度条","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 | ColorString | - | 进度条颜色 （请使用 activeColor） |\n| activeColor | ColorString | #09BB07 | 已选择的进度条的颜色 |\n| backgroundColor | 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##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | T | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### ProgressActiveendEventDetail\n\n##### 构造函数\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | number | 是 | - | - |\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| curPercent | number | 是 | - | - |\n\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/pages/component/progress/progress.uvue) \n ```html\n<script>\r\nimport { type ItemType } from '@/components/enum-data/enum-data.vue'\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 nvue\">\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.progress-cancel {\r\n  margin-left: 40rpx;\r\n}\r\n\r\n.button {\r\n  margin-top: 20rpx;\r\n}\r\n</style>\r\n\n```","compatibility":"\n### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| progress | 5.0 | √ | √ | 10.0 | √ | x |\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 |\n","children":"","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/progress)\n"},"radio":{"name":"## radio","description":"单选项。在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 | ColorString | #007AFF | radio的颜色 |\n| backgroundColor | ColorString | #ffffff | radio默认的背景颜色 |\n| borderColor | ColorString | #d1d1d1 | radio默认的边框颜色 |\n| activeBackgroundColor | ColorString | #007AFF | radio选中时的背景颜色，优先级大于color属性 |\n| activeBorderColor | ColorString |  | radio选中时的边框颜色 |\n| iconColor | ColorString | #ffffff | radio的图标颜色 |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/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 nvue\">\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### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| radio | 5.0 | √ | √ | 10.0 | √ | x |\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 |\n","children":"","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/radio)\n"},"radio-group":{"name":"## radio-group","description":"单选组，内部由多个 radio 组成","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\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##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | T | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### RadioGroupChangeEventDetail\n\n##### 构造函数\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | string | 是 | - | - |\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | string | 是 | - | - |\n\n","example":"","compatibility":"\n### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| radio-group | 5.0 | √ | √ | 10.0 | √ | x |\n| @change | 5.0 | √ | √ | 10.0 | √ | x |\n","children":"### 子组件 @children-tags \n - [radio](#radio)","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/radio)\n"},"rich-text":{"name":"## rich-text","description":"富文本。可渲染文字样式、图片、超链接。支持部分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##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [RichTextItemClickEventdetail](#richtextitemclickeventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/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##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/pages/component/rich-text/rich-text.uvue) \n ```html\n<template>\n  <view>\n    <page-head title=\"rich-text\"></page-head>\n    <view class=\"uni-padding-wrap uni-common-mt\">\n      <view class=\"uni-btn-v\">\n        <navigator url=\"/pages/component/rich-text/rich-text-tags\">\n          <button type=\"primary\">rich-text渲染单个HTML标签示例</button>\n        </navigator>\n      </view>\n      <view class=\"uni-btn-v\">\n        <navigator url=\"/pages/component/rich-text/rich-text-complex\">\n          <button type=\"primary\">rich-text渲染复杂HTML示例</button>\n        </navigator>\n      </view>\n      <view class=\"uni-title\">\n        <text class=\"uni-subtitle-text\">selectable</text>\n      </view>\n      <view class=\"text-box\">\n        <rich-text :selectable=\"true\"\n          nodes=\"<span>hello uni-app x!</span><br/><span>uni-app x，终极跨平台方案</span>\"></rich-text>\n      </view>\n    </view>\n  </view>\n</template>\n\n<script>\n\n</script>\n\n<style>\n  .text-box {\n    padding: 40rpx 0;\n    background-color: white;\n  }\n</style>\n```","compatibility":"\n### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| rich-text | 5.0 | √ | 3.9+ | 9.0 | √ | - |\n| selectable | 5.0 | x | 3.91 | 9.0 | x | - |\n","children":"","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/rich-text)\n"},"scroll-view":{"name":"## scroll-view","description":"可滚动视图容器","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 | - | 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 |\n| scroll-with-animation | Boolean | false | 是否在设置滚动条位置时使用滚动动画，设置false没有滚动动画 |\n| refresher-enabled | Boolean | false | 开启下拉刷新，暂时不支持scroll-x = true横向刷新 |\n| refresher-threshold | Number | 45 | 设置下拉刷新阈值 |\n| refresher-max-drag-distance | Number | - | 设置下拉最大拖拽距离（单位px），默认是下拉刷新控件高度的2.5倍 |\n| refresher-default-style | String | black | 设置下拉刷新默认样式，支持设置 black \\| white \\| none， none 表示不使用默认样式 |\n| refresher-background | String | #FFF | 设置下拉刷新区域背景颜色 |\n| refresher-triggered | Boolean | false | 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发 |\n| show-scrollbar | Boolean | true | 控制是否出现滚动条 |\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| @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: [Event](/uni-app-x/component/common#event)) => void | - | 子元素滚动结束或意外终止时触发 |","event":"\n### 事件\n#### RefresherEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [RefresherEventdetail](#refreshereventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### RefresherEventdetail 属性值 @refreshereventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| dy | number | 是 | - | - |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### ScrollToUpperEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [ScrollToUpperEventdetail](#scrolltouppereventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### ScrollToUpperEventdetail 属性值 @scrolltouppereventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| direction | string | 是 | - |  滚动方向 top 或 left |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### ScrollToLowerEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [ScrollToLowerEventdetail](#scrolltolowereventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### ScrollToLowerEventdetail 属性值 @scrolltolowereventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| direction | string | 是 | - |  滚动方向 bottom 或 right |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### ScrollEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [ScrollEventdetail](#scrolleventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/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##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### StartNestedScrollEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| node | [Element](/uni-app-x/dom/element.md) | 是 | - |  开始滚动子节点对象 |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### NestedPreScrollEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| deltaX | number | 是 | - |  x轴滚动距离 |\n| deltaY | number | 是 | - |  y轴滚动距离 |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| consumed | (consumedX: number, consumedY: number) => void | 是 | - |  通知到子节点x,y轴滚动距离的消耗 |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/pages/component/scroll-view/scroll-view.uvue) \n ```html\n<template>\n\t<!-- #ifdef APP -->\n\t<scroll-view style=\"flex: 1\">\n\t\t<!-- #endif -->\n\t\t<view>\n\t\t\t<page-head title=\"scroll-view,区域滚动视图\"></page-head>\n\t\t\t<view class=\"uni-padding-wrap uni-common-mt\">\n\t\t\t\t<view class=\"uni-title uni-common-mt\">\n\t\t\t\t\t<text class=\"uni-title-text\">Vertical Scroll</text>\n\t\t\t\t\t<text class=\"uni-subtitle-text\">纵向滚动</text>\n\t\t\t\t</view>\n\t\t\t\t<view>\n\t\t\t\t\t<scroll-view :scroll-top=\"scrollTop\" :scroll-y=\"true\" class=\"scroll-Y\" scroll-with-animation=\"true\"\n\t\t\t\t\t\t@scrolltoupper=\"upper\" @scrolltolower=\"lower\" @scroll=\"scroll\">\n\t\t\t\t\t\t<view id=\"demo1\" class=\"scroll-view-item uni-bg-red\"><text class=\"text\">A</text></view>\n\t\t\t\t\t\t<view id=\"demo2\" class=\"scroll-view-item uni-bg-green\"><text class=\"text\">B</text></view>\n\t\t\t\t\t\t<view id=\"demo3\" class=\"scroll-view-item uni-bg-blue\"><text class=\"text\">C</text></view>\n\t\t\t\t\t</scroll-view>\n\t\t\t\t</view>\n\t\t\t\t<view @tap=\"goTop\" class=\"uni-center uni-common-mt\">\n\t\t\t\t\t<text class=\"uni-link\">点击这里返回顶部</text>\n\t\t\t\t</view>\n\n\t\t\t\t<view class=\"uni-title uni-common-mt\">\n\t\t\t\t\t<text class=\"uni-title-text\">Horizontal Scroll</text>\n\t\t\t\t\t<text class=\"uni-subtitle-text\">横向滚动</text>\n\t\t\t\t</view>\n\t\t\t\t<view>\n\t\t\t\t\t<scroll-view class=\"scroll-view_H\" :scroll-x=\"true\" @scroll=\"scroll\" :scroll-left=\"120\">\n\t\t\t\t\t\t<view id=\"demo1\" class=\"scroll-view-item_H uni-bg-red\"><text class=\"text\">A</text></view>\n\t\t\t\t\t\t<view id=\"demo2\" class=\"scroll-view-item_H uni-bg-green\"><text class=\"text\">B</text></view>\n\t\t\t\t\t\t<view id=\"demo3\" class=\"scroll-view-item_H uni-bg-blue\"><text class=\"text\">C</text></view>\n\t\t\t\t\t</scroll-view>\n\t\t\t\t</view>\n\n\t\t\t\t<navigator url=\"/pages/component/scroll-view/scroll-view-props\" hover-class=\"none\">\n\t\t\t\t<button type=\"primary\" class=\"button default-button\">\n\t\t\t\t\t非下拉刷新的属性示例\n\t\t\t\t</button>\n\t\t\t\t</navigator>\n\t\t\t\t<view class=\"uni-common-pb\"></view>\n\t\t\t\t<navigator url=\"/pages/component/scroll-view/scroll-view-refresher-props\" hover-class=\"none\">\n\t\t\t\t<button type=\"primary\" class=\"button default-button\">\n\t\t\t\t\t下拉刷新的属性示例\n\t\t\t\t</button>\n\t\t\t\t</navigator>\n\t\t\t\t<view class=\"uni-common-pb\"></view>\n\t\t\t\t<navigator url=\"/pages/component/scroll-view/scroll-view-refresher\" hover-class=\"none\">\n\t\t\t\t<button type=\"primary\" class=\"button default-button\"> 默认下拉刷新示例 </button>\n\t\t\t\t</navigator>\n\t\t\t\t<view class=\"uni-common-pb\"></view>\n\t\t\t\t<navigator url=\"/pages/component/scroll-view/scroll-view-custom-refresher-props\" hover-class=\"none\">\n\t\t\t\t<button type=\"primary\" class=\"button default-button\">\n\t\t\t\t\t自定义下拉刷新示例\n\t\t\t\t</button>\n\t\t\t\t</navigator>\n\t\t\t\t<view class=\"uni-common-pb\"></view>\n\t\t\t</view>\n\t\t</view>\n\t\t<!-- #ifdef APP -->\n\t</scroll-view>\n\t<!-- #endif -->\n</template>\n<script lang=\"uts\">\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tscrollTop: 0,\n\t\t\t\toldScrollTop: 0,\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tupper: function (e : ScrollToUpperEvent) {\n\t\t\t\tconsole.log(e)\n\t\t\t},\n\t\t\tlower: function (e : ScrollToLowerEvent) {\n\t\t\t\tconsole.log(e)\n\t\t\t},\n\t\t\tscroll: function (e : ScrollEvent) {\n\t\t\t\tthis.oldScrollTop = e.detail.scrollTop\n\t\t\t},\n\t\t\tgoTop: function () {\n\t\t\t\t// 解决view层不同步的问题\n\t\t\t\tthis.scrollTop = this.oldScrollTop\n\t\t\t\tthis.$nextTick(function () {\n\t\t\t\t\tthis.scrollTop = 0\n\t\t\t\t})\n\t\t\t\tuni.showToast({\n\t\t\t\t\ticon: 'none',\n\t\t\t\t\ttitle: '纵向滚动 scrollTop 值已被修改为 0',\n\t\t\t\t})\n\t\t\t}\n\t\t},\n\t}\n</script>\n\n<style>\n\t.scroll-Y {\n\t\theight: 300rpx;\n\t}\n\n\t.scroll-view_H {\n\t\twidth: 100%;\n\t\tflex-direction: row;\n\t}\n\n\t.scroll-view-item {\n\t\theight: 300rpx;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\n\t.scroll-view-item_H {\n\t\twidth: 690rpx;\n\t\theight: 300rpx;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\n\t.text {\n\t\tfont-size: 36rpx;\n\t\tcolor: #ffffff;\n\t}\n\n\t.button {\n\t\tmargin-top: 30rpx;\n\t}\n</style>\n\n```","compatibility":"\n### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| scroll-view | 5.0 | √ | 3.9+ | 9.0 | √ | - |\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| @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| @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 | - |\n","children":"","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/scroll-view)\n"},"slider":{"name":"## slider","description":"滑动选择器","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\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 | ColorString | - | slider 背景条的颜色（请使用 backgroundColor） |\n| activeColor | ColorString | #007aff | slider 滑块左侧已选择部分的线条颜色 |\n| backgroundColor | ColorString | #e9e9e9 | radio背景条的颜色 |\n| block-size | Number | 28 | radio滑块的大小，取值范围为 12 - 28 |\n| block-color | 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##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | T | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### SliderChangeEventDetail\n\n##### 构造函数\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | number | 是 | - | - |\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | number | 是 | - | - |\n\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/pages/component/slider/slider.uvue) \n ```html\n<script>\n  export default {\n    data() {\n      return {\n        sliderValue: 50,\n        sliderBlockSize: 20,\n        sliderBackgroundColor: \"#000000\",\n        sliderActiveColor: \"#FFCC33\",\n        sliderBlockColor: \"#8A6DE9\",\n        // 组件属性 autotest\n        show_value_boolean: false,\n        disabled_boolean: false,\n        min_input: 0,\n        max_input: 100,\n        step_input: 1,\n        value_input: 0,\n        activeColor_input: \"#007aff\",\n        backgroundColor_input: \"#e9e9e9\",\n        block_size_input: 28,\n        block_color_input: \"#ffffff\",\n      };\n    },\n    methods: {\n      sliderChange(e : SliderChangeEvent) {\n        console.log(\"value 发生变化：\" + e.detail.value);\n      },\n      slider_click() {\n        console.log(\"组件被点击时触发\");\n      },\n      slider_touchstart() {\n        console.log(\"手指触摸动作开始\");\n      },\n      slider_touchmove() {\n        console.log(\"手指触摸后移动\");\n      },\n      slider_touchcancel() {\n        console.log(\"手指触摸动作被打断，如来电提醒，弹窗\");\n      },\n      slider_touchend() {\n        console.log(\"手指触摸动作结束\");\n      },\n      slider_tap() {\n        console.log(\"手指触摸后马上离开\");\n      },\n      slider_longpress() {\n        console.log(\n          \"如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。\"\n        );\n      },\n      slider_change() {\n        console.log(\"完成一次拖动后触发的事件，event.detail = {value: value}\");\n      },\n      slider_changing() {\n        console.log(\"拖动过程中触发的事件，event.detail = {value: value}\");\n      },\n      change_show_value_boolean(checked : boolean) {\n        this.show_value_boolean = checked;\n      },\n      change_disabled_boolean(checked : boolean) {\n        this.disabled_boolean = checked;\n      },\n      confirm_min_input(value : number) {\n        this.min_input = value;\n      },\n      confirm_max_input(value : number) {\n        this.max_input = value;\n      },\n      confirm_step_input(value : number) {\n        this.step_input = value;\n      },\n      confirm_value_input(value : number) {\n        this.value_input = value;\n      },\n      confirm_activeColor_input(value : string) {\n        this.activeColor_input = value;\n      },\n      confirm_backgroundColor_input(value : string) {\n        this.backgroundColor_input = value;\n      },\n      confirm_block_size_input(value : number) {\n        this.block_size_input = value;\n      },\n      confirm_block_color_input(value : string) {\n        this.block_color_input = value;\n      },\n    },\n  };\n</script>\n\n<template>\n  <view class=\"main\">\n    <slider :disabled=\"disabled_boolean\" :min=\"min_input\" :max=\"max_input\" :step=\"step_input\" :value=\"value_input\"\n      :activeColor=\"activeColor_input\" :backgroundColor=\"backgroundColor_input\" :block-size=\"block_size_input\"\n      :block-color=\"block_color_input\" :show-value=\"show_value_boolean\" @click=\"slider_click\"\n      @touchstart=\"slider_touchstart\" @touchmove=\"slider_touchmove\" @touchcancel=\"slider_touchcancel\"\n      @touchend=\"slider_touchend\" @tap=\"slider_tap\" @longpress=\"slider_longpress\" @change=\"slider_change\"\n      @changing=\"slider_changing\" style=\"width: 90%\"><text>uni-app-x</text></slider>\n  </view>\n\n  <!-- #ifdef APP -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view class=\"content nvue\">\n      <page-head title=\"组件属性\"></page-head>\n      <boolean-data :defaultValue=\"false\" title=\"是否显示当前 value\" @change=\"change_show_value_boolean\"></boolean-data>\n      <boolean-data :defaultValue=\"false\" title=\"是否禁用\" @change=\"change_disabled_boolean\"></boolean-data>\n      <input-data defaultValue=\"0\" title=\"slider 最小值\" type=\"number\" @confirm=\"confirm_min_input\"></input-data>\n      <input-data defaultValue=\"100\" title=\"slider 最大值\" type=\"number\" @confirm=\"confirm_max_input\"></input-data>\n      <input-data defaultValue=\"1\" title=\"slider 步长，取值必须大于 0，并且可被(max - min)整除\" type=\"number\"\n        @confirm=\"confirm_step_input\"></input-data>\n      <input-data defaultValue=\"0\" title=\"radio当前取值\" type=\"number\" @confirm=\"confirm_value_input\"></input-data>\n      <input-data defaultValue=\"#007aff\" title=\"slider 滑块左侧已选择部分的线条颜色\" type=\"text\"\n        @confirm=\"confirm_activeColor_input\"></input-data>\n      <input-data defaultValue=\"#e9e9e9\" title=\"radio背景条的颜色\" type=\"text\"\n        @confirm=\"confirm_backgroundColor_input\"></input-data>\n      <input-data defaultValue=\"28\" title=\"radio滑块的大小，取值范围为 12 - 28\" type=\"number\"\n        @confirm=\"confirm_block_size_input\"></input-data>\n      <input-data defaultValue=\"#ffffff\" title=\"滑块颜色\" type=\"text\" @confirm=\"confirm_block_color_input\"></input-data>\n    </view>\n\n    <view class=\"uni-padding-wrap\">\n      <page-head title=\"默认及使用\"></page-head>\n      <view class=\"uni-title\">显示当前value</view>\n      <view>\n        <slider @change=\"sliderChange\" :value=\"50\" :show-value=\"true\" />\n      </view>\n\n      <view class=\"uni-title\">设置步进:step=10跳动</view>\n      <view>\n        <view class=\"uni-row\">\n          <text>0</text>\n          <text class=\"m-l-a\">100</text>\n        </view>\n        <slider @change=\"sliderChange\" :value=\"60\" :step=\"10\" />\n      </view>\n\n      <view class=\"uni-title\">浮点步进:step=0.01跳动</view>\n      <view>\n        <slider :value=\"0.5\" :min=\"0\" :max=\"1\" :step=\"0.01\" :show-value=\"true\" />\n      </view>\n\n      <view class=\"uni-title\">设置最小/最大值</view>\n      <view>\n        <slider @change=\"sliderChange\" :value=\"100\" :min=\"50\" :max=\"200\" :show-value=\"true\" />\n      </view>\n\n      <view class=\"uni-title\">不同颜色和大小的滑块</view>\n      <view>\n        <slider class=\"slider-custom-color-and-size\" @change=\"sliderChange\" :value=\"sliderValue\"\n          :backgroundColor=\"sliderBackgroundColor\" :activeColor=\"sliderActiveColor\" :blockColor=\"sliderBlockColor\"\n          :block-size=\"sliderBlockSize\" />\n      </view>\n    </view>\n  <!-- #ifdef APP -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<style>\n  .main {\n    max-height: 500rpx;\n    padding: 10rpx 0;\n    border-bottom: 1px solid rgba(0, 0, 0, 0.06);\n    flex-direction: row;\n    justify-content: center;\n  }\n\n  .main .list-item {\n    width: 100%;\n    height: 200rpx;\n    border: 1px solid #666;\n  }\n\n  .m-l-a {\n    margin-left: auto;\n  }\n</style>\n```","compatibility":"\n### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| slider | 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 |\n","children":"","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/slider)\n"},"swiper-item":{"name":"## swiper-item","description":"swiper的唯一合法子组件。每个swiper-item代表一个滑块。宽高自动设置为100%","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| item-id | String | - | 该 swiper-item 的标识符 |","event":"","example":"","compatibility":"\n### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| swiper-item | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| item-id | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n","children":"","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.net.cn/component/swiper.html#swiper-item)\n"},"swiper":{"name":"## swiper","description":"滑块视图容器","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| indicator-dots | Boolean | false | 是否显示面板指示点 |\n| indicator-color | ColorString | rgba(0, 0, 0, .3) | 指示点颜色 |\n| indicator-active-color | 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| @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##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [SwiperChangeEventdetail](#swiperchangeeventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### SwiperChangeEventdetail 属性值 @swiperchangeeventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| current | number | 是 | - | - |\n| source | string | 是 | - | - |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### SwiperTransitionEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [SwiperTransitionEventdetail](#swipertransitioneventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### SwiperTransitionEventdetail 属性值 @swipertransitioneventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| dx | number | 是 | - | - |\n| dy | number | 是 | - | - |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### SwiperAnimationFinishEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [SwiperAnimationFinishEventdetail](#swiperanimationfinisheventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### SwiperAnimationFinishEventdetail 属性值 @swiperanimationfinisheventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| current | number | 是 | - | - |\n| source | string | 是 | - | - |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/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### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| swiper | 5.0 | √ | 3.9+ | 9.0 | √ | x |\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| @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 |\n","children":"### 子组件 @children-tags \n - [swiper-item](#swiper-item)","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/swiper)\n"},"switch":{"name":"## switch","description":"开关选择器","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| checked | Boolean | - | 是否选中 |\n| color | 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##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | T | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### SwitchChangeEventDetail\n\n##### 构造函数\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | boolean | 是 | - | - |\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | boolean | 是 | - | - |\n\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/pages/component/switch/switch.uvue) \n ```html\n<template>\n  <view class=\"uni-padding-wrap\">\n    <view class=\"uni-common-mt\">\n      <view class=\"uni-title\">默认样式</view>\n      <view class=\"flex-row\">\n        <switch class=\"switch-checked\" :checked=\"checked\" @change=\"switch1Change\" />\n        <switch @change=\"switch2Change\" />\n        <!-- <text class=\"switch-checked-value\">{{clickCheckedValue}}</text> -->\n      </view>\n      <view class=\"uni-title\">禁用样式</view>\n      <view class=\"flex-row\">\n        <switch class=\"switch-checked\" :checked=\"checked\" :disabled=\"true\" />\n        <switch :disabled=\"true\" />\n      </view>\n      <view class=\"uni-title\">不同颜色和尺寸的switch</view>\n      <view class=\"flex-row\">\n        <switch class=\"switch-color-checked\" :color=\"color\" style=\"transform:scale(0.7)\" :checked=\"true\" />\n        <switch class=\"switch-color\" :color=\"color\" style=\"transform:scale(0.7)\" />\n      </view>\n      <view class=\"uni-title\">推荐展示样式</view>\n    </view>\n    <view class=\"uni-list\">\n      <view class=\"uni-list-cell uni-list-cell-pd\">\n        <view class=\"uni-list-cell-db\">开启中</view>\n        <switch :checked=\"true\" />\n      </view>\n      <view class=\"uni-list-cell uni-list-cell-pd\">\n        <view class=\"uni-list-cell-db\">关闭</view>\n        <switch />\n      </view>\n    </view>\n  </view>\n</template>\n\n<script lang=\"uts\">\n  export default {\n    data() {\n      return {\n        title: 'switch 开关',\n        checked: true,\n        color: '#FFCC33',\n        clickCheckedValue: true\n      }\n    },\n    methods: {\n      switch1Change: function (e : SwitchChangeEvent) {\n        this.clickCheckedValue = e.detail.value\n        console.log('switch1 发生 change 事件，携带值为', e.detail.value)\n      },\n      switch2Change: function (e : SwitchChangeEvent) {\n        console.log('switch2 发生 change 事件，携带值为', e.detail.value)\n      }\n    }\n  }\n</script>\n\n<style>\n  .flex-row {\n    flex-direction: row;\n  }\n</style>\n```","compatibility":"\n### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| switch | 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 |\n","children":"","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/switch)\n"},"text":{"name":"## text","description":"文本","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/master/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\">add line</button>\r\n                <button class=\"uni-btn\" type=\"warn\" :disabled=\"!canRemove\" @click=\"remove\">remove line</button>\n\t\t\t\t<button class=\"uni-btn\" type=\"primary\" @click=\"textProps\">更多属性示例</button>\r\n            </view>\r\n        </view>\r\n    </view>\r\n</template>\r\n<script lang=\"uts\">\r\n    export default {\r\n        data() {\r\n            return {\r\n                title: 'text',\r\n                texts: [\r\n                    'HBuilderX，轻巧、极速，极客编辑器',\r\n                    'uni-app x，终极跨平台方案',\r\n                    'uniCloud，js serverless云服务',\r\n\t\t\t\t\t'uts，大一统语言',\r\n\t\t\t\t\t'uniMPSdk，让你的App具备小程序能力',\r\n\t\t\t\t\t'uni-admin，开源、现成的全端管理后台',\r\n\t\t\t\t\t'uni-id，开源、全端的账户中心',\r\n\t\t\t\t\t'uni-pay，开源、云端一体、全平台的支付',\r\n\t\t\t\t\t'uni-ai，聚合ai能力',\r\n\t\t\t\t\t'uni-cms，开源、云端一体、全平台的内容管理平台',\r\n\t\t\t\t\t'uni-im，开源、云端一体、全平台的im即时消息',\r\n\t\t\t\t\t'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            },\n\t\t\ttextProps: function () {\n\t\t\t    uni.navigateTo({\n\t\t\t    \turl: '/pages/component/text/text-props'\n\t\t\t    })\n\t\t\t}\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;\n        text-align: center;\r\n    }\r\n</style>\n```","compatibility":"\n### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| text | 5.0 | √ | 3.9+ | 9.0 | √ | - |\n","children":"### 子组件 @children-tags \n - [text](#text)","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/text)\n"},"textarea":{"name":"## textarea","description":"多行输入框","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| value | String |  | 输入框的初始内容 |\n| placeholder | String |  | 输入框为空时占位符 |\n| placeholder-style | String |  | 指定 placeholder 的样式 |\n| placeholder-class | String |  | 指定 placeholder 的样式类 |\n| maxlength | Number | 140 | 最大输入长度，设置为 -1 的时候不限制最大长度 |\n| auto-focus | Boolean | false | 自动获取焦点 |\n| focus | Boolean | false | 获取焦点 |\n| cursor | Number | 0 | 指定focus时的光标位置 |\n| confirm-type | String | done | 设置键盘右下角按钮的文字 [confirm-type](#confirm-type-values) |\n| confirm-hold | Boolean | false | 点击键盘右下角按钮时是否保持键盘不收起 |\n| auto-height | Boolean | false | 是否自动增高，设置auto-height时，style.height不生效 |\n| cursor-spacing | Number | 0 | 指定光标与键盘的距离，单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 |\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 起支持 |\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#### InputConfirmEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [InputConfirmEventdetail](#inputconfirmeventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### InputConfirmEventdetail 属性值 @inputconfirmeventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | string | 是 | - |  输入框内容 |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### InputEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [InputEventdetail](#inputeventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/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##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### TextareaLineChangeEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [TextareaLineChangeEventdetail](#textarealinechangeeventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/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##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### TextareaBlurEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [TextareaBlurEventdetail](#textareablureventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### TextareaBlurEventdetail 属性值 @textareablureventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | string | 是 | - |  输入框内容 |\n| cursor | number | 是 | - |  选择区域的起始位置 |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### InputKeyboardHeightChangeEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [InputKeyboardHeightChangeEventdetail](#inputkeyboardheightchangeeventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### InputKeyboardHeightChangeEventdetail 属性值 @inputkeyboardheightchangeeventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| height | number | 是 | - |  键盘高度 |\n| duration | number | 是 | - |  持续时间 |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### TextareaFocusEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [TextareaFocusEventdetail](#textareafocuseventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### TextareaFocusEventdetail 属性值 @textareafocuseventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| height | number | 是 | - |  键盘高度 |\n| value | string | 是 | - |  输入框内容 |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/pages/component/textarea/textarea.uvue) \n ```html\n<script>\r\nimport { type ItemType } from '@/components/enum-data/enum-data.vue'\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\tconfirm_type_enum: [{\"value\":0,\"name\":\"send\"},{\"value\":1,\"name\":\"search\"},{\"value\":2,\"name\":\"next\"},{\"value\":3,\"name\":\"go\"},{\"value\":4,\"name\":\"done\"}] as ItemType[],\r\n\t\t\tconfirm_type_enum_current: 0,\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[],\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 },\r\n\t\tradio_change_confirm_type_enum(checked : number) { this.confirm_type_enum_current = checked },\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-type=\"confirm_type_enum[confirm_type_enum_current].name\"\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\"\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 nvue\">\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\" class=\"textarea-focus\"\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>\r\n      <enum-data class=\"textarea-confirm\"\r\n        :items=\"confirm_type_enum\"\r\n        title=\"设置键盘右下角按钮的文字\"\r\n        @change=\"radio_change_confirm_type_enum\"\r\n      ></enum-data>\r\n      <enum-data\r\n        :items=\"inputmode_enum\" class=\"textarea-input\"\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;\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</style>\r\n\n```","compatibility":"\n### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| textarea | 5.0 | √ | 3.9+ | 9.0 | √ | - |\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+ | - | - | - |\n","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/textarea)\n"},"unicloud-db":{"name":"## unicloud-db","description":"是一个数据库查询组件，它是对uni-clientdb的js库的再封装。","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| id | IDString | - | 唯一标识 |","event":"","example":"","compatibility":"\n### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| unicloud-db | 5.0 | √ | x | 9.0 | √ | x |\n","children":"","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/uniCloud/unicloud-db)\n"},"video":{"name":"## video","description":"视频","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| loop | Boolean | false | 是否循环播放 |\n| src | String\\|TagVideoURIString | - | 视频资源地址 |\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](/uni-app-x/component/common#event)) => void | - | 当开始/继续播放时触发play事件 |\n| @pause | (event: [Event](/uni-app-x/component/common#event)) => void | - | 当暂停播放时，触发pause事件 |\n| @ended | (event: [Event](/uni-app-x/component/common#event)) => void | - | 当播放到视频末尾时触发ended事件 |\n| @timeupdate | (event: [Event](/uni-app-x/component/common#event)) => void | - | 播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次 |\n| @fullscreenchange | (event: [Event](/uni-app-x/component/common#event)) => void | - | 当视频进入和退出全屏是触发，event.detail = {fullScreen, direction}，direction取为 vertical 或 horizontal |\n| @waiting | (event: [Event](/uni-app-x/component/common#event)) => void | - | 视频出现缓冲时触发 |\n| @error | (event: [Event](/uni-app-x/component/common#event)) => void | - | 播放出错试触发事件 |\n| @progress | (event: [Event](/uni-app-x/component/common#event)) => void | - | 加载进度变化时触发，只支持一段加载。event.detail = {buffered}，百分比 |\n| @loadedmetadata | (event: [Event](/uni-app-x/component/common#event)) => void | - | 视频元数据加载完成时触发。event.detail = {width, height, duration} |\n\n#### objectFit @objectFit-values \n\n| 值名称 | 描述 |\n| :- | :- |\n| contain | 包含 |\n| fill | 填充 |\n| cover | 覆盖 |\n\n","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/pages/component/video/video.uvue) \n ```html\n<template>\n  <view class=\"uni-flex-item\">\n    <video class=\"video\" ref=\"video\" id=\"video\" :header=\"header\" :src=src :autoplay=\"autoplay\" :loop=\"loop\"\n      :muted=\"muted\" :initial-time=\"initialTime\" :duration=\"duration\" :controls=\"controls\" :danmu-btn=\"danmuBtn\"\n      :enable-danmu=\"enableDanmu\" :page-gesture=\"pageGesture\" :direction=\"direction\" :show-progress=\"showProgress\"\n      :show-fullscreen-btn=\"showFullscreenBtn\" :show-play-btn=\"showPlayBtn\" :show-center-play-btn=\"showCenterPlayBtn\"\n      :show-loading=\"showLoading\" :enable-progress-gesture=\"enableProgressGesture\" :object-fit=\"objectFit\"\n      :poster=\"poster\" :show-mute-btn=\"showMuteBtn\" :title=\"title\" :enable-play-gesture=\"enablePlayGesture\"\n      :vslide-gesture=\"vslideGesture\" :vslide-gesture-in-fullscreen=\"vslideGestureInFullscreen\" :codec=\"codec\"\n      :http-cache=\"httpCache\" :play-strategy=\"playStrategy\" :danmu-list=\"danmuList\" @play=\"onPlay\" @pause=\"onPause\"\n      @ended=\"onEnded\" @timeupdate=\"onTimeUpdate\" @waiting=\"onWaiting\" @error=\"onError\" @progress=\"onProgress\"\n      @fullscreenclick=\"onFullScreenClick\" @controlstoggle=\"onControlsToggle\" @fullscreenchange=\"onFullScreenChange\">\n    </video>\n    <scroll-view class=\"uni-padding-wrap uni-common-mt uni-flex-item\">\n      <view class=\"uni-title\">\n        <text class=\"uni-title-text\">API示例</text>\n      </View>\n      <view class=\"uni-btn-v\">\n        <button type=\"primary\" @click=\"play\">播放</button>\n      </view>\n      <view class=\"uni-btn-v\">\n        <button type=\"primary\" @click=\"pause\">暂停</button>\n      </view>\n      <view class=\"uni-btn-v\">\n        <button type=\"primary\" @click=\"seek(pos)\">跳转到指定位置</button>\n      </view>\n      <view class=\"uni-btn-v\">\n        <button type=\"primary\" @click=\"requestFullScreen(requestFullScreenOptions)\">进入全屏</button>\n      </view>\n      <view class=\"uni-btn-v\">\n        <button type=\"primary\" @click=\"exitFullScreen\">退出全屏</button>\n      </view>\n      <view class=\"uni-btn-v\">\n        <button type=\"primary\" @click=\"stop\">停止</button>\n      </view>\n      <view class=\"uni-btn-v\">\n        <button type=\"primary\" @click=\"sendDanmu(danmu)\">发送弹幕</button>\n      </view>\n      <view class=\"uni-btn-v\">\n        <button type=\"primary\" @click=\"playbackRate(rate)\">设置倍速</button>\n      </view>\n      <view class=\"uni-title\">\n        <text class=\"uni-title-text\">属性示例</text>\n      </view>\n      <view class=\"uni-btn-v\">\n        <button type=\"primary\" @click=\"setSrc(_src)\">设置播放资源</button>\n      </view>\n      <view class=\"uni-btn-v\">\n        <button type=\"primary\" @click=\"setAutoplay()\">设置是否自动播放（未播放时设置有效）</button>\n      </view>\n      <view class=\"uni-btn-v\">\n        <button type=\"primary\" @click=\"setLoop()\">设置是否循环播放（本次播放完成后生效）</button>\n      </view>\n      <view class=\"uni-btn-v\">\n        <button type=\"primary\" @click=\"setMuted()\">设置是否静音播放</button>\n      </view>\n      <view class=\"uni-btn-v\">\n        <button type=\"primary\" @click=\"setInitialTime(_initialTime)\">设置初始播放位置（本次播放完成后生效）</button>\n      </view>\n      <view class=\"uni-btn-v\">\n        <button type=\"primary\" @click=\"setDuration(_duration)\">设置视频时长（未播放时设置有效）</button>\n      </view>\n      <view class=\"uni-btn-v\">\n        <button type=\"primary\" @click=\"setControls()\">设置是否显示默认播放控件</button>\n      </view>\n      <view class=\"uni-btn-v\">\n        <button type=\"primary\" @click=\"setDanmuBtn()\">设置是否显示弹幕按钮</button>\n      </view>\n      <view class=\"uni-btn-v\">\n        <button type=\"primary\" @click=\"setPageGesture()\">非全屏模式下，设置是否开启亮度与音量调节手势</button>\n      </view>\n      <view class=\"uni-btn-v\">\n        <button type=\"primary\" @click=\"setDirection(_direction)\">设置全屏时视频的方向</button>\n      </view>\n      <view class=\"uni-btn-v\">\n        <button type=\"primary\" @click=\"setShowProgress()\">设置是否显示进度条</button>\n      </view>\n      <view class=\"uni-btn-v\">\n        <button type=\"primary\" @click=\"setShowFullscreenBtn()\">设置是否显示全屏按钮</button>\n      </view>\n      <view class=\"uni-btn-v\">\n        <button type=\"primary\" @click=\"setShowPlayBtn()\">设置是否显示视频底部控制栏的播放按钮</button>\n      </view>\n      <view class=\"uni-btn-v\">\n        <button type=\"primary\" @click=\"setShowCenterPlayBtn()\">设置是否显示视频中间的播放按钮</button>\n      </view>\n      <view class=\"uni-btn-v\">\n        <button type=\"primary\" @click=\"setShowLoading()\">设置是否显示loading控件</button>\n      </view>\n      <view class=\"uni-btn-v\">\n        <button type=\"primary\" @click=\"setEnableProgressGesture()\">设置是否开启控制进度的手势</button>\n      </view>\n      <view class=\"uni-btn-v\">\n        <button type=\"primary\" @click=\"setObjectFit(_objectFit)\">设置视频大小与video容器大小不一致时，视频的表现形式</button>\n      </view>\n      <view class=\"uni-btn-v\">\n        <button type=\"primary\" @click=\"setPoster(_poster)\">设置视频封面</button>\n      </view>\n      <view class=\"uni-btn-v\">\n        <button type=\"primary\" @click=\"setShowMuteBtn()\">设置是否显示静音按钮</button>\n      </view>\n      <view class=\"uni-btn-v\">\n        <button type=\"primary\" @click=\"setTitle(_title)\">设置视频标题</button>\n      </view>\n      <view class=\"uni-btn-v\">\n        <button type=\"primary\" @click=\"setEnablePlayGesture()\">设置是否开启播放手势</button>\n      </view>\n      <view class=\"uni-btn-v\">\n        <button type=\"primary\" @click=\"setVslideGesture()\">非全屏模式下，设置是否开启亮度与音量调节手势</button>\n      </view>\n      <view class=\"uni-btn-v\">\n        <button type=\"primary\" @click=\"setVslideGestureInFullscreen()\">全屏模式下，设置是否开启亮度与音量调节手势</button>\n      </view>\n      <view class=\"uni-btn-v\">\n        <button type=\"primary\" @click=\"setCodec(_codec)\">设置解码器（未播放时设置有效）</button>\n      </view>\n      <view class=\"uni-btn-v\">\n        <button type=\"primary\" @click=\"setHttpCache()\">设置是否对http、https视频源开启本地缓存（未播放时设置有效）</button>\n      </view>\n      <view class=\"uni-btn-v\">\n        <button type=\"primary\" @click=\"setPlayStrategy(_playStrategy)\">设置播放策略（未播放时设置有效）</button>\n      </view>\n      <view class=\"uni-btn-v\">\n        <button type=\"primary\" @click=\"setHeader(_header)\">设置header</button>\n      </view>\n    </scroll-view>\n  </view>\n</template>\n\n<script lang=\"uts\">\n  export default {\n    onReady() {\n      this.videoContext = uni.createVideoContext('video', this);\n    },\n    data() {\n      return {\n        videoContext: null as VideoContext | null,\n        // 属性\n        src: \"https://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\",\n        _src: \"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app-video-courses.mp4\",\n        autoplay: false,\n        loop: false,\n        muted: false,\n        initialTime: 0,\n        _initialTime: 6,\n        duration: -1,\n        _duration: 60,\n        controls: true,\n        danmuList: [{\n          text: '要显示的文本',\n          color: '#FF0000',\n          time: 3\n        }, {\n          text: '要显示的文本2',\n          color: '#31ff23',\n          time: 5\n        }, {\n          text: '要显示的文本3',\n          color: '#f13ef8',\n          time: 7\n        }, {\n          text: '要显示的文本4',\n          color: '#4972f8',\n          time: 9\n        }, {\n          text: '要显示的文本5',\n          color: '#000000',\n          time: 11\n        }] as Array<Danmu>,\n        danmuBtn: false,\n        enableDanmu: true,\n        pageGesture: false,\n        direction: -90,\n        _direction: 0,\n        requestFullScreenOptions: {\n          direction: -90\n        } as RequestFullScreenOptions,\n        showProgress: true,\n        showFullscreenBtn: true,\n        showPlayBtn: true,\n        showCenterPlayBtn: true,\n        showLoading: true,\n        enableProgressGesture: true,\n        objectFit: \"contain\",\n        _objectFit: \"fill\",\n        poster: \"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-android.png\",\n        _poster: \"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-ios.png\",\n        showMuteBtn: false,\n        title: \"video-component\",\n        _title: \"video-component video-component\",\n        enablePlayGesture: false,\n        vslideGesture: false,\n        vslideGestureInFullscreen: true,\n        codec: \"hardware\",\n        _codec: \"software\",\n        httpCache: true,\n        playStrategy: 0,\n        _playStrategy: 2,\n        header: {\n          'User-Agent': 'header test'\n        } as UTSJSONObject,\n        _header: {\n          'User-Agent': 'header test2'\n        } as UTSJSONObject,\n        // API\n        pos: 10,\n        rate: 1.5,\n        danmu: {\n          text: '要显示的文本',\n          color: '#FF0000'\n        } as Danmu,\n        // 自动化测试\n        isPlaying: false,\n        isPause: false,\n        isFullScreen: false\n      }\n    },\n    methods: {\n      // API\n      play: function () {\n        console.log(\"play\");\n        this.videoContext?.play();\n      },\n      pause: function () {\n        console.log(\"pause\");\n        this.videoContext?.pause();\n      },\n      seek: function (pos : number) {\n        console.log(\"seek -> \" + pos);\n        this.videoContext?.seek(pos);\n      },\n      requestFullScreen: function (options : RequestFullScreenOptions) {\n        console.log(\"requestFullScreen -> \" + options);\n        this.videoContext?.requestFullScreen(options);\n      },\n      exitFullScreen: function () {\n        console.log(\"exitFullScreen\");\n        this.videoContext?.exitFullScreen();\n      },\n      stop: function () {\n        console.log(\"stop\");\n        this.videoContext?.stop();\n      },\n      sendDanmu: function (danmu : Danmu) {\n        console.log(\"sendDanmu -> \" + danmu);\n        this.videoContext?.sendDanmu(danmu);\n      },\n      playbackRate: function (rate : number) {\n        console.log(\"playbackRate -> \" + rate);\n        this.videoContext?.playbackRate(rate);\n      },\n      // 属性\n      setSrc: function (src : string) {\n        this.src = src;\n        console.log(\"src -> \" + this.src)\n      },\n      setAutoplay: function () {\n        this.autoplay = !this.autoplay;\n        console.log(\"autoplay -> \" + this.autoplay)\n      },\n      setLoop: function () {\n        this.loop = !this.loop;\n        console.log(\"loop -> \" + this.loop)\n      },\n      setMuted: function () {\n        this.muted = !this.muted;\n        console.log(\"muted -> \" + this.muted)\n      },\n      setInitialTime: function (initialTime : number) {\n        this.initialTime = initialTime;\n        console.log(\"initialTime -> \" + this.initialTime)\n      },\n      setDuration: function (duration : number) {\n        this.duration = duration;\n        console.log(\"duration -> \" + this.duration)\n      },\n      setControls: function () {\n        this.controls = !this.controls;\n        console.log(\"controls -> \" + this.controls)\n      },\n      setDanmuBtn: function () {\n        this.danmuBtn = !this.danmuBtn;\n        console.log(\"danmuBtn -> \" + this.danmuBtn)\n      },\n      setPageGesture: function () {\n        this.pageGesture = !this.pageGesture;\n        console.log(\"pageGesture -> \" + this.pageGesture)\n      },\n      setDirection: function (direction: number) {\n        this.direction = direction;\n        console.log(\"direction -> \" + this.direction)\n      },\n      setShowProgress: function () {\n        this.showProgress = !this.showProgress;\n        console.log(\"showProgress -> \" + this.showProgress)\n      },\n      setShowFullscreenBtn: function () {\n        this.showFullscreenBtn = !this.showFullscreenBtn;\n        console.log(\"showFullscreenBtn -> \" + this.showFullscreenBtn)\n      },\n      setShowPlayBtn: function () {\n        this.showPlayBtn = !this.showPlayBtn;\n        console.log(\"showPlayBtn -> \" + this.showPlayBtn)\n      },\n      setShowCenterPlayBtn: function () {\n        this.showCenterPlayBtn = !this.showCenterPlayBtn;\n        console.log(\"showCenterPlayBtn -> \" + this.showCenterPlayBtn)\n      },\n      setShowLoading: function () {\n        this.showLoading = !this.showLoading;\n        console.log(\"showLoading -> \" + this.showLoading)\n      },\n      setEnableProgressGesture: function () {\n        this.enableProgressGesture = !this.enableProgressGesture;\n        console.log(\"enableProgressGesture -> \" + this.enableProgressGesture)\n      },\n      setObjectFit: function (objectFit : string) {\n        this.objectFit = objectFit;\n        console.log(\"objectFit -> \" + this.objectFit)\n      },\n      setPoster: function (poster : string) {\n        this.poster = poster;\n        console.log(\"poster -> \" + this.poster)\n      },\n      setShowMuteBtn: function () {\n        this.showMuteBtn = !this.showMuteBtn;\n        console.log(\"showMuteBtn -> \" + this.showMuteBtn)\n      },\n      setTitle: function (title : string) {\n        this.title = title;\n        console.log(\"title -> \" + this.title)\n      },\n      setEnablePlayGesture: function () {\n        this.enablePlayGesture = !this.enablePlayGesture;\n        console.log(\"enablePlayGesture -> \" + this.enablePlayGesture)\n      },\n      setVslideGesture: function () {\n        this.vslideGesture = !this.vslideGesture;\n        console.log(\"vslideGesture -> \" + this.vslideGesture)\n      },\n      setVslideGestureInFullscreen: function () {\n        this.vslideGestureInFullscreen = !this.vslideGestureInFullscreen;\n        console.log(\"vslideGestureInFullscreen -> \" + this.vslideGestureInFullscreen)\n      },\n      setCodec: function (codec : string) {\n        this.codec = codec;\n        console.log(\"codec -> \" + this.codec)\n      },\n      setHttpCache: function () {\n        this.httpCache = !this.httpCache;\n        console.log(\"httpCache -> \" + this.httpCache)\n      },\n      setPlayStrategy: function (playStrategy : number) {\n        this.playStrategy = playStrategy;\n        console.log(\"playStrategy -> \" + this.playStrategy)\n      },\n      setHeader: function (header : UTSJSONObject) {\n        this.header = header;\n        console.log(\"header -> \" + this.header)\n      },\n      // 事件\n      onPlay: function (res : any) {\n        console.log(JSON.stringify(res));\n        this.isPlaying = true;\n        this.isPause = false;\n      },\n      onPause: function (res : any) {\n        console.log(JSON.stringify(res));\n        this.isPlaying = false;\n        this.isPause = true;\n      },\n      onEnded: function (res : any) {\n        console.log(JSON.stringify(res));\n      },\n      onTimeUpdate: function (_ : any) {\n        // console.log(JSON.stringify(res));\n      },\n      onFullScreenChange: function (res : any) {\n        console.log(JSON.stringify(res));\n        this.isFullScreen = !this.isFullScreen;\n      },\n      onWaiting: function (res : any) {\n        console.log(JSON.stringify(res));\n      },\n      onError: function (res : any) {\n        console.log(JSON.stringify(res));\n      },\n      onProgress: function (res : any) {\n        console.log(JSON.stringify(res));\n      },\n      onFullScreenClick: function (res : any) {\n        console.log(JSON.stringify(res));\n      },\n      onControlsToggle: function (res : any) {\n        console.log(JSON.stringify(res));\n      },\n      // 自动化测试\n      playTest: function () {\n        this.videoContext?.play();\n      },\n      pauseTest: function () {\n        this.videoContext?.pause();\n      },\n      requestFullScreenTest: function () {\n        const options : RequestFullScreenOptions = {\n          direction: -90\n        };\n        this.videoContext?.requestFullScreen(options);\n      },\n      exitFullScreenTest: function () {\n        this.videoContext?.exitFullScreen();\n      },\n      stopTest: function () {\n        this.videoContext?.stop();\n      }\n    }\n  }\n</script>\n\n<style>\n  .video {\n    width: 750rpx;\n    height: 400rpx;\n  }\n</style>\n\n```","compatibility":"\n### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| video | 5.0 | √ | 3.9+ | 9.0 | √ | - |\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 | - |\n","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/video)\n"},"view":{"name":"## view","description":"基本视图容器","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| hover-class | String | none | 指定按下去的样式类。当 hover-class=\"none\" 时，没有点击态效果 |\n| hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态(祖先节点：指根节点到该节点路径上的所有节点都是这个节点的祖先节点) |\n| hover-start-time | Number | 50 | 按住后多久出现点击态，单位毫秒 |\n| hover-stay-time | Number | 400 | 手指松开后点击态保留时间，单位毫秒 |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/pages/component/view/view.uvue) \n ```html\n<template>\r\n  <page-head title=\"view\"></page-head>\n  <view class=\"main\" :hover-class=\"hover_class ? 'is-parent-hover' : 'none'\">\n    <view class=\"test-view\" :hover-class=\"hover_class ? 'is-hover' : 'none'\" :hover-stop-propagation=\"stop_propagation\" :hover-start-time=\"start_time\" :hover-stay-time=\"stay_time\">\n    </view>\n  </view>\n  <!-- #ifdef APP -->\n  <scroll-view style=\"flex: 1\">\n    <!-- #endif -->\n    <view class=\"content\">\n      <boolean-data :defaultValue=\"false\" title=\"是否指定按下去的样式类\" @change=\"change_hover_class_boolean\"></boolean-data>\n      <boolean-data :defaultValue=\"false\" title=\"是否阻止本节点的祖先节点出现点击态\" @change=\"change_stop_propagation_boolean\"></boolean-data>\n      <enum-data :items=\"start_time_enum\" title=\"按住后多久出现点击态\" @change=\"radio_change_start_time_enum\"></enum-data>\n      <enum-data :items=\"stay_time_enum\" title=\"手指松开后点击态保留时间\" @change=\"radio_change_stay_time_enum\"></enum-data>\n      <view class=\"uni-padding-wrap uni-common-mt uni-common-mb\">\n        <button class=\"uni-common-mt\" @click=\"goGeneralAttribute('/pages/component/view/view-draw')\">DrawableContext</button>\n      </view>\n    </view>\n    <!-- #ifdef APP -->\n  </scroll-view>\n  <!-- #endif -->\r\n</template>\r\n<script>\nimport { type ItemType } from '@/components/enum-data/enum-data.vue'\r\nexport default {\n  data() {\n    return {\n      hover_class: false,\n      stop_propagation: false,\n      start_time: 50,\n      stay_time: 400,\n      start_time_enum: [{ \"value\": 50, \"name\": \"50毫秒\" }, { \"value\": 200, \"name\": \"200毫秒\" }] as ItemType[],\n      stay_time_enum: [{ \"value\": 400, \"name\": \"400毫秒\" }, { \"value\": 200, \"name\": \"200毫秒\" }] as ItemType[]\n    }\n  },\r\n  methods: {\n    change_hover_class_boolean(checked : boolean) {\n      this.hover_class = checked\n    },\n    change_stop_propagation_boolean(checked : boolean) {\n      this.stop_propagation = checked\n    },\n    radio_change_start_time_enum(time : number) {\n      this.start_time = time\n    },\n    radio_change_stay_time_enum(time : number) {\n      this.stay_time = time\n    },\r\n    goGeneralAttribute(path: string) {\r\n      uni.navigateTo({\r\n        url: path,\r\n      })\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.test-view {\n  height: 200px;\n  width: 200px;\n  background-color: white;\n}\r\n.text {\r\n  color: #777;\r\n  font-size: 26rpx;\r\n}\n.is-hover {\r\n    background-color: #179b16;\r\n}\n\n.is-parent-hover {\r\n    background-color: #aa0000;\r\n}\r\n</style>\r\n\n```","compatibility":"\n### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| view | 5.0 | √ | 3.9+ | - | - | - |\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+ | - | - | - |\n","children":"","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/view)\n"},"web-view":{"name":"## web-view","description":"承载网页的容器","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| src | 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 = { errMsg } |\n| @loaded | (event: [WebViewLoadedEvent](#webviewloadedevent)) => void | - | 网页加载完成后触发。 |\n| @loading | (event: [WebViewLoadingEvent](#webviewloadingevent)) => void | - | 网页加载中触发。 |","event":"\n### 事件\n#### WebViewMessageEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [WebViewMessageEventdetail](#webviewmessageeventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### WebViewMessageEventdetail 属性值 @webviewmessageeventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| data | Map\\<string, any> | 否 | - |  消息包含的数据 |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### WebViewErrorEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [WebViewErrorEventdetail](#webviewerroreventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### WebViewErrorEventdetail 属性值 @webviewerroreventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| errMsg | string | 是 | - |  错误信息 |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### WebViewLoadedEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### WebViewLoadingEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/pages/component/web-view/web-view.uvue) \n ```html\n<template>\n  <view class=\"uni-flex-item\">\n    <web-view id=\"web-view\" class=\"uni-flex-item\" :src=\"src\" :webview-styles=\"webview_styles\" @message=\"message\"\n      @error=\"error\" @loading=\"loading\" @loaded=\"loaded\">\n    </web-view>\n    <view class=\"uni-padding-wrap uni-common-mt\">\n      <view class=\"uni-input-v\">\n        <input class=\"uni-input\" confirmType=\"go\" placeholder=\"输入网址跳转\" @confirm=\"confirm\" />\n      </view>\n      <view class=\"uni-row uni-btn-v\">\n        <view class=\"uni-flex-item\">\n          <button type=\"primary\" @click=\"back\">后退</button>\n        </view>\n        <view class=\"uni-btn-ml uni-flex-item\">\n          <button type=\"primary\" @click=\"forward\">前进</button>\n        </view>\n      </view>\n      <view class=\"uni-row uni-btn-v\">\n        <view class=\"uni-flex-item\">\n          <button type=\"primary\" @click=\"reload\">重新加载</button>\n        </view>\n        <view class=\"uni-btn-ml uni-flex-item\">\n          <button type=\"primary\" @click=\"stop\">停止加载</button>\n        </view>\n      </view>\n      <view class=\"uni-btn-v\">\n        <button type=\"primary\" @click=\"nativeToWeb\">原生和Web通信</button>\n      </view>\n    </view>\n  </view>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        src: 'https://www.dcloud.io',\n        webview_styles: {\n          progress: {\n            color: '#FF3333'\n          }\n        },\n        webviewContext: null as WebviewContext | null,\n        loadError: false\n      }\n    },\n    onReady() {\n      this.webviewContext = uni.createWebviewContext('web-view', this)\n    },\n    methods: {\n      back() {\n        this.webviewContext?.back();\n      },\n      forward() {\n        this.webviewContext?.forward();\n      },\n      reload() {\n        this.webviewContext?.reload();\n      },\n      stop() {\n        this.webviewContext?.stop();\n      },\n      nativeToWeb() {\n        this.webviewContext?.evalJS(\"alert('hello uni-app x')\");\n      },\n      message(event : WebViewMessageEvent) {\n        console.log(JSON.stringify(event.detail));\n      },\n      error(event : WebViewErrorEvent) {\n        this.loadError = true\n        console.log(JSON.stringify(event.detail));\n      },\n      loading(event : WebViewLoadingEvent) {\n        console.log(JSON.stringify(event.type));\n      },\n      loaded(event : WebViewLoadedEvent) {\n        console.log(JSON.stringify(event.type));\n      },\n      confirm(event : InputConfirmEvent) {\n        console.log(event.detail.value);\n        let url = event.detail.value;\n        if (!url.startsWith('https://') && !url.startsWith('http://')) {\n          url = 'https://' + url;\n        }\n        this.src = url;\n      }\n    }\n  }\n</script>\n\n<style>\n  .uni-input-v {\n    padding: 10rpx 0;\n  }\n\n  .uni-btn-ml {\n    margin-left: 10rpx;\n  }\n</style>\n\n```","compatibility":"\n### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| web-view | 5.0 | √ | 3.9+ | 9.0 | √ | - |\n","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/web-view)\n"}}
\ No newline at end of file
+{"animation-view":{"name":"## animation-view","description":"Lottie 动画\n> 本 Component 是 uni ext component，需下载插件：[animation-view](https://ext.dcloud.net.cn/plugin?name=uni-animation-view)\n","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 | Any | - | - |\n\n#### action @action-values \n\n| 值名称 | 描述 |\n| :- | :- |\n| play | 播放 |\n| pause | 暂停 |\n| stop | 停止 |\n\n","event":"","example":"","compatibility":"\n### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| animation-view | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| path | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n","children":"","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/animation-view)\n- [插件市场](https://ext.dcloud.net.cn/plugin?id=10674)\n"},"button":{"name":"## button","description":"按钮","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| disabled | Boolean | false | 是否禁用 |\n| hover-class | 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/master/pages/component/button/button.uvue) \n ```html\n<script>\r\n  import { type ItemType } from '@/components/enum-data/enum-data.vue'\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### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| button | 5.0 | √ | √ | 10.0 | √ | x |\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 |\n","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/button)\n"},"checkbox":{"name":"## checkbox","description":"多选项。在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 | ColorString | #007aff | checkbox的颜色 |\n| backgroundColor | ColorString | #ffffff | checkbox默认的背景颜色 |\n| borderColor | ColorString | #d1d1d1 | checkbox默认的边框颜色 |\n| activeBackgroundColor | ColorString | #ffffff | checkbox选中时的背景颜色 |\n| activeBorderColor | ColorString | #d1d1d1 | checkbox选中时的边框颜色 |\n| iconColor | ColorString | #007aff | checkbox的图标颜色，优先级大于color属性 |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/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 nvue\">\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### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| checkbox | 5.0 | √ | √ | 10.0 | √ | x |\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 |\n","children":"","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/checkbox)\n"},"checkbox-group":{"name":"## checkbox-group","description":"多项组，内部由多个checkbox组成","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\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##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | T | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### CheckboxGroupChangeEventDetail\n\n##### 构造函数\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | Array\\<string\\> | 是 | - | - |\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | Array\\<string\\> | 是 | - | - |\n\n","example":"","compatibility":"\n### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| checkbox-group | 5.0 | √ | √ | 10.0 | √ | x |\n| @change | 5.0 | √ | √ | 10.0 | √ | x |\n","children":"### 子组件 @children-tags \n - [checkbox](#checkbox)","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/checkbox)\n"},"image":{"name":"## image","description":"图片","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| src | 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 rigth | 不缩放图片，只显示图片的右上边区域 |\n| bottom left | 不缩放图片，只显示图片的左下边区域 |\n| bottom right | 不缩放图片，只显示图片的右下边区域 |\n\n","event":"\n### 事件\n#### ImageErrorEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [ImageErrorEventdetail](#imageerroreventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### ImageErrorEventdetail 属性值 @imageerroreventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| errMsg | string | 是 | - |  错误信息 |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### ImageLoadEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [ImageLoadEventdetail](#imageloadeventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### ImageLoadEventdetail 属性值 @imageloadeventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| width | number | 是 | - |  图片宽度 |\n| height | number | 是 | - |  图片高度 |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/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### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| image | 5.0 | √ | 3.9+ | 9.0 | √ | - |\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 |\n","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/image)\n"},"input":{"name":"## input","description":"输入框","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| disabled | Boolean | false | 是否禁用 |\n| value | String |  | 输入框的初始内容 |\n| type | String | text | input的类型 [type](#type-values) |\n| password | Boolean | false | 是否是密码类型 |\n| placeholder | String |  | 输入框为空时占位符 |\n| placeholder-style | String |  | 指定 placeholder 的样式 |\n| placeholder-class | String |  | 指定 placeholder 的样式类 |\n| maxlength | Number | 140 | 最大输入长度，设置为 -1 的时候不限制最大长度 |\n| cursor-spacing | Number | 0 | 指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 |\n| auto-focus | Boolean | false | 自动获取焦点 |\n| focus | Boolean | false | 获取焦点 |\n| confirm-type | String | 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##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [InputEventdetail](#inputeventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/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##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### InputFocusEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [InputFocusEventdetail](#inputfocuseventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### InputFocusEventdetail 属性值 @inputfocuseventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| height | number | 是 | - |  键盘高度 |\n| value | string | 是 | - |  输入框内容 |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### InputBlurEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [InputBlurEventdetail](#inputblureventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### InputBlurEventdetail 属性值 @inputblureventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | string | 是 | - |  输入框内容 |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### InputKeyboardHeightChangeEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [InputKeyboardHeightChangeEventdetail](#inputkeyboardheightchangeeventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### InputKeyboardHeightChangeEventdetail 属性值 @inputkeyboardheightchangeeventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| height | number | 是 | - |  键盘高度 |\n| duration | number | 是 | - |  持续时间 |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### InputConfirmEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [InputConfirmEventdetail](#inputconfirmeventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### InputConfirmEventdetail 属性值 @inputconfirmeventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | string | 是 | - |  输入框内容 |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/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>\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-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>\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,\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      }\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### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| input | 5.0 | √ | 3.9+ | 9.0 | √ | - |\n","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/input)\n"},"list-item":{"name":"## list-item","description":"list-view组件的唯一合法子组件。每个item是一行","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| type | Number | 0 | 对应list-item的类型 list-view 将对同类型条目进行复用，所以合理的类型拆分，可以很好地提升 list-view 性能 |","event":"","example":"","compatibility":"\n### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| list-item | 5.0 | x | 3.9+ | 9.0 | x | - |\n| type | 5.0 | x | 3.9+ | 9.0 | x | - |\n","children":"","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/uni-app-x/component/list-view#list-item)\n"},"list-view":{"name":"## list-view","description":"列表组件","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 | - | 值应为某子元素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！list-view暂时不支持使用自定义样式 |\n| refresher-background | String | #FFF | 设置下拉刷新区域背景颜色 |\n| refresher-triggered | Boolean | false | 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发 |\n| custom-nested-scroll | Boolean | - | 子元素是否开启嵌套滚动 将滚动事件与父元素协商处理 |\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} |","event":"\n### 事件\n#### RefresherEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [RefresherEventdetail](#refreshereventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### RefresherEventdetail 属性值 @refreshereventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| dy | number | 是 | - | - |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### ScrollToUpperEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [ScrollToUpperEventdetail](#scrolltouppereventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### ScrollToUpperEventdetail 属性值 @scrolltouppereventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| direction | string | 是 | - |  滚动方向 top 或 left |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### ScrollToLowerEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [ScrollToLowerEventdetail](#scrolltolowereventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### ScrollToLowerEventdetail 属性值 @scrolltolowereventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| direction | string | 是 | - |  滚动方向 bottom 或 right |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### ScrollEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [ScrollEventdetail](#scrolleventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/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##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/pages/component/list-view/list-view.uvue) \n ```html\n<script>\n  import { type ItemType } from '@/components/enum-data/enum-data.vue'\n  export default {\n    data() {\n      return {\n        refresher_triggered_boolean: false,\n        refresher_enabled_boolean: false,\n        scroll_with_animation_boolean: false,\n        show_scrollbar_boolean: true,\n        rebound_boolean: true,\n        scroll_y_boolean: true,\n        scroll_x_boolean: false,\n        upper_threshold_input: 50,\n        lower_threshold_input: 50,\n        scroll_top_input: 0,\n        scroll_left_input: 0,\n        refresher_background_input: \"#FFF\",\n        scrollData: [] as Array<string>,\n        size_enum: [{ \"value\": 0, \"name\": \"item---0\" }, { \"value\": 3, \"name\": \"item---3\" }] as ItemType[],\n        scrollIntoView: \"\",\n        refresherrefresh: false\n      }\n    },\n    onLoad() {\n      let lists : Array<string> = []\n      for (let i = 0; i < 10; i++) {\n        lists.push(\"item---\" + i)\n      }\n      this.scrollData = lists\n    },\n    methods: {\n      list_view_click() { console.log(\"组件被点击时触发\") },\n      list_view_touchstart() { console.log(\"手指触摸动作开始\") },\n      list_view_touchmove() { console.log(\"手指触摸后移动\") },\n      list_view_touchcancel() { console.log(\"手指触摸动作被打断，如来电提醒，弹窗\") },\n      list_view_touchend() { console.log(\"手指触摸动作结束\") },\n      list_view_tap() { console.log(\"手指触摸后马上离开\") },\n      list_view_longpress() { console.log(\"如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。\") },\n      list_view_refresherpulling() { console.log(\"下拉刷新控件被下拉\") },\n      list_view_refresherrefresh() {\n        console.log(\"下拉刷新被触发 \")\n        this.refresherrefresh = true\n        this.refresher_triggered_boolean = true\n        setTimeout(function(){\n        \tthis.refresher_triggered_boolean = false\n        }, 1500)\n      },\n      list_view_refresherrestore() {\n        this.refresherrefresh = false\n        console.log(\"下拉刷新被复位\")\n      },\n      list_view_refresherabort() { console.log(\"下拉刷新被中止\") },\n      list_view_scrolltoupper(e:ScrollToUpperEvent) { console.log(\"滚动到顶部/左边，会触发 scrolltoupper 事件  direction=\"+e.detail.direction) },\n      list_view_scrolltolower(e:ScrollToLowerEvent) { console.log(\"滚动到底部/右边，会触发 scrolltolower 事件  direction=\"+e.detail.direction) },\n      list_view_scroll() { console.log(\"滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}\") },\n      list_item_click() { console.log(\"list-item组件被点击时触发\") },\n      list_item_touchstart() { console.log(\"手指触摸list-item组件动作开始\") },\n      list_item_touchmove() { console.log(\"手指触摸list-item组件后移动\") },\n      list_item_touchcancel() { console.log(\"手指触摸list-item组件动作被打断，如来电提醒，弹窗\") },\n      list_item_touchend() { console.log(\"手指触摸list-item组件动作结束\") },\n      list_item_tap() { console.log(\"手指触摸list-item组件后马上离开\") },\n      list_item_longpress() { console.log(\"list-item组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。\") },\n      change_refresher_triggered_boolean(checked : boolean) { this.refresher_triggered_boolean = checked },\n      change_refresher_enabled_boolean(checked : boolean) { this.refresher_enabled_boolean = checked },\n      change_scroll_with_animation_boolean(checked : boolean) { this.scroll_with_animation_boolean = checked },\n      change_show_scrollbar_boolean(checked : boolean) { this.show_scrollbar_boolean = checked },\n      change_rebound_boolean(checked : boolean) { this.rebound_boolean = checked },\n      change_scroll_y_boolean(checked : boolean) { this.scroll_y_boolean = checked },\n      change_scroll_x_boolean(checked : boolean) { this.scroll_x_boolean = checked },\n      confirm_upper_threshold_input(value : number) { this.upper_threshold_input = value },\n      confirm_lower_threshold_input(value : number) { this.lower_threshold_input = value },\n      confirm_scroll_top_input(value : number) { this.scroll_top_input = value },\n      confirm_scroll_left_input(value : number) { this.scroll_left_input = value },\n      confirm_refresher_background_input(value : string) { this.refresher_background_input = value },\n      item_change_size_enum(index : number) { this.scrollIntoView = \"item---\"+index },\r\n      //自动化测试例专用\n      check_scroll_height(): Boolean {\r\n        var listElement = this.$refs[\"listview\"] as Element\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      },\n      //自动化测试例专用\r\n      check_scroll_width(): Boolean {\r\n        var listElement = this.$refs[\"listview\"] as Element\n        console.log(\"check_scroll_width\"+listElement.scrollWidth)\n        if(listElement.scrollWidth > 2000) {\n          return true\n        }\r\n        return false\r\n      }\n    }\n  }\n</script>\n\n<template>\n  <view class=\"main\">\n    <list-view :scroll-x=\"scroll_x_boolean\" :scroll-y=\"scroll_y_boolean\" :rebound=\"rebound_boolean\"\n      :upper-threshold=\"upper_threshold_input\" :lower-threshold=\"lower_threshold_input\" :scroll-top=\"scroll_top_input\"\n      :scroll-left=\"scroll_left_input\" :show-scrollbar=\"show_scrollbar_boolean\" :scroll-into-view=\"scrollIntoView\"\n      :scroll-with-animation=\"scroll_with_animation_boolean\" :refresher-enabled=\"refresher_enabled_boolean\"\n      :refresher-background=\"refresher_background_input\" :refresher-triggered=\"refresher_triggered_boolean\"\n      @click=\"list_view_click\" @touchstart=\"list_view_touchstart\" @touchmove=\"list_view_touchmove\"\n      @touchcancel=\"list_view_touchcancel\" @touchend=\"list_view_touchend\" @tap=\"list_view_tap\"\n      @longpress=\"list_view_longpress\" @refresherpulling=\"list_view_refresherpulling\"\n      @refresherrefresh=\"list_view_refresherrefresh\" @refresherrestore=\"list_view_refresherrestore\"\n      @refresherabort=\"list_view_refresherabort\" @scrolltoupper=\"list_view_scrolltoupper\" ref=\"listview\" id=\"listview\"\n      @scrolltolower=\"list_view_scrolltolower\" @scroll=\"list_view_scroll\" style=\"width:100%;\">\n      <list-item\n        v-for=\"key in scrollData\" :key=\"key\" :id=\"key\" @click=\"list_item_click\" @touchstart=\"list_item_touchstart\"\n        @touchmove=\"list_item_touchmove\" @touchcancel=\"list_item_touchcancel\" @touchend=\"list_item_touchend\"\n        @tap=\"list_item_tap\" @longpress=\"list_item_longpress\"\n        class=\"list-item\">\n        <text>{{key}}</text>\n      </list-item>\n    </list-view>\n  </view>\n\n  <!-- #ifdef APP -->\n  <scroll-view style=\"flex:1\">\n    <!-- #endif -->\n    <view class=\"content nvue\">\n      <boolean-data :defaultValue=\"false\" title=\"设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发\"\n        @change=\"change_refresher_triggered_boolean\"></boolean-data>\n      <boolean-data :defaultValue=\"false\" title=\"开启下拉刷新\" @change=\"change_refresher_enabled_boolean\"></boolean-data>\n      <boolean-data :defaultValue=\"false\" title=\"是否在设置滚动条位置时使用滚动动画，设置false没有滚动动画\"\n        @change=\"change_scroll_with_animation_boolean\"></boolean-data>\n      <boolean-data :defaultValue=\"true\" title=\"控制是否出现滚动条\" @change=\"change_show_scrollbar_boolean\"></boolean-data>\n      <boolean-data :defaultValue=\"true\" title=\"控制是否回弹效果\" @change=\"change_rebound_boolean\"></boolean-data>\n      <boolean-data :defaultValue=\"true\" title=\"允许纵向滚动\" @change=\"change_scroll_y_boolean\"></boolean-data>\n      <boolean-data :defaultValue=\"false\" title=\"允许横向滚动\" @change=\"change_scroll_x_boolean\"></boolean-data>\n      <input-data defaultValue=\"50\" title=\"距顶部/左边多远时（单位px），触发 scrolltoupper 事件\" type=\"number\"\n        @confirm=\"confirm_upper_threshold_input\"></input-data>\n      <input-data defaultValue=\"50\" title=\"距底部/右边多远时（单位px），触发 scrolltolower 事件\" type=\"number\"\n        @confirm=\"confirm_lower_threshold_input\"></input-data>\n      <input-data defaultValue=\"0\" title=\"设置竖向滚动条位置\" type=\"number\" @confirm=\"confirm_scroll_top_input\"></input-data>\n      <input-data defaultValue=\"0\" title=\"设置横向滚动条位置\" type=\"number\" @confirm=\"confirm_scroll_left_input\"></input-data>\n      <input-data defaultValue=\"#FFF\" title=\"设置下拉刷新区域背景颜色\" type=\"text\"\n        @confirm=\"confirm_refresher_background_input\"></input-data>\n      <enum-data :items=\"size_enum\" title=\"通过id位置跳转\" @change=\"item_change_size_enum\"></enum-data>\n    </view>\n    <!-- #ifdef APP -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<style>\n  .main {\n    max-height: 500rpx;\n    padding: 10rpx 0;\n    border-bottom: 1px solid rgba(0, 0, 0, .06);\n    flex-direction: row;\n    justify-content: center;\n  }\n\n  .main .list-item {\n    width: 750rpx;\n    height: 480rpx;\n    border: 1px solid #666;\n    background-color: #66ccff;\n    align-items: center;\n    justify-content: center;\n  }\n</style>\n\n```","compatibility":"\n### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| list-view | 5.0 | x | 3.9+ | 9.0 | x | - |\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","children":"### 子组件 @children-tags \n - [list-item](#list-item)","reference":""},"navigator":{"name":"## navigator","description":"页面链接","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| target | String | - | 在哪个目标上发生跳转，默认当前应用 |\n| url | 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/master/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### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| navigator | 5.0 | √ | 3.9+ | 9.0 | √ | x |\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 | √ | 3.9+ | 9.0 | √ | x |\n| animation-duration | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n","children":"","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/navigator)\n"},"picker-view-column":{"name":"## picker-view-column","description":"仅可放置于 picker-view 中，其子节点未继承 picker-view 的选中框的高度，需要自己设置高度并居中","attrubute":"","event":"","example":"","compatibility":"\n### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| picker-view-column | 5.0 | √ | √ | 10.0 | √ | x |\n","children":"","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.net.cn/component/picker-view.html#picker-view-column)\n"},"picker-view":{"name":"## picker-view","description":"嵌入页面的滚动选择器","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| value | Array\\<Number> | - | picker-view-column 选择的第几项 |\n| indicator-style | CSSString | - | 设置选择器中间选中框的样式 |\n| mask-top-style | CSSString | - | 设置蒙层上半部分的样式 |\n| mask-bottom-style | 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##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | T | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### PickerViewChangeEventDetail\n\n##### 构造函数\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | Array\\<number\\> | 是 | - | - |\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | Array\\<number\\> | 是 | - | - |\n\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/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\t\t\tclickView() {\r\n\t\t\t\t\r\n\t\t\t},\r\n            bindChange(e : PickerViewChangeEvent) {\r\n                const val = e.detail.value\r\n                this.result = val\r\n                this.year = this.years[val[0]]\r\n                this.month = this.months[val[1]]\r\n                this.day = this.days[val[2]]\r\n            },\r\n            setValue() {\r\n                this.value = [0, 0, 0] as number[]\r\n            },\r\n            setValue1() {\r\n                this.value = [10, 10, 10] as number[]\r\n            },\r\n        }\r\n    }\r\n</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```","compatibility":"\n### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| picker-view | 5.0 | √ | √ | 10.0 | √ | x |\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 |\n","children":"### 子组件 @children-tags \n - [picker-view-column](#picker-view-column)","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/picker-view)\n"},"progress":{"name":"## progress","description":"进度条","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 | ColorString | - | 进度条颜色 （请使用 activeColor） |\n| activeColor | ColorString | #09BB07 | 已选择的进度条的颜色 |\n| backgroundColor | 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##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | T | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### ProgressActiveendEventDetail\n\n##### 构造函数\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | number | 是 | - | - |\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| curPercent | number | 是 | - | - |\n\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/pages/component/progress/progress.uvue) \n ```html\n<script>\r\nimport { type ItemType } from '@/components/enum-data/enum-data.vue'\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 nvue\">\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.progress-cancel {\r\n  margin-left: 40rpx;\r\n}\r\n\r\n.button {\r\n  margin-top: 20rpx;\r\n}\r\n</style>\r\n\n```","compatibility":"\n### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| progress | 5.0 | √ | √ | 10.0 | √ | x |\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 |\n","children":"","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/progress)\n"},"radio":{"name":"## radio","description":"单选项。在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 | ColorString | #007AFF | radio的颜色 |\n| backgroundColor | ColorString | #ffffff | radio默认的背景颜色 |\n| borderColor | ColorString | #d1d1d1 | radio默认的边框颜色 |\n| activeBackgroundColor | ColorString | #007AFF | radio选中时的背景颜色，优先级大于color属性 |\n| activeBorderColor | ColorString |  | radio选中时的边框颜色 |\n| iconColor | ColorString | #ffffff | radio的图标颜色 |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/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 nvue\">\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### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| radio | 5.0 | √ | √ | 10.0 | √ | x |\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 |\n","children":"","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/radio)\n"},"radio-group":{"name":"## radio-group","description":"单选组，内部由多个 radio 组成","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\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##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | T | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### RadioGroupChangeEventDetail\n\n##### 构造函数\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | string | 是 | - | - |\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | string | 是 | - | - |\n\n","example":"","compatibility":"\n### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| radio-group | 5.0 | √ | √ | 10.0 | √ | x |\n| @change | 5.0 | √ | √ | 10.0 | √ | x |\n","children":"### 子组件 @children-tags \n - [radio](#radio)","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/radio)\n"},"rich-text":{"name":"## rich-text","description":"富文本。可渲染文字样式、图片、超链接。支持部分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##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [RichTextItemClickEventdetail](#richtextitemclickeventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/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##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/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### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| rich-text | 5.0 | √ | 3.9+ | 9.0 | √ | - |\n| selectable | 5.0 | x | 3.91 | 9.0 | x | - |\n","children":"","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/rich-text)\n"},"scroll-view":{"name":"## scroll-view","description":"可滚动视图容器","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 | - | 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 |\n| scroll-with-animation | Boolean | false | 是否在设置滚动条位置时使用滚动动画，设置false没有滚动动画 |\n| refresher-enabled | Boolean | false | 开启下拉刷新，暂时不支持scroll-x = true横向刷新 |\n| refresher-threshold | Number | 45 | 设置下拉刷新阈值 |\n| refresher-max-drag-distance | Number | - | 设置下拉最大拖拽距离（单位px），默认是下拉刷新控件高度的2.5倍 |\n| refresher-default-style | String | black | 设置下拉刷新默认样式，支持设置 black \\| white \\| none， none 表示不使用默认样式 |\n| refresher-background | String | #FFF | 设置下拉刷新区域背景颜色 |\n| refresher-triggered | Boolean | false | 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发 |\n| show-scrollbar | Boolean | true | 控制是否出现滚动条 |\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| @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: [Event](/uni-app-x/component/common#event)) => void | - | 子元素滚动结束或意外终止时触发 |","event":"\n### 事件\n#### RefresherEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [RefresherEventdetail](#refreshereventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### RefresherEventdetail 属性值 @refreshereventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| dy | number | 是 | - | - |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### ScrollToUpperEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [ScrollToUpperEventdetail](#scrolltouppereventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### ScrollToUpperEventdetail 属性值 @scrolltouppereventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| direction | string | 是 | - |  滚动方向 top 或 left |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### ScrollToLowerEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [ScrollToLowerEventdetail](#scrolltolowereventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### ScrollToLowerEventdetail 属性值 @scrolltolowereventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| direction | string | 是 | - |  滚动方向 bottom 或 right |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### ScrollEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [ScrollEventdetail](#scrolleventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/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##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### StartNestedScrollEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| node | [Element](/uni-app-x/dom/element.md) | 是 | - |  开始滚动子节点对象 |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### NestedPreScrollEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| deltaX | number | 是 | - |  x轴滚动距离 |\n| deltaY | number | 是 | - |  y轴滚动距离 |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| consumed | (consumedX: number, consumedY: number) => void | 是 | - |  通知到子节点x,y轴滚动距离的消耗 |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/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 id=\"demo1\" class=\"scroll-view-item uni-bg-red\"><text class=\"text\">A</text></view>\r\n\t\t\t\t\t\t<view id=\"demo2\" class=\"scroll-view-item uni-bg-green\"><text class=\"text\">B</text></view>\r\n\t\t\t\t\t\t<view id=\"demo3\" 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 id=\"demo1\" class=\"scroll-view-item_H uni-bg-red\"><text class=\"text\">A</text></view>\r\n\t\t\t\t\t\t<view id=\"demo2\" class=\"scroll-view-item_H uni-bg-green\"><text class=\"text\">B</text></view>\r\n\t\t\t\t\t\t<view id=\"demo3\" 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 default-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 default-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 default-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 default-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### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| scroll-view | 5.0 | √ | 3.9+ | 9.0 | √ | - |\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| @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| @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 | - |\n","children":"","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/scroll-view)\n"},"slider":{"name":"## slider","description":"滑动选择器","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\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 | ColorString | - | slider 背景条的颜色（请使用 backgroundColor） |\n| activeColor | ColorString | #007aff | slider 滑块左侧已选择部分的线条颜色 |\n| backgroundColor | ColorString | #e9e9e9 | radio背景条的颜色 |\n| block-size | Number | 28 | radio滑块的大小，取值范围为 12 - 28 |\n| block-color | 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##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | T | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### SliderChangeEventDetail\n\n##### 构造函数\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | number | 是 | - | - |\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | number | 是 | - | - |\n\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/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 nvue\">\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### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| slider | 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 |\n","children":"","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/slider)\n"},"swiper-item":{"name":"## swiper-item","description":"swiper的唯一合法子组件。每个swiper-item代表一个滑块。宽高自动设置为100%","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| item-id | String | - | 该 swiper-item 的标识符 |","event":"","example":"","compatibility":"\n### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| swiper-item | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n| item-id | 5.0 | √ | 3.9+ | 9.0 | √ | x |\n","children":"","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.net.cn/component/swiper.html#swiper-item)\n"},"swiper":{"name":"## swiper","description":"滑块视图容器","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| indicator-dots | Boolean | false | 是否显示面板指示点 |\n| indicator-color | ColorString | rgba(0, 0, 0, .3) | 指示点颜色 |\n| indicator-active-color | 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| @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##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [SwiperChangeEventdetail](#swiperchangeeventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### SwiperChangeEventdetail 属性值 @swiperchangeeventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| current | number | 是 | - | - |\n| source | string | 是 | - | - |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### SwiperTransitionEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [SwiperTransitionEventdetail](#swipertransitioneventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### SwiperTransitionEventdetail 属性值 @swipertransitioneventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| dx | number | 是 | - | - |\n| dy | number | 是 | - | - |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### SwiperAnimationFinishEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [SwiperAnimationFinishEventdetail](#swiperanimationfinisheventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### SwiperAnimationFinishEventdetail 属性值 @swiperanimationfinisheventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| current | number | 是 | - | - |\n| source | string | 是 | - | - |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/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### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| swiper | 5.0 | √ | 3.9+ | 9.0 | √ | x |\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| @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 |\n","children":"### 子组件 @children-tags \n - [swiper-item](#swiper-item)","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/swiper)\n"},"switch":{"name":"## switch","description":"开关选择器","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| checked | Boolean | - | 是否选中 |\n| color | 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##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | T | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### SwitchChangeEventDetail\n\n##### 构造函数\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | boolean | 是 | - | - |\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | boolean | 是 | - | - |\n\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/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### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| switch | 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 |\n","children":"","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/switch)\n"},"text":{"name":"## text","description":"文本","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/master/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\">add line</button>\r\n                <button class=\"uni-btn\" type=\"warn\" :disabled=\"!canRemove\" @click=\"remove\">remove line</button>\n\t\t\t\t<button class=\"uni-btn\" type=\"primary\" @click=\"textProps\">更多属性示例</button>\r\n            </view>\r\n        </view>\r\n    </view>\r\n</template>\r\n<script lang=\"uts\">\r\n    export default {\r\n        data() {\r\n            return {\r\n                title: 'text',\r\n                texts: [\r\n                    'HBuilderX，轻巧、极速，极客编辑器',\r\n                    'uni-app x，终极跨平台方案',\r\n                    'uniCloud，js serverless云服务',\r\n\t\t\t\t\t'uts，大一统语言',\r\n\t\t\t\t\t'uniMPSdk，让你的App具备小程序能力',\r\n\t\t\t\t\t'uni-admin，开源、现成的全端管理后台',\r\n\t\t\t\t\t'uni-id，开源、全端的账户中心',\r\n\t\t\t\t\t'uni-pay，开源、云端一体、全平台的支付',\r\n\t\t\t\t\t'uni-ai，聚合ai能力',\r\n\t\t\t\t\t'uni-cms，开源、云端一体、全平台的内容管理平台',\r\n\t\t\t\t\t'uni-im，开源、云端一体、全平台的im即时消息',\r\n\t\t\t\t\t'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            },\n\t\t\ttextProps: function () {\n\t\t\t    uni.navigateTo({\n\t\t\t    \turl: '/pages/component/text/text-props'\n\t\t\t    })\n\t\t\t}\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;\n        text-align: center;\r\n    }\r\n</style>\n```","compatibility":"\n### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| text | 5.0 | √ | 3.9+ | 9.0 | √ | - |\n","children":"### 子组件 @children-tags \n - [text](#text)","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/text)\n"},"textarea":{"name":"## textarea","description":"多行输入框","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| value | String |  | 输入框的初始内容 |\n| placeholder | String |  | 输入框为空时占位符 |\n| placeholder-style | String |  | 指定 placeholder 的样式 |\n| placeholder-class | String |  | 指定 placeholder 的样式类 |\n| maxlength | Number | 140 | 最大输入长度，设置为 -1 的时候不限制最大长度 |\n| auto-focus | Boolean | false | 自动获取焦点 |\n| focus | Boolean | false | 获取焦点 |\n| cursor | Number | 0 | 指定focus时的光标位置 |\n| confirm-type | String | done | 设置键盘右下角按钮的文字 [confirm-type](#confirm-type-values) |\n| confirm-hold | Boolean | false | 点击键盘右下角按钮时是否保持键盘不收起 |\n| auto-height | Boolean | false | 是否自动增高，设置auto-height时，style.height不生效 |\n| cursor-spacing | Number | 0 | 指定光标与键盘的距离，单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 |\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 起支持 |\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#### InputConfirmEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [InputConfirmEventdetail](#inputconfirmeventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### InputConfirmEventdetail 属性值 @inputconfirmeventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | string | 是 | - |  输入框内容 |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### InputEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [InputEventdetail](#inputeventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/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##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### TextareaLineChangeEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [TextareaLineChangeEventdetail](#textarealinechangeeventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/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##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### TextareaBlurEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [TextareaBlurEventdetail](#textareablureventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### TextareaBlurEventdetail 属性值 @textareablureventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| value | string | 是 | - |  输入框内容 |\n| cursor | number | 是 | - |  选择区域的起始位置 |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### InputKeyboardHeightChangeEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [InputKeyboardHeightChangeEventdetail](#inputkeyboardheightchangeeventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### InputKeyboardHeightChangeEventdetail 属性值 @inputkeyboardheightchangeeventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| height | number | 是 | - |  键盘高度 |\n| duration | number | 是 | - |  持续时间 |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### TextareaFocusEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [TextareaFocusEventdetail](#textareafocuseventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### TextareaFocusEventdetail 属性值 @textareafocuseventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| height | number | 是 | - |  键盘高度 |\n| value | string | 是 | - |  输入框内容 |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/pages/component/textarea/textarea.uvue) \n ```html\n<script>\r\nimport { type ItemType } from '@/components/enum-data/enum-data.vue'\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\tconfirm_type_enum: [{\"value\":0,\"name\":\"send\"},{\"value\":1,\"name\":\"search\"},{\"value\":2,\"name\":\"next\"},{\"value\":3,\"name\":\"go\"},{\"value\":4,\"name\":\"done\"}] as ItemType[],\r\n\t\t\tconfirm_type_enum_current: 0,\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[],\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 },\r\n\t\tradio_change_confirm_type_enum(checked : number) { this.confirm_type_enum_current = checked },\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-type=\"confirm_type_enum[confirm_type_enum_current].name\"\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\"\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 nvue\">\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\" class=\"textarea-focus\"\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>\r\n      <enum-data class=\"textarea-confirm\"\r\n        :items=\"confirm_type_enum\"\r\n        title=\"设置键盘右下角按钮的文字\"\r\n        @change=\"radio_change_confirm_type_enum\"\r\n      ></enum-data>\r\n      <enum-data\r\n        :items=\"inputmode_enum\" class=\"textarea-input\"\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;\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</style>\r\n\n```","compatibility":"\n### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| textarea | 5.0 | √ | 3.9+ | 9.0 | √ | - |\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+ | - | - | - |\n","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/textarea)\n"},"video":{"name":"## video","description":"视频","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| loop | Boolean | false | 是否循环播放 |\n| src | String\\|TagVideoURIString | - | 视频资源地址 |\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](/uni-app-x/component/common#event)) => void | - | 当开始/继续播放时触发play事件 |\n| @pause | (event: [Event](/uni-app-x/component/common#event)) => void | - | 当暂停播放时，触发pause事件 |\n| @ended | (event: [Event](/uni-app-x/component/common#event)) => void | - | 当播放到视频末尾时触发ended事件 |\n| @timeupdate | (event: [Event](/uni-app-x/component/common#event)) => void | - | 播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次 |\n| @fullscreenchange | (event: [Event](/uni-app-x/component/common#event)) => void | - | 当视频进入和退出全屏是触发，event.detail = {fullScreen, direction}，direction取为 vertical 或 horizontal |\n| @waiting | (event: [Event](/uni-app-x/component/common#event)) => void | - | 视频出现缓冲时触发 |\n| @error | (event: [Event](/uni-app-x/component/common#event)) => void | - | 播放出错试触发事件 |\n| @progress | (event: [Event](/uni-app-x/component/common#event)) => void | - | 加载进度变化时触发，只支持一段加载。event.detail = {buffered}，百分比 |\n| @loadedmetadata | (event: [Event](/uni-app-x/component/common#event)) => void | - | 视频元数据加载完成时触发。event.detail = {width, height, duration} |\n\n#### objectFit @objectFit-values \n\n| 值名称 | 描述 |\n| :- | :- |\n| contain | 包含 |\n| fill | 填充 |\n| cover | 覆盖 |\n\n","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/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-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        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) {\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        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 : any) {\r\n        console.log(JSON.stringify(res));\r\n        this.isPlaying = true;\r\n        this.isPause = false;\r\n      },\r\n      onPause: function (res : any) {\r\n        console.log(JSON.stringify(res));\r\n        this.isPlaying = false;\r\n        this.isPause = true;\r\n      },\r\n      onEnded: function (res : any) {\r\n        console.log(JSON.stringify(res));\r\n      },\r\n      onTimeUpdate: function (_ : any) {\r\n        // console.log(JSON.stringify(res));\r\n      },\r\n      onFullScreenChange: function (res : any) {\r\n        console.log(JSON.stringify(res));\r\n        this.isFullScreen = !this.isFullScreen;\r\n      },\r\n      onWaiting: function (res : any) {\r\n        console.log(JSON.stringify(res));\r\n      },\r\n      onError: function (res : any) {\r\n        console.log(JSON.stringify(res));\r\n      },\r\n      onProgress: function (res : any) {\r\n        console.log(JSON.stringify(res));\r\n      },\r\n      onFullScreenClick: function (res : any) {\r\n        console.log(JSON.stringify(res));\r\n      },\r\n      onControlsToggle: function (res : any) {\r\n        console.log(JSON.stringify(res));\r\n      },\r\n      // 自动化测试\r\n      playTest: function () {\r\n        this.videoContext?.play();\r\n      },\r\n      pauseTest: function () {\r\n        this.videoContext?.pause();\r\n      },\r\n      requestFullScreenTest: function () {\r\n        const options : RequestFullScreenOptions = {\r\n          direction: -90\r\n        };\r\n        this.videoContext?.requestFullScreen(options);\r\n      },\r\n      exitFullScreenTest: function () {\r\n        this.videoContext?.exitFullScreen();\r\n      },\r\n      stopTest: function () {\r\n        this.videoContext?.stop();\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### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| video | 5.0 | √ | 3.9+ | 9.0 | √ | - |\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 | - |\n","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/video)\n"},"view":{"name":"## view","description":"基本视图容器","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| hover-class | String | none | 指定按下去的样式类。当 hover-class=\"none\" 时，没有点击态效果 |\n| hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态(祖先节点：指根节点到该节点路径上的所有节点都是这个节点的祖先节点) |\n| hover-start-time | Number | 50 | 按住后多久出现点击态，单位毫秒 |\n| hover-stay-time | Number | 400 | 手指松开后点击态保留时间，单位毫秒 |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/pages/component/view/view.uvue) \n ```html\n<template>\r\n  <page-head title=\"view\"></page-head>\n  <view class=\"main\" :hover-class=\"hover_class ? 'is-parent-hover' : 'none'\">\n    <view class=\"test-view\" :hover-class=\"hover_class ? 'is-hover' : 'none'\" :hover-stop-propagation=\"stop_propagation\" :hover-start-time=\"start_time\" :hover-stay-time=\"stay_time\">\n    </view>\n  </view>\n  <!-- #ifdef APP -->\n  <scroll-view style=\"flex: 1\">\n    <!-- #endif -->\n    <view class=\"content\">\n      <boolean-data :defaultValue=\"false\" title=\"是否指定按下去的样式类\" @change=\"change_hover_class_boolean\"></boolean-data>\n      <boolean-data :defaultValue=\"false\" title=\"是否阻止本节点的祖先节点出现点击态\" @change=\"change_stop_propagation_boolean\"></boolean-data>\n      <enum-data :items=\"start_time_enum\" title=\"按住后多久出现点击态\" @change=\"radio_change_start_time_enum\"></enum-data>\n      <enum-data :items=\"stay_time_enum\" title=\"手指松开后点击态保留时间\" @change=\"radio_change_stay_time_enum\"></enum-data>\n      <view class=\"uni-padding-wrap uni-common-mt uni-common-mb\">\n        <button class=\"uni-common-mt\" @click=\"goGeneralAttribute('/pages/component/view/view-draw')\">DrawableContext</button>\n      </view>\n    </view>\n    <!-- #ifdef APP -->\n  </scroll-view>\n  <!-- #endif -->\r\n</template>\r\n<script>\nimport { type ItemType } from '@/components/enum-data/enum-data.vue'\r\nexport default {\n  data() {\n    return {\n      hover_class: false,\n      stop_propagation: false,\n      start_time: 50,\n      stay_time: 400,\n      start_time_enum: [{ \"value\": 50, \"name\": \"50毫秒\" }, { \"value\": 200, \"name\": \"200毫秒\" }] as ItemType[],\n      stay_time_enum: [{ \"value\": 400, \"name\": \"400毫秒\" }, { \"value\": 200, \"name\": \"200毫秒\" }] as ItemType[]\n    }\n  },\r\n  methods: {\n    change_hover_class_boolean(checked : boolean) {\n      this.hover_class = checked\n    },\n    change_stop_propagation_boolean(checked : boolean) {\n      this.stop_propagation = checked\n    },\n    radio_change_start_time_enum(time : number) {\n      this.start_time = time\n    },\n    radio_change_stay_time_enum(time : number) {\n      this.stay_time = time\n    },\r\n    goGeneralAttribute(path: string) {\r\n      uni.navigateTo({\r\n        url: path,\r\n      })\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.test-view {\n  height: 200px;\n  width: 200px;\n  background-color: white;\n}\r\n.text {\r\n  color: #777;\r\n  font-size: 26rpx;\r\n}\n.is-hover {\r\n    background-color: #179b16;\r\n}\n\n.is-parent-hover {\r\n    background-color: #aa0000;\r\n}\r\n</style>\r\n\n```","compatibility":"\n### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| view | 5.0 | √ | 3.9+ | - | - | - |\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+ | - | - | - |\n","children":"","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/view)\n"},"web-view":{"name":"## web-view","description":"承载网页的容器","attrubute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| src | 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 = { errMsg } |\n| @loaded | (event: [WebViewLoadedEvent](#webviewloadedevent)) => void | - | 网页加载完成后触发。 |\n| @loading | (event: [WebViewLoadingEvent](#webviewloadingevent)) => void | - | 网页加载中触发。 |","event":"\n### 事件\n#### WebViewMessageEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [WebViewMessageEventdetail](#webviewmessageeventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### WebViewMessageEventdetail 属性值 @webviewmessageeventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| data | Map\\<string, any> | 否 | - |  消息包含的数据 |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### WebViewErrorEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| detail | [WebViewErrorEventdetail](#webviewerroreventdetail-values) | 是 | - | - |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n###### WebViewErrorEventdetail 属性值 @webviewerroreventdetail-values \n\n| 名称 | 类型 | 必备 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| errMsg | string | 是 | - |  错误信息 |\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### WebViewLoadedEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n\n#### WebViewLoadingEvent\n\n##### 属性值\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| type | string | 是 | - |  事件类型 |\n| target | [Element](/uni-app-x/dom/element.md) | 是 | - |  触发事件的组件 |\n| currentTarget | [Element](/uni-app-x/dom/element.md) | 是 | - |  当前组件 |\n| timeStamp | number | 是 | - |  事件发生时的时间戳 |\n\n\n##### 方法\n| 名称 | 类型 | 必填 | 默认值 | 描述 |\n| :- | :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | - |  阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - |  阻止当前事件的默认行为 |\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/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\">\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        <view class=\"uni-flex-item\">\r\n          <button type=\"primary\" @click=\"back\">后退</button>\r\n        </view>\r\n        <view class=\"uni-btn-ml uni-flex-item\">\r\n          <button type=\"primary\" @click=\"forward\">前进</button>\r\n        </view>\r\n      </view>\r\n      <view class=\"uni-row uni-btn-v\">\r\n        <view class=\"uni-flex-item\">\r\n          <button type=\"primary\" @click=\"reload\">重新加载</button>\r\n        </view>\r\n        <view class=\"uni-btn-ml uni-flex-item\">\r\n          <button type=\"primary\" @click=\"stop\">停止加载</button>\r\n        </view>\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.detail));\r\n      },\r\n      error(event : WebViewErrorEvent) {\r\n        this.loadError = true\r\n        console.log(JSON.stringify(event.detail));\r\n      },\r\n      loading(event : WebViewLoadingEvent) {\r\n        console.log(JSON.stringify(event.type));\r\n      },\r\n      loaded(event : WebViewLoadedEvent) {\r\n        console.log(JSON.stringify(event.type));\r\n      },\r\n      confirm(event : InputConfirmEvent) {\r\n        console.log(event.detail.value);\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### 兼容性\n|  | 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x |\n| :- | :- | :- | :- | :- | :- | :- |\n| web-view | 5.0 | √ | 3.9+ | 9.0 | √ | - |\n","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [Reference](https://uniapp.dcloud.io/component/web-view)\n"}}
\ No newline at end of file