{"animation-view":{"name":"## animation-view","description":"Lottie 动画\n> 本 Component 是 uni ext component，需下载插件：[animation-view](https://ext.dcloud.net.cn/plugin?name=uni-animation-view)\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| path | string | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"3.9\",\"4.11\"]]}' /> | 动画资源地址，目前只支持绝对路径 |\n| loop | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"3.9\",\"4.11\"]]}' /> | 动画是否循环播放 |\n| autoplay | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"3.9\",\"4.11\"]]}' /> | 动画是否自动播放 |\n| action | string | \"stop\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"3.9\",\"4.11\"]]}' /> | 动画操作，可取值 play、pause、stop |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| play | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"3.9\",\"4.11\"]]}' /> | 播放 |\n@| pause | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"3.9\",\"4.11\"]]}' /> | 暂停 |\n@| stop | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"3.9\",\"4.11\"]]}' /> | 停止 |\n| hidden | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"3.9\",\"4.11\"]]}' /> | 是否隐藏动画 |\n| @ended | (event: [UniEvent](/component/common#unievent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"3.9\",\"4.11\"]]}' /> | - |","event":"","example":"","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| - | 3.9 | 4.11 |\n","children":"","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/animation-view)\n- [插件市场](https://ext.dcloud.net.cn/plugin?id=10674)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/animation-view.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.animation-view)\n"},"button":{"name":"## button","description":"> 组件类型：UniButtonElement \n\n 按钮","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| disabled | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否禁用 |\n| hover-class | string([string.ClassString](/uts/data-type.md#ide-string)) | \"button-hover\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 指定按下去的样式类。当 hover-class=\"none\" 时，没有点击态效果 |\n| hover-start-time | number | 20 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 按住后多久出现点击态，单位毫秒 |\n| hover-stay-time | number | 70 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 手指松开后点击态保留时间，单位毫秒 |\n| size | string | \"default\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 按钮的大小 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| default | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 默认大小 |\n@| mini | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 小尺寸 |\n| type | string | \"default\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 按钮的样式类型 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| default | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 白色 |\n@| primary | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 蓝色 |\n@| warn | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 红色 |\n| plain | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 按钮是否镂空，背景色透明 |\n| loading | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 名称前是否带 loading 图标 |\n| form-type | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| submit | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 提交表单 |\n@| reset | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 重置表单 |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/button/button.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/button/button\n>Template\n```vue\n\r\n\r\n<template>\r\n <view class=\"main\">\r\n <button id=\"testButton\" :disabled=\"disabled_boolean\" :size=\"size_enum[size_enum_current].name\"\r\n :type=\"type_enum[type_enum_current].name\" :plain=\"plain_boolean\" @click=\"button_click\"\r\n @touchstart=\"button_touchstart\" @touchmove=\"button_touchmove\" @touchcancel=\"button_touchcancel\"\r\n @touchend=\"button_touchend\" @tap=\"button_tap\" @longpress=\"button_longpress\" class=\"btn\"\r\n :class=\"default_style ? (disabled_boolean ? 'custom-btn-disable' : 'custom-btn') : ''\"\r\n :hover-class=\"default_style ? 'is-hover' : 'button-hover'\">\r\n {{ text }}\r\n </button>\r\n </view>\r\n <scroll-view style=\"flex: 1\">\r\n <view class=\"content\">\r\n <boolean-data :defaultValue=\"false\" title=\"按钮是否镂空，背景色透明\" @change=\"change_plain_boolean\"></boolean-data>\r\n <boolean-data :defaultValue=\"false\" title=\"是否禁用\" @change=\"change_disabled_boolean\"></boolean-data>\r\n <boolean-data :defaultValue=\"false\" title=\"修改默认样式和点击效果(高优先)\" @change=\"change_default_style\"></boolean-data>\r\n <enum-data :items=\"size_enum\" title=\"按钮的大小\" @change=\"radio_change_size_enum\"></enum-data>\r\n <enum-data :items=\"type_enum\" title=\"按钮的类型\" @change=\"radio_change_type_enum\"></enum-data>\r\n <input-data :defaultValue=\"text\" title=\"按钮的文案\" type=\"text\" @confirm=\"confirm_text_input\"></input-data>\r\n <view style=\"height: 10px;\"></view>\r\n <button @click=\"navigateToChild\">更多示例</button>\r\n </view>\r\n </scroll-view>\r\n</template>\r\n\r\n<style>\r\n .main {\r\n padding: 5px 0;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.06);\r\n flex-direction: row;\r\n justify-content: center;\r\n }\r\n\r\n .main .list-item {\r\n width: 100%;\r\n height: 100px;\r\n border: 1px solid #666;\r\n }\r\n\r\n .custom-btn {\r\n color: #ffffff;\r\n background-color: #1AAD19;\r\n border-color: #1AAD19;\r\n }\r\n\r\n .custom-btn-disable {\r\n color: rgba(255, 255, 255, 0.7);\r\n background-color: rgba(26, 173, 25, 0.7);\r\n border-color: rgba(26, 173, 25, 0.7);\r\n }\r\n\r\n .is-hover {\r\n color: rgba(255, 255, 255, 0.6);\r\n background-color: #179b16;\r\n border-color: #179b16;\r\n }\r\n\r\n .button-hover {\r\n color: rgba(0, 0, 0, 0.6);\r\n background-color: #dedede;\r\n }\r\n</style>\n\n```\n>Script\n```uts\n\r\n import { ItemType } from '@/components/enum-data/enum-data'\r\n export default {\r\n data() {\r\n return {\r\n plain_boolean: false,\r\n disabled_boolean: false,\r\n default_style: false,\r\n size_enum: [{ \"value\": 0, \"name\": \"default\" }, { \"value\": 1, \"name\": \"mini\" }] as ItemType[],\r\n size_enum_current: 0,\r\n type_enum: [{ \"value\": 0, \"name\": \"default\" }, { \"value\": 1, \"name\": \"primary\" }, { \"value\": 2, \"name\": \"warn\" }] as ItemType[],\r\n type_enum_current: 0,\r\n count: 0,\r\n text: ''\r\n }\r\n },\n onReady() {\n this.text = 'uni-app-x'\n },\r\n methods: {\r\n button_click() {\r\n console.log(\"组件被点击时触发\")\r\n this.count++\r\n },\r\n button_touchstart() { console.log(\"手指触摸动作开始\") },\r\n button_touchmove() { console.log(\"手指触摸后移动\") },\r\n button_touchcancel() { console.log(\"手指触摸动作被打断，如来电提醒，弹窗\") },\r\n button_touchend() { console.log(\"手指触摸动作结束\") },\r\n button_tap() { console.log(\"手指触摸后马上离开\") },\r\n button_longpress() { console.log(\"如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。\") },\r\n change_plain_boolean(checked : boolean) { this.plain_boolean = checked },\r\n change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },\r\n change_default_style(checked : boolean) { this.default_style = checked },\r\n radio_change_size_enum(checked : number) { this.size_enum_current = checked },\r\n radio_change_type_enum(checked : number) { this.type_enum_current = checked },\r\n confirm_text_input(value : string) { this.text = value },\r\n navigateToChild() {\r\n uni.navigateTo({\r\n url: 'buttonstatus',\r\n })\r\n },\r\n //用于自动化测试\r\n checkUniButtonElement() : boolean {\r\n const button = uni.getElementById(\"testButton\")\r\n if (button != null && button instanceof UniButtonElement) {\r\n return true\r\n }\r\n return false\r\n }\r\n }\r\n }\r\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/button)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/button.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.button)\n"},"canvas":{"name":"## canvas","description":"> 组件类型：UniCanvasElement \n\n 画布","attribute":"","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/canvas/canvas.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/canvas/canvas\n>Template\n```vue\n<template>\r\n <view class=\"page\" id=\"page-canvas\">\r\n <canvas id=\"canvas\" class=\"canvas-element\"></canvas>\r\n <scroll-view class=\"scroll-view\">\r\n <view class=\"grid-view\">\r\n <view class=\"grid-item\" v-for=\"(name, index) in names\" :key=\"index\">\r\n <button class=\"canvas-drawing-button\" @click=\"handleCanvasButton(name)\">{{name}}</button>\r\n </view>\r\n </view>\r\n </scroll-view>\r\n </view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n .page {\r\n flex: 1;\r\n height: 100%;\r\n overflow: hidden;\r\n }\r\n\r\n .scroll-view {\r\n flex: 1;\r\n padding-bottom: 50px;\r\n }\r\n\r\n .canvas-element {\r\n width: 100%;\r\n height: 250px;\r\n background-color: #ffffff;\r\n }\r\n\r\n .grid-view {\r\n padding: 10px;\r\n flex-direction: row;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .grid-item {\r\n width: 50%;\r\n padding: 5px;\r\n }\r\n\r\n .btn-to-image {\r\n margin: 10px;\r\n }\r\n</style>\n\n```\n>Script\n```uts\n\r\n function hidpi(canvas : UniCanvasElement) {\r\n const context = canvas.getContext(\"2d\")!;\r\n const dpr = uni.getSystemInfoSync().pixelRatio;\r\n canvas.width = canvas.offsetWidth * dpr;\r\n canvas.height = canvas.offsetHeight * dpr;\r\n context.scale(dpr, dpr);\r\n }\r\n\r\n export default {\r\n data() {\r\n const API_PATH = [\"arc\", \"arcTo\", \"bezierCurveTo\", \"quadraticCurve\", \"moveTo\", \"lineTo\", \"rect\", \"clip\", \"pattern\"]\r\n const API_DRAW = [\"stroke\", \"strokeRect\", \"strokeText\", \"fill\", \"fillRect\", \"fillText\", \"drawImage\", \"drawImageLocal\", \"clearRect\"]\r\n const API_STATE = [\"beginPath\", \"closePath\", \"restore\", \"reset\", \"setTransform\", \"transform\", \"rotate\", \"resetTransform\", \"save\", \"scale\", \"translate\"]\r\n const API_PROPERTIES = [\"setLineCap\", \"setLineJoin\", \"setLineWidth\", \"setMiterLimit\", \"setFillStyle\", \"setStrokeStyle\", \"setGlobalAlpha\", \"lineDash\", \"linearGradient\", \"radialGradient\", \"textAlign\"]\r\n return {\r\n title: 'Context2D',\r\n names: [...API_PATH, ...API_DRAW, ...API_STATE, ...API_PROPERTIES, \"measureText\"] as string[],\r\n canvasContext: null as CanvasRenderingContext2D | null,\r\n canvasWidth: 0,\r\n canvasHeight: 0,\r\n image: null as Image | null,\r\n }\r\n },\r\n onReady() {\r\n let canvas = uni.getElementById(\"canvas\") as UniCanvasElement\r\n this.canvasContext = canvas.getContext(\"2d\");\r\n hidpi(canvas);\r\n this.canvasWidth = this.canvasContext!.canvas.width;\r\n this.canvasHeight = this.canvasContext!.canvas.height;\r\n },\r\n methods: {\r\n handleCanvasButton(name : string) {\r\n switch (name) {\r\n case \"arc\":\r\n this.arc();\r\n break;\r\n case \"arcTo\":\r\n this.arcTo();\r\n break;\r\n case \"beginPath\":\r\n this.beginPath();\r\n break;\r\n case \"bezierCurveTo\":\r\n this.bezierCurveTo();\r\n break;\r\n case \"clearRect\":\r\n this.clearRect();\r\n break;\r\n case \"clip\":\r\n this.clip();\r\n break;\r\n case \"closePath\":\r\n this.closePath();\r\n break;\r\n case \"pattern\":\r\n this.pattern()\r\n break;\r\n case \"linearGradient\":\r\n this.createLinearGradient();\r\n break;\r\n case \"radialGradient\":\r\n this.createRadialGradient();\r\n break;\r\n case \"fill\":\r\n this.fill();\r\n break;\r\n case \"fillRect\":\r\n this.fillRect();\r\n break;\r\n case \"fillText\":\r\n this.fillText();\r\n break;\r\n case \"lineTo\":\r\n this.lineTo();\r\n break;\r\n case \"moveTo\":\r\n this.moveTo();\r\n break;\r\n case \"quadraticCurve\":\r\n this.quadraticCurveTo();\r\n break;\r\n case \"rect\":\r\n this.rect();\r\n break;\r\n case \"reset\":\r\n this.reset();\r\n break;\r\n case \"resetTransform\":\r\n this.resetTransform();\r\n break;\r\n case \"restore\":\r\n this.restore();\r\n break;\r\n case \"rotate\":\r\n this.rotate();\r\n break;\r\n case \"save\":\r\n this.save();\r\n break;\r\n case \"scale\":\r\n this.scale();\r\n break;\r\n case \"setTransform\":\r\n this.setTransform();\r\n break;\r\n case \"stroke\":\r\n this.stroke();\r\n break;\r\n case \"strokeRect\":\r\n this.strokeRect();\r\n break;\r\n case \"strokeText\":\r\n this.strokeText();\r\n break;\r\n case \"transform\":\r\n this.transform();\r\n break;\r\n case \"translate\":\r\n this.translate();\r\n break;\r\n case \"drawImageLocal\":\r\n this.drawImageLocal()\r\n break;\r\n case \"drawImage\":\r\n this.drawImage();\r\n break;\r\n case \"measureText\":\r\n this.measureText();\r\n break;\r\n case \"setFillStyle\":\r\n this.setFillStyle();\r\n break;\r\n case \"setStrokeStyle\":\r\n this.setStrokeStyle();\r\n break;\r\n case \"setGlobalAlpha\":\r\n this.setGlobalAlpha();\r\n break;\r\n case \"setFontSize\":\r\n this.setFontSize();\r\n break;\r\n case \"setLineCap\":\r\n this.setLineCap();\r\n break;\r\n case \"setLineJoin\":\r\n this.setLineJoin();\r\n break;\r\n case \"lineDash\":\r\n this.lineDash();\r\n break;\r\n case \"setLineWidth\":\r\n this.setLineWidth();\r\n break;\r\n case \"setMiterLimit\":\r\n this.setMiterLimit();\r\n break;\r\n case \"textAlign\":\r\n this.textAlign();\r\n default:\r\n break;\r\n }\r\n },\r\n arc() {\r\n const context = this.canvasContext!\r\n\r\n context.save()\r\n context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)\r\n context.beginPath()\r\n context.lineWidth = 2\r\n context.arc(75, 75, 50, 0, Math.PI * 2, true)\r\n context.moveTo(110, 75)\r\n context.arc(75, 75, 35, 0, Math.PI, false)\r\n context.moveTo(65, 65)\r\n context.arc(60, 65, 5, 0, Math.PI * 2, true)\r\n context.moveTo(95, 65)\r\n context.arc(90, 65, 5, 0, Math.PI * 2, true)\r\n context.stroke()\r\n\r\n context.restore()\r\n },\r\n arcTo() {\r\n const context = this.canvasContext!\r\n\r\n context.save()\r\n context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)\r\n context.beginPath()\r\n context.moveTo(150, 20)\r\n context.arcTo(150, 100, 50, 20, 30)\r\n context.stroke()\r\n\r\n context.fillStyle = \"blue\"\r\n // base point\r\n context.fillRect(150, 20, 10, 10)\r\n\r\n context.fillStyle = \"red\"\r\n // control point one\r\n context.fillRect(150, 100, 10, 10)\r\n // control point two\r\n context.fillRect(50, 20, 10, 10)\r\n //\r\n context.setLineDash([5, 5])\r\n context.moveTo(150, 20)\r\n context.lineTo(150, 100)\r\n context.lineTo(50, 20)\r\n context.stroke()\r\n context.beginPath()\r\n context.arc(120, 38, 30, 0, 2 * Math.PI, true)\r\n context.stroke()\r\n\r\n context.restore()\r\n },\r\n beginPath() {\r\n const context = this.canvasContext!\r\n\r\n context.save()\r\n context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)\r\n // First path\r\n context.beginPath()\r\n context.strokeStyle = \"blue\"\r\n context.moveTo(20, 20)\r\n context.lineTo(200, 20)\r\n context.stroke()\r\n\r\n // Second path\r\n context.beginPath()\r\n context.strokeStyle = \"green\"\r\n context.moveTo(20, 20)\r\n context.lineTo(120, 120)\r\n context.stroke()\r\n\r\n context.restore()\r\n },\r\n textAlign() {\r\n const context = this.canvasContext!\r\n\r\n context.save()\r\n context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)\r\n context.beginPath()\r\n context.moveTo(150, 0)\r\n context.lineTo(150, 150)\r\n context.stroke()\r\n\r\n context.font = \"30px serif\"\r\n\r\n context.textAlign = \"left\"\r\n context.fillText(\"left-aligned\", 150, 40)\r\n\r\n context.textAlign = \"center\"\r\n context.fillText(\"center-aligned\", 150, 85)\r\n\r\n context.textAlign = \"right\"\r\n context.fillText(\"right-aligned\", 150, 130)\r\n\r\n context.restore()\r\n },\r\n bezierCurveTo() {\r\n const context = this.canvasContext!\r\n\r\n context.save()\r\n context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)\r\n context.beginPath()\r\n context.moveTo(50, 20)\r\n context.bezierCurveTo(230, 30, 150, 60, 50, 100)\r\n context.stroke()\r\n\r\n context.fillStyle = \"blue\"\r\n // start point\r\n context.fillRect(50, 20, 10, 10)\r\n // end point\r\n context.fillRect(50, 100, 10, 10)\r\n\r\n context.fillStyle = \"red\"\r\n // control point one\r\n context.fillRect(230, 30, 10, 10)\r\n // control point two\r\n context.fillRect(150, 70, 10, 10)\r\n\r\n context.restore()\r\n },\r\n clearRect() {\r\n const context = this.canvasContext!\r\n\r\n context.save()\r\n context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)\r\n // 绘制黄色背景\r\n context.beginPath()\r\n context.fillStyle = \"#ff6\"\r\n context.fillRect(0, 0, 300, 150)\r\n\r\n // 绘制蓝色三角形\r\n context.beginPath()\r\n context.fillStyle = \"blue\"\r\n context.moveTo(20, 20)\r\n context.lineTo(180, 20)\r\n context.lineTo(130, 130)\r\n context.closePath()\r\n context.fill()\r\n\r\n // 清除一部分画布\r\n context.clearRect(10, 10, 120, 100)\r\n\r\n context.restore()\r\n },\r\n clip() {\r\n const context = this.canvasContext!\r\n\r\n context.save()\r\n context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)\r\n // Create circular clipping region\r\n context.beginPath();\r\n context.arc(100, 75, 50, 0, Math.PI * 2, true)\r\n context.clip()\r\n\r\n // Draw stuff that gets clipped\r\n context.fillStyle = \"blue\"\r\n context.fillRect(0, 0, 300, 150)\r\n context.fillStyle = \"orange\"\r\n context.fillRect(0, 0, 100, 100)\r\n\r\n context.restore()\r\n },\r\n closePath() {\r\n const context = this.canvasContext!\r\n\r\n context.save()\r\n context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)\r\n context.beginPath()\r\n context.lineWidth = 10\r\n context.moveTo(20, 20)\r\n context.lineTo(20, 100)\r\n context.lineTo(70, 100)\r\n context.closePath()\r\n context.stroke()\r\n\r\n context.restore()\r\n },\r\n pattern() {\r\n const context = this.canvasContext!\r\n\r\n this.image = new Image(100, 100)\r\n this.image!.src = 'https://web-ext-storage.dcloud.net.cn/uni-app-x/hello-uniappx-qrcode.png';\r\n // this.image!.src = 'https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createPattern/canvas_createpattern.png';\r\n // Only use the image after it's loaded\r\n this.image!.onload = () => {\r\n context.save()\r\n context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)\r\n const pattern = context.createPattern(this.image!, \"repeat\")\r\n context.fillStyle = pattern\r\n context.fillRect(0, 0, 64, 64)\r\n context.restore()\r\n };\r\n },\r\n createLinearGradient() {\r\n const context = this.canvasContext!\r\n\r\n context.save()\r\n context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)\r\n // Create a linear gradient\r\n // The start gradient point is at x=20, y=0\r\n // The end gradient point is at x=220, y=0\r\n const gradient = context.createLinearGradient(20, 0, 220, 0)\r\n\r\n // Add three color stops\r\n gradient.addColorStop(0, \"green\")\r\n gradient.addColorStop(0.5, \"cyan\")\r\n gradient.addColorStop(1, \"green\")\r\n\r\n // Set the fill style and draw a rectangle\r\n context.fillStyle = gradient\r\n context.fillRect(20, 20, 200, 100)\r\n\r\n context.restore()\r\n },\r\n createRadialGradient() {\r\n const context = this.canvasContext!\r\n\r\n context.save()\r\n context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)\r\n // Create a radial gradient\r\n // The inner circle is at x=110, y=90, with radius=30\r\n // The outer circle is at x=100, y=100, with radius=70\r\n const gradient = context.createRadialGradient(110, 90, 30, 100, 100, 70)\r\n\r\n // Add three color stops\r\n gradient.addColorStop(0, \"pink\")\r\n gradient.addColorStop(0.9, \"white\")\r\n gradient.addColorStop(1, \"green\")\r\n\r\n // Set the fill style and draw a rectangle\r\n context.fillStyle = gradient\r\n context.fillRect(20, 20, 160, 160)\r\n\r\n context.restore()\r\n },\r\n fill() {\r\n const context = this.canvasContext!\r\n\r\n context.save()\r\n context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)\r\n context.beginPath()\r\n context.rect(20, 20, 150, 100)\r\n context.strokeStyle = '#00ff00'\r\n context.fill()\r\n\r\n context.restore()\r\n },\r\n fillRect() {\r\n const context = this.canvasContext!\r\n\r\n context.save()\r\n context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)\r\n context.fillStyle = \"green\"\r\n context.fillRect(20, 10, 150, 100)\r\n\r\n context.restore()\r\n },\r\n fillText() {\r\n const context = this.canvasContext!\r\n\r\n context.save()\r\n context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)\r\n console.log(\"fillText\")\r\n context.strokeStyle = '#ff0000'\r\n\r\n context.beginPath()\r\n context.moveTo(0, 10)\r\n context.lineTo(300, 10)\r\n context.stroke()\r\n // context.save()\r\n // context.scale(1.5, 1.5)\r\n // context.translate(20, 20)\r\n // context.setFontSize(10)\r\n context.fillText('Hello World', 0, 30, 300)\r\n // context.setFontSize(20)\r\n context.fillText('Hello World', 100, 30, 300)\r\n\r\n // context.restore()\r\n\r\n context.beginPath()\r\n context.moveTo(0, 30)\r\n context.lineTo(300, 30)\r\n context.stroke()\r\n\r\n context.restore()\r\n },\r\n moveTo() {\r\n const context = this.canvasContext!\r\n\r\n context.save()\r\n context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)\r\n context.beginPath()\r\n context.moveTo(0, 0)\r\n context.lineTo(300, 150)\r\n context.stroke()\r\n\r\n context.restore()\r\n },\r\n lineTo() {\r\n const context = this.canvasContext!\r\n\r\n context.save()\r\n context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)\r\n context.beginPath()\r\n context.moveTo(20, 20)\r\n context.lineTo(20, 100)\r\n context.lineTo(70, 100)\r\n context.stroke()\r\n\r\n context.restore()\r\n },\r\n stroke() {\r\n const context = this.canvasContext!\r\n\r\n context.save()\r\n context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)\r\n context.beginPath()\r\n context.moveTo(20, 20)\r\n context.lineTo(20, 100)\r\n context.lineTo(70, 100)\r\n context.strokeStyle = '#00ff00'\r\n context.stroke()\r\n\r\n context.restore()\r\n },\r\n strokeRect() {\r\n const context = this.canvasContext!\r\n\r\n context.save()\r\n context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)\r\n context.strokeStyle = \"green\"\r\n context.strokeRect(20, 10, 160, 100)\r\n\r\n context.restore()\r\n },\r\n strokeText() {\r\n const context = this.canvasContext!\r\n\r\n context.save()\r\n context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)\r\n context.font = \"10px serif\"\r\n context.strokeText(\"Hello world\", 50, 90)\r\n\r\n context.font = \"30px serif\"\r\n context.strokeStyle = \"blue\"\r\n context.strokeText(\"Hello world\", 50, 100)\r\n\r\n context.restore()\r\n },\r\n setTransform() {\r\n },\r\n rotate() {\r\n const context = this.canvasContext!\r\n\r\n context.save()\r\n context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)\r\n // Point of transform origin\r\n context.arc(0, 0, 5, 0, 2 * Math.PI, true)\r\n context.fillStyle = \"blue\"\r\n context.fill()\r\n\r\n // Non-rotated rectangle\r\n context.fillStyle = \"gray\"\r\n context.fillRect(100, 0, 80, 20)\r\n // Rotated rectangle\r\n context.rotate((45 * Math.PI) / 180)\r\n context.fillStyle = \"red\"\r\n context.fillRect(100, 0, 80, 20)\r\n\r\n // Reset transformation matrix to the identity matrix\r\n context.setTransform(1, 0, 0, 1, 0, 0)\r\n\r\n context.restore()\r\n },\r\n scale() {\r\n const context = this.canvasContext!\r\n\r\n context.save()\r\n context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)\r\n // Scaled rectangle\r\n context.scale(9, 3)\r\n context.fillStyle = \"red\"\r\n context.fillRect(10, 10, 8, 20)\r\n\r\n // Reset current transformation matrix to the identity matrix\r\n context.setTransform(1, 0, 0, 1, 0, 0)\r\n\r\n // Non-scaled rectangle\r\n context.fillStyle = \"gray\"\r\n context.fillRect(10, 10, 8, 20)\r\n\r\n context.restore()\r\n },\r\n reset() {\r\n const context = this.canvasContext!\r\n\r\n // Set line width\r\n context.lineWidth = 10\r\n context.strokeStyle = '#00ff00'\r\n // Stroke rect outline\r\n context.strokeRect(50, 50, 150, 100)\r\n\r\n // Create filled text\r\n context.font = \"50px serif\";\r\n context.fillText(\"Rect!\", 70, 110)\r\n\r\n\r\n context.lineWidth = 5\r\n\r\n // Stroke out circle\r\n context.beginPath();\r\n context.arc(300, 100, 50, 0, 2 * Math.PI)\r\n context.stroke();\r\n\r\n // Create filled text\r\n context.font = \"25px sans-serif\"\r\n context.fillText(\"Circle!\", 265, 100)\r\n context.reset()\r\n\r\n hidpi(uni.getElementById(\"canvas\") as UniCanvasElement)\r\n },\r\n translate() {\r\n const context = this.canvasContext!\r\n\r\n context.save()\r\n context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)\r\n // Moved square\r\n context.translate(110, 30)\r\n context.fillStyle = \"red\"\r\n context.fillRect(0, 0, 80, 80)\r\n\r\n // Reset current transformation matrix to the identity matrix\r\n context.setTransform(1, 0, 0, 1, 0, 0)\r\n\r\n // Unmoved square\r\n context.fillStyle = \"gray\"\r\n context.fillRect(0, 0, 80, 80)\r\n\r\n context.restore()\r\n },\r\n save() {\r\n const context = this.canvasContext!\r\n\r\n context.save()\r\n context.beginPath()\r\n context.strokeStyle = '#00ff00'\r\n context.scale(2, 2)\r\n context.strokeStyle = '#ff0000'\r\n context.rect(0, 0, 100, 100)\r\n context.stroke()\r\n context.restore()\r\n\r\n context.save()\r\n context.rect(0, 0, 50, 50)\r\n context.stroke()\r\n\r\n context.restore()\r\n },\r\n restore() {\r\n const context = this.canvasContext!\n\n ;[3, 2, 1].forEach((item) => {\n context.save()\n context.beginPath()\n context.scale(item, item)\n context.rect(10, 10, 100, 100)\n context.stroke()\n context.restore()\n })\r\n },\r\n drawImageLocal() {\r\n const context = this.canvasContext!\r\n\r\n let image = new Image(100, 100)\r\n image.src = '../../static/1.jpg'\r\n image.onload = () => {\r\n context.drawImage(image, 0, 0, 100, 100)\r\n }\r\n },\r\n drawImage() {\r\n const context = this.canvasContext!\r\n\r\n let image = new Image(100, 100);\r\n image.src = 'https://web-ext-storage.dcloud.net.cn/uni-app-x/hello-uniappx-qrcode.png'\r\n image.onload = () => {\r\n context.drawImage(image, 0, 0, 100, 100)\r\n uni.getElementById(\"page-canvas\")?.appendChild(image)\r\n }\r\n },\r\n rect() {\r\n const context = this.canvasContext!\r\n\r\n context.save()\r\n context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)\r\n context.beginPath()\r\n context.rect(20, 20, 150, 100)\r\n context.stroke()\r\n\r\n context.restore()\r\n },\r\n quadraticCurveTo() {\r\n const context = this.canvasContext!\r\n\r\n context.save()\r\n context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)\r\n // Quadratic Bézier curve\r\n context.beginPath()\r\n context.moveTo(50, 20)\r\n context.quadraticCurveTo(230, 30, 50, 100)\r\n context.stroke()\r\n\r\n // Start and end points\r\n context.fillStyle = \"blue\"\r\n context.beginPath()\r\n context.arc(50, 20, 5, 0, 2 * Math.PI, true) // Start point\r\n context.arc(50, 100, 5, 0, 2 * Math.PI, true) // End point\r\n context.fill();\r\n\r\n // Control point\r\n context.fillStyle = \"red\"\r\n context.beginPath()\r\n context.arc(230, 30, 5, 0, 2 * Math.PI, true)\r\n context.fill()\r\n\r\n context.restore()\r\n },\r\n resetTransform() {\r\n const context = this.canvasContext!\r\n\r\n context.save()\r\n context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)\r\n // Draw a rotated rectangle\r\n context.rotate((45 * Math.PI) / 180)\r\n context.fillRect(60, 0, 100, 30)\r\n\r\n // Reset transformation matrix to the identity matrix\r\n context.resetTransform()\r\n context.fillStyle = \"red\"\r\n context.fillRect(60, 0, 100, 30)\r\n\r\n context.restore()\r\n },\r\n transform() {\r\n const context = this.canvasContext!\r\n\r\n context.save()\r\n context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)\r\n context.transform(1, 0.2, 0.8, 1, 0, 0)\r\n context.fillRect(0, 0, 100, 100)\r\n\r\n context.restore()\r\n },\r\n setFillStyle() {\r\n const context = this.canvasContext!\r\n\r\n context.save()\r\n context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);\r\n ['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach((item : string, index : number) => {\r\n context.fillStyle = item\r\n context.beginPath()\r\n context.rect(0 + 75 * index, 0, 50, 50)\r\n context.fill()\r\n })\r\n\r\n context.restore()\r\n },\r\n setStrokeStyle() {\r\n const context = this.canvasContext!\r\n\r\n context.save()\r\n context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);\r\n ['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach((item : string, index : number) => {\r\n context.strokeStyle = item\r\n context.beginPath()\r\n context.rect(0 + 75 * index, 0, 50, 50)\r\n context.stroke()\r\n })\r\n\r\n context.restore()\r\n },\r\n setGlobalAlpha() {\r\n const context = this.canvasContext!\r\n\r\n context.save()\r\n context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)\r\n context.fillStyle = '#000000';\r\n [1, 0.5, 0.1].forEach((item : number, index : number) => {\r\n context.globalAlpha = item\r\n context.beginPath()\r\n context.rect(0 + 75 * index, 0, 50, 50)\r\n context.fill()\r\n })\r\n context.globalAlpha = 1\r\n\r\n context.restore()\r\n },\r\n setFontSize() {\r\n const context = this.canvasContext!\r\n\r\n context.save();\r\n [10, 20, 30, 40].forEach((item : number, index : number) => {\r\n // context.fontSize(item)\r\n context.fillText('Hello, world', 20, 20 + 40 * index)\r\n })\r\n\r\n context.restore()\r\n },\r\n setLineCap() {\r\n const context = this.canvasContext!\r\n\r\n context.save()\r\n context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)\r\n context.lineWidth = 10;\r\n ['butt', 'round', 'square'].forEach((item : string, index : number) => {\r\n context.beginPath()\r\n context.lineCap = item\r\n context.moveTo(20, 20 + 20 * index)\r\n context.lineTo(100, 20 + 20 * index)\r\n context.stroke()\r\n })\r\n\r\n context.restore()\r\n },\r\n setLineJoin() {\r\n const context = this.canvasContext!\r\n\r\n context.save()\r\n context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)\r\n context.lineWidth = 10;\r\n ['bevel', 'round', 'miter'].forEach((item : string, index : number) => {\r\n context.beginPath()\r\n context.lineJoin = item\r\n context.moveTo(20 + 80 * index, 20)\r\n context.lineTo(100 + 80 * index, 50)\r\n context.lineTo(20 + 80 * index, 100)\r\n context.stroke()\r\n })\r\n\r\n context.restore()\r\n },\r\n setLineWidth() {\r\n const context = this.canvasContext!\r\n\r\n context.save()\r\n context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);\r\n [2, 4, 6, 8, 10].forEach((item : number, index : number) => {\r\n context.beginPath()\r\n context.lineWidth = item\r\n context.moveTo(20, 20 + 20 * index)\r\n context.lineTo(100, 20 + 20 * index)\r\n context.stroke()\r\n })\r\n\r\n context.restore()\r\n },\r\n lineDash() {\r\n const context = this.canvasContext!\r\n\r\n context.save();\r\n context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)\r\n context.setLineDash([4, 16])\r\n\r\n // Dashed line with no offset\r\n context.beginPath()\r\n context.moveTo(0, 50)\r\n context.lineTo(300, 50)\r\n context.stroke()\r\n\r\n // Dashed line with offset of 4\r\n context.beginPath()\r\n context.strokeStyle = \"red\"\r\n context.lineDashOffset = 4\r\n context.moveTo(0, 100)\r\n context.lineTo(300, 100)\r\n context.stroke()\r\n\r\n context.restore()\r\n },\r\n setMiterLimit() {\r\n const context = this.canvasContext!\r\n\r\n context.save()\r\n context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)\r\n context.lineWidth = 4;\r\n [2, 4, 6, 8, 10].forEach((item : number, index : number) => {\r\n context.beginPath()\r\n context.miterLimit = item\r\n context.moveTo(20 + 80 * index, 20)\r\n context.lineTo(100 + 80 * index, 50)\r\n context.lineTo(20 + 80 * index, 100)\r\n context.stroke()\r\n })\r\n\r\n context.restore()\r\n },\r\n measureText() {\r\n const context = this.canvasContext!\r\n\r\n context.save()\r\n context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)\r\n const text = \"uni-app x，是下一代 uni-app，是一个跨平台应用开发引擎\"\r\n\r\n context.font = \"20px 宋体\"\r\n\r\n context.fillStyle = \"red\"\r\n context.fillText(text, 0, 60)\r\n const textMetrics = context.measureText(text)\r\n context.strokeText(text, 40, 100)\r\n context.fillText(\"measure text width:\" + textMetrics.width, 40, 80)\r\n\r\n context.restore()\r\n }\r\n }\r\n }\r\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.21 | x | x |\n","children":"","reference":"\n### 参见\n- [参见uni-app相关文档](https://doc.dcloud.net.cn/uni-app-x/component/canvas.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.canvas)\n"},"checkbox":{"name":"## checkbox","description":"> 组件类型：UniCheckboxElement \n\n 多选项。在1组check-group中可选择多个","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| disabled | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否禁用 |\n| value | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | checkbox 标识，选中时触发 checkbox-group 的 change 事件，并携带 checkbox 的 value |\n| checked | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 当前是否选中，可用来设置默认选中 |\n| color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | checkbox的颜色 |\n| backgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | checkbox默认的背景颜色 |\n| borderColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#d1d1d1\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | checkbox默认的边框颜色 |\n| activeBackgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | checkbox选中时的背景颜色 |\n| activeBorderColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#d1d1d1\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | checkbox选中时的边框颜色 |\n| ~~iconColor~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | checkbox的图标颜色，优先级大于color属性 |\n| foreColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.18\",\"4.18\",\"4.18\"]]}' /> | checkbox的图标颜色，优先级大于color属性 |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/checkbox/checkbox.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/checkbox/checkbox\n>Template\n```vue\n\n\n<template>\n <view class=\"main\">\n <checkbox :disabled=\"disabled_boolean\" :checked=\"checked_boolean\" :color=\"color_input\" :iconColor=\"iconColor_input\"\n :foreColor=\"foreColor_input\" :backgroundColor=\"backgroundColor_input\" :borderColor=\"borderColor_input\"\n :activeBackgroundColor=\"activeBackgroundColor_input\" :activeBorderColor=\"activeBorderColor_input\"\n @click=\"checkbox_click\" @touchstart=\"checkbox_touchstart\" @touchmove=\"checkbox_touchmove\"\n @touchcancel=\"checkbox_touchcancel\" @touchend=\"checkbox_touchend\" @tap=\"checkbox_tap\"\n @longpress=\"checkbox_longpress\"><text>uni-app-x</text></checkbox>\n </view>\n\n <scroll-view style=\"flex: 1\">\n <view class=\"content\">\n <page-head title=\"组件属性\"></page-head>\n <boolean-data :defaultValue=\"false\" title=\"当前是否选中，可用来设置默认选中\" @change=\"change_checked_boolean\"></boolean-data>\n <boolean-data :defaultValue=\"false\" title=\"是否禁用\" @change=\"change_disabled_boolean\"></boolean-data>\n <input-data defaultValue=\"#007aff\" title=\"checkbox的颜色\" type=\"text\" @confirm=\"confirm_color_input\"></input-data>\n <input-data defaultValue=\"#ffffff\" title=\"checkbox默认的背景颜色\" type=\"text\"\n @confirm=\"confirm_backgroundColor_input\"></input-data>\n <input-data defaultValue=\"#d1d1d1\" title=\"checkbox默认的边框颜色\" type=\"text\"\n @confirm=\"confirm_borderColor_input\"></input-data>\n <input-data defaultValue=\"#ffffff\" title=\"checkbox选中时的背景颜色\" type=\"text\"\n @confirm=\"confirm_activeBackgroundColor_input\"></input-data>\n <input-data defaultValue=\"#d1d1d1\" title=\"checkbox选中时的边框颜色\" type=\"text\"\n @confirm=\"confirm_activeBorderColor_input\"></input-data>\n <input-data defaultValue=\"#007aff\" title=\"iconColor: checkbox的图标颜色，优先级大于color属性\" type=\"text\"\n @confirm=\"confirm_iconColor_input\"></input-data>\n <input-data defaultValue=\"#ff0000\" title=\"foreColor: checkbox的图标颜色，优先级大于color属性\" type=\"text\"\n @confirm=\"confirm_foreColor_input\"></input-data>\n </view>\n\n <view>\n <page-head title=\"默认及使用\"></page-head>\n <view class=\"uni-padding-wrap uni-common-mt\">\n <view class=\"uni-title uni-common-mt\">\n <text class=\"uni-title-text\"> 默认样式 </text>\n </view>\n <view>\n <checkbox-group class=\"uni-flex uni-row checkbox-group\" @change=\"testChange\" style=\"flex-wrap: wrap\">\n <checkbox value=\"cb\" :checked=\"checked\" :color=\"color\" :iconColor=\"iconColor\" :foreColor=\"foreColor\"\n style=\"margin-right: 15px\" class=\"checkbox cb\">选中\n </checkbox>\n <checkbox value=\"cb1\" style=\"margin-right: 15px\" class=\"checkbox cb1\">{{ text }}</checkbox>\n <checkbox value=\"cb2\" :disabled=\"disabled\" class=\"checkbox cb2\">禁用</checkbox>\n <checkbox value=\"cb3\" style=\"margin-top: 10px\" class=\"checkbox cb3\">\n {{ wrapText }}\n </checkbox>\n </checkbox-group>\n </view>\n <view class=\"uni-title uni-common-mt\">\n <text class=\"uni-title-text\"> 不同颜色和尺寸的checkbox </text>\n </view>\n <view>\n <checkbox-group class=\"uni-flex uni-row checkbox-group\">\n <checkbox value=\"cb1\" :checked=\"true\" color=\"#FFCC33\" style=\"transform: scale(0.7); margin-right: 15px\"\n class=\"checkbox\">选中\n </checkbox>\n <checkbox value=\"cb\" color=\"#FFCC33\" style=\"transform: scale(0.7)\" class=\"checkbox\">未选中</checkbox>\n </checkbox-group>\n </view>\n </view>\n\n <view class=\"uni-padding-wrap\">\n <view class=\"uni-title uni-common-mt\">\n <text class=\"uni-title-text\"> 推荐展示样式 </text>\n </view>\n </view>\n <view class=\"uni-list uni-common-pl\">\n <checkbox-group @change=\"checkboxChange\" class=\"checkbox-group\" id=\"trigger-change\">\n <checkbox class=\"uni-list-cell uni-list-cell-pd checkbox\" v-for=\"(item, index) in items\" :key=\"item.value\"\n :value=\"item.value\" :checked=\"item.checked\" :class=\"[\n index < items.length - 1 ? 'uni-list-cell-line' : '',\n 'checkbox-item-' + index,\n ]\">\n {{ item.name }}\n </checkbox>\n </checkbox-group>\n </view>\n </view>\n </scroll-view>\n</template>\n\n<style>\n .main {\n max-height: 250px;\n padding: 5px 0;\n border-bottom: 1px solid rgba(0, 0, 0, 0.06);\n flex-direction: row;\n justify-content: center;\n }\n\n .main .list-item {\n width: 100%;\n height: 100px;\n border: 1px solid #666;\n }\n\n .uni-list-cell {\n justify-content: flex-start;\n }\n</style>\n\n```\n>Script\n```uts\n\n type ItemType = {\n value : string\n name : string\n checked : boolean\n }\n export default {\n data() {\n return {\n items: [\n {\n value: 'CHN',\n name: '中国',\n checked: true,\n },\n {\n value: 'USA',\n name: '美国',\n checked: false,\n },\n {\n value: 'BRA',\n name: '巴西',\n checked: false,\n },\n {\n value: 'JPN',\n name: '日本',\n checked: false,\n },\n {\n value: 'ENG',\n name: '英国',\n checked: false,\n },\n {\n value: 'FRA',\n name: '法国',\n checked: false,\n },\n ] as ItemType[],\n testEvent: false,\n text: '未选中',\n wrapText: 'uni-app x，终极跨平台方案\\nuts，大一统语言',\n value: [] as string[],\n disabled: true,\n checked: true,\n color: '#007aff',\n iconColor: '#211cfe',\n foreColor: '#ff0000',\n // 组件属性 autotest\n checked_boolean: false,\n disabled_boolean: false,\n color_input: \"#007aff\",\n backgroundColor_input: \"#ffffff\",\n borderColor_input: \"#d1d1d1\",\n activeBackgroundColor_input: \"#ffffff\",\n activeBorderColor_input: \"#d1d1d1\",\n iconColor_input: \"#007aff\",\n foreColor_input: '#ff0000'\n }\n },\n methods: {\n\n checkboxChange: function (e : UniCheckboxGroupChangeEvent) {\n // 自动化测试\n if ((e.target?.tagName ?? '') == 'CHECKBOX-GROUP' && e.type === 'change') {\n this.testEvent = true\n }\n\n const selectedNames : string[] = []\n this.items.forEach((item) => {\n if (e.detail.value.includes(item.value)) {\n selectedNames.push(item.name)\n }\n })\n uni.showToast({\n icon: 'none',\n title: '当前选中:' + selectedNames.join(','),\n })\n },\n testChange: function (e : UniCheckboxGroupChangeEvent) {\n this.value = e.detail.value\n },\n checkbox_click() { console.log(\"组件被点击时触发\") },\n checkbox_touchstart() { console.log(\"手指触摸动作开始\") },\n checkbox_touchmove() { console.log(\"手指触摸后移动\") },\n checkbox_touchcancel() { console.log(\"手指触摸动作被打断，如来电提醒，弹窗\") },\n checkbox_touchend() { console.log(\"手指触摸动作结束\") },\n checkbox_tap() { console.log(\"手指触摸后马上离开\") },\n checkbox_longpress() { console.log(\"如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。\") },\n change_checked_boolean(checked : boolean) { this.checked_boolean = checked },\n change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },\n confirm_color_input(value : string) { this.color_input = value },\n confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },\n confirm_borderColor_input(value : string) { this.borderColor_input = value },\n confirm_activeBackgroundColor_input(value : string) { this.activeBackgroundColor_input = value },\n confirm_activeBorderColor_input(value : string) { this.activeBorderColor_input = value },\n confirm_iconColor_input(value : string) { this.iconColor_input = value },\n confirm_foreColor_input(value : string) { this.foreColor_input = value }\n }\n }\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/checkbox)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/checkbox-group.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.checkbox)\n"},"checkbox-group":{"name":"## checkbox-group","description":"> 组件类型：UniCheckboxGroupElement \n\n 多项组，内部由多个checkbox组成","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| @change | (event: [UniCheckboxGroupChangeEvent](#unicheckboxgroupchangeevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | checkbox-group中选中项发生改变是触发 change 事件，detail = {value:\\[选中的checkbox的value的数组] |","event":"\n### 事件\n#### UniCheckboxGroupChangeEvent\n\n##### UniCheckboxGroupChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniCheckboxGroupChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | Array\\<string\\> | 是 | - | - | - |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniCheckboxGroupChangeEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 阻止当前事件的默认行为<br/> |\n","example":"","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"### 子组件 @children-tags \n - [checkbox](#checkbox)","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/checkbox)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/checkbox-group.html)\n"},"image":{"name":"## image","description":"> 组件类型：UniImageElement \n\n 图片","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| src | string([string.ImageURIString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 图片资源地址 |\n| mode | string | \"scaleToFill\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 图片裁剪、缩放的模式 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| scaleToFill | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 |\n@| aspectFit | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 |\n@| aspectFill | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取 |\n@| widthFix | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 宽度不变，高度自动变化，保持原图宽高比不变 |\n@| heightFix | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 高度不变，宽度自动变化，保持原图宽高比不变 |\n@| top | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 不缩放图片，只显示图片的顶部区域 |\n@| bottom | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 不缩放图片，只显示图片的底部区域 |\n@| center | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 不缩放图片，只显示图片的中间区域 |\n@| left | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 不缩放图片，只显示图片的左边区域 |\n@| right | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 不缩放图片，只显示图片的右边区域 |\n@| top left | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 不缩放图片，只显示图片的左上边区域 |\n@| top right | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 不缩放图片，只显示图片的右上边区域 |\n@| bottom left | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 不缩放图片，只显示图片的左下边区域 |\n@| bottom right | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 不缩放图片，只显示图片的右下边区域 |\n| lazy-load | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"4.11\"]]}' /> | 图片懒加载。只针对page与scroll-view下的image有效 |\n| fade-show | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"x\"]]}' /> | 图片显示动画效果 |\n| draggable | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 鼠标长按是否能拖动图片(仅H5平台) |\n| @error | (event: [UniImageErrorEvent](#uniimageerrorevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 图片加载错误时触发，event.detail = { errMsg } |\n| @load | (event: [UniImageLoadEvent](#uniimageloadevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 图片加载完成时触发，event.detail = { width: '图片宽度px', height: '图片高度px' } |","event":"\n### 事件\n#### UniImageErrorEvent\n\n##### UniImageErrorEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniImageErrorEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| errMsg | string | 是 | - | - | 错误信息 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniImageErrorEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 阻止当前事件的默认行为<br/> |\n\n#### UniImageLoadEvent\n\n##### UniImageLoadEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniImageLoadEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| width | number | 是 | - | - | 图片宽度 |\n@| height | number | 是 | - | - | 图片高度 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniImageLoadEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 阻止当前事件的默认行为<br/> |\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/image/image.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/image/image\n>Template\n```vue\n<template>\r\n <view style=\"flex: 1;\">\r\n <page-head :title=\"title\"></page-head>\r\n <view class=\"uni-padding-wrap uni-common-mt\">\r\n <view class=\"uni-center\" style=\"background:#FFFFFF;\">\r\n <image class=\"image\" :fade-show=\"true\" mode=\"widthFix\" :src=\"imageSrc\" @error=\"error\" @load=\"load\"></image>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button type=\"primary\" @tap=\"imageFormat\">图片格式示例</button>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button type=\"primary\" @tap=\"imageMode\">图片缩放模式示例</button>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button type=\"primary\" @tap=\"imagePath\">图片路径示例</button>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button type=\"primary\" @tap=\"imageLarge\">大图示例</button>\r\n </view>\r\n </view>\n <view v-if=\"autoTest\">\n <image :src=\"setCookieImage\"></image>\n <image :src=\"verifyCookieImage\" @error=\"error\"></image>\n </view>\r\n </view>\r\n</template>\r\n\r\n<style>\r\n .image {\r\n margin: 20px auto;\r\n width: 100px;\r\n }\r\n</style>\n\n```\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n title: 'image',\r\n imageSrc: \"/static/test-image/logo.png\" as string.ImageURIString,\r\n loadError: false,\n // 自动化测试\n autoTest: false,\n setCookieImage: \"\",\n verifyCookieImage: \"\",\n eventLoad: null as UTSJSONObject | null,\n eventError: null as UTSJSONObject | null\r\n }\r\n },\r\n methods: {\r\n error(event : ImageErrorEvent) {\r\n this.loadError = true\r\n console.log(event.type, event.detail);\n if (this.autoTest) {\n this.eventError = {\n \"tagName\": event.target?.tagName,\n \"type\": event.type,\n // \"errMsg\": event.detail.errMsg\n };\n }\r\n },\r\n load(event : ImageLoadEvent) {\r\n console.log(event.type, event.detail);\n if (this.autoTest) {\n this.eventLoad = {\n \"tagName\": event.target?.tagName,\n \"type\": event.type,\n \"width\": event.detail.width,\n \"height\": event.detail.height\n };\n }\r\n },\r\n imageFormat() {\r\n uni.navigateTo({\r\n url: '/pages/component/image/image-format'\r\n });\r\n },\r\n imageMode() {\r\n uni.navigateTo({\r\n url: '/pages/component/image/image-mode'\r\n });\r\n },\r\n imagePath() {\r\n uni.navigateTo({\r\n url: '/pages/component/image/image-path'\r\n });\r\n },\r\n imageLarge() {\r\n uni.navigateTo({\r\n url: '/pages/component/image/image-large'\r\n });\r\n }\r\n }\r\n }\r\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/image)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/image.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.image)\n"},"input":{"name":"## input","description":"> 组件类型：[UniInputElement](#uniinputelement) \n\n 输入框","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| disabled | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否禁用 |\n| value | string | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 输入框的初始内容 |\n| type | text \\| number \\| digit \\| tel | \"text\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | input的类型 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| text | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 文本输入键盘 |\n@| number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 数字输入键盘 |\n@| digit | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 带小数点数字输入键盘 |\n@| tel | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 电话输入键盘 |\n| password | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否是密码类型 |\n| placeholder | string | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 输入框为空时占位符 |\n| placeholder-style | string | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 指定 placeholder 的样式 |\n| placeholder-class | string([string.ClassString](/uts/data-type.md#ide-string)) | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 指定 placeholder 的样式类，目前仅支持color,font-size和font-weight |\n| maxlength | number | \"不限制长度\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 最大输入长度，0和正数为合法值，非法值的时候不限制最大长度 |\n| cursor-spacing | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 |\n| cursor-color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.99\",\"4.11\"]]}' /> | 指定光标颜色 |\n| auto-focus | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 自动获取焦点，与`focus`属性对比，此属性只会首次生效。 |\n| focus | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 获取焦点 |\n| confirm-type | send \\| search \\| next \\| go \\| done | \"done\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 设置键盘右下角按钮的文字，仅在 type为text 时生效。 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| send | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 发送 |\n@| search | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 搜索 |\n@| next | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 下一个 |\n@| go | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 前往 |\n@| done | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 完成 |\n| confirm-hold | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 点击键盘右下角按钮时是否保持键盘不收起 |\n| cursor | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 指定focus时的光标位置 |\n| selection-start | number | -1 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 光标起始位置，自动聚集时有效，需与selection-end搭配使用 |\n| selection-end | number | -1 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 光标结束位置，自动聚集时有效，需与selection-satrt搭配使用 |\n| adjust-position | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 键盘弹起时，是否自动上推页面 |\n| hold-keyboard | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.0\",\"4.11\"]]}' /> | focus时，点击页面的时候不收起键盘 |\n| inputmode | none \\| text \\| decimal \\| numeric \\| tel \\| search \\| email \\| url | \"text\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。在符合条件的高版本webview里，uni-app的 web 和 app-vue 平台中可使用本属性。 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用。 |\n@| text | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 使用用户本地区域设置的标准文本输入键盘。 |\n@| decimal | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 小数输入键盘，包含数字和分隔符（通常是“ . ”或者“ , ”），设备可能也可能不显示减号键。 |\n@| numeric | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 数字输入键盘，所需要的就是 0 到 9 的数字，设备可能也可能不显示减号键。 |\n@| tel | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 电话输入键盘，包含 0 到 9 的数字、星号（*）和井号（#）键。表单输入里面的电话输入通常应该使用 \\<input type=\"tel\"\\> 。 |\n@| search | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 为搜索输入优化的虚拟键盘，比如，返回键可能被重新标记为“搜索”，也可能还有其他的优化。 |\n@| email | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 为邮件地址输入优化的虚拟键盘，通常包含\"@\"符号和其他优化。表单里面的邮件地址输入应该使用 \\<input type=\"email\"\\> 。 |\n@| url | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 为网址输入优化的虚拟键盘，比如，“/”键会更加明显、历史记录访问等。表单里面的网址输入通常应该使用 \\<input type=\"url\"\\> 。 |\n| @input | (event: [UniInputEvent](#uniinputevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 当键盘输入时，触发input事件，event.detail = {value, cursor}，处理函数可以直接 return 一个字符串，将替换输入框的内容。 |\n| @focus | (event: [UniInputFocusEvent](#uniinputfocusevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度 |\n| @blur | (event: [UniInputBlurEvent](#uniinputblurevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 输入框失去焦点时触发，event.detail = {value: value} |\n| @keyboardheightchange | (event: [UniInputKeyboardHeightChangeEvent](#uniinputkeyboardheightchangeevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration} |\n| @confirm | (event: [UniInputConfirmEvent](#uniinputconfirmevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 点击完成按钮时触发，event.detail = {value: value} |","event":"\n### 事件\n#### UniInputEvent\n\n##### UniInputEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | 输入框内容 |\n@| cursor | number | 是 | - | - | 光标的位置 |\n@| keyCode | number | 是 | - | - | 输入字符的Unicode值 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniInputEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 阻止当前事件的默认行为<br/> |\n\n#### UniInputFocusEvent\n\n##### UniInputFocusEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputFocusEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| height | number | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 键盘高度 |\n@| value | string | 是 | - | - | 输入框内容 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniInputFocusEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 阻止当前事件的默认行为<br/> |\n\n#### UniInputBlurEvent\n\n##### UniInputBlurEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputBlurEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | 输入框内容 |\n@| cursor | number | 是 | - | - | 选择区域的起始位置 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniInputBlurEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 阻止当前事件的默认行为<br/> |\n\n#### UniInputKeyboardHeightChangeEvent\n\n##### UniInputKeyboardHeightChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputKeyboardHeightChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| height | number | 是 | - | - | 键盘高度 |\n@| duration | number | 是 | - | - | 持续时间 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniInputKeyboardHeightChangeEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 阻止当前事件的默认行为<br/> |\n\n#### UniInputConfirmEvent\n\n##### UniInputConfirmEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniInputConfirmEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | 输入框内容 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniInputConfirmEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 阻止当前事件的默认行为<br/> |\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/input/input.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/input/input\n>Template\n```vue\n<template>\n <!-- #ifdef APP -->\n <scroll-view style=\"flex: 1\">\n <!-- #endif -->\n <page-head :title=\"title\"></page-head>\n <view class=\"uni-common-mt uni-padding-wrap\">\n <view>\n <view class=\"uni-title\">\n <text class=\"uni-title-text\">设置输入框的初始内容</text>\n </view>\n <view class=\"input-wrapper\">\n <input id=\"uni-input-default\" class=\"uni-input\" value=\"hello uni-app x\" />\n </view>\n </view>\n\n <view>\n <view class=\"uni-title\">\n <text class=\"uni-title-text\">type取值（不同输入法表现可能不一致）</text>\n </view>\n <view class=\"input-wrapper\">\n <input id=\"uni-input-type-text\" class=\"uni-input\" type=\"text\" placeholder=\"文本输入键盘\" />\n </view>\n <view class=\"input-wrapper\">\n <input id=\"uni-input-type-number\" class=\"uni-input\" type=\"number\" placeholder=\"数字输入键盘\" />\n </view>\n <view class=\"input-wrapper\">\n <input id=\"uni-input-type-digit\" class=\"uni-input\" type=\"digit\" placeholder=\"带小数点的数字输入键盘\" />\n </view>\n <view class=\"input-wrapper\">\n <input id=\"uni-input-type-tel\" class=\"uni-input\" :type=\"inputTypeTel\" placeholder=\"电话输入键盘\" />\n </view>\n </view>\n\n <view>\n <view class=\"uni-title\">\n <text class=\"uni-title-text\">密码输入框</text>\n </view>\n <view class=\"input-wrapper\">\n <input id=\"uni-input-password\" class=\"uni-input\" :password=\"inputPassword\" :value=\"inputPasswordValue\" />\n </view>\n </view>\n\n <view>\n <view class=\"uni-title\">\n <text class=\"uni-title-text\">占位符样式</text>\n </view>\n <view class=\"input-wrapper\">\n <input id=\"uni-input-placeholder1\" class=\"uni-input\" :placeholder-style=\"inputPlaceHolderStyle\"\n placeholder=\"占位符文字颜色为红色\" />\n </view>\n <view class=\"input-wrapper\">\n <input id=\"uni-input-placeholder2\" class=\"uni-input\" :placeholder-class=\"inputPlaceHolderClass\"\n placeholder=\"占位符字体大小为10px\" />\n </view>\n <view class=\"input-wrapper\">\n <input class=\"uni-input\" :placeholder-style=\"inputPlaceHolderStyle\"\n value=\"不设置placeholder只设置placeholder-style\" />\n </view>\n </view>\n\n <view>\n <view class=\"uni-title\">\n <text class=\"uni-title-text\">设置禁用输入框</text>\n </view>\n <view class=\"input-wrapper\">\n <input id=\"uni-input-disable\" class=\"uni-input\" :disabled=\"true\"/>\n </view>\n </view>\n\n <view>\n <view class=\"uni-title\">\n <text class=\"uni-title-text\">设置最大输入长度</text>\n </view>\n <view class=\"input-wrapper\">\n <input id=\"uni-input-maxlength\" class=\"uni-input\" :maxlength=\"10\" placeholder=\"最大输入长度为10\"\n :value=\"inputMaxLengthValue\" @input=\"onMaxLengthInput\" :focus=\"inputMaxLengthFocus\" />\n </view>\n </view>\n\n <view>\n <view class=\"uni-title\">\n <text class=\"uni-title-text\">设置光标与键盘的距离</text>\n </view>\n <view class=\"input-wrapper\">\n <input class=\"uni-input\" :cursor-spacing=\"1000\" placeholder=\"光标与键盘的距离为1000px\" />\n </view>\n </view>\n\n <view>\n <view class=\"uni-title\">\n <text class=\"uni-title-text\">自动获取焦点</text>\n </view>\n <view class=\"input-wrapper\">\n <input id=\"uni-input-focus\" class=\"uni-input\" :focus=\"focus\"\n @keyboardheightchange=\"inputFocusKeyBoardChange\" />\n </view>\n </view>\n\n <view>\n <view class=\"uni-title\">\n <text class=\"uni-title-text\">confirm-type取值（不同输入法表现可能不一致）</text>\n </view>\n <view class=\"input-wrapper\">\n <input id=\"uni-input-confirm-send\" class=\"uni-input\" confirmType=\"send\" placeholder=\"键盘右下角按钮显示为发送\" />\n </view>\n <view class=\"input-wrapper\">\n <input id=\"uni-input-confirm-search\" class=\"uni-input\" confirmType=\"search\" placeholder=\"键盘右下角按钮显示为搜索\" />\n </view>\n <view class=\"input-wrapper\">\n <input id=\"uni-input-confirm-next\" class=\"uni-input\" confirmType=\"next\" placeholder=\"键盘右下角按钮显示为下一个\" />\n </view>\n <view class=\"input-wrapper\">\n <input id=\"uni-input-confirm-go\" class=\"uni-input\" confirmType=\"go\" placeholder=\"键盘右下角按钮显示为前往\" />\n </view>\n <view class=\"input-wrapper\">\n <input id=\"uni-input-confirm-done\" class=\"uni-input\" confirmType=\"done\" placeholder=\"键盘右下角按钮显示为完成\" />\n </view>\n </view>\n\n <view>\n <view class=\"uni-title\">\n <text class=\"uni-title-text\">点击键盘右下角按钮时保持键盘不收起</text>\n </view>\n <view class=\"input-wrapper\">\n <input class=\"uni-input\" :confirm-hold=\"true\" />\n </view>\n </view>\n\n <view>\n <view class=\"uni-title\" @click=\"setCursor(4)\">\n <text class=\"uni-title-text\">设置输入框聚焦时光标的位置（点击生效）</text>\n </view>\n <view class=\"input-wrapper\">\n <input ref=\"input\" class=\"uni-input\" value=\"0123456789\" :cursor=\"cursor\" @blur=\"onCursorBlurChange\"/>\n </view>\n </view>\n\n <view>\n <view class=\"uni-title\" @click=\"setSelection(0, 4)\">\n <text class=\"uni-title-text\">设置输入框聚焦时光标的起始位置和结束位置（点击生效）</text>\n </view>\n <view class=\"input-wrapper\">\n <input ref=\"input2\" class=\"uni-input\" value=\"0123456789\" :selection-start=\"selectionStart\"\n :selection-end=\"selectionEnd\" @blur=\"onSelectionBlurChange\"/>\n </view>\n </view>\n\n <view>\n <view class=\"uni-title\" style=\"flex-direction: row;align-items: center;\">\n <text class=\"uni-title-text\">设置光标颜色为红色</text>\n <switch style=\"margin-left: 10px;\" @change=\"changeCursorColor\" :checked=\"cursor_color=='red'\"></switch>\n </view>\n <view class=\"input-wrapper\">\n <input id=\"uni-input-cursor-color\" class=\"uni-input\" :cursor-color=\"cursor_color\" value=\"光标颜色\" />\n </view>\n </view>\n\n <view>\n <view class=\"uni-title\">\n <text class=\"uni-title-text\">键盘弹起时，自动上推页面</text>\n </view>\n <view class=\"input-wrapper\">\n <input class=\"uni-input\" :adjust-position=\"true\" />\n </view>\n </view>\n\n\n <view>\n <view class=\"uni-title\" style=\"flex-direction: row;align-items: center;\">\n <text class=\"uni-title-text\">设置hold-keyboard</text>\n <switch style=\"margin-left: 10px;\" @change=\"changeHoldKeyboard\" :checked=\"holdKeyboard\"></switch>\n </view>\n <view class=\"input-wrapper\">\n <input class=\"uni-input\" :hold-keyboard=\"holdKeyboard\" value=\"hold keyboard \" />\n </view>\n </view>\n\n\n <view>\n <view class=\"uni-title\">\n <text class=\"uni-title-text\">input事件</text>\n <text class=\"uni-subtitle-text\" v-if=\"inputEventDetail\">{{inputEventDetail}}</text>\n </view>\n <view class=\"input-wrapper\">\n <input class=\"uni-input\" @input=\"onInput\" />\n </view>\n </view>\n\n <view>\n <view class=\"uni-title\">\n <text class=\"uni-title-text\">focus事件和blur事件</text>\n <text class=\"uni-subtitle-text\" v-if=\"focusAndBlurEventDetail\">{{focusAndBlurEventDetail}}</text>\n </view>\n <view class=\"input-wrapper\">\n <input class=\"uni-input\" @focus=\"onFocus\" @blur=\"onBlur\" />\n </view>\n </view>\n\n <view>\n <view class=\"uni-title\">\n <text class=\"uni-title-text\">confirm事件</text>\n <text class=\"uni-subtitle-text\" v-if=\"confirmEventDetail\">{{confirmEventDetail}}</text>\n </view>\n <view class=\"input-wrapper\">\n <input class=\"uni-input\" @confirm=\"onConfirm\" />\n </view>\n </view>\n\n <view>\n <view class=\"uni-title\">\n <text class=\"uni-title-text\">keyboardheightchange事件</text>\n <text class=\"uni-subtitle-text\"\n v-if=\"keyboardHeightChangeEventDetail\">{{keyboardHeightChangeEventDetail}}</text>\n </view>\n <view class=\"input-wrapper\">\n <input class=\"uni-input\" @keyboardheightchange=\"onKeyborardHeightChange\" :focus=\"focusedForKeyboardHeightChangeTest\"/>\n </view>\n </view>\n\n <view>\n <view class=\"uni-title\">\n <text class=\"uni-title-text\">带清除按钮的输入框</text>\n </view>\n <view class=\"input-wrapper\">\n <input class=\"uni-input\" placeholder=\"带清除按钮的输入框\" :value=\"inputClearValue\" @input=\"clearInput\" />\n <image class=\"uni-icon\" src=\"/static/icons/clear.png\" v-if=\"showClearIcon\" @click=\"clearIcon\">\n </image>\n </view>\n </view>\n\n <view>\n <view class=\"uni-title\">\n <text class=\"uni-title-text\">可查看密码的输入框</text>\n </view>\n <view class=\"input-wrapper\">\n <input class=\"uni-input\" placeholder=\"请输入密码\" :password=\"showPassword\" />\n <image class=\"uni-icon\" :src=\"!showPassword ? '/static/icons/eye-active.png' : '/static/icons/eye.png'\"\n @click=\"changePassword\"></image>\n </view>\n </view>\n\n <view>\n <view class=\"uni-title\">\n <text class=\"uni-title-text\">同时存在 v-model 和 value</text>\n </view>\n <view class=\"input-wrapper\">\n <input id=\"both-model-value\" class=\"uni-input\" v-model='demoValue' value='456' />\n\n </view>\n </view>\n\n <view>\n <view class=\"uni-title\" style=\"flex-direction: row;align-items: center;\">\n <text class=\"uni-title-text\">设置adjust-position</text>\n <switch style=\"margin-left: 10px;\" @change=\"changeAdjustPosition\" :checked=\"adjustPosition\"></switch>\n </view>\n <view class=\"input-wrapper\">\n <input class=\"uni-input\" :adjust-position=\"adjustPosition\"/>\n </view>\n </view>\n\n </view>\n <!-- #ifdef APP -->\n </scroll-view>\n <!-- #endif -->\n</template>\n\n\n<style scoped>\n .input-wrapper {\n display: flex;\n padding: 8px 13px;\n margin: 5px 0;\n flex-direction: row;\n flex-wrap: nowrap;\n background-color: #ffffff;\n }\n\n .uni-input {\n height: 28px;\n font-size: 15px;\n padding: 0px;\n flex: 1;\n background-color: #ffffff;\n }\n\n .uni-icon {\n width: 24px;\n height: 24px;\n }\n\n .uni-input-placeholder-class {\n font-size: 10px;\n }\n</style>\n\n```\n>Script\n```uts\n\n export default {\n data() {\n return {\n title: 'input',\n showClearIcon: false,\n inputClearValue: '',\n showPassword: true,\n cursor: -1,\n cursor_color: \"#3393E2\",\n selectionStart: -1,\n selectionEnd: -1,\n inputEventDetail: '',\n focusAndBlurEventDetail: '',\n confirmEventDetail: '',\n keyboardHeightChangeEventDetail: '',\n focus: true,\n inputPassword: true,\n inputTypeTel: \"tel\",\n inputPlaceHolderStyle: \"color:red\",\n inputPlaceHolderClass: \"uni-input-placeholder-class\" as string.ClassString ,\n inputMaxLengthValue: \"\",\n onMaxLengthInputValue: \"\",\n inputMaxLengthFocus: false,\n inputPasswordValue: \"cipher\",\n inputFocusKeyBoardChangeValue: true,\n holdKeyboard: false,\n keyboardHeight: 0,\n focusedForKeyboardHeightChangeTest: false,\n demoValue: '123',\n adjustPosition: false\n }\n },\n methods: {\n inputFocusKeyBoardChange(e : UniInputKeyboardHeightChangeEvent) {\n this.inputFocusKeyBoardChangeValue = e.detail.height > 50\n },\n onMaxLengthInput(event : UniInputEvent) {\n this.onMaxLengthInputValue = event.detail.value\n },\n setCursor: function (cursor : number) {\n (this.$refs['input'] as UniInputElement).focus();\n this.cursor = cursor;\n },\n onCursorBlurChange(){\n this.cursor = 0\n },\n setSelection: function (selectionStart : number, selectionEnd : number) {\n (this.$refs['input2'] as UniInputElement).focus();\n this.selectionStart = selectionStart;\n this.selectionEnd = selectionEnd;\n },\n onSelectionBlurChange(){\n this.selectionEnd = 0;\n },\n clearInput: function (event : UniInputEvent) {\n this.inputClearValue = event.detail.value\n if (event.detail.value.length > 0) {\n this.showClearIcon = true\n } else {\n this.showClearIcon = false\n }\n },\n clearIcon: function () {\n this.inputClearValue = ''\n this.showClearIcon = false\n },\n changePassword: function () {\n this.showPassword = !this.showPassword\n },\n onInput: function (event : UniInputEvent) {\n console.log(\"键盘输入\", JSON.stringify(event.detail));\n this.inputEventDetail = JSON.stringify(event.detail)\n },\n onFocus: function (event : UniInputFocusEvent) {\n console.log(\"输入框聚焦\", JSON.stringify(event.detail));\n this.focusAndBlurEventDetail = JSON.stringify(event.detail);\n },\n onBlur: function (event : UniInputBlurEvent) {\n console.log(\"输入框失去焦点\", JSON.stringify(event.detail));\n this.focusAndBlurEventDetail = JSON.stringify(event.detail);\n },\n onConfirm: function (event : UniInputConfirmEvent) {\n console.log(\"点击完成按钮\", JSON.stringify(event.detail));\n this.confirmEventDetail = JSON.stringify(event.detail);\n },\n onKeyborardHeightChange: function (event : UniInputKeyboardHeightChangeEvent) {\n console.log(\"键盘高度发生变化\", JSON.stringify(event.detail));\n this.keyboardHeightChangeEventDetail = JSON.stringify(event.detail);\n this.keyboardHeight = event.detail.height;\n },\n test_check_input_value() : number {\n return this.onMaxLengthInputValue.length\n },\n changeCursorColor(event : UniSwitchChangeEvent) {\n const checked = event.detail.value;\n if (checked) {\n this.cursor_color = \"red\"\n } else {\n this.cursor_color = \"#3393E2\"\n }\n const input = uni.getElementById<UniInputElement>(\"uni-input-cursor-color\")\n input?.focus()\n },\n changeHoldKeyboard(event : UniSwitchChangeEvent) {\n const checked = event.detail.value;\n this.holdKeyboard = checked\n },\n changeAdjustPosition(event : UniSwitchChangeEvent){\n const checked = event.detail.value;\n this.adjustPosition = checked\n }\n }\n }\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/input)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/input.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.input)\n","component_type":"### UniInputElement\ninput元素对象\n#### UniInputElement 的属性值\n| 名称 | 类型 | 必填 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | 是 | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| type | string | 是 | input的类型 |\n| disabled | boolean | 是 | 是否禁用 |\n| autofocus | boolean | 是 | 自动获取焦点 |\n| value | string | 是 | 输入框的初始内容 |"},"list-item":{"name":"## list-item","description":"> 组件类型：UniListItemElement \n\n list-view组件的唯一合法子组件。每个item是一行","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| type | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 对应list-item的类型 list-view 将对同类型条目进行复用，所以合理的类型拆分，可以很好地提升 list-view 性能 |","event":"","example":"","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.02 | 3.9 | 4.11 |\n","children":"","reference":""},"sticky-header":{"name":"## sticky-header","description":"> 组件类型：UniStickyHeaderElement \n\n 吸顶布局容器 <br/><br/> 注意：暂时仅支持作为list-view、sticky-section的子节点, sticky-header不支持css样式！当一个容器视图设置多个sticky-header时，后一个sticky-header会停靠在前一个sticky-header的末尾处。","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| padding | array\\<number> | [0,0,0,0\\] | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.02\",\"3.98\",\"4.11\"]]}' /> | 长度为 4 的数组，按 top、right、bottom、left 顺序指定内边距 |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/sticky-header/sticky-header.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/sticky-header/sticky-header\n>Template\n```vue\n<template>\n <list-view :scroll-y=\"true\" class=\"page\" rebound=\"false\" show-scrollbar=false :scroll-top=\"scroll_top_input\"\n :refresher-enabled=\"refresher_enabled_boolean\" :refresher-triggered=\"refresher_triggered_boolean\"\n @refresherrefresh=\"list_view_refresherrefresh\">\n <list-item type=1>\n <swiper indicator-dots=\"true\" circular=\"true\" style=\"height: 240px;\">\n <swiper-item v-for=\"i in 3\" :item-id=\"i + ''\">\n <image src=\"/static/shuijiao.jpg\" style=\"height: 240px; width: 100%;\"></image>\n <text style=\"position: absolute;\">{{i}}</text>\n </swiper-item>\n </swiper>\n </list-item>\n <list-item class=\"content-item\" type=2>\n <text class=\"text\">向上滑动页面，体验sticky-header吸顶效果。</text>\n </list-item>\n <sticky-header>\n <scroll-view style=\"background-color: #f5f5f5; flex-direction: row;\" direction=\"horizontal\"\n :show-scrollbar=\"false\">\n <view style=\"align-self: flex-start; flex-direction: row;\">\n <text ref=\"swipertab\" class=\"sift-item\" v-for=\"(name,index) in sift_item\" @click=\"clickTH(index)\">\n {{name}}\n </text>\n </view>\n </scroll-view>\n </sticky-header>\n\n <list-item v-for=\"(item,index) in list_item\" :key=\"index\" class=\"content-item\" type=3>\n <text class=\"text\">{{item}}</text>\n </list-item>\n </list-view>\n</template>\n\n\n\n<style>\n .page {\n flex: 1;\n background-color: #f5f5f5;\n }\n\n .content-item {\n padding: 15px;\n margin-bottom: 10px;\n background-color: #fff;\n }\n\n .text {\n font-size: 14px;\n color: #666;\n line-height: 20px;\n }\n\n .sift-item {\n color: #555;\n font-size: 16px;\n padding: 12px 15px;\n }\n</style>\n\n```\n>Script\n```uts\n\n export default {\n data() {\n return {\n sift_item: [\"排序\", \"筛选\"],\n list_item: [] as Array<string>,\n refresher_enabled_boolean: true,\n refresher_triggered_boolean: false,\n scroll_top_input: 0\n }\n },\n onLoad() {\n let lists : Array<string> = []\n for (let i = 0; i < 40; i++) {\n lists.push(\"item---\" + i)\n }\n this.list_item = lists\n },\n methods: {\n list_view_refresherrefresh() {\n console.log(\"下拉刷新被触发 \")\n this.refresher_triggered_boolean = true\n setTimeout(() => {\n this.refresher_triggered_boolean = false\n }, 1500)\n },\n confirm_scroll_top_input(value : number) {\n this.scroll_top_input = value\n },\n clickTH(index : number) {\n console.log(\"点击表头：\" + index);\n }\n }\n }\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.02 | 3.93 | 4.11 |\n","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.sticky-header)\n"},"sticky-section":{"name":"## sticky-section","description":"> 组件类型：UniStickySectionElement \n\n 吸顶布局容器 <br/><br/> 注意：暂时仅支持作为list-view的子节点, sticky-section不支持css样式！","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| push-pinned-header | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.98\",\"4.11\"]]}' /> | sticky-section元素重叠时是否继续上推 |\n| padding | array\\<number> | [0,0,0,0\\] | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.02\",\"3.98\",\"4.11\"]]}' /> | 长度为 4 的数组，按 top、right、bottom、left 顺序指定内边距 |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/sticky-section/sticky-section.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/sticky-section/sticky-section\n>Template\n```vue\n<template>\r\n <page-head title=\"sticky-section\"></page-head>\n <list-view id=\"list-view\" ref=\"list-view\" show-scrollbar=false class=\"page\" :scroll-into-view=\"scrollIntoView\"\r\n @scroll=\"onScroll\" @scrollend=\"onScrollEnd\" rebound=\"false\">\r\n <list-item style=\"padding: 10px; margin: 5px 0;align-items: center;\" :type = 20>\r\n <button @click=\"gotoStickyHeader('C')\" size=\"mini\">跳转到id为C的sticky-header位置上</button>\r\n </list-item>\r\n <sticky-section v-for=\"(sectionText) in data\" :padding=\"sectionPadding\" :push-pinned-header=\"true\">\r\n <sticky-header :header-id=\"sectionText\" :id=\"sectionText\">\r\n <text class=\"sticky-header-text\">{{sectionText}}</text>\r\n </sticky-header>\r\n <list-item v-for=\"i in 10\" class=\"content-item\" :type=10>\r\n <text class=\"text\">{{sectionText}}--item--content----{{i}}</text>\r\n </list-item>\r\n </sticky-section>\r\n <list-item style=\"padding: 10px; margin: 5px 0;align-items: center;\" :type= 30>\r\n <!-- <text style=\"color: #aaa\">到底了</text> -->\r\n <button @click=\"toTop\" size=\"mini\">回到顶部</button>\r\n </list-item>\r\n </list-view>\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n .page {\r\n flex: 1;\r\n background-color: #f5f5f5;\r\n }\r\n\r\n .sticky-header-text {\r\n font-size: 16px;\r\n padding: 8px;\r\n color: #959595;\r\n background-color: #f5f5f5;\r\n }\r\n\r\n .content-item {\r\n padding: 15px;\r\n margin-bottom: 10px;\r\n background-color: #fff;\r\n }\r\n</style>\r\n\n```\n>Script\n```uts\n\r\n export default {\r\n data() {\r\n return {\r\n data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N'],\r\n sectionPadding: [0, 10, 0, 10] as Array<number>,\r\n scrollIntoView: \"\",\r\n scrolling: false\r\n }\r\n },\r\n methods: {\r\n toTop(){\r\n this.scrollIntoView = \"\"\r\n uni.getElementById(\"list-view\")!.scrollTop = 0\r\n },\r\n //用于自动化测试\r\n listViewScrollByY(y : number) {\r\n const listview = this.$refs[\"list-view\"] as UniElement\r\n // listview.scrollBy(0, y)\n listview.scrollTop = y\r\n },\r\n gotoStickyHeader(id : string) {\n // #ifdef APP\r\n this.scrollIntoView = id\n // #endif\n // #ifdef WEB\n console.log(\"web端不支持该功能\")\n // #endif\r\n },\r\n onScroll() {\r\n this.scrolling = true\r\n },\r\n onScrollEnd() {\r\n this.scrolling = false\r\n //滚动后重置scrollIntoView = \"\"\r\n if(this.scrollIntoView != \"\") {\r\n this.scrollIntoView = \"\"\r\n }\n }\r\n }\r\n }\r\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.02 | 3.98 | 4.11 |\n","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.sticky-section)\n"},"list-view":{"name":"## list-view","description":"> 组件类型：UniListViewElement \n\n 列表组件","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| direction | string | \"vertical\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.0\",\"4.11\"]]}' /> | 滚动方向，可取值 none、horizontal、vertical，默认值vertical。注：iOS 平台仅支持vertical |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.02\",\"4.0\",\"4.11\"]]}' /> | 禁止滚动 |\n@| horizontal | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.0\",\"x\"]]}' /> | 横向滚动 |\n@| vertical | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.02\",\"4.0\",\"4.11\"]]}' /> | 竖向滚动 |\n| ~~scroll-x~~ | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"x\"]]}' /> | 允许横向滚动，不支持同时设置scroll-y属性为true，同时设置true时scroll-y生效。已废弃，请改用direction |\n| ~~scroll-y~~ | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 允许纵向滚动，不支持同时设置scroll-x属性为true，同时设置true时scroll-y生效。已废弃，请改用direction |\n| ~~rebound~~ | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 控制是否回弹效果。已废弃，请改用bounces |\n| associative-container | string | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.11\",\"4.11\"]]}' /> | 关联的滚动容器 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| nested-scroll-view | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.11\",\"4.11\"]]}' /> | 嵌套滚动 |\n| bounces | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.0\",\"4.11\"]]}' /> | 控制是否回弹效果 优先级高于rebound |\n| upper-threshold | number | 50 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.02\",\"3.9\",\"4.11\"]]}' /> | 距顶部/左边多远时（单位px），触发 scrolltoupper 事件 |\n| lower-threshold | number | 50 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.02\",\"3.9\",\"4.11\"]]}' /> | 距底部/右边多远时（单位px），触发 scrolltolower 事件 |\n| scroll-top | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.02\",\"3.9\",\"4.11\"]]}' /> | 设置竖向滚动条位置 |\n| scroll-left | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 设置横向滚动条位置 |\n| show-scrollbar | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.02\",\"3.9\",\"4.11\"]]}' /> | 控制是否出现滚动条 |\n| scroll-into-view | string([string.IDString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素起始位置 |\n| scroll-with-animation | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.02\",\"3.9\",\"4.11\"]]}' /> | 是否在设置滚动条位置时使用滚动动画，设置false没有滚动动画 |\n| refresher-enabled | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 开启下拉刷新，暂时不支持scroll-x = true横向刷新 |\n| refresher-threshold | number | 45 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 设置下拉刷新阈值, 仅 refresher-default-style = 'none' 自定义样式下生效 |\n| refresher-max-drag-distance | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 设置下拉最大拖拽距离（单位px），默认是下拉刷新控件高度的2.5倍 |\n| refresher-default-style | string | \"black\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 设置下拉刷新默认样式，支持设置 black \\| white \\| none， none 表示不使用默认样式 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| black | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"3.9\",\"4.11\"]]}' /> | 深颜色雪花样式 |\n@| white | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"3.9\",\"4.11\"]]}' /> | 浅白色雪花样式 |\n@| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"3.93\",\"4.11\"]]}' /> | 不使用默认样式 |\n| refresher-background | string([string.ColorString](/uts/data-type.md#ide-string)) | \"transparent\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 设置下拉刷新区域背景颜色，默认透明 |\n| refresher-triggered | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发 |\n| enable-back-to-top | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"4.11\"]]}' /> | iOS点击顶部状态栏滚动条返回顶部，只支持竖向 |\n| custom-nested-scroll | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 子元素是否开启嵌套滚动 将滚动事件与父元素协商处理 |\n| @refresherpulling | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 下拉刷新控件被下拉 |\n| @refresherrefresh | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 下拉刷新被触发 |\n| @refresherrestore | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 下拉刷新被复位 |\n| @refresherabort | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 下拉刷新被中止 |\n| @scrolltoupper | (event: [UniScrollToUpperEvent](#uniscrolltoupperevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.02\",\"3.9\",\"4.11\"]]}' /> | 滚动到顶部/左边，会触发 scrolltoupper 事件 |\n| @scrolltolower | (event: [UniScrollToLowerEvent](#uniscrolltolowerevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.02\",\"3.9\",\"4.11\"]]}' /> | 滚动到底部/右边，会触发 scrolltolower 事件 |\n| @scroll | (event: [UniScrollEvent](#uniscrollevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.02\",\"3.9\",\"4.11\"]]}' /> | 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |\n| @scrollend | (event: [UniScrollEvent](#uniscrollevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 滚动结束时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |","event":"\n### 事件\n#### UniRefresherEvent\n\n##### UniRefresherEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniRefresherEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| dy | number | 是 | - | - | - |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniRefresherEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 阻止当前事件的默认行为<br/> |\n\n#### UniScrollToUpperEvent\n\n##### UniScrollToUpperEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniScrollToUpperEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| direction | string | 是 | - | - | 滚动方向 top 或 left |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniScrollToUpperEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 阻止当前事件的默认行为<br/> |\n\n#### UniScrollToLowerEvent\n\n##### UniScrollToLowerEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniScrollToLowerEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| direction | string | 是 | - | - | 滚动方向 bottom 或 right |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniScrollToLowerEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 阻止当前事件的默认行为<br/> |\n\n#### UniScrollEvent\n\n##### UniScrollEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniScrollEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| scrollTop | number | 是 | - | - | 竖向滚动的距离 |\n@| scrollLeft | number | 是 | - | - | 横向滚动的距离 |\n@| scrollHeight | number | 是 | - | - | 滚动区域的高度 |\n@| scrollWidth | number | 是 | - | - | 滚动区域的宽度 |\n@| deltaY | number | 是 | - | - | 当次滚动事件竖向滚动量 |\n@| deltaX | number | 是 | - | - | 当次滚动事件横向滚动量 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniScrollEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 阻止当前事件的默认行为<br/> |\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/list-view/list-view.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/list-view/list-view\n>Template\n```vue\n\n\n<template>\n <view class=\"main\">\n <list-view :direction=\"scroll_direction\" :rebound=\"bounces_boolean\" :upper-threshold=\"upper_threshold_input\"\n :lower-threshold=\"lower_threshold_input\" :scroll-top=\"scroll_top_input\" :scroll-left=\"scroll_left_input\"\n :show-scrollbar=\"show_scrollbar_boolean\" :scroll-into-view=\"scrollIntoView\"\n :scroll-with-animation=\"scroll_with_animation_boolean\" :refresher-enabled=\"refresher_enabled_boolean\"\n :refresher-background=\"refresher_background_input\" :refresher-triggered=\"refresher_triggered_boolean\"\n :refresher-default-style=\"refresher_default_style_input\" @click=\"list_view_click\"\n @touchstart=\"list_view_touchstart\" @touchmove=\"list_view_touchmove\" @touchcancel=\"list_view_touchcancel\"\n @touchend=\"list_view_touchend\" @tap=\"list_view_tap\" @longpress=\"list_view_longpress\"\n @refresherpulling=\"list_view_refresherpulling\" @refresherrefresh=\"list_view_refresherrefresh\"\n @refresherrestore=\"list_view_refresherrestore\" @refresherabort=\"list_view_refresherabort\"\n @scrolltoupper=\"list_view_scrolltoupper\" ref=\"listview\" @scrolltolower=\"list_view_scrolltolower\"\n @scroll=\"list_view_scroll\" @scrollend=\"list_view_scrollend\" style=\"width:100%;\" id=\"listview\">\n <list-item v-for=\"key in scrollData\" :key=\"key\" :id=\"key\" @click=\"list_item_click\"\n @touchstart=\"list_item_touchstart\" @touchmove=\"list_item_touchmove\" @touchcancel=\"list_item_touchcancel\"\n @touchend=\"list_item_touchend\" @tap=\"list_item_tap\" @longpress=\"list_item_longpress\" class=\"list-item\">\n <text>{{key}}</text>\n </list-item>\n <!-- #ifdef APP -->\n <list-item slot=\"refresher\" class=\"refresh-box\">\n <text class=\"tip-text\">{{text[state]}}</text>\n </list-item>\n <!-- #endif -->\n </list-view>\n </view>\n\n <scroll-view style=\"flex:1\" direction=\"vertical\">\n <view class=\"content\">\n <!-- #ifdef APP -->\n <boolean-data :defaultValue=\"false\" title=\"设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发\"\n @change=\"change_refresher_triggered_boolean\"></boolean-data>\n <boolean-data :defaultValue=\"false\" title=\"开启下拉刷新\" @change=\"change_refresher_enabled_boolean\"></boolean-data>\n <boolean-data :defaultValue=\"false\" title=\"开启自定义样式\" @change=\"change_refresher_style_boolean\"></boolean-data>\n <!-- #endif -->\n <boolean-data :defaultValue=\"false\" title=\"是否在设置滚动条位置时使用滚动动画，设置false没有滚动动画\"\n @change=\"change_scroll_with_animation_boolean\"></boolean-data>\n <boolean-data :defaultValue=\"false\" title=\"控制是否出现滚动条\" @change=\"change_show_scrollbar_boolean\"></boolean-data>\n <!-- #ifdef APP -->\n <boolean-data :defaultValue=\"true\" title=\"控制是否回弹效果\" @change=\"change_bounces_boolean\"></boolean-data>\n <!-- #endif -->\n <boolean-data :defaultValue=\"true\" title=\"允许纵向滚动\" @change=\"change_scroll_y_boolean\"></boolean-data>\n <!-- #ifdef APP -->\n <boolean-data :defaultValue=\"false\" title=\"允许横向滚动\" @change=\"change_scroll_x_boolean\"></boolean-data>\n <!-- #endif -->\n <input-data defaultValue=\"50\" title=\"距顶部/左边多远时（单位px），触发 scrolltoupper 事件\" type=\"number\"\n @confirm=\"confirm_upper_threshold_input\"></input-data>\n <input-data defaultValue=\"50\" title=\"距底部/右边多远时（单位px），触发 scrolltolower 事件\" type=\"number\"\n @confirm=\"confirm_lower_threshold_input\"></input-data>\n <input-data defaultValue=\"0\" title=\"设置竖向滚动条位置\" type=\"number\" @confirm=\"confirm_scroll_top_input\"></input-data>\n <!-- #ifdef APP -->\n <input-data defaultValue=\"0\" title=\"设置横向滚动条位置\" type=\"number\" @confirm=\"confirm_scroll_left_input\"></input-data>\n <input-data defaultValue=\"#FFF\" title=\"设置下拉刷新区域背景颜色\" type=\"text\"\n @confirm=\"confirm_refresher_background_input\"></input-data>\n <enum-data :items=\"size_enum\" title=\"通过id位置跳转\" @change=\"item_change_size_enum\"></enum-data>\n <navigator url=\"/pages/component/list-view/list-view-refresh\">\n <button type=\"primary\" class=\"button\">\n list-view 下拉刷新\n </button>\n </navigator>\n <!-- #endif -->\n <navigator url=\"/pages/component/list-view/list-view-multiplex\">\n <button type=\"primary\" class=\"button\">\n list-view 对list-item复用测试\n </button>\n </navigator>\n <navigator url=\"/pages/component/list-view/list-view-multiplex-input\">\n <button type=\"primary\" class=\"button\">\n list-view 复用测试（item中嵌入input）\n </button>\n </navigator>\n <navigator url=\"/pages/component/list-view/list-view-multiplex-video\">\n <button type=\"primary\" class=\"button\">\n list-view 复用测试（item中嵌入video）\n </button>\n </navigator>\n <navigator url=\"/pages/component/list-view/list-view-children-in-slot\">\n <button type=\"primary\" class=\"button\">\n list-view 测试插槽中子组件增删\n </button>\n </navigator>\n </view>\n </scroll-view>\n</template>\n\n<style>\n .main {\n max-height: 250px;\n padding: 5px 0;\n border-bottom: 1px solid rgba(0, 0, 0, .06);\n flex-direction: row;\n justify-content: center;\n }\n\n .main .list-item {\n width: 100%;\n height: 250px;\n border: 1px solid #666;\n background-color: #66ccff;\n align-items: center;\n justify-content: center;\n }\n\n .tip-text {\n color: #888;\n font-size: 12px;\n }\n\n .refresh-box {\n justify-content: center;\n align-items: center;\n flex-direction: row;\n height: 45px;\n width: 100%;\n }\n\n .button {\n margin-top: 15px;\n }\n</style>\n\n```\n>Script\n```uts\n\n type ScrollEventTest = {\n type: string;\n target: UniElement | null;\n currentTarget: UniElement | null;\n direction?:string\n }\n import { ItemType } from '@/components/enum-data/enum-data'\n export default {\n data() {\n return {\n refresher_triggered_boolean: false,\n refresher_enabled_boolean: false,\n scroll_with_animation_boolean: false,\n show_scrollbar_boolean: false,\n bounces_boolean: true,\n scroll_y_boolean: true,\n scroll_x_boolean: false,\n scroll_direction: \"vertical\",\n upper_threshold_input: 50,\n lower_threshold_input: 50,\n scroll_top_input: 0,\n scroll_left_input: 0,\n refresher_background_input: \"#FFF\",\n scrollData: [] as Array<string>,\n size_enum: [{ \"value\": 0, \"name\": \"item---0\" }, { \"value\": 3, \"name\": \"item---3\" }] as ItemType[],\n scrollIntoView: \"\",\n refresherrefresh: false,\n refresher_default_style_input: \"black\",\n text: ['继续下拉执行刷新', '释放立即刷新', '刷新中', \"\"],\n state: 3,\n reset: true,\n // 自动化测试\n isScrollTest:'',\n isScrolltolowerTest:'',\n isScrolltoupperTest:'',\n // 在web端scroll事件event参数中detail类型报错，先条件编译处理\n // #ifndef WEB\n scrollDetailTest:null as UniScrollEventDetail|null,\n scrollEndDetailTest:null as UniScrollEventDetail|null,\n // #endif\n }\n },\n onLoad() {\n let lists : Array<string> = []\n for (let i = 0; i < 10; i++) {\n lists.push(\"item---\" + i)\n }\n this.scrollData = lists\n },\n methods: {\n list_view_click() { console.log(\"组件被点击时触发\") },\n list_view_touchstart() { console.log(\"手指触摸动作开始\") },\n list_view_touchmove() { console.log(\"手指触摸后移动\") },\n list_view_touchcancel() { console.log(\"手指触摸动作被打断，如来电提醒，弹窗\") },\n list_view_touchend() { console.log(\"手指触摸动作结束\") },\n list_view_tap() { console.log(\"手指触摸后马上离开\") },\n list_view_longpress() { console.log(\"如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。\") },\n list_view_refresherpulling(e : RefresherEvent) {\n console.log(\"下拉刷新控件被下拉\")\n if (this.reset) {\n if (e.detail.dy > 45) {\n this.state = 1\n } else {\n this.state = 0\n }\n }\n },\n list_view_refresherrefresh() {\n console.log(\"下拉刷新被触发 \")\n this.refresherrefresh = true\n this.refresher_triggered_boolean = true\n this.state = 2\n this.reset = false;\n setTimeout(() => {\n this.refresher_triggered_boolean = false\n }, 1500)\n },\n list_view_refresherrestore() {\n this.refresherrefresh = false\n this.state = 3\n this.reset = true\n console.log(\"下拉刷新被复位\")\n },\n list_view_refresherabort() { console.log(\"下拉刷新被中止\") },\n list_view_scrolltoupper(e : UniScrollToUpperEvent) {\n console.log(\"滚动到顶部/左边，会触发 scrolltoupper 事件 direction=\" + e.detail.direction)\n this.checkEventTest({\n type:e.type,\n target:e.target,\n currentTarget:e.currentTarget,\n direction:e.detail.direction,\n } as ScrollEventTest,'scrolltoupper')\n },\n list_view_scrolltolower(e : UniScrollToLowerEvent) {\n console.log(\"滚动到底部/右边，会触发 scrolltolower 事件 direction=\" + e.detail.direction)\n this.checkEventTest({\n type:e.type,\n target:e.target,\n currentTarget:e.currentTarget,\n direction:e.detail.direction,\n } as ScrollEventTest,'scrolltolower')\n },\n list_view_scroll(e:UniScrollEvent) {\n console.log(\"滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}\")\n // #ifndef WEB\n this.scrollDetailTest = e.detail\n // #endif\n this.checkEventTest({\n type:e.type,\n target:e.target,\n currentTarget:e.currentTarget\n } as ScrollEventTest,'scroll')\n },\n list_view_scrollend(e:UniScrollEvent){\n console.log(\"滚动结束时触发\",e.detail)\n // #ifndef WEB\n this.scrollEndDetailTest = e.detail\n // #endif\n this.checkEventTest({\n type:e.type,\n target:e.target,\n currentTarget:e.currentTarget\n } as ScrollEventTest,'scrollend')\n },\n list_item_click() { console.log(\"list-item组件被点击时触发\") },\n list_item_touchstart() { console.log(\"手指触摸list-item组件动作开始\") },\n list_item_touchmove() { console.log(\"手指触摸list-item组件后移动\") },\n list_item_touchcancel() { console.log(\"手指触摸list-item组件动作被打断，如来电提醒，弹窗\") },\n list_item_touchend() { console.log(\"手指触摸list-item组件动作结束\") },\n list_item_tap() { console.log(\"手指触摸list-item组件后马上离开\") },\n list_item_longpress() { console.log(\"list-item组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。\") },\n change_refresher_triggered_boolean(checked : boolean) { this.refresher_triggered_boolean = checked },\n change_refresher_enabled_boolean(checked : boolean) { this.refresher_enabled_boolean = checked },\n change_scroll_with_animation_boolean(checked : boolean) { this.scroll_with_animation_boolean = checked },\n change_show_scrollbar_boolean(checked : boolean) { this.show_scrollbar_boolean = checked },\n change_bounces_boolean(checked : boolean) { this.bounces_boolean = checked },\n change_scroll_y_boolean(checked : boolean) {\n this.scroll_y_boolean = checked\n this.change_scroll_direction()\n },\n change_scroll_x_boolean(checked : boolean) {\n this.scroll_x_boolean = checked\n this.change_scroll_direction()\n },\n change_scroll_direction() {\n if (this.scroll_y_boolean && this.scroll_x_boolean || this.scroll_y_boolean) {\n this.scroll_direction = \"vertical\"\n } else if (!this.scroll_y_boolean && !this.scroll_x_boolean) {\n this.scroll_direction = \"none\"\n } else if (!this.scroll_y_boolean && this.scroll_x_boolean) {\n this.scroll_direction = \"horizontal\"\n }\n },\n confirm_upper_threshold_input(value : number) { this.upper_threshold_input = value },\n confirm_lower_threshold_input(value : number) { this.lower_threshold_input = value },\n confirm_scroll_top_input(value : number) { this.scroll_top_input = value },\n confirm_scroll_left_input(value : number) { this.scroll_left_input = value },\n confirm_refresher_background_input(value : string) { this.refresher_background_input = value },\n item_change_size_enum(index : number) { this.scrollIntoView = \"item---\" + index },\n // 自动化测试专用（由于事件event参数对象中存在循环引用，在ios端JSON.stringify报错，自动化测试无法page.data获取）\n checkEventTest(e:ScrollEventTest, eventName:String){\n const isPass = e.type === eventName && e.target instanceof UniElement && e.currentTarget instanceof UniElement;\n const result = isPass ? `${eventName}:Success` : `${eventName}:Fail`;\n switch (eventName){\n case 'scroll':\n this.isScrollTest = result\n break;\n case 'scrolltolower':\n this.isScrolltolowerTest = result + `-${e.direction}`\n break;\n case 'scrolltoupper':\n this.isScrolltoupperTest = result + `-${e.direction}`\n break;\n default:\n break;\n }\n },\n //自动化测试例专用\n check_scroll_height() : Boolean {\n var listElement = this.$refs[\"listview\"] as UniElement\n console.log(\"check_scroll_height--\" + listElement.scrollHeight)\n if (listElement.scrollHeight > 2000) {\n return true\n }\n return false\n },\n //自动化测试例专用\n check_scroll_width() : Boolean {\n var listElement = this.$refs[\"listview\"] as UniElement\n console.log(\"check_scroll_width\" + listElement.scrollWidth)\n if (listElement.scrollWidth > 2000) {\n return true\n }\n return false\n },\n change_refresher_style_boolean(checked : boolean) {\n if (checked) {\n this.refresher_default_style_input = \"none\"\n } else {\n this.refresher_default_style_input = \"black\"\n }\n }\n }\n }\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.02 | 3.9 | 4.11 |\n","children":"### 子组件 @children-tags \n - [list-item](#list-item)\n- [sticky-header](https://uniapp.dcloud.net.cn/uni-app-x/component/sticky.html#sticky-header)\n- [sticky-section](https://uniapp.dcloud.net.cn/uni-app-x/component/sticky.html#sticky-section)","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.list-view)\n"},"navigator":{"name":"## navigator","description":"> 组件类型：UniNavigatorElement \n\n 页面链接","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| target | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 在哪个目标上发生跳转，默认当前应用 |\n| url | string([string.PageURIString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 当前应用内的跳转链接 |\n| open-type | string | \"navigate\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 跳转方式 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| navigate | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 对应 uni.navigateTo 或 navigateToMiniProgram 的功能 |\n@| redirect | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 对应 uni.redirectTo 的功能 |\n@| switchTab | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 对应 uni.switchTab 的功能 |\n@| reLaunch | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 对应 uni.reLaunch 的功能 |\n@| navigateBack | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 对应 uni.navigateBack 的功能 |\n| delta | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 当 open-type 为 navigateBack 时有效，表示回退的层数 |\n| app-id | string | - | - | 当target=\"miniProgram\"时有效，要打开的小程序 appId |\n| path | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 当target=\"miniProgram\"时有效，打开的页面路径，如果为空则打开首页 |\n| extra-data | object | - | - | 当target=\"miniProgram\"时有效，需要传递给目标应用的数据，目标应用可在 App.onLaunch()，App.onShow() 中获取到这份数据 |\n| version | string | - | - | 当target=\"miniProgram\"时有效，要打开的小程序版本，有效值 develop（开发版），trial（体验版），release（正式版），仅在当前小程序为开发版或体验版时此参数有效；如果当前小程序是体验版或正式版，则打开的小程序必定是正式版 |\n| animation-type | string | \"pop-in/out\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.18\",\"4.11\"]]}' /> | 当 open-type=\"navigateTo\" 或 open-type=\"navigateBack\" 时有效，窗口的显示/关闭的动画类型。 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| auto | - | 自动选择动画效果 |\n@| none | - | 无动画效果 |\n@| slide-in-right | - | 从右侧横向滑动效果 |\n@| slide-in-left | - | 左侧横向滑动效果 |\n@| slide-in-top | - | 从上侧竖向滑动效果 |\n@| slide-in-bottom | - | 从下侧竖向滑动效果 |\n@| fade-in | - | 从透明到不透明逐渐显示效果 |\n@| zoom-out | - | 从小到大逐渐放大显示效果 |\n@| zoom-fade-out | - | 从小到大逐渐放大并且从透明到不透明逐渐显示效果 |\n@| pop-in | - | 从右侧平移入栈动画效果 |\n@| slide-out-right | - | 横向向右侧滑出屏幕动画 |\n@| slide-out-left | - | 横向向左侧滑出屏幕动画 |\n@| slide-out-top | - | 竖向向上侧滑出屏幕动画 |\n@| slide-out-bottom | - | 竖向向下侧滑出屏幕动画 |\n@| fade-out | - | 从不透明到透明逐渐隐藏动画 |\n@| zoom-in | - | 从大逐渐缩小关闭动画 |\n@| zoom-fade-in | - | 从大逐渐缩小并且从不透明到透明逐渐隐藏关闭动画 |\n@| pop-out | - | 从右侧平移出栈动画效果 |\n| animation-duration | number | 300 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 当 open-type=\"navigateTo\" 或 open-type=\"navigateBack\" 时有效，窗口的显示/关闭动画的持续时间。 |\n| hover-class | string | - | - | 指定按下去的样式类。当 hover-class=\"none\" 时，没有点击态效果 |\n| hover-stop-propagation | boolean | - | - | 指定是否阻止本节点的祖先节点出现点击态 |\n| hover-start-time | number | - | - | 按住后多久出现点击态，单位毫秒 |\n| hover-stay-time | number | - | - | 手指松开后点击态保留时间，单位毫秒 |\n| render-link | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 是否给 navigator 组件加一层 a 标签控制 ssr 渲染 |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/navigator/navigator.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/navigator/navigator\n>Template\n```vue\n<template>\n <page-head :title=\"title\"></page-head>\n <view class=\"uni-padding-wrap uni-common-mt\">\n <navigator id=\"navigate\" class=\"navigator\" url=\"navigate?title=navigate\">\n <button type=\"default\">跳转到新页面</button>\n </navigator>\n <navigator id=\"redirect\" class=\"navigator\" url=\"redirect?title=redirect\" open-type=\"redirect\">\n <button type=\"default\">在当前页打开redirect</button>\n </navigator>\n <navigator id=\"switchTab\" class=\"navigator\" url=\"/pages/tabBar/template\" open-type=\"switchTab\">\n <button type=\"default\">切换到模板选项卡switchTab</button>\n </navigator>\n <navigator id=\"reLaunch\" class=\"navigator\" url=\"/pages/tabBar/component\" open-type=\"reLaunch\">\n <button type=\"default\">关闭所有页面回首页reLaunch</button>\n </navigator>\n <navigator id=\"reLaunch\" class=\"navigator\" open-type=\"navigateBack\">\n <button type=\"default\">返回上一页navigateBack</button>\n </navigator>\n <!-- <navigator id=\"reLaunch\" class=\"navigator\" open-type=\"exit\">\n <button type=\"default\">退出应用（仅Android和小程序生效）</button>\n </navigator> -->\n <navigator id=\"navigateToErrorPage\" class=\"navigator\" url=\"/pages/error-page/error-page\" >\n <button type=\"default\"> 打开不存在的页面 </button>\n </navigator>\n <navigator id=\"navigateToErrorPage\" class=\"navigator\">\n <button type=\"default\"> 未指定URL的跳转 </button>\n </navigator>\n <navigator style=\"flex-direction: row;justify-content: space-between;\">\n <text>两端对齐样式测试</text>\n <view style=\"width: 20px;height: 20px; background-color: aqua;\"></view>\n </navigator>\n </view>\n</template>\n\n\n\n<style>\n .navigator {\n margin-bottom: 15px;\n }\n</style>\n\n```\n>Script\n```uts\n\n export default {\n data() {\n return {\n title: 'navigator'\n }\n }\n }\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/navigator)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/navigator.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.navigator)\n"},"picker-view-column":{"name":"## picker-view-column","description":"仅可放置于 picker-view 中，其子节点未继承 picker-view 的选中框的高度，需要自己设置高度并居中","attribute":"","event":"","example":"","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.net.cn/component/picker-view.html#picker-view-column)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/picker-view.html)\n"},"picker-view":{"name":"## picker-view","description":"> 组件类型：UniPickerViewElement \n\n 嵌入页面的滚动选择器","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| value | array\\<number> | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | picker-view-column 选择的第几项 |\n| indicator-style | string([string.CSSString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 设置选择器中间选中框的样式 |\n| indicator-class | string([string.ClassString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 设置选择器中间选中框的类名 |\n| mask-style | string([string.CSSString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 设置蒙层的样式 |\n| mask-top-style | string([string.CSSString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 设置蒙层上半部分的样式 |\n| mask-bottom-style | string([string.CSSString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 设置蒙层下半部分的样式 |\n| mask-class | string([string.ClassString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 设置蒙层的类名 |\n| @change | (event: [UniPickerViewChangeEvent](#unipickerviewchangeevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0<br/>\t\t开始） |","event":"\n### 事件\n#### UniPickerViewChangeEvent\n\n##### UniPickerViewChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniPickerViewChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | Array\\<number\\> | 是 | - | - | - |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniPickerViewChangeEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 阻止当前事件的默认行为<br/> |\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/picker-view/picker-view.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/picker-view/picker-view\n>Template\n```vue\n<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\r\n\r\n<style>\r\n .picker-view {\r\n width: 100%;\r\n height: 320px;\r\n margin-top: 10px;\r\n }\r\n\r\n .item {\r\n height: 50px;\r\n }\r\n\r\n .text {\r\n line-height: 50px;\r\n text-align: center;\r\n }\r\n</style>\n\n```\n>Script\n```uts\n\n import { state, setEventCallbackNum } from '@/store/index.uts'\r\n export default {\r\n data() {\r\n const date = new Date()\r\n const _years : number[] = []\r\n const _year = date.getFullYear()\r\n const _months : number[] = []\r\n const _month : number = date.getMonth() + 1\r\n const _days : number[] = []\r\n const _day = date.getDate()\r\n for (let i = 2000; i <= _year; i++) {\r\n _years.push(i)\r\n }\r\n for (let i = 1; i <= 12; i++) {\r\n _months.push(i)\r\n }\r\n for (let i = 1; i <= 31; i++) {\r\n _days.push(i)\r\n }\r\n return {\r\n title: 'picker-view',\r\n years: _years as number[],\r\n year: _year as number,\r\n months: _months as number[],\r\n month: _month as number,\r\n days: _days as number[],\r\n day: _day as number,\r\n value: [_year - 2000, _month - 1, _day - 1] as number[],\r\n result: [] as number[],\r\n indicatorStyle: 'height: 50px;',\r\n maskTopStyle: '',\r\n maskBottomStyle: ''\r\n }\r\n },\r\n methods: {\n // 自动化测试\n getEventCallbackNum() : number {\n return state.eventCallbackNum\n },\n // 自动化测试\n setEventCallbackNum(num : number) {\n setEventCallbackNum(num)\n },\r\n bindChange(e : UniPickerViewChangeEvent) {\n // 自动化测试\n console.log(e.target?.tagName,e.type);\n if ((e.target?.tagName ?? '').includes('PICKER-VIEW')) {\n this.setEventCallbackNum(state.eventCallbackNum + 1)\n }\n if (e.type === 'change') {\n this.setEventCallbackNum(state.eventCallbackNum + 2)\n }\n\r\n const val = e.detail.value\r\n this.result = val\r\n this.year = this.years[val[0]]\r\n this.month = this.months[val[1]]\r\n this.day = this.days[val[2]]\r\n },\r\n setValue() {\r\n this.value = [0, 0, 0] as number[]\r\n },\r\n setValue1() {\r\n this.value = [10, 10, 10] as number[]\r\n },\r\n }\r\n }\r\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"### 子组件 @children-tags \n - [picker-view-column](#picker-view-column)","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/picker-view)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/picker-view.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.picker-view)\n"},"progress":{"name":"## progress","description":"> 组件类型：UniProgressElement \n\n 进度条","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| duration | number | 30 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 进度增加1%所需毫秒数 |\n| percent | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 百分比0~100 |\n| show-info | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 在进度条右侧显示百分比 |\n| border-radius | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 圆角大小 |\n| font-size | number | 16 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 右侧百分比字体大小 |\n| stroke-width | number | 6 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 进度条线的宽度，单位px |\n| activeColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#09BB07\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 已选择的进度条的颜色 |\n| backgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#EBEBEB\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 未选择的进度条的颜色 |\n| active | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 进度条从左往右的动画 |\n| active-mode | string | \"backwards\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | backwards: 动画从头播；forwards：动画从上次结束点接着播 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| backwards | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 动画从头播 |\n@| forwards | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 动画从上次结束点接着播 |\n| @activeend | (event: [UniProgressActiveendEvent](#uniprogressactiveendevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 动画完成事件 |","event":"\n### 事件\n#### UniProgressActiveendEvent\n\n##### UniProgressActiveendEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniProgressActiveendEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| curPercent | number | 是 | - | - | - |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniProgressActiveendEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 阻止当前事件的默认行为<br/> |\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/progress/progress.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/progress/progress\n>Template\n```vue\n\r\n\r\n<template>\r\n <view class=\"main\">\r\n <progress :duration=\"duration_input\" :percent=\"percent_input\" :show-info=\"show_info_boolean\"\r\n :stroke-width=\"stroke_width_input\" :activeColor=\"activeColor_input\" :backgroundColor=\"backgroundColor_input\"\r\n :active=\"active_boolean\" :active-mode=\"active_mode_enum[active_mode_enum_current].name\"\r\n @touchstart=\"progress_touchstart\" @touchmove=\"progress_touchmove\" @touchcancel=\"progress_touchcancel\"\r\n @touchend=\"progress_touchend\" @tap=\"progress_tap\" style=\"width: 80%\">\r\n <text>uni-app-x</text>\r\n </progress>\r\n </view>\r\n\r\n <scroll-view style=\"flex: 1\">\r\n <view class=\"content\">\r\n <page-head title=\"组件属性\"></page-head>\r\n <boolean-data :defaultValue=\"false\" title=\"进度条从左往右的动画\" @change=\"change_active_boolean\"></boolean-data>\r\n <boolean-data :defaultValue=\"false\" title=\"在进度条右侧显示百分比\" @change=\"change_show_info_boolean\"></boolean-data>\r\n <input-data defaultValue=\"30\" title=\"进度增加1%所需毫秒数\" type=\"number\" @confirm=\"confirm_duration_input\"></input-data>\r\n <input-data defaultValue=\"0\" title=\"百分比0~100\" type=\"number\" @confirm=\"confirm_percent_input\"></input-data>\r\n <input-data defaultValue=\"6\" title=\"进度条线的宽度，单位px\" type=\"number\"\r\n @confirm=\"confirm_stroke_width_input\"></input-data>\r\n <input-data defaultValue=\"#09BB07\" title=\"已选择的进度条的颜色\" type=\"text\"\r\n @confirm=\"confirm_activeColor_input\"></input-data>\r\n <input-data defaultValue=\"#EBEBEB\" title=\"未选择的进度条的颜色\" type=\"text\"\r\n @confirm=\"confirm_backgroundColor_input\"></input-data>\r\n <enum-data :items=\"active_mode_enum\" title=\"backwards: 动画从头播；forwards：动画从上次结束点接着播\"\r\n @change=\"radio_change_active_mode_enum\"></enum-data>\r\n </view>\r\n\r\n <view>\r\n <page-head title=\"默认及使用\"></page-head>\r\n <view class=\"uni-padding-wrap uni-common-mt\">\r\n <view class=\"progress-box\">\r\n <progress :percent=\"pgList[0]\" :active=\"true\" :border-radius=\"borderRadius\" :show-info=\"showInfo\"\r\n :font-size=\"fontSize\" :stroke-width=\"strokeWidth\" :background-color=\"backgroundColor\" class=\"progress p\"\r\n @activeend=\"activeend\" />\r\n </view>\r\n <view class=\"progress-box\">\r\n <progress :percent=\"pgList[1]\" :stroke-width=\"3\" class=\"progress p1\" />\r\n </view>\r\n <view class=\"progress-box\">\r\n <progress :percent=\"pgList[2]\" :stroke-width=\"3\" class=\"progress p2\" />\r\n </view>\r\n <view class=\"progress-box\">\r\n <progress :percent=\"pgList[3]\" activeColor=\"#10AEFF\" :stroke-width=\"3\" class=\"progress p3\" />\r\n </view>\r\n <view class=\"progress-control\">\r\n <button type=\"primary\" @click=\"setProgress\" class=\"button\">\r\n 设置进度\r\n </button>\r\n <button type=\"warn\" @click=\"clearProgress\" class=\"button\">\r\n 清除进度\r\n </button>\r\n </view>\r\n </view>\r\n </view>\r\n </scroll-view>\r\n</template>\r\n\r\n<style>\r\n .main {\r\n max-height: 250px;\r\n padding: 5px 0;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.06);\r\n flex-direction: row;\r\n justify-content: center;\r\n }\r\n\r\n .main .list-item {\r\n width: 100%;\r\n height: 100px;\r\n border: 1px solid #666;\r\n }\r\n\r\n .progress-box {\r\n height: 25px;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .button {\r\n margin-top: 10px;\r\n }\r\n</style>\n\n```\n>Script\n```uts\n\r\n import { state, setEventCallbackNum } from '@/store/index.uts'\r\n import { ItemType } from '@/components/enum-data/enum-data'\r\n export default {\r\n data() {\r\n return {\r\n title: 'progress',\r\n pgList: [0, 0, 0, 0] as number[],\r\n curPercent: 0,\r\n showInfo: true,\r\n borderRadius: 0,\r\n fontSize: 16,\r\n strokeWidth: 3,\r\n backgroundColor: '#EBEBEB',\r\n\r\n // 组件属性 autotest\r\n active_boolean: false,\r\n show_info_boolean: false,\r\n duration_input: 30,\r\n percent_input: 0,\r\n stroke_width_input: 6,\r\n activeColor_input: \"#09BB07\",\r\n backgroundColor_input: \"#EBEBEB\",\r\n active_mode_enum: [{ \"value\": 0, \"name\": \"backwards\" }, { \"value\": 1, \"name\": \"forwards\" }] as ItemType[],\r\n active_mode_enum_current: 0\r\n }\r\n },\r\n methods: {\r\n // 自动化测试\r\n getEventCallbackNum() : number {\r\n return state.eventCallbackNum\r\n },\r\n // 自动化测试\r\n setEventCallbackNum(num : number) {\r\n setEventCallbackNum(num)\r\n },\r\n\r\n setProgress() {\r\n this.pgList = [20, 40, 60, 80] as number[]\r\n },\r\n clearProgress() {\r\n this.pgList = [0, 0, 0, 0] as number[]\r\n },\r\n activeend(e : UniProgressActiveendEvent) {\r\n // 自动化测试\r\n if ((e.target?.tagName ?? '').includes('PROGRESS')) {\r\n this.setEventCallbackNum(state.eventCallbackNum + 1)\r\n }\r\n if (e.type === 'activeend') {\r\n this.setEventCallbackNum(state.eventCallbackNum + 2)\r\n }\r\n this.curPercent = e.detail.curPercent\r\n },\r\n progress_touchstart() { console.log(\"手指触摸动作开始\") },\r\n progress_touchmove() { console.log(\"手指触摸后移动\") },\r\n progress_touchcancel() { console.log(\"手指触摸动作被打断，如来电提醒，弹窗\") },\r\n progress_touchend() { console.log(\"手指触摸动作结束\") },\r\n progress_tap() { console.log(\"手指触摸后马上离开\") },\r\n change_active_boolean(checked : boolean) { this.active_boolean = checked },\r\n change_show_info_boolean(checked : boolean) { this.show_info_boolean = checked },\r\n confirm_duration_input(value : number) { this.duration_input = value },\r\n confirm_percent_input(value : number) { this.percent_input = value },\r\n confirm_stroke_width_input(value : number) { this.stroke_width_input = value },\r\n confirm_activeColor_input(value : string) { this.activeColor_input = value },\r\n confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },\r\n radio_change_active_mode_enum(checked : number) { this.active_mode_enum_current = checked }\r\n }\r\n }\r\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/progress)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/progress.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.progress)\n"},"radio":{"name":"## radio","description":"> 组件类型：UniRadioElement \n\n 单选项。在1组radio-group中只能选中1个","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| disabled | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否禁用 |\n| value | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | \\<radio/> 标识。当该radio 选中时，radio-group的 change 事件会携带radio的value |\n| checked | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | \\<radio/> 当前是否选中 |\n| color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007AFF\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | radio的颜色 |\n| backgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | radio默认的背景颜色 |\n| borderColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#d1d1d1\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | radio默认的边框颜色 |\n| activeBackgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007AFF\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | radio选中时的背景颜色，优先级大于color属性 |\n| activeBorderColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | radio选中时的边框颜色 |\n| ~~iconColor~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | radio的图标颜色 |\n| foreColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.18\",\"4.18\",\"4.18\"]]}' /> | radio的图标颜色 |","event":"","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/radio/radio.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/radio/radio\n>Template\n```vue\n\n\n<template>\n <view class=\"main\">\n <radio :disabled=\"disabled_boolean\" :checked=\"checked_boolean\" :color=\"color_input\"\n :backgroundColor=\"backgroundColor_input\" :borderColor=\"borderColor_input\"\n :activeBackgroundColor=\"activeBackgroundColor_input\" :activeBorderColor=\"activeBorderColor_input\"\n :iconColor=\"iconColor_input\" @click=\"radio_click\" @touchstart=\"radio_touchstart\" @touchmove=\"radio_touchmove\"\n @touchcancel=\"radio_touchcancel\" @touchend=\"radio_touchend\" @tap=\"radio_tap\" @longpress=\"radio_longpress\">\n <text>uni-app-x</text>\n </radio>\n </view>\n\n <scroll-view style=\"flex: 1\">\n <view class=\"content\">\n <page-head title=\"组件属性\"></page-head>\n <boolean-data :defaultValue=\"false\" title=\"<radio/> 当前是否选中\" @change=\"change_checked_boolean\"></boolean-data>\n <boolean-data :defaultValue=\"false\" title=\"是否禁用\" @change=\"change_disabled_boolean\"></boolean-data>\n <input-data defaultValue=\"#007AFF\" title=\"radio的颜色\" type=\"text\" @confirm=\"confirm_color_input\"></input-data>\n <input-data defaultValue=\"#ffffff\" title=\"radio默认的背景颜色\" type=\"text\"\n @confirm=\"confirm_backgroundColor_input\"></input-data>\n <input-data defaultValue=\"#d1d1d1\" title=\"radio默认的边框颜色\" type=\"text\"\n @confirm=\"confirm_borderColor_input\"></input-data>\n <input-data defaultValue=\"#007AFF\" title=\"radio选中时的背景颜色，优先级大于color属性\" type=\"text\"\n @confirm=\"confirm_activeBackgroundColor_input\"></input-data>\n <input-data defaultValue=\"\" title=\"radio选中时的边框颜色\" type=\"text\"\n @confirm=\"confirm_activeBorderColor_input\"></input-data>\n <input-data defaultValue=\"#ffffff\" title=\"radio的图标颜色\" type=\"text\" @confirm=\"confirm_iconColor_input\"></input-data>\n </view>\n\n <view>\n <page-head title=\"默认及使用\"></page-head>\n <view class=\"uni-padding-wrap\">\n <view class=\"uni-title uni-common-mt\">\n <text class=\"uni-title-text\"> 默认样式 </text>\n </view>\n <radio-group class=\"uni-flex uni-row radio-group\" @change=\"testChange\" style=\"flex-wrap: wrap\">\n <radio id=\"trigger-change\" value=\"r\" :checked=\"checked\" :color=\"color\" style=\"margin-right: 15px\"\n class=\"radio r\">选中\n </radio>\n <radio value=\"r1\" style=\"margin-right: 15px\" class=\"radio r1\">{{\n text\n }}</radio>\n <radio value=\"r2\" :disabled=\"disabled\" class=\"radio r2\">禁用</radio>\n <radio value=\"r3\" class=\"radio r3\" style=\"margin-top: 10px\">{{\n wrapText\n }}</radio>\n </radio-group>\n </view>\n\n <view class=\"uni-padding-wrap\">\n <view class=\"uni-title uni-common-mt\">\n <text class=\"uni-title-text\"> 不同颜色和尺寸的radio </text>\n </view>\n <radio-group class=\"uni-flex uni-row radio-group\">\n <radio value=\"r1\" :checked=\"true\" color=\"#FFCC33\" style=\"transform: scale(0.7); margin-right: 15px\"\n class=\"radio\">选中\n </radio>\n <radio value=\"r2\" color=\"#FFCC33\" style=\"transform: scale(0.7)\" class=\"radio\">未选中</radio>\n </radio-group>\n </view>\n\n <view class=\"uni-padding-wrap\">\n <view class=\"uni-title uni-common-mt\">\n <text class=\"uni-title-text\"> 推荐展示样式 </text>\n </view>\n </view>\n <view class=\"uni-list uni-common-pl\">\n <radio-group @change=\"radioChange\" class=\"radio-group\">\n <radio class=\"uni-list-cell uni-list-cell-pd radio recommand\" v-for=\"(item, index) in items\" :key=\"item.value\"\n :class=\"index < items.length - 1 ? 'uni-list-cell-line' : ''\" :value=\"item.value\"\n :checked=\"index === current\">\n {{ item.name }}\n </radio>\n </radio-group>\n </view>\n </view>\n </scroll-view>\n</template>\n\n<style>\n .main {\n max-height: 250px;\n padding: 5px 0;\n border-bottom: 1px solid rgba(0, 0, 0, 0.06);\n flex-direction: row;\n justify-content: center;\n }\n\n .main .list-item {\n width: 100%;\n height: 100px;\n border: 1px solid #666;\n }\n\n .uni-list-cell {\n justify-content: flex-start;\n }\n</style>\n\n```\n>Script\n```uts\n\n type ItemType = {\n value : string\n name : string\n }\n export default {\n data() {\n return {\n items: [\n {\n value: 'CHN',\n name: '中国',\n },\n {\n value: 'USA',\n name: '美国',\n },\n\n {\n value: 'BRA',\n name: '巴西',\n },\n {\n value: 'JPN',\n name: '日本',\n },\n {\n value: 'ENG',\n name: '英国',\n },\n {\n value: 'FRA',\n name: '法国',\n },\n ] as ItemType[],\n current: 0,\n eventTest: false,\n\n value: '',\n text: '未选中',\n wrapText: 'uni-app x，终极跨平台方案\\nuts，大一统语言',\n disabled: true,\n checked: true,\n color: '#007aff',\n // 组件属性 autotest\n checked_boolean: false,\n disabled_boolean: false,\n color_input: \"#007AFF\",\n backgroundColor_input: \"#ffffff\",\n borderColor_input: \"#d1d1d1\",\n activeBackgroundColor_input: \"#007AFF\",\n activeBorderColor_input: \"\",\n iconColor_input: \"#ffffff\"\n }\n },\n\n methods: {\n radioChange(e : UniRadioGroupChangeEvent) {\n\n // 自动化测试\n console.log('test: radio event detail', e.target?.tagName, e.type)\n if ((e.target?.tagName ?? '') == 'RADIO-GROUP' && e.type == 'change') {\n this.eventTest = true\n }\n\n const selected = this.items.find((item) : boolean => {\n return item.value == e.detail.value\n })\n uni.showToast({\n icon: 'none',\n title: '当前选中:' + selected?.name,\n })\n },\n testChange(e : UniRadioGroupChangeEvent) {\n\n this.value = e.detail.value\n },\n radio_click() { console.log(\"组件被点击时触发\") },\n radio_touchstart() { console.log(\"手指触摸动作开始\") },\n radio_touchmove() { console.log(\"手指触摸后移动\") },\n radio_touchcancel() { console.log(\"手指触摸动作被打断，如来电提醒，弹窗\") },\n radio_touchend() { console.log(\"手指触摸动作结束\") },\n radio_tap() { console.log(\"手指触摸后马上离开\") },\n radio_longpress() { console.log(\"如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。\") },\n change_checked_boolean(checked : boolean) { this.checked_boolean = checked },\n change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },\n confirm_color_input(value : string) { this.color_input = value },\n confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },\n confirm_borderColor_input(value : string) { this.borderColor_input = value },\n confirm_activeBackgroundColor_input(value : string) { this.activeBackgroundColor_input = value },\n confirm_activeBorderColor_input(value : string) { this.activeBorderColor_input = value },\n confirm_iconColor_input(value : string) { this.iconColor_input = value }\n }\n }\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/radio)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/radio-group.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.radio)\n"},"radio-group":{"name":"## radio-group","description":"> 组件类型：UniRadioGroupElement \n\n 单选组，内部由多个 radio 组成","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| @change | (event: [UniRadioGroupChangeEvent](#uniradiogroupchangeevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | radio-group 中的选中项发生变化时触发 change 事件，event.detail = {value: 选中项radio的value} |","event":"\n### 事件\n#### UniRadioGroupChangeEvent\n\n##### UniRadioGroupChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniRadioGroupChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | string | 是 | - | - | - |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniRadioGroupChangeEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 阻止当前事件的默认行为<br/> |\n","example":"","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"### 子组件 @children-tags \n - [radio](#radio)","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/radio)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/radio-group.html)\n"},"form":{"name":"## form","description":"> 组件类型：UniFormElement \n\n 表单","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| disabled | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.97\",\"4.11\"]]}' /> | 是否禁用 |\n| report-submit | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 是否返回 formId 用于发送模板消息 |\n| @submit | (event: [UniFormSubmitEvent](#uniformsubmitevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.97\",\"4.11\"]]}' /> | 携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'}} |\n| @reset | (event: [UniFormResetEvent](#uniformresetevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.97\",\"4.11\"]]}' /> | 表单重置时会触发 reset 事件 |","event":"\n### 事件\n#### UniFormSubmitEvent\n\n##### UniFormSubmitEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniFormSubmitEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | [UTSJSONObject](/uts/buildin-object-api/utsjsonobject.md) | 是 | - | - | - |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniFormSubmitEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 阻止当前事件的默认行为<br/> |\n\n#### UniFormResetEvent\n\n##### UniFormResetEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | UniFormResetEventDetail | 是 | - | - | - |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniFormResetEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 阻止当前事件的默认行为<br/> |\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/form/form.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/form/form\n>Template\n```vue\n<template>\n <!-- #ifdef APP -->\n <scroll-view class=\"scroll-view\">\n <!-- #endif -->\n <view class=\"page\">\n <form @submit=\"onFormSubmit\" @reset=\"onFormReset\">\n <view class=\"uni-form-item\">\n <view class=\"title\">姓名</view>\n <input class=\"uni-input\" name=\"nickname\" :value=\"nickname\" placeholder=\"请输入姓名\" maxlength=\"-1\"/>\n </view>\n <view class=\"uni-form-item\">\n <view class=\"title\">性别</view>\n <radio-group name=\"gender\" class=\"flex-row\">\n <view class=\"group-item\">\n <radio value=\"0\" :checked=\"gender=='0'\" /><text>男</text>\n </view>\n <view class=\"group-item\">\n <radio value=\"1\" :checked=\"gender=='1'\" /><text>女</text>\n </view>\n </radio-group>\n </view>\n <view class=\"uni-form-item\">\n <view class=\"title\">爱好</view>\n <checkbox-group name=\"loves\" class=\"flex-row\">\n <view class=\"group-item\">\n <checkbox value=\"0\" :checked=\"loves.indexOf('0')>-1\" /><text>读书</text>\n </view>\n <view class=\"group-item\">\n <checkbox value=\"1\" :checked=\"loves.indexOf('1')>-1\" /><text>写字</text>\n </view>\n </checkbox-group>\n </view>\n <view class=\"uni-form-item\">\n <view class=\"title\">年龄</view>\n <slider name=\"age\" :value=\"age\" :show-value=\"true\"></slider>\n </view>\n <view class=\"uni-form-item\">\n <view class=\"title\">保留选项</view>\n <view>\n <switch name=\"switch\" :checked=\"switch\" />\n </view>\n </view>\n <view class=\"uni-form-item\">\n <view class=\"title\">备注</view>\n <textarea name=\"comment\" :value=\"comment\" placeholder=\"请输入备注\" style=\"background: #FFF;\"/>\n <!-- <textarea class=\"uni-input\" name=\"comment\" :value=\"comment\" placeholder=\"这个class的写法，导致iOS和Android产生了高度差异\"/> -->\n </view>\n <view class=\"uni-btn-v flex-row\">\n <button class=\"btn btn-submit\" form-type=\"submit\" type=\"primary\">Submit</button>\n <button class=\"btn btn-reset\" type=\"default\" form-type=\"reset\">Reset</button>\n </view>\n </form>\n <view class=\"result\">提交的表单数据</view>\n <textarea class=\"textarea\" :value=\"formDataText\" :maxlength=\"-1\" :auto-height=\"true\"></textarea>\n </view>\n <!-- #ifdef APP -->\n </scroll-view>\n <!-- #endif -->\n</template>\n\n\n\n<style>\n .scroll-view {\n flex: 1;\n }\n\n .page {\n padding: 15px;\n }\n\n .flex-row {\n flex-direction: row;\n }\n\n .uni-form-item {\n padding: 15px 0;\n }\n\n .title {\n margin-bottom: 10px;\n }\n\n .group-item {\n flex-direction: row;\n margin-right: 20px;\n }\n\n .btn {\n flex: 1;\n }\n\n .btn-submit {\n margin-right: 5px;\n }\n\n .btn-reset {\n margin-left: 5px;\n }\n\n .result {\n margin-top: 30px;\n }\n\n .textarea {\n margin-top: 5px;\n padding: 5px;\n background-color: #fff;\n }\n</style>\n\n```\n>Script\n```uts\n\n export default {\n data() {\n return {\n nickname: '',\n gender: '0',\n age: 18,\n loves: ['0'],\n switch: true,\n comment:'',\n formData: {} as UTSJSONObject,\n // 仅测试\n testVerifySubmit: false,\n testVerifyReset: false,\n }\n },\n computed: {\n formDataText() : string {\n return JSON.stringify(this.formData)\n }\n },\n methods: {\n onFormSubmit: function (e : UniFormSubmitEvent) {\n console.log(e.target?.tagName ?? '123');\n console.log(e.type);\n this.formData = e.detail.value\n\n // 仅测试\n this.testVerifySubmit = (e.type == 'submit' && (e.target?.tagName ?? '') == \"FORM\")\n },\n onFormReset: function (e : UniFormResetEvent) {\n this.formData = {}\n\n // 仅测试\n this.testVerifyReset = (e.type == 'reset' && (e.target?.tagName ?? '') == \"FORM\")\n }\n }\n }\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.97 | 4.11 |\n","children":"","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/form)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/form.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form)\n"},"rich-text":{"name":"## rich-text","description":"> 组件类型：UniRichTextElement \n\n 富文本。可渲染文字样式、图片、超链接。支持部分HTML标签","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| nodes | array \\| string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 节点列表 \\| HTML String |\n| selectable | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 文本是否可选 |\n| @itemclick | (event: [UniRichTextItemClickEvent](#unirichtextitemclickevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"3.9\",\"4.11\"]]}' /> | 拦截点击事件（只支持 a、img标签），返回用户自定义数据或img标签的src属性或a标签的href属性。event.detail={ ref \\| src \\| href } |","event":"\n### 事件\n#### UniRichTextItemClickEvent\n\n##### UniRichTextItemClickEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniRichTextItemClickEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| ref | string \\| null | 否 | - | - | 自定义数据 |\n@| src | string \\| null | 否 | - | - | \\<img/>图片链接 |\n@| href | string \\| null | 否 | - | - | \\<a/>超链接 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniRichTextItemClickEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 阻止当前事件的默认行为<br/> |\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/rich-text/rich-text.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/rich-text/rich-text\n>Template\n```vue\n<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\n\n<style>\n .text-box {\n padding: 20px 0;\n background-color: white;\n }\n</style>\n\n```\n>Script\n```uts\n\n\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"### 子组件 @children-tags \n 不可以嵌套组件","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/rich-text)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/rich-text.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.rich-text)\n"},"scroll-view":{"name":"## scroll-view","description":"> 组件类型：UniScrollViewElement \n\n 可滚动视图容器","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| type | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.11\",\"4.11\"]]}' /> | 渲染模式，可取值 nested |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| nested | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.11\",\"4.11\"]]}' /> | 嵌套模式。用于处理父子 scroll-view 间的嵌套滚动，子节点只能是 nested-scroll-header nested-scroll-body 组件或自定义 refresher |\n| direction | string | \"vertical\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | 滚动方向，可取值 none、all、horizontal、vertical，默认值vertical |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | 禁止滚动 |\n@| all | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 横向竖向都可滚动 app端不支持 |\n@| horizontal | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | 横向滚动 |\n@| vertical | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | 竖向滚动 |\n| ~~scroll-x~~ | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 允许横向滚动，不支持同时设置scroll-y属性为true，同时设置true时scroll-y生效。已废弃，请改用direction |\n| ~~scroll-y~~ | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 允许纵向滚动，不支持同时设置scroll-x属性为true，同时设置true时scroll-y生效。已废弃，请改用direction |\n| ~~rebound~~ | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"3.9\",\"x\"]]}' /> | 控制是否回弹效果。已废弃，请改用bounces |\n| associative-container | string | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.11\",\"4.11\"]]}' /> | 关联的滚动容器 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| nested-scroll-view | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.11\",\"4.11\"]]}' /> | 嵌套滚动 |\n| enable-back-to-top | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"4.11\"]]}' /> | iOS点击顶部状态栏滚动条返回顶部，只支持竖向 |\n| bounces | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.0\",\"4.11\"]]}' /> | 控制是否回弹效果 优先级高于rebound |\n| upper-threshold | number | 50 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 距顶部/左边多远时（单位px），触发 scrolltoupper 事件 |\n| lower-threshold | number | 50 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 距底部/右边多远时（单位px），触发 scrolltolower 事件 |\n| scroll-top | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 设置竖向滚动条位置 |\n| scroll-left | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 设置横向滚动条位置 |\n| scroll-into-view | string([string.IDString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素起始位置 |\n| scroll-with-animation | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否在设置滚动条位置时使用滚动动画，设置false没有滚动动画 |\n| refresher-enabled | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 开启下拉刷新，暂时不支持scroll-x = true横向刷新 |\n| refresher-threshold | number | 45 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 设置下拉刷新阈值 |\n| refresher-max-drag-distance | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 设置下拉最大拖拽距离（单位px），默认是下拉刷新控件高度的2.5倍 |\n| refresher-default-style | string | \"black\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 设置下拉刷新默认样式，支持设置 black \\| white \\| none， none 表示不使用默认样式 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| black | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"3.9\",\"4.11\"]]}' /> | 深颜色雪花样式 |\n@| white | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"3.9\",\"4.11\"]]}' /> | 浅白色雪花样式 |\n@| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"3.9\",\"4.11\"]]}' /> | 不使用默认样式 |\n| refresher-background | string([string.ColorString](/uts/data-type.md#ide-string)) | \"transparent\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 设置下拉刷新区域背景颜色，默认透明 |\n| refresher-triggered | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发 |\n| show-scrollbar | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 控制是否出现滚动条 |\n| custom-nested-scroll | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"x\"]]}' /> | 子元素是否开启嵌套滚动 将滚动事件与父元素协商处理 |\n| nested-scroll-child | string([string.IDString](/uts/data-type.md#ide-string)) | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.97\",\"x\"]]}' /> | 嵌套滚动子元素的id属性，不支持ref，scroll-view惯性滚动时会让对应id元素视图进行滚动，子元素滚动时会触发scroll-view的nestedprescroll事件，嵌套子元素需要设置custom-nested-scroll = true |\n| @refresherpulling | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 下拉刷新控件被下拉 |\n| @refresherrefresh | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 下拉刷新被触发 |\n| @refresherrestore | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 下拉刷新被复位 |\n| @refresherabort | (event: [UniRefresherEvent](#unirefresherevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 下拉刷新被中止 |\n| @scrolltoupper | (event: [UniScrollToUpperEvent](#uniscrolltoupperevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 滚动到顶部/左边，会触发 scrolltoupper 事件 |\n| @scrolltolower | (event: [UniScrollToLowerEvent](#uniscrolltolowerevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 滚动到底部/右边，会触发 scrolltolower 事件 |\n| @scroll | (event: [UniScrollEvent](#uniscrollevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |\n| @scrollend | (event: [UniScrollEvent](#uniscrollevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]]}' /> | 滚动结束时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |\n| @startnestedscroll | (event: [UniStartNestedScrollEvent](#unistartnestedscrollevent)) => Boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"x\"]]}' /> | 子元素开始滚动时触发, return true表示与子元素开启滚动协商 默认return false! event = {node} |\n| @nestedprescroll | (event: [UniNestedPreScrollEvent](#uninestedprescrollevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"x\"]]}' /> | 子元素滚动时触发，可执行event.consumed(x,y)告知子元素deltaX、deltaY各消耗多少。子元素将执行差值后的deltaX、deltaY滚动距离。不执行consumed(x,y)则表示父元素不消耗deltaX、deltaY。event = {deltaX, deltaY} |\n| @stopnestedscroll | (event: [UniStopNestedScrollEvent](#unistopnestedscrollevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"x\"]]}' /> | 子元素滚动结束或意外终止时触发 |","event":"\n### 事件\n#### UniRefresherEvent\n\n##### UniRefresherEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniRefresherEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| dy | number | 是 | - | - | - |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniRefresherEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 阻止当前事件的默认行为<br/> |\n\n#### UniScrollToUpperEvent\n\n##### UniScrollToUpperEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniScrollToUpperEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| direction | string | 是 | - | - | 滚动方向 top 或 left |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniScrollToUpperEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 阻止当前事件的默认行为<br/> |\n\n#### UniScrollToLowerEvent\n\n##### UniScrollToLowerEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniScrollToLowerEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| direction | string | 是 | - | - | 滚动方向 bottom 或 right |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniScrollToLowerEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 阻止当前事件的默认行为<br/> |\n\n#### UniScrollEvent\n\n##### UniScrollEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniScrollEventDetail** | 是 | - | - | |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| scrollTop | number | 是 | - | - | 竖向滚动的距离 |\n@| scrollLeft | number | 是 | - | - | 横向滚动的距离 |\n@| scrollHeight | number | 是 | - | - | 滚动区域的高度 |\n@| scrollWidth | number | 是 | - | - | 滚动区域的宽度 |\n@| deltaY | number | 是 | - | - | 当次滚动事件竖向滚动量 |\n@| deltaX | number | 是 | - | - | 当次滚动事件横向滚动量 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniScrollEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 阻止当前事件的默认行为<br/> |\n\n#### UniStartNestedScrollEvent\n\n##### UniStartNestedScrollEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| node | [UniElement](/dom/unielement.md) | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | 开始滚动子节点对象 |\n| isTouch | boolean | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"3.99\",\"x\"]]}' /> | 是否由触摸行为发生的Event |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniStartNestedScrollEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 阻止当前事件的默认行为<br/> |\n\n#### UniNestedPreScrollEvent\n\n##### UniNestedPreScrollEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| deltaX | number | 是 | - | - | x轴滚动距离 |\n| deltaY | number | 是 | - | - | y轴滚动距离 |\n| isTouch | boolean | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"3.99\",\"x\"]]}' /> | 是否由触摸行为发生的Event |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniNestedPreScrollEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| consumed | (consumedX: number, consumedY: number) => void | 是 | - | - | 通知到子节点x,y轴滚动距离的消耗 |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 阻止当前事件的默认行为<br/> |\n\n#### UniStopNestedScrollEvent\n\n##### UniStopNestedScrollEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| isTouch | boolean | 是 | - | - | 是否由触摸行为发生的Event |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniStopNestedScrollEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 阻止当前事件的默认行为<br/> |\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/scroll-view/scroll-view.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/scroll-view/scroll-view\n>Template\n```vue\n<template>\n <!-- #ifdef APP -->\n <scroll-view class=\"page-scroll-view\">\n <!-- #endif -->\n <view>\n <page-head title=\"scroll-view,区域滚动视图\"></page-head>\n <view class=\"uni-padding-wrap uni-common-mt\">\n <view class=\"uni-title uni-common-mt\">\n <text class=\"uni-title-text\">Vertical Scroll</text>\n <text class=\"uni-subtitle-text\">纵向滚动</text>\n </view>\n <view>\n <scroll-view :scroll-top=\"scrollTop\" direction=\"vertical\" class=\"scroll-Y\" scroll-with-animation=\"true\"\n @scrolltoupper=\"upper\" @scrolltolower=\"lower\" @scroll=\"scroll\" @scrollend=\"end\" :show-scrollbar=\"showScrollbar\">\n <view class=\"scroll-view-item uni-bg-red\"><text class=\"text\">A</text></view>\n <view class=\"scroll-view-item uni-bg-green\"><text class=\"text\">B</text></view>\n <view class=\"scroll-view-item uni-bg-blue\"><text class=\"text\">C</text></view>\n </scroll-view>\n </view>\n <view @tap=\"goTop\" class=\"uni-center uni-common-mt\">\n <text class=\"uni-link\">点击这里返回顶部</text>\n </view>\n\n <view class=\"uni-title uni-common-mt\">\n <text class=\"uni-title-text\">Horizontal Scroll</text>\n <text class=\"uni-subtitle-text\">横向滚动</text>\n </view>\n <view>\n <scroll-view class=\"scroll-view_H\" direction=\"horizontal\" @scroll=\"scroll\" @scrollend=\"end\" :scroll-left=\"scrollLeft\" :show-scrollbar=\"showScrollbar\">\n <view class=\"scroll-view-item_H uni-bg-red\"><text class=\"text\">A</text></view>\n <view class=\"scroll-view-item_H uni-bg-green\"><text class=\"text\">B</text></view>\n <view class=\"scroll-view-item_H uni-bg-blue\"><text class=\"text\">C</text></view>\n </scroll-view>\n </view>\n\n <navigator url=\"/pages/component/scroll-view/scroll-view-props\" hover-class=\"none\">\n <button type=\"primary\" class=\"button\">\n 非下拉刷新的属性示例\n </button>\n </navigator>\n <view class=\"uni-common-pb\"></view>\n\n <navigator url=\"/pages/component/scroll-view/scroll-view-refresher-props\" hover-class=\"none\">\n <button type=\"primary\" class=\"button\">\n 下拉刷新的属性示例\n </button>\n </navigator>\n <view class=\"uni-common-pb\"></view>\n <navigator url=\"/pages/component/scroll-view/scroll-view-refresher\" hover-class=\"none\">\n <button type=\"primary\" class=\"button\"> 默认下拉刷新示例 </button>\n </navigator>\n <view class=\"uni-common-pb\"></view>\n <navigator url=\"/pages/component/scroll-view/scroll-view-custom-refresher-props\" hover-class=\"none\">\n <button type=\"primary\" class=\"button\">\n 自定义下拉刷新示例\n </button>\n </navigator>\n <view class=\"uni-common-pb\"></view>\n </view>\n </view>\n <!-- #ifdef APP -->\n </scroll-view>\n <!-- #endif -->\n</template>\n\n\n<style>\n .scroll-Y {\n height: 150px;\n }\n\n .scroll-view_H {\n width: 100%;\n flex-direction: row;\n }\n\n .scroll-view-item {\n height: 150px;\n justify-content: center;\n align-items: center;\n }\n\n .scroll-view-item_H {\n width: 100%;\n height: 150px;\n justify-content: center;\n align-items: center;\n }\n\n .text {\n font-size: 18px;\n color: #ffffff;\n }\n\n .button {\n margin-top: 15px;\n }\n</style>\n\n```\n>Script\n```uts\n\n type ScrollEventTest = {\n type: string;\n target: UniElement | null;\n currentTarget: UniElement | null;\n direction?:string\n }\n export default {\n data() {\n return {\n scrollTop: 0,\n oldScrollTop: 0,\n scrollLeft:120,\n showScrollbar: true,\n // 自动化测试\n isScrollTest:'',\n isScrolltolowerTest:'',\n isScrolltoupperTest:'',\n // 在web端scroll事件event参数中detail类型报错，先条件编译处理\n // #ifndef WEB\n scrollDetailTest:null as UniScrollEventDetail|null,\n scrollEndDetailTest:null as UniScrollEventDetail|null,\n // #endif\n }\n },\n methods: {\n upper: function (e : UniScrollToUpperEvent) {\n console.log('滚动到顶部/左边',e)\n this.checkEventTest({\n type:e.type,\n target:e.target,\n currentTarget:e.currentTarget,\n direction:e.detail.direction,\n } as ScrollEventTest,'scrolltoupper')\n },\n lower: function (e : UniScrollToLowerEvent) {\n console.log('滚动到底部/右边',e)\n this.checkEventTest({\n type:e.type,\n target:e.target,\n currentTarget:e.currentTarget,\n direction:e.detail.direction,\n } as ScrollEventTest,'scrolltolower')\n },\n scroll: function (e : UniScrollEvent) {\n // #ifndef WEB\n this.scrollDetailTest = e.detail\n // #endif\n this.checkEventTest({\n type:e.type,\n target:e.target,\n currentTarget:e.currentTarget\n } as ScrollEventTest,'scroll')\n this.oldScrollTop = e.detail.scrollTop\n },\n end: function (e : UniScrollEvent){\n console.log('滚动结束时触发',e)\n // #ifndef WEB\n this.scrollEndDetailTest = e.detail\n // #endif\n this.checkEventTest({\n type:e.type,\n target:e.target,\n currentTarget:e.currentTarget\n } as ScrollEventTest,'scrollend')\n },\n goTop: function () {\n // 解决view层不同步的问题\n this.scrollTop = this.oldScrollTop\n this.$nextTick(function () {\n this.scrollTop = 0\n })\n uni.showToast({\n icon: 'none',\n title: '纵向滚动 scrollTop 值已被修改为 0',\n })\n },\n // 自动化测试专用（由于事件event参数对象中存在循环引用，在ios端JSON.stringify报错，自动化测试无法page.data获取）\n checkEventTest(e:ScrollEventTest, eventName:String){\n const isPass = e.type === eventName && e.target instanceof UniElement && e.currentTarget instanceof UniElement;\n const result = isPass ? `${eventName}:Success` : `${eventName}:Fail`;\n switch (eventName){\n case 'scroll':\n this.isScrollTest = result\n break;\n case 'scrolltolower':\n this.isScrolltolowerTest = result + `-${e.direction}`\n break;\n case 'scrolltoupper':\n this.isScrolltoupperTest = result + `-${e.direction}`\n break;\n default:\n break;\n }\n },\n },\n }\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/scroll-view)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/scroll-view.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.scroll-view)\n"},"slider":{"name":"## slider","description":"> 组件类型：UniSliderElement \n\n 滑动选择器","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| disabled | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否禁用 |\n| min | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | slider 最小值 |\n| max | number | 100 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | slider 最大值 |\n| step | number | 1 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | slider 步长，取值必须大于 0，并且可被(max - min)整除 |\n| value | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | radio当前取值 |\n| activeBackgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.18\",\"4.18\",\"4.18\"]]}' /> | slider 滑块左侧已选择部分的线条颜色 |\n| ~~activeColor~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | slider 滑块左侧已选择部分的线条颜色 |\n| backgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#e9e9e9\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | radio背景条的颜色 |\n| block-size | number | 28 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | radio滑块的大小，取值范围为 12 - 28 |\n| ~~block-color~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 滑块颜色 |\n| foreColor | string([string.ColorString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.18\",\"4.18\",\"4.18\"]]}' /> | slider 的滑块背景颜色 |\n| show-value | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否显示当前 value |\n| @change | (event: [UniSliderChangeEvent](#unisliderchangeevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 完成一次拖动后触发的事件，event.detail = {value: value} |\n| @changing | (event: [UniSliderChangeEvent](#unisliderchangeevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 拖动过程中触发的事件，event.detail = {value: value} |","event":"\n### 事件\n#### UniSliderChangeEvent\n\n##### UniSliderChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniSliderChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | number | 是 | - | - | - |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniSliderChangeEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 阻止当前事件的默认行为<br/> |\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/slider/slider.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/slider/slider\n>Template\n```vue\n\n\n<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\" :valueColor=\"valueColor\" @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 <scroll-view style=\"flex: 1\">\n <view class=\"content\">\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=\"最小值(min)\" type=\"number\" @confirm=\"confirm_min_input\"></input-data>\n <input-data defaultValue=\"100\" title=\"最大值(max)\" type=\"number\" @confirm=\"confirm_max_input\"></input-data>\n <input-data defaultValue=\"1\" title=\"步长(step)，取值必须大于 0，并且可被(max - min)整除\" type=\"number\"\n @confirm=\"confirm_step_input\"></input-data>\n <input-data defaultValue=\"0\" title=\"当前取值(value)\" type=\"number\" @confirm=\"confirm_value_input\"></input-data>\n <input-data defaultValue=\"#007aff\" title=\"滑块左侧已选择部分的线条颜色(active-color)\" type=\"text\"\n @confirm=\"confirm_activeColor_input\"></input-data>\n <input-data defaultValue=\"#e9e9e9\" title=\"背景条的颜色(background-color)\" type=\"text\"\n @confirm=\"confirm_backgroundColor_input\"></input-data>\n <input-data defaultValue=\"28\" title=\"滑块的大小(block-size)，取值范围为 12 - 28\" type=\"number\"\n @confirm=\"confirm_block_size_input\"></input-data>\n <input-data defaultValue=\"#ffffff\" title=\"滑块颜色(block-color)\" type=\"text\"\n @confirm=\"confirm_block_color_input\"></input-data>\n <input-data defaultValue=\"#888888\" title=\"Value颜色(value-color)\" type=\"text\"\n @confirm=\"confirm_value_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 id=\"slider-custom-color-and-size\" @change=\"sliderChange\" :value=\"sliderValue\"\n :backgroundColor=\"sliderBackgroundColor\"\n :activeColor=\"sliderActiveColor\"\n :activeBackgroundColor=\"sliderActiveColor\"\n :blockColor=\"sliderBlockColor\"\n :foreColor=\"sliderBlockColor\"\n :block-size=\"sliderBlockSize\" />\n </view>\n <view class=\"uni-title\">暗黑模式</view>\n <view>\n <slider :show-value=\"true\"\n backgroundColor=\"rgba(32,32,32,0.5)\" valueColor=\"#555\" />\n </view>\n\n <navigator url=\"./slider-in-swiper\">\n <button>slider in swiper</button>\n </navigator>\n </view>\n </scroll-view>\n</template>\n\n<style>\n .main {\n padding: 5px 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: 100px;\n border: 1px solid #666;\n }\n\n .m-l-a {\n margin-left: auto;\n }\n</style>\n\n```\n>Script\n```uts\n\n export default {\n data() {\n return {\n sliderValue: 50,\n sliderBlockSize: 20,\n sliderBackgroundColor: \"#000000\",\n sliderActiveColor: \"#FFCC33\",\n sliderBlockColor: \"#8A6DE9\",\n // 组件属性 autotest\n show_value_boolean: false,\n disabled_boolean: false,\n min_input: 0,\n max_input: 100,\n step_input: 1,\n value_input: 0,\n activeColor_input: \"#007aff\",\n backgroundColor_input: \"#e9e9e9\",\n block_size_input: 28,\n block_color_input: \"#ffffff\",\n valueColor: \"#888888\",\n };\n },\n methods: {\n sliderChange(e : UniSliderChangeEvent) {\n console.log(\"value 发生变化：\" + e.detail.value);\n },\n slider_click() {\n console.log(\"组件被点击时触发\");\n },\n slider_touchstart() {\n console.log(\"手指触摸动作开始\");\n },\n slider_touchmove() {\n console.log(\"手指触摸后移动\");\n },\n slider_touchcancel() {\n console.log(\"手指触摸动作被打断，如来电提醒，弹窗\");\n },\n slider_touchend() {\n console.log(\"手指触摸动作结束\");\n },\n slider_tap() {\n console.log(\"手指触摸后马上离开\");\n },\n slider_longpress() {\n console.log(\n \"如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。\"\n );\n },\n slider_change() {\n console.log(\"完成一次拖动后触发的事件，event.detail = {value: value}\");\n },\n slider_changing() {\n console.log(\"拖动过程中触发的事件，event.detail = {value: value}\");\n },\n change_show_value_boolean(checked : boolean) {\n this.show_value_boolean = checked;\n },\n change_disabled_boolean(checked : boolean) {\n this.disabled_boolean = checked;\n },\n confirm_min_input(value : number) {\n this.min_input = value;\n },\n confirm_max_input(value : number) {\n this.max_input = value;\n },\n confirm_step_input(value : number) {\n this.step_input = value;\n },\n confirm_value_input(value : number) {\n this.value_input = value;\n },\n confirm_activeColor_input(value : string) {\n this.activeColor_input = value;\n },\n confirm_backgroundColor_input(value : string) {\n this.backgroundColor_input = value;\n },\n confirm_block_size_input(value : number) {\n this.block_size_input = value;\n },\n confirm_block_color_input(value : string) {\n this.block_color_input = value;\n },\n confirm_value_color_input(value : string) {\n this.valueColor = value;\n },\n },\n };\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/slider)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/slider.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.slider)\n"},"swiper-item":{"name":"## swiper-item","description":"> 组件类型：UniSwiperItemElement \n\n swiper的唯一合法子组件。每个swiper-item代表一个滑块。宽高自动设置为100%","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| item-id | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 该 swiper-item 的标识符 |","event":"","example":"","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.net.cn/component/swiper.html#swiper-item)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/swiper.html)\n"},"swiper":{"name":"## swiper","description":"> 组件类型：UniSwiperElement \n\n 滑块视图容器","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| indicator-dots | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否显示面板指示点 |\n| indicator-color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"rgba(0, 0, 0, .3)\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 指示点颜色 |\n| indicator-active-color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#000000\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 当前选中的指示点颜色 |\n| disable-touch | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"3.9\",\"4.11\"]]}' /> | 是否禁止用户 touch 操作 |\n| autoplay | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否自动切换 |\n| current | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 当前所在滑块的 index |\n| current-item-id | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 当前所在滑块的 item-id ，不能与 current 被同时指定 |\n| interval | number | 3000 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 自动切换时间间隔 |\n| duration | number | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 滑动动画时长 |\n| circular | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否采用衔接滑动 |\n| vertical | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 滑动方向是否为纵向 |\n| rebound | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"3.9\",\"4.11\"]]}' /> | 控制是否回弹效果 |\n| @change | (event: [UniSwiperChangeEvent](#uniswiperchangeevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | current 改变时会触发 change 事件，event.detail = {current: current, source: source} |\n| @transition | (event: [UniSwiperTransitionEvent](#uniswipertransitionevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy} |\n| @animationfinish | (event: [UniSwiperAnimationFinishEvent](#uniswiperanimationfinishevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 动画结束时会触发 animationfinish 事件，event.detail = {current: current, source: source} |","event":"\n### 事件\n#### UniSwiperChangeEvent\n\n##### UniSwiperChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniSwiperChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| current | number | 是 | - | - | 发生change事件的滑块下标 |\n@| currentItemId | string | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"x\",\"x\"]]}' /> | 切换结束的 swiper-item 的 item-id 属性值 |\n@| source | string | 是 | - | - | autoplay 自动播放导致swiper变化；touch 用户划动引起swiper变化 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniSwiperChangeEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 阻止当前事件的默认行为<br/> |\n\n#### UniSwiperTransitionEvent\n\n##### UniSwiperTransitionEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniSwiperTransitionEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| dx | number | 是 | - | - | 横向偏移量，单位是逻辑像素px |\n@| dy | number | 是 | - | - | 纵向偏移量，单位是逻辑像素px |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniSwiperTransitionEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 阻止当前事件的默认行为<br/> |\n\n#### UniSwiperAnimationFinishEvent\n\n##### UniSwiperAnimationFinishEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniSwiperAnimationFinishEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| current | number | 是 | - | - | 发生动画结束事件的滑块下标 |\n@| currentItemId | string | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"-\",\"x\",\"x\"]]}' /> | 动画结束的 swiper-item 的 item-id 属性值 |\n@| source | string | 是 | - | - | autoplay 自动播放导致swiper变化；touch 用户划动引起swiper变化 |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniSwiperAnimationFinishEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 阻止当前事件的默认行为<br/> |\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/swiper/swiper.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/swiper/swiper\n>Template\n```vue\n<template>\r\n <!-- #ifdef APP -->\r\n <scroll-view class=\"page-scroll-view\">\r\n <!-- #endif -->\r\n <view>\r\n <page-head title=\"swiper,可滑动视图\"></page-head>\r\n <view class=\"uni-margin-wrap\">\r\n <swiper class=\"swiper\" :vertical=\"verticalSelect\" :indicator-dots=\"dotsSelect\" :autoplay=\"autoplaySelect\"\r\n :rebound=\"reboundSelect\" :interval=\"intervalSelect\" :circular=\"circularSelect\"\r\n :indicator-color=\"indicatorColor\" :indicator-active-color=\"indicatorColorActive\"\r\n :disable-touch=\"disableTouchSelect\" :current=\"currentVal\" :current-item-id=\"currentItemIdVal\"\r\n @change=\"swiperChange\" @transition=\"swiperTransition\" @animationfinish=\"swiperAnimationfinish\">\r\n <swiper-item item-id=\"A\">\r\n <view class=\"swiper-item uni-bg-red\"><text class=\"swiper-item-Text\">A</text></view>\r\n </swiper-item>\r\n <swiper-item item-id=\"B\">\r\n <view class=\"swiper-item uni-bg-green\"><text class=\"swiper-item-Text\">B</text></view>\r\n </swiper-item>\r\n <swiper-item item-id=\"C\">\r\n <view class=\"swiper-item uni-bg-blue\"><text class=\"swiper-item-Text\">C</text></view>\r\n </swiper-item>\r\n </swiper>\r\n </view>\r\n <view class=\"uni-list\">\r\n <view class=\"uni-list-cell uni-list-cell-padding\">\r\n <view class=\"uni-list-cell-db\">是否显示面板指示点</view>\r\n <switch :checked=\"dotsSelect\" @change=\"dotsChange\" />\r\n </view>\r\n <view class=\"uni-list-cell uni-list-cell-padding\">\r\n <view class=\"uni-list-cell-db\">是否自动切换</view>\r\n <switch :checked=\"autoplaySelect\" @change=\"autoplayChange\" />\r\n </view>\r\n <view class=\"uni-list-cell uni-list-cell-padding\">\r\n <view class=\"uni-list-cell-db\">是否循环</view>\r\n <switch :checked=\"circularSelect\" @change=\"circularChange\" />\r\n </view>\r\n <view class=\"uni-list-cell uni-list-cell-padding\">\r\n <view class=\"uni-list-cell-db\">是否显示rebound效果</view>\r\n <switch :checked=\"reboundSelect\" @change=\"reboundSelectChange\" />\r\n </view>\r\n <view class=\"uni-title uni-list-cell-padding\">间隔时间(毫秒)</view>\r\n <view class=\"uni-list-cell-padding\">\r\n <slider @change=\"sliderChange\" :value=\"1000\" :min=\"500\" :max=\"5000\" :show-value=\"true\" />\r\n </view>\r\n <view class=\"uni-list-cell uni-list-cell-padding\">\r\n <view class=\"uni-list-cell-db\">定制指示器颜色</view>\r\n <switch :checked=\"indicatorColorSelect\" @change=\"indicatorColorChange\" />\r\n </view>\r\n <view class=\"uni-list-cell uni-list-cell-padding\">\r\n <view class=\"uni-list-cell-db\">纵向</view>\r\n <switch :checked=\"verticalSelect\" @change=\"verticalChange\" />\r\n </view>\r\n <view class=\"uni-list-cell uni-list-cell-padding\">\r\n <view class=\"uni-list-cell-db\">指定current为最后一个元素</view>\r\n <switch :checked=\"currentSelect\" @change=\"currentChange\" />\r\n </view>\r\n <view class=\"uni-list-cell uni-list-cell-padding\">\r\n <view class=\"uni-list-cell-db\">指定current-item-id为最后一个元素</view>\r\n <switch :checked=\"currentItemIdSelect\" @change=\"currentItemIdChange\" />\r\n </view>\r\n <view class=\"uni-list-cell uni-list-cell-padding\">\r\n <view class=\"uni-list-cell-db\">禁止用户 touch 操作</view>\r\n <switch :checked=\"disableTouchSelect\" @change=\"disableTouchChange\" />\r\n </view>\r\n <view class=\"uni-list-cell uni-list-cell-padding\">\r\n <view class=\"uni-list-cell-db\">swiperTransition 是否打印</view>\r\n <switch :checked=\"swiperTransitionSelect\" @change=\"swiperTransitionChange\" />\r\n </view>\r\n <view class=\"uni-list-cell uni-list-cell-padding\">\r\n <view class=\"uni-list-cell-db\">swiperAnimationfinish 是否打印</view>\r\n <switch :checked=\"swiperAnimationfinishSelect\" @change=\"swiperAnimationfinishChange\" />\r\n </view>\r\n <view class=\"uni-list-cell uni-list-cell-padding\">\r\n <view class=\"uni-list-cell-db\">swiperChange 是否打印</view>\r\n <switch :checked=\"swiperChangeSelect\" @change=\"swiperChangeChange\" />\r\n </view>\n\n <navigator url=\"/pages/component/swiper/swiper-list-view\">\n <button type=\"primary\">\n swiper 嵌套 list-view 测试\n </button>\n </navigator>\n\r\n </view>\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n\r\n\r\n<style>\r\n .swiper {\r\n height: 150px;\r\n }\r\n\r\n .swiper-item {\r\n width: 100%;\r\n height: 150px;\r\n }\r\n\r\n .swiper-item-Text {\r\n width: 100%;\r\n text-align: center;\r\n line-height: 150px;\r\n }\r\n</style>\n\n```\n>Script\n```uts\n\n type SwiperEventTest = {\n type: string;\n target: UniElement | null;\n currentTarget: UniElement | null;\n }\r\n export default {\r\n data() {\r\n return {\r\n background: ['color1', 'color2', 'color3'],\r\n dotsSelect: false,\r\n reboundSelect: false,\r\n autoplaySelect: false,\r\n circularSelect: false,\r\n indicatorColorSelect: false,\r\n verticalSelect: false,\r\n currentSelect: false,\r\n currentItemIdSelect: false,\r\n intervalSelect: 2000,\r\n indicatorColor: \"\",\r\n indicatorColorActive: \"\",\r\n currentVal: 0,\r\n currentItemIdVal: \"\",\r\n disableTouchSelect: false,\r\n swiperTransitionSelect: false,\r\n swiperAnimationfinishSelect: false,\r\n swiperChangeSelect: false,\r\n currentValChange: 0,\n // 自动化测试\n changeDetailTest:null as UniSwiperChangeEventDetail | null,\n transitionDetailTest:null as UniSwiperTransitionEventDetail | null,\n animationfinishDetailTest:null as UniSwiperAnimationFinishEventDetail | null,\n isChangeTest:'',\n isTransitionTest:'',\n isAnimationfinishTest:''\n }\r\n },\n methods: {\r\n swiperChange: function (e : UniSwiperChangeEvent) {\n this.changeDetailTest = e.detail\n this.checkEventTest({\n type:e.type,\n target:e.target,\n currentTarget:e.currentTarget\n } as SwiperEventTest,'change')\n this.currentValChange = e.detail.current\r\n console.log(this.currentValChange)\r\n if (this.swiperChangeSelect) {\r\n console.log(\"swiperChange\")\r\n console.log(e)\r\n }\r\n },\r\n swiperTransition: function (e : UniSwiperTransitionEvent) {\n this.transitionDetailTest = e.detail\n this.checkEventTest({\n type:e.type,\n target:e.target,\n currentTarget:e.currentTarget\n } as SwiperEventTest,'transition')\n if (this.swiperTransitionSelect) {\r\n console.log(\"swiperTransition\")\r\n console.log(e)\r\n }\r\n },\r\n swiperAnimationfinish: function (e : UniSwiperAnimationFinishEvent) {\n this.animationfinishDetailTest = e.detail\n this.checkEventTest({\n type:e.type,\n target:e.target,\n currentTarget:e.currentTarget\n } as SwiperEventTest,'animationfinish')\n if (this.swiperAnimationfinishSelect) {\r\n console.log(\"swiperAnimationfinish\")\r\n console.log(e)\r\n }\r\n },\r\n // 自动化测试专用（由于事件event参数对象中存在循环引用，在ios端JSON.stringify报错，自动化测试无法page.data获取）\n checkEventTest(e:SwiperEventTest, eventName:String){\n const isPass = e.type === eventName && e.target instanceof UniElement && e.currentTarget instanceof UniElement;\n const result = isPass ? `${eventName}:Success` : `${eventName}:Fail`;\n switch (eventName){\n case 'change':\n this.isChangeTest = result\n break;\n case 'transition':\n this.isTransitionTest = result\n break;\n case 'animationfinish':\n this.isAnimationfinishTest = result\n break;\n default:\n break;\n }\n },\r\n dotsChange: function (e : UniSwitchChangeEvent) {\r\n this.dotsSelect = e.detail.value\r\n },\r\n swiperTransitionChange: function (e : UniSwitchChangeEvent) {\r\n this.swiperTransitionSelect = e.detail.value\r\n },\r\n swiperChangeChange: function (e : UniSwitchChangeEvent) {\r\n this.swiperChangeSelect = e.detail.value\r\n },\r\n swiperAnimationfinishChange: function (e : UniSwitchChangeEvent) {\r\n this.swiperAnimationfinishSelect = e.detail.value\r\n },\r\n autoplayChange: function (e : UniSwitchChangeEvent) {\n this.autoplaySelect = e.detail.value\r\n },\r\n verticalChange: function (e : UniSwitchChangeEvent) {\r\n this.verticalSelect = e.detail.value\r\n },\r\n disableTouchChange: function (e : UniSwitchChangeEvent) {\r\n this.disableTouchSelect = e.detail.value\r\n },\r\n currentItemIdChange: function (e : UniSwitchChangeEvent) {\r\n this.currentItemIdSelect = e.detail.value\r\n if (this.currentItemIdSelect) {\r\n this.currentItemIdVal = 'C'\r\n } else {\r\n this.currentItemIdVal = 'A'\r\n }\r\n },\r\n currentChange: function (e : UniSwitchChangeEvent) {\r\n this.currentSelect = e.detail.value\r\n if (this.currentSelect) {\r\n this.currentVal = 2\r\n } else {\r\n this.currentVal = 0\r\n }\r\n\r\n },\r\n circularChange: function (e : UniSwitchChangeEvent) {\r\n this.circularSelect = e.detail.value\r\n console.log(this.circularSelect)\r\n },\r\n reboundSelectChange: function (e : UniSwitchChangeEvent) {\r\n this.reboundSelect = e.detail.value\r\n console.log(this.reboundSelect)\r\n },\r\n sliderChange(e : UniSliderChangeEvent) {\r\n this.intervalSelect = e.detail.value\r\n },\r\n indicatorColorChange(e : UniSwitchChangeEvent) {\r\n this.indicatorColorSelect = e.detail.value\r\n if (this.indicatorColorSelect) {\r\n // 选择了定制指示器颜色\r\n this.indicatorColor = \"#ff00ff\"\r\n this.indicatorColorActive = \"#0000ff\"\r\n } else {\r\n // 没有选择颜色\r\n this.indicatorColor = \"\"\r\n this.indicatorColorActive = \"\"\r\n }\r\n }\r\n }\r\n }\r\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"### 子组件 @children-tags \n - [swiper-item](#swiper-item)","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/swiper)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/swiper.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.swiper)\n"},"switch":{"name":"## switch","description":"> 组件类型：UniSwitchElement \n\n 开关选择器","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| checked | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否选中 |\n| type | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | 样式，有效值：switch, checkbox |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| switch | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | - |\n@| checkbox | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\"]]}' /> | - |\n| ~~color~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | switch 的颜色，同 css 的 color |\n| backgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.18\",\"4.18\",\"4.18\"]]}' /> | switch 的关闭状态背景颜色 |\n| activeBackgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.18\",\"4.18\",\"4.18\"]]}' /> | switch 的开启状态背景颜色 |\n| foreColor | string([string.ColorString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.18\",\"4.18\",\"4.18\"]]}' /> | switch 的滑块背景颜色 |\n| activeForeColor | string([string.ColorString](/uts/data-type.md#ide-string)) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.18\",\"4.18\",\"4.18\"]]}' /> | switch 的开启状态下的滑块背景颜色 |\n| disabled | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | 是否禁用 |\n| @change | (event: [UniSwitchChangeEvent](#uniswitchchangeevent)) => void | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\"]]}' /> | checked 改变时触发 change 事件，event.detail={ value:checked} |","event":"\n### 事件\n#### UniSwitchChangeEvent\n\n##### UniSwitchChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| detail | **UniSwitchChangeEventDetail** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- | :-: | :- |\n@| value | boolean | 是 | - | - | - |\n| bubbles | boolean | 是 | - | - | 是否冒泡 |\n| cancelable | boolean | 是 | - | - | 是否可以取消 |\n| type | string | 是 | - | - | 事件类型 |\n| target | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| currentTarget | [UniElement](/dom/unielement.md) \\| null | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\"]]}' /> | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 |\n| timeStamp | number | 是 | - | - | 事件发生时的时间戳 |\n\n\n##### UniSwitchChangeEvent 的方法\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- | :-: | :- |\n| stopPropagation | () => void | 是 | - | - | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"3.9\",\"x\"]]}' /> | 阻止当前事件的默认行为<br/> |\n","example":"### 示例 \n> [hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/switch/switch.uvue) \n ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/switch/switch\n>Template\n```vue\n<template>\n <view>\n <view class=\"uni-padding-wrap 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 </view>\n <view class=\"uni-title\">暗黑样式</view>\n <view class=\"flex-row\">\n <switch id=\"darkChecked\" background-color=\"#1f1f1f\" activeBackgroundColor=\"#007aff\" foreColor=\"#f0f0f0\" activeForeColor=\"#ffffff\" :checked=\"checked\" />\n <switch id=\"dark\" background-color=\"#1f1f1f\" activeBackgroundColor=\"#007aff\" foreColor=\"#f0f0f0\" activeForeColor=\"#ffffff\" />\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-padding\">\n <view class=\"uni-list-cell-db\">开启中</view>\n <switch :checked=\"true\" />\n </view>\n <view class=\"uni-list-cell uni-list-cell-padding\">\n <view class=\"uni-list-cell-db\">关闭</view>\n <switch />\n </view>\n </view>\n </view>\n</template>\n\n\n\n<style>\n .flex-row {\n flex-direction: row;\n }\n</style>\n\n```\n>Script\n```uts\n\n export default {\n data() {\n return {\n title: 'switch 开关',\n checked: true,\n color: '#FFCC33',\n clickCheckedValue: true,\n testVerifyEvent: false,\n }\n },\n methods: {\n switch1Change: function (e : UniSwitchChangeEvent) {\n this.clickCheckedValue = e.detail.value\n console.log('switch1 发生 change 事件，携带值为', e.detail.value)\n\n // 仅测试\n this.testVerifyEvent = (e.type == 'change' && (e.target?.tagName ?? '') == \"SWITCH\")\n },\n switch2Change: function (e : UniSwitchChangeEvent) {\n console.log('switch2 发生 change 事件，携带值为', e.detail.value)\n }\n }\n }\n\n```\n:::","compatibility":"\n### 兼容性\n| Web | Android | iOS |\n| :- | :- | :- |\n| 4.0 | 3.9 | 4.11 |\n","children":"","reference":"\n### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/switch)\n- [参见uni-app x相关文档](https://doc.dcloud.net.cn/uni-app-x/component/switch.html)\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.switch)\n"}}
