npm - tmui-cli - Versions diffs - 2.0.2 → 2.0.4 - Mend

tmui-cli 2.0.2 → 2.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1564) hide show

package/data/uni-app-x-docs/.vuepress/utils/utsComJson.json ADDED Viewed

@@ -0,0 +1 @@

+ {"view":{"name":"::: sourceCode\n## view\n:::","originName":"## view","description":"> 组件类型：UniViewElement \n\n 基本视图容器","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | 3.9 | 4.11 | 4.61 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| hover-class | string([string.ClassString](/uts/data-type.md#ide-string)) | \"none\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 指定按下去的样式类。当 hover-class=\"none\" 时，没有点击态效果 |\n| hover-stop-propagation | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 指定是否阻止本节点的祖先节点出现点击态(祖先节点：指根节点到该节点路径上的所有节点都是这个节点的祖先节点) |\n| hover-start-time | number | 50 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 按住后多久出现点击态，单位毫秒 |\n| hover-stay-time | number | 400 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 手指松开后点击态保留时间，单位毫秒 |\n| flatten | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\",\"5.21\",\"x\",\"5.11\",\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否拍平组件 |","event":"","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/view/view.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/view/view.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/view/view\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/view/view\n\n>示例\n```vue\n<template>\n <page-head title=\"view\"></page-head>\r\n <scroll-view class=\"uni-theme-root\" style=\"flex: 1\">\n <view class=\"uni-padding-wrap uni-common-mt\">\r\n \r\n <text class=\"uni-title-text\">view样式大合集</text>\r\n <view class=\"styled-view-row\">\r\n <view class=\"styled-view\">\r\n <text class=\"demo-text\">普通view</text>\r\n </view>\r\n <view class=\"styled-view\" flatten>\r\n <text class=\"demo-text\" flatten>拍平view</text>\r\n </view>\r\n </view>\r\n\r\n <text class=\"uni-title-text\">自定义组件：右边拍平</text>\r\n <view class=\"styled-view-row\">\r\n <child></child>\r\n <child flatten></child>\r\n </view>\r\n\r\n <text class=\"uni-title-text uni-common-mt\">Hover 点击态效果</text>\r\n <view id=\"view\" class=\"main\" :hover-class=\"data.hover_class ? 'is-parent-hover' : 'none'\">\r\n <view id=\"view-child1\" class=\"test-view\" :hover-class=\"data.hover_class ? 'is-hover' : 'none'\" :hover-stop-propagation=\"data.stop_propagation\"\n :hover-start-time=\"data.start_time\" :hover-stay-time=\"data.stay_time\">\r\n </view>\r\n </view>\r\n\r\n <view class=\"content\">\r\n <boolean-data :defaultValue=\"false\" title=\"是否指定按下去的样式类\" @change=\"change_hover_class_boolean\"></boolean-data>\r\n <boolean-data :defaultValue=\"false\" title=\"是否阻止本节点的祖先节点出现点击态\"\r\n @change=\"change_stop_propagation_boolean\"></boolean-data>\r\n <enum-data :items=\"data.start_time_enum\" title=\"按住后多久出现点击态\" @change=\"radio_change_start_time_enum\"></enum-data>\r\n <enum-data :items=\"data.stay_time_enum\" title=\"手指松开后点击态保留时间\" @change=\"radio_change_stay_time_enum\"></enum-data>\r\n </view>\r\n\r\n \n <navigator url=\"/pages/template/4050/4050\">\n <button style=\"margin:20px;\">组件性能测试</button>\n </navigator>\n \r\n </view>\r\n </scroll-view>\r\n\r\n</template>\r\n<script setup lang=\"uts\">\r\n import { ItemType } from '@/components/enum-data/enum-data-types'\r\n import Child from './child.uvue'\r\n\r\n type DataType = {\r\n hover_class: boolean;\r\n stop_propagation: boolean;\r\n start_time: number;\r\n stay_time: number;\r\n start_time_enum: ItemType[];\r\n stay_time_enum: ItemType[];\r\n }\r\n\r\n // 使用reactive解决ref数据在自动化测试中无法访问\r\n const data = reactive({\r\n hover_class: false,\r\n stop_propagation: false,\r\n start_time: 50,\r\n stay_time: 400,\r\n start_time_enum: [{ \"value\": 50, \"name\": \"50毫秒\" }, { \"value\": 200, \"name\": \"200毫秒\" }],\r\n stay_time_enum: [{ \"value\": 400, \"name\": \"400毫秒\" }, { \"value\": 200, \"name\": \"200毫秒\" }]\r\n } as DataType)\r\n\r\n const change_hover_class_boolean = (checked: boolean) => {\r\n data.hover_class = checked\r\n }\r\n\r\n const change_stop_propagation_boolean = (checked: boolean) => {\r\n data.stop_propagation = checked\r\n }\r\n\r\n const radio_change_start_time_enum = (time: number) => {\r\n data.start_time = time\r\n }\r\n\r\n const radio_change_stay_time_enum = (time: number) => {\r\n data.stay_time = time\r\n }\r\n\r\n defineExpose({\r\n data\r\n })\r\n</script>\r\n\r\n<style>\r\n .styled-view-row {\n flex-direction: row;\n background-color: var(--list-background-color, #ffffff);\n justify-content: space-around;\r\n height: 120px;\r\n align-items: center;\r\n }\r\n\r\n /* view样式大合集 */\r\n .styled-view {\r\n width: 80px;\r\n height: 80px;\r\n margin: 5px;\r\n padding: 5px;\r\n border: 2px solid #007aff;\r\n border-radius: 8px;\r\n background-color: #f0f8ff;\r\n box-shadow: 0 2px 4px rgba(0, 122, 255, 0.2);\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n opacity: 0.95;\r\n position: relative;\r\n transform: rotate(45deg);\r\n }\r\n\r\n .demo-text {\r\n font-size: 12px;\r\n color: #007aff;\r\n font-weight: 500;\r\n }\r\n\r\n .main {\r\n padding: 5px 0;\r\n flex-direction: row;\r\n justify-content: center;\r\n }\r\n\r\n .test-view {\r\n height: 200px;\r\n width: 200px;\r\n background-color: var(--list-background-color,#ffffff);\r\n }\r\n\r\n .is-hover {\r\n background-color: #179b16;\r\n }\r\n\r\n .is-parent-hover {\n background-color: #aa0000;\n }\n\n</style>\n\n```\n\n:::","children":"### 子组件 @children-tags\n支持所有组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.view)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/view.html)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/view.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=view&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=view&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=view&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=view&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=view)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=view&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"glass-effect-view":{"name":"::: sourceCode\n## glass-effect-view\n:::","originName":"## glass-effect-view","description":"> 组件类型：UniGlassEffectViewElement \n\n 玻璃效果视图容器。iOS 26 及以上使用系统液态玻璃效果，iOS 26 以下降级为系统毛玻璃效果。","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS 系统版本 | iOS(VDOM) | iOS(Vapor) | HarmonyOS |\n| :- | :- | :- | :- | :- | :- | :- |\n| <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 15.0 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 5.25 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| glass-style | string | \"regular\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"15.0\",\"x\",\"5.25\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 玻璃效果样式 |\n@| 合法值 | 描述 |\n@| :- | :- |\n@| regular | 常规玻璃效果 |\n@| clear | 更通透的玻璃效果 |\n| interactive | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"26.0\",\"x\",\"5.25\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否启用液态玻璃的交互行为，仅 iOS 26 及以上生效 |\n| tint-color | string([string.ColorString](/uts/data-type.md#ide-string)) | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"26.0\",\"x\",\"5.25\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 施加在液态玻璃效果上的着色，仅 iOS 26 及以上生效 |","event":"","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/glass-effect-view/glass-effect-view.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/glass-effect-view/glass-effect-view.uvue) \n>\n> 该 API 不支持 Web，请运行 hello uni-app x 到 App 平台体验 \n\n::: preview\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/glass-effect-view/glass-effect-view\n```uvue\n<template>\n <page-head title=\"glass-effect-view\"></page-head>\n <scroll-view style=\"flex: 1\">\n <view class=\"uni-padding-wrap uni-common-mt\">\n <text class=\"uni-title-text\">玻璃效果预览</text>\n <view class=\"stage\">\n <view class=\"color-row\">\n <view class=\"color-block color-red\"></view>\n <view class=\"color-block color-yellow\"></view>\n <view class=\"color-block color-green\"></view>\n <view class=\"color-block color-blue\"></view>\n <view class=\"color-block color-purple\"></view>\n </view>\n <text class=\"stage-text stage-text-top\">GLASS</text>\n <text class=\"stage-text stage-text-bottom\">iOS</text>\n <glass-effect-view\n v-if=\"data.glassStyle == 'regular'\"\n class=\"glass-panel\"\n glass-style=\"regular\"\n :interactive=\"data.interactive\"\n :tint-color=\"data.tintColor\">\n <view class=\"glass-content\">\n <text class=\"glass-title\">regular</text>\n <text class=\"glass-detail\">interactive: {{ data.interactive }}</text>\n <text class=\"glass-detail\">tint: {{ data.tintColor }}</text>\n </view>\n </glass-effect-view>\n <glass-effect-view\n v-else\n class=\"glass-panel\"\n glass-style=\"clear\"\n :interactive=\"data.interactive\"\n :tint-color=\"data.tintColor\">\n <view class=\"glass-content\">\n <text class=\"glass-title\">clear</text>\n <text class=\"glass-detail\">interactive: {{ data.interactive }}</text>\n <text class=\"glass-detail\">tint: {{ data.tintColor }}</text>\n </view>\n </glass-effect-view>\n </view>\n </view>\n\n <view class=\"content\">\n <enum-data\n title=\"glass-style 玻璃效果样式\"\n :items=\"data.glassStyleItems\"\n @change=\"changeGlassStyle\"></enum-data>\n <boolean-data\n title=\"interactive 启用交互行为\"\n :defaultValue=\"false\"\n @change=\"changeInteractive\"></boolean-data>\n <enum-data\n title=\"tint-color 玻璃效果着色\"\n :items=\"data.tintColorItems\"\n @change=\"changeTintColor\"></enum-data>\n <view class=\"bottom-space\"></view>\n </view>\n </scroll-view>\n</template>\n\n<script setup lang=\"uts\">\n import { ItemType } from '@/components/enum-data/enum-data-types'\n\n type DataType = {\n glassStyle : string;\n interactive : boolean;\n tintColor : string;\n glassStyleItems : ItemType[];\n tintColorItems : ItemType[];\n }\n\n const data = reactive({\n glassStyle: 'regular',\n interactive: false,\n tintColor: 'transparent',\n glassStyleItems: [\n { value: 0, name: 'regular', checked: true },\n { value: 1, name: 'clear' },\n ],\n tintColorItems: [\n { value: 0, name: '透明', checked: true },\n { value: 1, name: '红色' },\n { value: 2, name: '蓝色' },\n { value: 3, name: '绿色' },\n ],\n } as DataType)\n\n function changeGlassStyle(value : number) {\n data.glassStyle = value == 1 ? 'clear' : 'regular'\n }\n\n function changeInteractive(value : boolean) {\n data.interactive = value\n }\n\n function changeTintColor(value : number) {\n switch (value) {\n case 1:\n data.tintColor = 'rgba(255, 59, 48, 0.25)'\n break\n case 2:\n data.tintColor = 'rgba(0, 122, 255, 0.25)'\n break\n case 3:\n data.tintColor = 'rgba(52, 199, 89, 0.25)'\n break\n default:\n data.tintColor = 'transparent'\n break\n }\n }\n\n defineExpose({\n data,\n })\n</script>\n\n<style>\n .stage {\n position: relative;\n height: 300px;\n margin-top: 12px;\n overflow: hidden;\n border-radius: 8px;\n background-color: #ffffff;\n }\n\n .color-row {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n flex-direction: row;\n }\n\n .color-block {\n flex: 1;\n }\n\n .color-red {\n background-color: #ff453a;\n }\n\n .color-yellow {\n background-color: #ffd60a;\n }\n\n .color-green {\n background-color: #30d158;\n }\n\n .color-blue {\n background-color: #0a84ff;\n }\n\n .color-purple {\n background-color: #bf5af2;\n }\n\n .stage-text {\n position: absolute;\n font-size: 48px;\n font-weight: 700;\n color: #ffffff;\n }\n\n .stage-text-top {\n left: 18px;\n top: 18px;\n }\n\n .stage-text-bottom {\n right: 18px;\n bottom: 18px;\n }\n\n .glass-panel {\n position: absolute;\n left: 42px;\n right: 42px;\n top: 74px;\n height: 152px;\n border-radius: 28px;\n overflow: hidden;\n }\n\n .glass-content {\n flex: 1;\n justify-content: center;\n align-items: center;\n }\n\n .glass-title {\n font-size: 24px;\n font-weight: 700;\n color: #111111;\n }\n\n .glass-detail {\n margin-top: 8px;\n font-size: 13px;\n color: #222222;\n }\n\n .content {\n margin-top: 10px;\n }\n\n .bottom-space {\n height: 30px;\n }\n</style>\n\n```\n:::","children":"### 子组件 @children-tags\n支持所有组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.glass-effect-view)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=glass-effect-view&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=glass-effect-view&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=glass-effect-view&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=glass-effect-view&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=glass-effect-view&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=glass-effect-view)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=glass-effect-view&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"scroll-view":{"name":"::: sourceCode\n## scroll-view\n:::","originName":"## scroll-view","description":"> 组件类型：UniScrollViewElement \n\n 可滚动视图容器","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | 3.9 | 4.11 | 4.61 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| type | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.11\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 渲染模式，蒸汽（Vapor）模式已废弃 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| nested | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.11\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 嵌套模式，支持使用 nested-scroll-header、nested-scroll-body 实现嵌套滚动，蒸汽（Vapor）模式已废弃 |\n| direction | string | \"vertical\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 滚动方向，可取值 none、all、horizontal、vertical，默认值vertical |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 禁止滚动 |\n@| all | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"5.21\",\"x\",\"5.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 横向/竖向可同时滚动 |\n@| horizontal | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 横向滚动 |\n@| vertical | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 竖向滚动 |\n| ~~scroll-x~~ | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 允许横向滚动，不支持同时设置scroll-y属性为true，同时设置true时scroll-y生效。已废弃，请改用direction |\n| ~~scroll-y~~ | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 允许竖向滚动，不支持同时设置scroll-x属性为true，同时设置true时scroll-y生效。已废弃，请改用direction |\n| ~~rebound~~ | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"3.9\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否开启回弹效果。已废弃，请改用bounces |\n| bounces | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否开启回弹效果，优先级高于rebound |\n| android-overscroll | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"5.21\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | Android平台是否开启弹簧回弹效果，开启后默认下拉刷新使用圆弧loading样式（推动页面内容），否则默认下拉刷新使用Android系统悬浮圆环样式（不推动页面内容） |\n| android-scrollbar-draggable | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"5.25\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | Android 平台是否允许拖动滚动条以快速定位滚动内容，默认值为 false，当前暂仅支持竖向滚动 |\n| android-refresher-color | string([string.ColorString](/uts/data-type.md#ide-string)) | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"5.25\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 设置 Android 平台 scroll-view 默认下拉刷新样式的前景颜色，优先级高于 refresher-default-style |\n| associative-container | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.11\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 关联的滚动容器 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| nested-scroll-view | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.11\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 关联 type=nested 嵌套模式 |\n| enable-back-to-top | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\",\"4.11\",\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 点击系统状态栏滚动条返回顶部，只支持竖向 |\n| upper-threshold | number | 50 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 距顶部/左边多远时（单位px），触发 scrolltoupper 事件 |\n| lower-threshold | number | 50 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 距底部/右边多远时（单位px），触发 scrolltolower 事件 |\n| scroll-top | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 设置竖向滚动条位置 |\n| scroll-left | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 设置横向滚动条位置 |\n| scroll-into-view | string([string.IDString](/uts/data-type.md#ide-string)) | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在此方向滚动到该元素起始位置 |\n| scroll-with-animation | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 是否在设置滚动条位置时使用滚动动画，设置false没有滚动动画 |\n| refresher-enabled | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.11\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 开启下拉刷新，仅支持竖向滚动的刷新，暂时不支持横向滚动的刷新 |\n| refresher-threshold | number | 45 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.11\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 设置下拉刷新阈值 |\n| refresher-max-drag-distance | number | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 设置下拉最大拖拽距离（单位px），默认是下拉刷新控件高度的2.5倍 |\n| refresher-default-style | string | \"black\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.11\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 设置下拉刷新默认样式，支持设置 black \\| white \\| none， none 表示不使用默认样式 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| black | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.11\",\"4.41\",\"3.9\",\"4.11\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 深颜色雪花样式 |\n@| white | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.11\",\"4.41\",\"3.9\",\"4.11\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 浅白色雪花样式 |\n@| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.11\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 不使用默认样式 |\n| refresher-background | string([string.ColorString](/uts/data-type.md#ide-string)) | \"transparent\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.11\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 设置下拉刷新区域背景颜色，默认透明。Android 平台下，当 android-overscroll=false 时，默认下拉刷新使用悬浮圆环样式，此时背景默认不再透明，而是由 refresher-default-style 决定 |\n| refresher-triggered | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.11\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发 |\n| show-scrollbar | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 控制是否出现滚动条 |\n| custom-nested-scroll | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"3.9\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 子元素是否开启嵌套滚动将滚动事件与父元素协商处理 |\n| nested-scroll-child | string([string.IDString](/uts/data-type.md#ide-string)) | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"3.97\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 嵌套滚动子元素的id属性，不支持ref，scroll-view惯性滚动时会让对应id元素视图进行滚动，子元素滚动时会触发scroll-view的nestedprescroll事件，嵌套子元素需要设置custom-nested-scroll = true |\n| enable-passive | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(boolean)*<br/>开启 passive 特性，能优化一定的滚动性能 |\n| fast-deceleration | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(boolean)*<br/>滑动减速速率控制, 仅在 iOS 下生效 (同时开启 enhanced 属性后生效) |\n| @refresherpulling | (event: [UniRefresherEvent](#unirefresherevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.11\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 下拉刷新控件被下拉 |\n| @refresherrefresh | (event: [UniRefresherEvent](#unirefresherevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.11\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 下拉刷新被触发 |\n| @refresherrestore | (event: [UniRefresherEvent](#unirefresherevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.11\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 下拉刷新被复位 |\n| @refresherabort | (event: [UniRefresherEvent](#unirefresherevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 下拉刷新被中止 |\n| @scrolltoupper | (event: [UniScrollToUpperEvent](#uniscrolltoupperevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 滚动到顶部/左边，会触发 scrolltoupper 事件 |\n| @scrolltolower | (event: [UniScrollToLowerEvent](#uniscrolltolowerevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 滚动到底部/右边，会触发 scrolltolower 事件 |\n| @scroll | (event: [UniScrollEvent](#uniscrollevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |\n| @scrollend | (event: [UniScrollEvent](#uniscrollevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 滚动结束时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |\n| @startnestedscroll | (event: [UniStartNestedScrollEvent](#unistartnestedscrollevent)) => Boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"3.9\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 子元素开始滚动时触发, return true表示与子元素开启滚动协商默认return false! event = {node} |\n| @nestedprescroll | (event: [UniNestedPreScrollEvent](#uninestedprescrollevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"3.9\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 子元素滚动时触发，可执行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\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"3.9\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 子元素滚动结束或意外终止时触发 |\n| @dragstart | eventhandle | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandle)*<br/>滑动开始事件 (同时开启 enhanced 属性后生效) detail { scrollTop, scrollLeft } |\n| @dragging | eventhandle | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandle)*<br/>滑动事件 (同时开启 enhanced 属性后生效) detail { scrollTop, scrollLeft } |\n| @dragend | eventhandle | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandle)*<br/>滑动结束事件 (同时开启 enhanced 属性后生效) detail { scrollTop, scrollLeft, velocity } |","event":"\n### 事件\n#### UniRefresherEvent\n\n```mermaid\ngraph LR\n \nUniRefresherEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniRefresherEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniRefresherEventDetail** | 是 |\n@| 名称 | 类型 | 必备 |\n@| :- | :- | :- |\n@| dy | number | 是 |\n\n\n#### UniScrollToUpperEvent\n\n```mermaid\ngraph LR\n \nUniScrollToUpperEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniScrollToUpperEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniScrollToUpperEventDetail** | 是 |\n@| 名称 | 类型 | 必备 | 描述 |\n@| :- | :- | :- | :- |\n@| direction | string | 是 | 滚动方向 top 或 left |\n\n\n#### UniScrollToLowerEvent\n\n```mermaid\ngraph LR\n \nUniScrollToLowerEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniScrollToLowerEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniScrollToLowerEventDetail** | 是 |\n@| 名称 | 类型 | 必备 | 描述 |\n@| :- | :- | :- | :- |\n@| direction | string | 是 | 滚动方向 bottom 或 right |\n\n\n#### UniScrollEvent\n\n```mermaid\ngraph LR\n \nUniScrollEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniScrollEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniScrollEventDetail** | 是 |\n@| 名称 | 类型 | 必备 | 描述 |\n@| :- | :- | :- | :- |\n@| scrollTop | number | 是 | 竖向滚动的距离 |\n@| scrollLeft | number | 是 | 横向滚动的距离 |\n@| scrollHeight | number | 是 | 滚动区域的高度 |\n@| scrollWidth | number | 是 | 滚动区域的宽度 |\n@| deltaY | number | 是 | 当次滚动事件竖向滚动量 |\n@| deltaX | number | 是 | 当次滚动事件横向滚动量 |\n\n\n#### UniStartNestedScrollEvent\n\n```mermaid\ngraph LR\n \nUniStartNestedScrollEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniStartNestedScrollEvent 的属性值\n| 名称 | 类型 | 必填 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| node | [UniElement](/api/dom/unielement.md) | 是 | | 开始滚动子节点对象 |\n| isTouch | boolean | 是 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"3.99\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否由触摸行为发生的Event |\n\n\n#### UniNestedPreScrollEvent\n\n```mermaid\ngraph LR\n \nUniNestedPreScrollEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniNestedPreScrollEvent 的属性值\n| 名称 | 类型 | 必填 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| deltaX | number | 是 | | x轴滚动距离 |\n| deltaY | number | 是 | | y轴滚动距离 |\n| isTouch | boolean | 是 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"3.99\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否由触摸行为发生的Event |\n\n\n##### UniNestedPreScrollEvent 的方法\n| 名称 | 类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| consumed | (consumedX: number, consumedY: number) => void | 是 | 通知到子节点x,y轴滚动距离的消耗 |\n\n#### UniStopNestedScrollEvent\n\n```mermaid\ngraph LR\n \nUniStopNestedScrollEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniStopNestedScrollEvent 的属性值\n| 名称 | 类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| isTouch | boolean | 是 | 是否由触摸行为发生的Event |\n\n","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/scroll-view/scroll-view.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/scroll-view/scroll-view.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/scroll-view/scroll-view\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/scroll-view/scroll-view\n\n>示例\n```vue\n<template>\r\n \r\n <scroll-view class=\"page-scroll-view\">\r\n \r\n <page-head title=\"scroll-view,区域滚动视图\"></page-head>\r\n <view class=\"uni-padding-wrap uni-common-mt\">\r\n <view class=\"uni-title uni-common-mt\">\r\n <text class=\"uni-title-text\">Vertical Scroll</text>\r\n <text class=\"uni-subtitle-text\">纵向滚动</text>\r\n </view>\r\n <view>\r\n <scroll-view :scroll-top=\"data.scrollTop\" :direction=\"data.scrollDirection\" class=\"scroll-Y\" scroll-with-animation=\"true\"\r\n @scrolltoupper=\"upper\" @scrolltolower=\"lower\" @scroll=\"scroll\" @scrollend=\"end\"\r\n :show-scrollbar=\"data.showScrollbar\" id=\"verticalScrollView\">\r\n <view class=\"scroll-view-item uni-bg-red\"><text class=\"text\">A</text></view>\r\n <view class=\"scroll-view-item uni-bg-green\"><text class=\"text\">B</text></view>\r\n <view class=\"scroll-view-item uni-bg-blue\"><text class=\"text\">C</text></view>\r\n </scroll-view>\r\n </view>\r\n <view @tap=\"goTop\" class=\"uni-center uni-common-mt\">\r\n <text class=\"uni-link\">点击这里返回顶部</text>\r\n </view>\n <boolean-data :defaultValue=\"false\" title=\"是否禁用scroll-view滚动\" @change=\"change_disabled_boolean\"></boolean-data>\r\n\r\n <view class=\"uni-title uni-common-mt\">\r\n <text class=\"uni-title-text\">Horizontal Scroll</text>\r\n <text class=\"uni-subtitle-text\">横向滚动</text>\r\n </view>\r\n <view>\r\n <scroll-view class=\"scroll-view_H\" direction=\"horizontal\" @scroll=\"scroll\" @scrollend=\"end\"\r\n :scroll-left=\"data.scrollLeft\" :show-scrollbar=\"data.showScrollbar\">\r\n <view class=\"scroll-view-item_H uni-bg-red\"><text class=\"text\">A</text></view>\r\n <view class=\"scroll-view-item_H uni-bg-green\"><text class=\"text\">B</text></view>\r\n <view class=\"scroll-view-item_H uni-bg-blue\"><text class=\"text\">C</text></view>\r\n </scroll-view>\r\n </view>\r\n\r\n <text class=\"uni-title-text\">scroll-view样式大合集</text>\r\n <scroll-view class=\"scroll-view-style-demo\" direction=\"vertical\">\r\n <view class=\"style-demo-item uni-bg-red\"><text class=\"text\">1</text></view>\r\n <view class=\"style-demo-item uni-bg-green\"><text class=\"text\">2</text></view>\r\n <view class=\"style-demo-item uni-bg-blue\"><text class=\"text\">3</text></view>\r\n </scroll-view>\r\n\r\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-props-direction-all\" hover-class=\"none\">\n <button type=\"primary\" class=\"button\">\n direction=all 属性示例\n </button>\n </navigator>\n <view class=\"uni-common-pb\"></view>\n \n\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>\r\n </navigator>\r\n <view class=\"uni-common-pb\"></view>\r\n \r\n </view>\r\n \r\n </scroll-view>\r\n \r\n</template>\r\n<script setup lang=\"uts\">\r\n type ScrollEventTest = {\r\n type : string;\r\n target : UniElement | null;\r\n currentTarget : UniElement | null;\r\n direction ?: string\r\n }\r\n\r\n type DataType = {\r\n scrollTop: number;\r\n oldScrollTop: number;\r\n scrollLeft: number;\r\n showScrollbar: boolean;\r\n // 控制外层scroll-view的direction属性\r\n scrollDirection: string;\r\n // 自动化测试\r\n isScrollTest: string;\r\n isScrolltolowerTest: string;\r\n isScrolltoupperTest: string;\r\n scrollDetailTest: UniScrollEventDetail | null;\r\n scrollEndDetailTest: UniScrollEventDetail | null;\r\n\r\n }\r\n\r\n const data = reactive({\r\n scrollTop: 0,\r\n oldScrollTop: 0,\r\n scrollLeft: 120,\r\n showScrollbar: true,\r\n scrollDirection: \"vertical\",\r\n // 自动化测试\r\n isScrollTest: '',\r\n isScrolltolowerTest: '',\r\n isScrolltoupperTest: '',\r\n scrollDetailTest: null as UniScrollEventDetail | null,\r\n scrollEndDetailTest: null as UniScrollEventDetail | null,\r\n } as DataType)\r\n\r\n // 自动化测试专用（由于事件event参数对象中存在循环引用，在ios端JSON.stringify报错，自动化测试无法page.data获取）\r\n const checkEventTest = (e : ScrollEventTest, eventName : String) => {\r\n // #ifndef MP\r\n const isPass = e.type === eventName && e.target instanceof UniElement && e.currentTarget instanceof UniElement;\r\n // #endif\r\n // #ifdef MP\r\n const isPass = true\r\n // #endif\r\n const result = isPass ? `${eventName}:Success` : `${eventName}:Fail`;\r\n switch (eventName) {\r\n case 'scroll':\r\n data.isScrollTest = result\r\n break;\r\n case 'scrolltolower':\r\n data.isScrolltolowerTest = result + `-${e.direction}`\r\n break;\r\n case 'scrolltoupper':\r\n data.isScrolltoupperTest = result + `-${e.direction}`\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n const upper = (e : UniScrollToUpperEvent) => {\r\n console.log('滚动到顶部/左边', e)\r\n checkEventTest({\r\n type: e.type,\r\n target: e.target,\r\n currentTarget: e.currentTarget,\r\n direction: e.detail.direction,\r\n } as ScrollEventTest, 'scrolltoupper')\r\n }\r\n\r\n const lower = (e : UniScrollToLowerEvent) => {\r\n console.log('滚动到底部/右边', e)\r\n checkEventTest({\r\n type: e.type,\r\n target: e.target,\r\n currentTarget: e.currentTarget,\r\n direction: e.detail.direction,\r\n } as ScrollEventTest, 'scrolltolower')\r\n }\r\n\r\n const scroll = (e : UniScrollEvent) => {\r\n data.scrollDetailTest = e.detail\r\n checkEventTest({\r\n type: e.type,\r\n target: e.target,\r\n currentTarget: e.currentTarget\r\n } as ScrollEventTest, 'scroll')\r\n data.oldScrollTop = e.detail.scrollTop\r\n }\r\n\r\n const end = (e : UniScrollEvent) => {\r\n console.log('滚动结束时触发', e)\r\n data.scrollEndDetailTest = e.detail\r\n checkEventTest({\r\n type: e.type,\r\n target: e.target,\r\n currentTarget: e.currentTarget\r\n } as ScrollEventTest, 'scrollend')\r\n }\r\n\r\n const goTop = () => {\r\n // 解决view层不同步的问题\r\n data.scrollTop = data.oldScrollTop\r\n nextTick(() => {\r\n data.scrollTop = 0\r\n })\r\n uni.showToast({\r\n icon: 'none',\r\n title: '纵向滚动 scrollTop 值已被修改为 0',\r\n })\r\n }\r\n\r\n // 自动化测试专用\r\n const setVerticalScrollBy = (y : number) => {\r\n const element = uni.getElementById(\"verticalScrollView\")\r\n if (element != null) {\r\n element.scrollBy(0, y)\r\n }\r\n }\r\n\r\n defineExpose({\r\n data,\r\n setVerticalScrollBy\r\n })\r\n\r\n const change_disabled_boolean = (disabled: boolean) => {\r\n if(disabled) {\r\n data.scrollDirection = \"none\"\r\n } else {\r\n data.scrollDirection = \"vertical\"\r\n }\r\n }\r\n</script>\r\n\r\n<style>\r\n .scroll-Y {\r\n height: 150px;\r\n }\r\n\r\n .scroll-view_H {\r\n width: 100%;\r\n flex-direction: row;\r\n }\r\n\r\n .scroll-view-item {\r\n height: 150px;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n .scroll-view-item_H {\r\n width: 100%;\r\n height: 150px;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n .text {\r\n font-size: 18px;\r\n color: #ffffff;\r\n }\r\n\r\n .button {\r\n margin-top: 15px;\r\n }\r\n\r\n .scroll-view-style-demo {\r\n flex-direction: column;\r\n justify-content: flex-start;\r\n flex-wrap: nowrap;\r\n align-items: center;\r\n width: 90%;\r\n height: 80px;\r\n background-color: #e3f2fd;\r\n background-image: linear-gradient(to right, #e3f2fd, #a9d5fa);\r\n border: 1px solid #007aff;\r\n border-radius: 4px;\r\n margin: 10px;\r\n padding: 10px;\r\n display: flex;\r\n opacity: 0.95;\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\r\n }\r\n .style-demo-item {\r\n width: 100px;\r\n height: 80px;\r\n }\r\n\r\n</style>\r\n\n```\n\n:::","children":"### 子组件 @children-tags\n支持所有组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.scroll-view)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/scroll-view.html)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=scroll-view&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=scroll-view&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=scroll-view&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=scroll-view&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=scroll-view)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=scroll-view&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"swiper-item":{"name":"::: sourceCode\n## swiper-item\n:::","originName":"## swiper-item","description":"> 组件类型：UniSwiperItemElement \n\n swiper的唯一合法子组件。每个swiper-item代表一个滑块。宽高自动设置为100%","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | 3.9 | 4.11 | 4.61 |\n","attribute":"### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- | :-: | :- |\n| item-id | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 该 swiper-item 的标识符 |\n| skip-hidden-item-layout | boolean | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(boolean)*<br/>是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息 |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.swiper.swiper-item)\n- [参见uni-app相关文档](https://uniapp.dcloud.net.cn/component/swiper.html#swiper-item)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/swiper-item.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=swiper-item&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=swiper-item&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=swiper-item&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=swiper-item&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=swiper-item)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=swiper-item&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"swiper":{"name":"::: sourceCode\n## swiper\n\n> GitCode: https://gitcode.com/dcloud/uni-component/tree/alpha/uni_modules/uni-swiper\n\n\n> GitHub: https://github.com/dcloudio/uni-component/tree/alpha/uni_modules/uni-swiper\n\n:::","originName":"## swiper","description":"> 组件类型：UniSwiperElement \n\n 滑块视图容器","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | 3.9 | 4.11 | 4.61 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| indicator-dots | string \\| boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 是否显示面板指示点 |\n| indicator-color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"rgba(0, 0, 0, .3)\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 指示点颜色，蒸汽模式推荐使用 indicator-style 定制指示点颜色 |\n| indicator-active-color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#000000\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 当前选中的指示点颜色，蒸汽模式推荐使用 indicator-active-style 定制指示点颜色 |\n| active-class | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"NOT_SUPPORTED\"}' /> | swiper-item 可见时的 class |\n| changing-class | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"NOT_SUPPORTED\"}' /> | acceleration 设置为 {{true}} 时且处于滑动过程中，中间若干屏处于可见时的class |\n| acceleration | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"NOT_SUPPORTED\"}' /> | 当开启时，会根据滑动速度，连续滑动多屏 |\n| disable-programmatic-animation | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"NOT_SUPPORTED\"}' /> | 是否禁用代码变动触发 swiper 切换时使用动画。 |\n| disable-touch | string \\| boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否禁止用户 touch 操作 |\n| touchable | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"NOT_SUPPORTED\"}' /> | 是否监听用户的触摸事件 |\n| easing-function | string | \"default\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"5.21\",\"x\",\"5.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 指定 swiper 切换缓动动画类型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic |\n@| 合法值 | 兼容性 |\n@| :- | :-: |\n@| default | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n@| linear | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n@| easeInCubic | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n@| easeOutCubic | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n@| easeInOutCubic | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| autoplay | string \\| boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 是否自动切换 |\n| current | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 当前所在滑块的 index |\n| current-item-id | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 当前所在滑块的 item-id ，不能与 current 被同时指定 |\n| interval | number | 3000 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 自动切换时间间隔 |\n| duration | number | 500 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.44\",\"x\",\"5.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 滑动动画时长（Android平台仅autoplay模式下生效） |\n| circular | string \\| boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 是否采用衔接滑动 |\n| vertical | string \\| boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 滑动方向是否为纵向 |\n| rebound | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 控制是否回弹效果 |\n| previous-margin | string | \"0px\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"5.21\",\"x\",\"5.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值 |\n| next-margin | string | \"0px\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"5.21\",\"x\",\"5.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 |\n| display-multiple-items | number | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 同时显示的滑块数量 |\n| auto-height | string \\| boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\",\"5.21\",\"x\",\"5.11\",\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 自动高度。设置为 true 时，swiper 高度会随当前 item 的高度变化而变化。 |\n| disable-bounce | string \\| boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\",\"5.21\",\"x\",\"5.11\",\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 控制是否回弹效果 |\n| indicator-class | string([string.ClassString](/uts/data-type.md#ide-string)) | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\",\"5.21\",\"x\",\"5.11\",\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 指示点绑定的 class |\n| indicator-active-class | string([string.ClassString](/uts/data-type.md#ide-string)) | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\",\"5.21\",\"x\",\"5.11\",\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 当前选中的指示点绑定的 class |\n| indicator-style | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\",\"5.21\",\"x\",\"5.11\",\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 指示点样式 |\n| indicator-active-style | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\",\"5.21\",\"x\",\"5.11\",\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 当前选中的指示点样式 |\n| @change | (event: [UniSwiperChangeEvent](#uniswiperchangeevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | current 改变时会触发 change 事件，event.detail = {current: current, source: source} |\n| @transition | (event: [UniSwiperTransitionEvent](#uniswipertransitionevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy} |\n| @animationfinish | (event: [UniSwiperAnimationFinishEvent](#uniswiperanimationfinishevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 动画结束时会触发 animationfinish 事件，event.detail = {current: current, source: source} |","event":"\n### 事件\n#### UniSwiperChangeEvent\n\n```mermaid\ngraph LR\n \nUniSwiperChangeEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniSwiperChangeEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniSwiperChangeEventDetail** | 是 |\n@| 名称 | 类型 | 必备 | 兼容性 | 描述 |\n@| :- | :- | :- | :-: | :- |\n@| current | number | 是 | | 发生change事件的滑块下标 |\n@| currentItemId | string | 否 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"√\",\"4.41\",\"x\",\"x\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 切换结束的 swiper-item 的 item-id 属性值 |\n@| source | string | 是 | | autoplay 自动播放导致swiper变化；touch 用户划动引起swiper变化 |\n\n\n#### UniSwiperTransitionEvent\n\n```mermaid\ngraph LR\n \nUniSwiperTransitionEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniSwiperTransitionEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniSwiperTransitionEventDetail** | 是 |\n@| 名称 | 类型 | 必备 | 描述 |\n@| :- | :- | :- | :- |\n@| dx | number | 是 | 横向偏移量，单位是逻辑像素px |\n@| dy | number | 是 | 纵向偏移量，单位是逻辑像素px |\n\n\n#### UniSwiperAnimationFinishEvent\n\n```mermaid\ngraph LR\n \nUniSwiperAnimationFinishEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniSwiperAnimationFinishEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniSwiperAnimationFinishEventDetail** | 是 |\n@| 名称 | 类型 | 必备 | 兼容性 | 描述 |\n@| :- | :- | :- | :-: | :- |\n@| current | number | 是 | | 发生动画结束事件的滑块下标 |\n@| currentItemId | string | 否 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"√\",\"4.41\",\"x\",\"x\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 动画结束的 swiper-item 的 item-id 属性值 |\n@| source | string | 是 | | autoplay 自动播放导致swiper变化；touch 用户划动引起swiper变化 |\n\n","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/swiper/swiper.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/swiper/swiper.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/swiper/swiper\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/swiper/swiper\n\n>示例\n```vue\n<template>\r\n \r\n <scroll-view class=\"page-scroll-view uni-theme-root\">\r\n \r\n <view class=\"swiper-page uni-common-mb uni-common-pb uni-theme-root\">\r\n <page-head title=\"swiper,可滑动视图\"></page-head>\r\n <view>\r\n \r\n <swiper id=\"swiper-view\" class=\"swiper\" :vertical=\"data.verticalSelect\" :indicator-dots=\"data.dotsSelect\"\r\n :autoplay=\"data.autoplaySelect\"\r\n \r\n :disable-bounce=\"data.disableBounceSelect\"\r\n \r\n \r\n :bounces=\"!data.disableBounceSelect\"\r\n \r\n :interval=\"data.intervalSelect\" :circular=\"data.circularSelect\"\r\n :duration=\"data.durationSelect\" :indicator-color=\"data.indicatorColor\" :indicator-active-color=\"data.indicatorColorActive\"\r\n :disable-touch=\"data.disableTouchSelect\" :current=\"data.currentVal\" :current-item-id=\"data.currentItemIdVal\"\r\n @change=\"swiperChange\" @transition=\"swiperTransition\" @animationfinish=\"swiperAnimationfinish\"\r\n @touchstart=\"swipertouchStart\">\r\n <swiper-item item-id=\"A\">\r\n <view class=\"swiper-item uni-bg-red\"><text class=\"swiper-item-Text\" @touchstart=\"viewtouchStart\">A</text>\r\n </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\"><text class=\"uni-theme-text\">显示面板指示点</text></view>\r\n <switch :checked=\"data.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\"><text class=\"uni-theme-text\">定制指示器颜色</text></view>\r\n <switch :checked=\"data.indicatorColorSelect\"\r\n \r\n :disabled=\"true\"\r\n \r\n @change=\"indicatorColorChange\" />\r\n </view>\r\n <view class=\"uni-list-cell uni-list-cell-padding\">\r\n <view class=\"uni-list-cell-db\"><text class=\"uni-theme-text\">禁止 touch 操作</text></view>\r\n <switch :checked=\"data.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\"><text class=\"uni-theme-text\">是否自动切换</text></view>\r\n <switch :checked=\"data.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\"><text class=\"uni-theme-text\">是否衔接滑动</text></view>\r\n <switch :checked=\"data.circularSelect\" @change=\"circularChange\" />\r\n </view>\r\n <view class=\"uni-title uni-list-cell-padding\"><text class=\"uni-theme-text\">间隔时间(毫秒)</text></view>\r\n <view class=\"uni-padding-wrap\">\r\n <slider @change=\"sliderChange\" :value=\"2000\" :min=\"500\" :max=\"5000\" :show-value=\"true\" />\r\n </view>\r\n <view class=\"uni-title uni-list-cell-padding\"><text class=\"uni-theme-text\">动画时长(毫秒)</text></view>\r\n <view class=\"uni-padding-wrap\">\r\n <slider @change=\"durationSliderChange\" :value=\"500\" :min=\"50\" :max=\"2000\" :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\"><text class=\"uni-theme-text\">是否纵向滑动</text></view>\r\n <switch :checked=\"data.verticalSelect\" @change=\"verticalChange\" />\r\n </view>\r\n \r\n <view class=\"uni-list-cell uni-list-cell-padding\">\r\n <view class=\"uni-list-cell-db\"><text class=\"uni-theme-text\">是否禁用回弹效果</text></view>\r\n \r\n <switch :checked=\"data.disableBounceSelect\" @change=\"disableBounceSelectChange\" />\r\n </view>\r\n \r\n <view class=\"uni-list-cell uni-list-cell-padding\">\r\n <view class=\"uni-list-cell-db\"><text class=\"uni-theme-text\">指定current为最后一个元素</text></view>\r\n <switch :checked=\"data.currentSelect\" @change=\"currentChange\" />\r\n </view>\r\n \r\n <view class=\"uni-list-cell uni-list-cell-padding\">\r\n <view class=\"uni-list-cell-db\"><text class=\"uni-theme-text\">指定current-item-id为最后一个元素</text></view>\r\n <switch :checked=\"data.currentItemIdSelect\" @change=\"currentItemIdChange\" />\r\n </view>\r\n \r\n <view class=\"uni-list-cell uni-list-cell-padding\">\r\n <view class=\"uni-list-cell-db\"><text class=\"uni-theme-text\">打印 swiperChange 日志</text></view>\r\n <switch :checked=\"data.swiperChangeSelect\" @change=\"swiperChangeChange\" />\r\n </view>\r\n <view class=\"uni-list-cell uni-list-cell-padding\">\r\n <view class=\"uni-list-cell-db\"><text class=\"uni-theme-text\">1打印 swiperTransition 日志</text></view>\r\n <switch :checked=\"data.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\"><text class=\"uni-theme-text\">打印 swiperAnimationfinish 日志</text></view>\r\n <switch :checked=\"data.swiperAnimationfinishSelect\" @change=\"swiperAnimationfinishChange\" />\r\n </view>\r\n\r\n <view class=\"uni-list-cell-padding\"><text class=\"uni-theme-text\">测试 swiper 默认行为</text></view>\r\n <swiper class=\"swiper\" :autoplay=\"data.autoplayForDefault\" :circular=\"data.circularForDefault\">\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 class=\"uni-list-cell uni-list-cell-padding\">\r\n <view class=\"uni-list-cell-db\"><text class=\"uni-theme-text\">是否自动切换</text></view>\r\n <switch :checked=\"data.autoplayForDefault\" @change=\"() => {data.autoplayForDefault = !data.autoplayForDefault}\" />\r\n </view>\r\n <view class=\"uni-list-cell uni-list-cell-padding\">\r\n <view class=\"uni-list-cell-db\"><text class=\"uni-theme-text\">是否衔接滑动</text></view>\r\n <switch :checked=\"data.circularForDefault\" @change=\"() => {data.circularForDefault = !data.circularForDefault}\" />\r\n </view>\r\n \r\n <navigator url=\"/pages/component/swiper/swiper-list-view\">\r\n <button type=\"primary\">\r\n swiper 嵌套 list-view 测试\r\n </button>\r\n </navigator>\r\n <navigator url=\"/pages/component/swiper/swiper-anim\" style=\"margin-top: 10px;\">\r\n \t<button type=\"primary\">\r\n \t\tswiper 动画测试\r\n \t</button>\r\n </navigator>\r\n \r\n \r\n <navigator url=\"/pages/component/swiper/swiper-more\" style=\"margin-top: 10px;\">\r\n \t<button type=\"primary\">\r\n \t\t更多 swiper\r\n \t</button>\r\n </navigator>\r\n <navigator url=\"/pages/component/swiper/swiper-in-swiper\" style=\"margin-top: 10px;\">\r\n <button type=\"primary\">嵌套测试</button>\r\n </navigator>\r\n \r\n <navigator url=\"/pages/component/swiper/swiper-item-100\" style=\"margin-top: 10px;\">\r\n <button>组件性能测试</button>\r\n </navigator>\r\n \r\n \r\n </view>\r\n </view>\r\n \r\n </scroll-view>\r\n \r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n type SwiperEventTest = {\r\n type : string;\r\n target : UniElement | null;\r\n currentTarget : UniElement | null;\r\n }\r\n\r\n type DataType = {\r\n background: string[];\r\n dotsSelect: boolean;\r\n disableBounceSelect: boolean;\r\n autoplaySelect: boolean;\r\n circularSelect: boolean;\r\n indicatorColorSelect: boolean;\r\n verticalSelect: boolean;\r\n currentSelect: boolean;\r\n currentItemIdSelect: boolean;\r\n intervalSelect: number;\r\n durationSelect: number;\r\n indicatorColor: string;\r\n indicatorColorActive: string;\r\n currentVal: number;\r\n currentItemIdVal: string;\r\n disableTouchSelect: boolean;\r\n swiperTransitionSelect: boolean;\r\n swiperAnimationfinishSelect: boolean;\r\n swiperChangeSelect: boolean;\r\n currentValChange: number;\r\n autoplayForDefault: boolean;\r\n circularForDefault: boolean;\r\n // 自动化测试\r\n changeDetailTest: UniSwiperChangeEventDetail | null;\r\n transitionDetailTest: UniSwiperTransitionEventDetail | null;\r\n animationfinishDetailTest: UniSwiperAnimationFinishEventDetail | null;\r\n isChangeTest: string;\r\n isTransitionTest: string;\r\n isAnimationfinishTest: string;\r\n swipeX: number;\r\n swipeY: number;\r\n }\r\n\r\n // 使用reactive避免ref数据在自动化测试中无法访问\r\n const data = reactive({\r\n background: ['color1', 'color2', 'color3'],\r\n dotsSelect: false,\r\n disableBounceSelect: 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 durationSelect: 500,\r\n indicatorColor: \"\",\r\n indicatorColorActive: \"\",\r\n currentVal: 0,\r\n currentItemIdVal: \"\",\r\n disableTouchSelect: false,\r\n swiperTransitionSelect: false,\r\n swiperAnimationfinishSelect: false,\r\n swiperChangeSelect: false,\r\n currentValChange: 0,\r\n autoplayForDefault: false,\r\n circularForDefault: false,\r\n // 自动化测试\r\n changeDetailTest: null as UniSwiperChangeEventDetail | null,\r\n transitionDetailTest: null as UniSwiperTransitionEventDetail | null,\r\n animationfinishDetailTest: null as UniSwiperAnimationFinishEventDetail | null,\r\n isChangeTest: '',\r\n isTransitionTest: '',\r\n isAnimationfinishTest: '',\r\n swipeX: 0,\r\n swipeY: 0\r\n } as DataType)\r\n\r\n onReady(() => {\r\n // #ifndef MP\r\n // 获取模拟滑动手势的起始点\r\n let ele = uni.getElementById(\"swiper-view\")\r\n let eleRect = ele?.getBoundingClientRect()\r\n if (eleRect != null) {\r\n // 避开右侧边界，避免滑动行为响应为侧滑\r\n data.swipeX = eleRect.width - 40\r\n data.swipeY += eleRect.y + uni.getSystemInfoSync().safeArea.top + 44 + 35\r\n }\r\n // #endif\r\n })\r\n\r\n const swipertouchStart = (e : UniTouchEvent) => {\r\n console.log(\"swiper touchstart\")\r\n }\r\n\r\n const viewtouchStart = (e : UniTouchEvent) => {\r\n console.log(\"view touchstart:\")\r\n }\r\n\r\n // 自动化测试专用（由于事件event参数对象中存在循环引用，在ios端JSON.stringify报错，自动化测试无法page.data获取）\r\n const checkEventTest = (e : SwiperEventTest, eventName : String) => {\r\n // #ifndef MP\r\n const isPass = e.type === eventName && e.target instanceof UniElement && e.currentTarget instanceof UniElement;\r\n // #endif\r\n // #ifdef MP\r\n const isPass = true;\r\n // #endif\r\n const result = isPass ? `${eventName}:Success` : `${eventName}:Fail`;\r\n switch (eventName) {\r\n case 'change':\r\n data.isChangeTest = result\r\n break;\r\n case 'transition':\r\n data.isTransitionTest = result\r\n break;\r\n case 'animationfinish':\r\n data.isAnimationfinishTest = result\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n\r\n const swiperChange = (e : UniSwiperChangeEvent) => {\r\n data.changeDetailTest = e.detail\r\n checkEventTest({\r\n type: e.type,\r\n target: e.target,\r\n currentTarget: e.currentTarget\r\n } as SwiperEventTest, 'change')\r\n data.currentValChange = e.detail.current\r\n console.log(data.currentValChange)\r\n if (data.swiperChangeSelect) {\r\n console.log(\"swiperChange\", e)\r\n }\r\n }\r\n\r\n const swiperTransition = (e : UniSwiperTransitionEvent) => {\r\n data.transitionDetailTest = e.detail\r\n checkEventTest({\r\n type: e.type,\r\n target: e.target,\r\n currentTarget: e.currentTarget\r\n } as SwiperEventTest, 'transition')\r\n if (data.swiperTransitionSelect) {\r\n console.log(\"swiperTransition\", e)\r\n }\r\n }\r\n\r\n const swiperAnimationfinish = (e : UniSwiperAnimationFinishEvent) => {\r\n data.animationfinishDetailTest = e.detail\r\n checkEventTest({\r\n type: e.type,\r\n target: e.target,\r\n currentTarget: e.currentTarget\r\n } as SwiperEventTest, 'animationfinish')\r\n if (data.swiperAnimationfinishSelect) {\r\n console.log(\"swiperAnimationfinish\", e)\r\n }\r\n }\r\n\r\n //自动化测试例专用\r\n const jest_getSystemInfo = () : GetSystemInfoResult => {\r\n return uni.getSystemInfoSync();\r\n }\r\n\r\n\r\n const dotsChange = (e : UniSwitchChangeEvent) => {\r\n data.dotsSelect = e.detail.value\r\n }\r\n\r\n const swiperTransitionChange = (e : UniSwitchChangeEvent) => {\r\n data.swiperTransitionSelect = e.detail.value\r\n }\r\n\r\n const swiperChangeChange = (e : UniSwitchChangeEvent) => {\r\n data.swiperChangeSelect = e.detail.value\r\n }\r\n\r\n const swiperAnimationfinishChange = (e : UniSwitchChangeEvent) => {\r\n data.swiperAnimationfinishSelect = e.detail.value\r\n }\r\n\r\n const autoplayChange = (e : UniSwitchChangeEvent) => {\r\n data.autoplaySelect = e.detail.value\r\n }\r\n\r\n const verticalChange = (e : UniSwitchChangeEvent) => {\r\n data.verticalSelect = e.detail.value\r\n }\r\n\r\n const disableTouchChange = (e : UniSwitchChangeEvent) => {\r\n data.disableTouchSelect = e.detail.value\r\n }\r\n\r\n const currentItemIdChange = (e : UniSwitchChangeEvent) => {\r\n data.currentItemIdSelect = e.detail.value\r\n if (data.currentItemIdSelect) {\r\n data.currentItemIdVal = 'C'\r\n } else {\r\n data.currentItemIdVal = 'A'\r\n }\r\n }\r\n\r\n const currentChange = (e : UniSwitchChangeEvent) => {\r\n data.currentSelect = e.detail.value\r\n if (data.currentSelect) {\r\n data.currentVal = 2\r\n } else {\r\n data.currentVal = 0\r\n }\r\n }\r\n\r\n const circularChange = (e : UniSwitchChangeEvent) => {\r\n data.circularSelect = e.detail.value\r\n console.log(data.circularSelect)\r\n }\r\n\r\n const disableBounceSelectChange = (e : UniSwitchChangeEvent) => {\r\n data.disableBounceSelect = e.detail.value\r\n console.log(data.disableBounceSelect)\r\n }\r\n\r\n const sliderChange = (e : UniSliderChangeEvent) => {\r\n data.intervalSelect = e.detail.value\r\n }\r\n\r\n const durationSliderChange = (e : UniSliderChangeEvent) => {\r\n data.durationSelect = e.detail.value\r\n }\r\n\r\n const indicatorColorChange = (e : UniSwitchChangeEvent) => {\r\n data.indicatorColorSelect = e.detail.value\r\n if (data.indicatorColorSelect) {\r\n // 选择了定制指示器颜色\r\n data.indicatorColor = \"#ff00ff\"\r\n data.indicatorColorActive = \"#0000ff\"\r\n } else {\r\n // 没有选择颜色\r\n data.indicatorColor = \"\"\r\n data.indicatorColorActive = \"\"\r\n }\r\n }\r\n\r\n defineExpose({\r\n data,\r\n jest_getSystemInfo\r\n })\r\n</script>\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>\r\n\n```\n\n:::","children":"### 子组件 @children-tags\n| 子组件 | 兼容性 |\n| :- | :- |\n| [swiper-item](swiper-item.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.swiper.swiper)\n- [参见uni-app相关文档](https://uniapp.dcloud.net.cn/component/swiper.html)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=swiper&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=swiper&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=swiper&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=swiper&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=swiper)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=swiper&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"match-media":{"name":"::: sourceCode\n## match-media\n\n> GitCode: https://gitcode.com/dcloud/uni-component/tree/alpha/uni_modules/uni-match-media\n\n\n> GitHub: https://github.com/dcloudio/uni-component/tree/alpha/uni_modules/uni-match-media\n\n:::","originName":"## match-media","description":"media query 匹配检测节点","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.71 | 4.41 | 4.71 | 5.0 | 4.71 |\n","attribute":"### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- | :-: | :- |\n| width | string \\| number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.71\",\"4.41\",\"4.71\",\"5.0\",\"4.71\"]],\"status\":\"SUPPORTED\"}' /> | 页面宽度（px 为单位） |\n| min-width | string \\| number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.71\",\"4.41\",\"4.71\",\"5.0\",\"4.71\"]],\"status\":\"SUPPORTED\"}' /> | 页面最小宽度（px 为单位） |\n| max-width | string \\| number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.71\",\"4.41\",\"4.71\",\"5.0\",\"4.71\"]],\"status\":\"SUPPORTED\"}' /> | 页面最大宽度（px 为单位） |\n| height | string \\| number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.71\",\"4.41\",\"4.71\",\"5.0\",\"4.71\"]],\"status\":\"SUPPORTED\"}' /> | 页面高度（px 为单位） |\n| min-height | string \\| number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.71\",\"4.41\",\"4.71\",\"5.0\",\"4.71\"]],\"status\":\"SUPPORTED\"}' /> | 页面最小高度（px 为单位） |\n| max-height | string \\| number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.71\",\"4.41\",\"4.71\",\"5.0\",\"4.71\"]],\"status\":\"SUPPORTED\"}' /> | 页面最大高度（px 为单位） |\n| orientation | portrait \\| landscape | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.71\",\"4.41\",\"4.71\",\"5.0\",\"4.71\"]],\"status\":\"SUPPORTED\"}' /> | 屏幕方向 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| portrait | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.71\",\"4.41\",\"4.71\",\"5.0\",\"4.71\"]],\"status\":\"SUPPORTED\"}' /> | 竖屏 |\n@| landscape | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.71\",\"4.41\",\"4.71\",\"5.0\",\"4.71\"]],\"status\":\"SUPPORTED\"}' /> | 横屏 |","event":"","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/match-media/match-media.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/match-media/match-media.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/match-media/match-media\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/match-media/match-media\n\n>示例\n```vue\n<template>\r\n <view>\r\n <page-intro style=\"margin: 10px 20px 0;\" content=\"本页演示 match-media 媒体查询组件：按 min-width、max-width、width、高度与 orientation 等条件匹配，控制子节点在不同屏幕下的显示。\"></page-intro>\r\n <view class=\"container\">\r\n <view class=\"section\">\r\n <text class=\"subtitle\">基础条件匹配</text>\r\n\r\n <match-media :min-width=\"400\">\r\n <view class=\"demo-box\">屏幕宽度 ≥ 400px 时显示</view>\r\n </match-media>\r\n\r\n <match-media :max-width=\"600\">\r\n <view class=\"demo-box\">屏幕宽度 ≤ 600px 时显示</view>\r\n </match-media>\r\n\r\n <match-media :width=\"375\">\r\n <view class=\"demo-box\">屏幕宽度 = 375px 时显示</view>\r\n </match-media>\r\n\r\n <match-media :min-height=\"600\">\r\n <view class=\"demo-box\">屏幕高度 ≥ 600px 时显示</view>\r\n </match-media>\r\n\r\n <match-media :max-height=\"800\">\r\n <view class=\"demo-box\">屏幕高度 ≤ 800px 时显示</view>\r\n </match-media>\r\n\r\n <match-media :height=\"667\">\r\n <view class=\"demo-box\">屏幕高度 = 667px 时显示</view>\r\n </match-media>\r\n\r\n <match-media orientation=\"portrait\">\r\n <view class=\"demo-box\">竖屏时显示</view>\r\n </match-media>\r\n <match-media orientation=\"landscape\">\r\n <view class=\"demo-box\">横屏时显示</view>\r\n </match-media>\r\n </view>\r\n <view class=\"section\">\r\n <text class=\"subtitle\">组合条件匹配</text>\r\n\r\n <match-media :min-width=\"500\" :max-width=\"1000\" orientation=\"landscape\">\r\n <view class=\"demo-box\">横屏且宽度在 500px ~ 1000px 时显示</view>\r\n </match-media>\r\n\r\n <match-media :min-height=\"200\" :max-height=\"800\" orientation=\"portrait\">\r\n <view class=\"demo-box\">竖屏且高度在 200px ~ 800px 时显示</view>\r\n </match-media>\r\n\r\n <match-media :min-width=\"300\" :max-width=\"900\" :min-height=\"400\" :max-height=\"800\" orientation=\"portrait\">\r\n <view class=\"demo-box\">竖屏且宽度在 300px ~ 900px，高度在 400px ~ 800px 时显示</view>\r\n </match-media>\r\n </view>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<style>\r\n .container {\r\n padding: 20px;\r\n }\r\n\r\n .section {\r\n padding-top: 5px;\r\n }\r\n\r\n .subtitle {\r\n font-size: 20px;\r\n font-weight: bold;\r\n margin-bottom: 5px;\r\n }\r\n\r\n .demo-box {\r\n padding: 5px 0;\r\n }\r\n</style>\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.match-media)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/match-media.html)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/match-media.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=match-media&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=match-media&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=match-media&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=match-media&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=match-media)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=match-media&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"page-container":{"name":"::: sourceCode\n## page-container\n:::","originName":"## page-container","description":"> 组件类型：UniPageContainerElement \n\n 页面容器组件。用于创建弹出层，支持拦截返回操作","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 5.02 | 4.41 | 5.02 | 5.02 | 5.02 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| show | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"5.02\",\"4.41\",\"5.02\",\"5.02\",\"5.02\"]],\"status\":\"SUPPORTED\"}' /> | 是否显示容器组件 |\n| duration | number | 300 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"5.02\",\"4.41\",\"5.02\",\"5.02\",\"5.02\"]],\"status\":\"SUPPORTED\"}' /> | 动画时长，单位毫秒 |\n| z-index | number | 100 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"5.02\",\"4.41\",\"5.02\",\"5.02\",\"5.02\"]],\"status\":\"SUPPORTED\"}' /> | z-index 层级 |\n| overlay | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"5.02\",\"4.41\",\"5.02\",\"5.02\",\"5.02\"]],\"status\":\"SUPPORTED\"}' /> | 是否显示遮罩层 |\n| round | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"5.02\",\"4.41\",\"5.02\",\"5.02\",\"5.02\"]],\"status\":\"SUPPORTED\"}' /> | 是否显示圆角 |\n| position | top \\| left \\| bottom \\| right \\| center | \"bottom\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"5.02\",\"4.41\",\"5.02\",\"5.02\",\"5.02\"]],\"status\":\"SUPPORTED\"}' /> | 弹出位置 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| top | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"5.02\",\"4.41\",\"5.02\",\"5.02\",\"5.02\"]],\"status\":\"SUPPORTED\"}' /> | 顶部 |\n@| left | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"5.02\",\"x\",\"5.02\",\"5.02\",\"5.02\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 左侧 |\n@| bottom | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"5.02\",\"4.41\",\"5.02\",\"5.02\",\"5.02\"]],\"status\":\"SUPPORTED\"}' /> | 底部 |\n@| right | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"5.02\",\"4.41\",\"5.02\",\"5.02\",\"5.02\"]],\"status\":\"SUPPORTED\"}' /> | 右侧 |\n@| center | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"5.02\",\"4.41\",\"5.02\",\"5.02\",\"5.02\"]],\"status\":\"SUPPORTED\"}' /> | 居中 |\n| close-on-slide-down | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"5.02\",\"4.41\",\"5.02\",\"5.02\",\"5.02\"]],\"status\":\"SUPPORTED\"}' /> | 是否在下滑一段距离后关闭 |\n| overlay-style | string([string.CSSString](/uts/data-type.md#ide-string)) | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"5.02\",\"4.41\",\"5.02\",\"5.02\",\"5.02\"]],\"status\":\"SUPPORTED\"}' /> | 自定义遮罩层样式 |\n| custom-style | string([string.CSSString](/uts/data-type.md#ide-string)) | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"5.02\",\"4.41\",\"5.02\",\"5.02\",\"5.02\"]],\"status\":\"SUPPORTED\"}' /> | 自定义弹出层样式 |\n| @beforeenter | eventhandle | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"5.02\",\"4.41\",\"5.02\",\"5.02\",\"5.02\"]],\"status\":\"SUPPORTED\"}' /> | *(eventhandle)*<br/>进入前触发 |\n| @enter | eventhandle | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"5.02\",\"4.41\",\"5.02\",\"5.02\",\"5.02\"]],\"status\":\"SUPPORTED\"}' /> | *(eventhandle)*<br/>进入中触发 |\n| @afterenter | eventhandle | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"5.02\",\"4.41\",\"5.02\",\"5.02\",\"5.02\"]],\"status\":\"SUPPORTED\"}' /> | *(eventhandle)*<br/>进入后触发 |\n| @beforeleave | eventhandle | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"5.02\",\"4.41\",\"5.02\",\"5.02\",\"5.02\"]],\"status\":\"SUPPORTED\"}' /> | *(eventhandle)*<br/>离开前触发 |\n| @leave | eventhandle | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"5.02\",\"4.41\",\"5.02\",\"5.02\",\"5.02\"]],\"status\":\"SUPPORTED\"}' /> | *(eventhandle)*<br/>离开中触发 |\n| @afterleave | eventhandle | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"5.02\",\"4.41\",\"5.02\",\"5.02\",\"5.02\"]],\"status\":\"SUPPORTED\"}' /> | *(eventhandle)*<br/>离开后触发 |\n| @clickoverlay | (event: [UniPointerEvent](/component/common.md#unipointerevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"5.02\",\"4.41\",\"5.02\",\"5.02\",\"5.02\"]],\"status\":\"SUPPORTED\"}' /> | 点击遮罩层时触发 |","event":"","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/page-container/page-container.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/page-container/page-container.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/page-container/page-container\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/page-container/page-container\n\n>示例\n```vue\n<template>\r\n <scroll-view class=\"uni-theme-root\" style=\"flex: 1\">\n <page-intro\r\n content=\"本页演示 page-container 页面容器，用于在页面内创建弹出层效果，支持拦截返回操作：顶部/底部/左侧/右侧/居中弹出、圆角、遮罩与透明蒙层、下滑关闭等能力，通过按钮触发不同展示。\"></page-intro>\r\n <view class=\"uni-padding-wrap uni-common-mt\">\r\n <view class=\"uni-title uni-common-mt\">\r\n <text class=\"uni-title-text\"> 弹出位置 </text>\r\n </view>\r\n <view>\r\n <button @click=\"showContainer('top', '顶部')\">顶部弹出</button>\r\n <button class=\"mt-5\" @click=\"showContainer('bottom', '底部')\">底部弹出</button>\r\n <button id=\"right-button\" class=\"mt-5\" @click=\"showContainer('right', '右侧')\">右侧弹出</button>\r\n \r\n <button class=\"mt-5\" @click=\"showContainer('left', '左侧')\">左侧弹出</button>\r\n \r\n <button class=\"mt-5\" @click=\"showContainer('center', '居中')\">居中弹出</button>\r\n </view>\r\n </view>\r\n\r\n <view class=\"uni-padding-wrap uni-common-mt\">\r\n <view class=\"uni-title uni-common-mt\">\r\n <text class=\"uni-title-text\"> 跟随元素对齐 </text>\r\n </view>\r\n <view>\r\n <button id=\"align-left-button\" @click=\"showAlignLeft\">下方左对齐</button>\r\n <button id=\"align-center-button\" class=\"mt-5\" @click=\"showAlignCenter\">下方水平居中</button>\r\n <button id=\"align-right-button\" class=\"mt-5\" @click=\"showAlignRight\">下方右对齐</button>\r\n </view>\r\n </view>\r\n\r\n <view class=\"uni-padding-wrap uni-common-mt\">\r\n <view class=\"uni-title uni-common-mt\">\r\n <text class=\"uni-title-text\"> 弹窗圆角 </text>\r\n </view>\r\n <view>\r\n <button id=\"round-button\" @click=\"showRound\"> 开启圆角 </button>\r\n <button id=\"close-round-button\" class=\"mt-5\" @click=\"closeRound\"> 关闭圆角 </button>\r\n </view>\r\n </view>\r\n\r\n <view class=\"uni-padding-wrap uni-common-mt\">\r\n <view class=\"uni-title uni-common-mt\">\r\n <text class=\"uni-title-text\"> 遮罩层 </text>\r\n </view>\r\n <view>\r\n <button @click=\"showOverlay(false)\">不显示蒙层</button>\r\n <button class=\"mt-5\" @click=\"showOverlay(true)\">显示蒙层</button>\r\n <button class=\"mt-5\" @click=\"showTransparentOverlay\">透明蒙层</button>\r\n <button class=\"mt-5\" @click=\"showGreenTransparentOverlay\">绿色半透明蒙层</button>\r\n \r\n <button class=\"mt-5\" @click=\"showOverlayPointerEventsNone\">蒙层穿透（点击蒙层不关闭）</button>\r\n \r\n </view>\r\n </view>\r\n\r\n <view class=\"uni-padding-wrap uni-common-mt\">\r\n <view class=\"uni-title uni-common-mt\">\r\n <text class=\"uni-title-text\"> 自动隐藏 </text>\r\n </view>\r\n <view>\r\n <button @click=\"autoClose\">2秒后自动关闭</button>\r\n </view>\r\n </view>\r\n\r\n <view class=\"uni-padding-wrap uni-common-mt\">\r\n <view class=\"uni-title uni-common-mt\">\r\n <text class=\"uni-title-text\"> 滚动穿透 </text>\r\n </view>\r\n <view>\r\n <button @click=\"showScrollThrough\">打开滚动穿透测试弹层</button>\r\n <text class=\"slider-down-info\">测试弹层内滚动到顶部或底部时是否会影响主页面滚动</text>\r\n </view>\r\n </view>\r\n\r\n <view class=\"uni-padding-wrap uni-common-mt\">\r\n <view class=\"uni-title uni-common-mt\">\r\n <text class=\"uni-title-text\"> 下滑关闭 </text>\r\n </view>\r\n <view>\r\n <button @click=\"showSlideDown\">支持下滑关闭</button>\r\n <text class=\"slider-down-info\">提示: 当 close-on-slide-down=true 时，可下滑关闭容器</text>\r\n </view>\r\n </view>\r\n\r\n <view class=\"uni-padding-wrap uni-common-mt\">\r\n <view class=\"uni-title uni-common-mt\">\r\n <text class=\"uni-title-text\"> 其他方向滑动关闭 </text>\r\n </view>\r\n <view>\r\n <button @click=\"showSlideClose('left')\">左滑关闭</button>\r\n <button class=\"mt-5\" @click=\"showSlideClose('right')\">右滑关闭</button>\r\n <button class=\"mt-5\" @click=\"showSlideClose('top')\">上滑关闭</button>\r\n <text class=\"slider-down-info\">提示: close-on-slide-down=true 时，关闭方向由 position 决定</text>\r\n </view>\r\n </view>\r\n\r\n \r\n <view class=\"uni-padding-wrap uni-common-mt\" style=\"margin-bottom: 30px;\">\r\n <view class=\"uni-title uni-common-mt\">\r\n <text class=\"uni-title-text\"> 多层堆叠测试 </text>\r\n </view>\r\n <view>\r\n <button @click=\"showStackedLayer1\">打开第1层弹层</button>\r\n </view>\r\n </view>\r\n \r\n\r\n <page-container \r\n v-if=\"containerShow\"\r\n \r\n :show=\"containerShow\" :position=\"containerPosition\" :round=\"containerRound\"\r\n :overlay=\"containerOverlay\" :overlay-style=\"containerOverlayStyle\"\r\n :custom-style=\"containerCustomStyle\"\r\n :close-on-slide-down=\"containerCloseOnSlideDown\" @afterleave=\"onAfterLeave\">\r\n <view class=\"container\">\r\n <text class=\"container-title\">{{ containerTitle }}</text>\r\n <scroll-view v-if=\"enableScrollThrough\" style=\"height: 200px;margin-bottom: 15px; padding: 10px;\">\r\n <text class=\"container-content\">{{ containerContent }}</text>\r\n </scroll-view>\r\n <text v-else class=\"container-content\">{{ containerContent }}</text>\r\n <button @click=\"closeContainer\" type=\"primary\">关闭容器</button>\r\n <button class=\"mt-5\" @click=\"navigateBack\">后退页面</button>\r\n </view>\r\n </page-container>\r\n\r\n \r\n \r\n <page-container v-if=\"showStackedPop1\" :show=\"showStackedPop1\" position=\"center\" @afterleave=\"closeStackedLayer1\">\r\n <view class=\"stacked-container stacked-container-level-1\" style=\"width: 360px;\">\n <text class=\"container-title\">第1层弹层</text>\r\n <text class=\"container-content\">这是第1层弹层,点击下方按钮可以打开第2层</text>\r\n <view style=\"flex-direction: row; justify-content: space-around;\">\r\n <button @click=\"showStackedLayer2\" size=\"default\" type=\"primary\">打开第2层</button>\r\n <button @click=\"closeStackedLayer1\" size=\"default\">关闭本层</button>\r\n </view>\r\n </view>\r\n </page-container>\r\n\r\n \r\n <page-container v-if=\"showStackedPop2\" :show=\"showStackedPop2\" position=\"center\" @afterleave=\"closeStackedLayer2\">\r\n <view class=\"stacked-container stacked-container-level-2\" style=\"width: 340px;\">\n <text class=\"container-title\">第2层弹层</text>\r\n <text class=\"container-content\">这是第2层弹层,点击下方按钮可以打开第3层</text>\r\n <view style=\"flex-direction: row; justify-content: space-around;\">\r\n <button @click=\"showStackedLayer3\" size=\"default\" type=\"primary\">打开第3层</button>\r\n <button @click=\"closeStackedLayer2\" size=\"default\">关闭本层</button>\r\n </view>\r\n </view>\r\n </page-container>\r\n\r\n \r\n <page-container v-if=\"showStackedPop3\" :show=\"showStackedPop3\" position=\"center\" @afterleave=\"closeStackedLayer3\">\r\n <view class=\"stacked-container stacked-container-level-3\" style=\"width: 300px;\">\n <text class=\"container-title\">第3层弹层</text>\r\n <text class=\"container-content\">这是第3层弹层,最顶层的弹层</text>\r\n <button @click=\"closeStackedLayer3\" size=\"default\">关闭本层</button>\r\n </view>\r\n </page-container>\r\n \r\n\r\n \r\n <page-container \r\n v-if=\"showAlignContainer\"\r\n \r\n :show=\"showAlignContainer\" position=\"center\" overlay-style=\"background-color: rgba(0, 0, 0, 0.1);\"\r\n :custom-style=\"alignContainerStyle\"\r\n @afterleave=\"closeAlignContainer\">\r\n <view class=\"align-shell\">\r\n <view class=\"align-arrow\" :style=\"alignArrowStyle\"></view>\r\n <view class=\"align-container\">\r\n <view class=\"align-menu-item\" hover-class=\"align-menu-item-hover\" @click=\"onAlignMenuClick('菜单1')\">\r\n <text class=\"align-menu-text\">菜单1</text>\r\n </view>\r\n <view class=\"align-menu-item\" hover-class=\"align-menu-item-hover\" @click=\"onAlignMenuClick('菜单2')\">\r\n <text class=\"align-menu-text\">菜单2</text>\r\n </view>\r\n <view class=\"align-menu-item align-menu-item-last\" hover-class=\"align-menu-item-hover\"\r\n @click=\"closeAlignContainer\">\r\n <text class=\"align-menu-text\">关闭</text>\r\n </view>\r\n </view>\r\n </view>\r\n </page-container>\r\n </scroll-view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n const containerShow = ref<boolean>(false)\r\n const containerRound = ref<boolean>(false)\r\n const containerPosition = ref<string>('bottom')\r\n const containerOverlay = ref<boolean>(true)\r\n const containerTitle = ref<string>('Page-Container')\r\n const containerOverlayStyle = ref<string>('')\r\n const containerCustomStyle = ref<string>('')\r\n const containerContent = ref<string>('这是一个 page-container 容器')\r\n const containerCloseOnSlideDown = ref<boolean>(false)\r\n const enableScrollThrough = ref<boolean>(false)\r\n\r\n // 多层堆叠弹层状态\r\n const showStackedPop1 = ref<boolean>(false)\r\n const showStackedPop2 = ref<boolean>(false)\r\n const showStackedPop3 = ref<boolean>(false)\r\n\r\n // 跟随元素对齐弹层状态\r\n const showAlignContainer = ref<boolean>(false)\r\n const alignContainerStyle = ref<string>('')\r\n const alignArrowStyle = ref<string>('')\r\n\r\n type Data = {\r\n onAfterLeaveCallCount : number\r\n }\n\n // 仅用于自动化测试\r\n const data = reactive<Data>({\r\n onAfterLeaveCallCount: 0\r\n })\r\n\r\n function resetConfig() {\r\n containerPosition.value = 'bottom'\r\n containerOverlay.value = true\r\n containerCloseOnSlideDown.value = false\r\n containerOverlayStyle.value = ''\r\n containerCustomStyle.value = ''\r\n enableScrollThrough.value = false\r\n }\r\n\r\n function showContainer(position : string, text : string) {\r\n resetConfig()\r\n containerPosition.value = position\r\n containerShow.value = true\r\n containerTitle.value = `Position: ${position}`\r\n containerContent.value = `容器从 ${text} 弹出`\r\n }\r\n\r\n function showRound() {\r\n resetConfig()\r\n containerRound.value = true\r\n containerShow.value = true\r\n containerTitle.value = 'Round: true'\r\n containerContent.value = `弹窗圆角: ${containerRound.value}`\r\n }\r\n\r\n function closeRound() {\r\n resetConfig()\r\n containerRound.value = false\r\n containerShow.value = true\r\n containerTitle.value = 'Round: false'\r\n containerContent.value = `弹窗圆角: ${containerRound.value}`\r\n }\r\n\r\n function showOverlay(overlay : boolean) {\r\n resetConfig()\r\n containerOverlay.value = overlay\r\n containerShow.value = true\r\n containerTitle.value = `Overlay: ${overlay}`\r\n containerContent.value = `遮罩层: ${overlay}`\r\n }\r\n\r\n function showTransparentOverlay() {\r\n resetConfig()\r\n containerOverlay.value = true\r\n containerOverlayStyle.value = 'background-color: rgba(0, 0, 0, 0);'\r\n containerTitle.value = '透明蒙层'\r\n containerContent.value = '蒙层开启但完全透明，可以点击蒙层区域关闭'\r\n containerShow.value = true\r\n }\r\n\r\n function showGreenTransparentOverlay() {\r\n resetConfig()\r\n containerOverlay.value = true\r\n containerPosition.value = 'bottom'\r\n containerOverlayStyle.value = 'background-color: rgba(76, 175, 80, 0.3);'\r\n containerTitle.value = '绿色半透明蒙层'\r\n containerContent.value = '蒙层开启但为绿色半透明，可以点击蒙层区域关闭'\r\n containerShow.value = true\r\n }\r\n\r\n function showOverlayPointerEventsNone() {\r\n resetConfig()\r\n containerOverlay.value = true\r\n containerPosition.value = 'bottom'\r\n containerOverlayStyle.value = 'background-color: rgba(0, 0, 0, 0.3); pointer-events: none;'\r\n containerTitle.value = 'overlay-style: pointer-events: none'\r\n containerContent.value = '蒙层已开启并设置 pointer-events: none，点击蒙层区域不会关闭容器'\r\n containerShow.value = true\r\n }\r\n\r\n function showSlideDown() {\r\n resetConfig()\r\n containerCloseOnSlideDown.value = true\r\n containerShow.value = true\r\n containerPosition.value = 'bottom'\r\n containerTitle.value = 'Close-on-slide-down: true'\r\n containerContent.value = '下滑关闭: true'\r\n }\r\n\r\n function showSlideClose(position : string) {\r\n resetConfig()\r\n containerCloseOnSlideDown.value = true\r\n containerPosition.value = position\r\n\r\n if (position == 'left') {\r\n containerCustomStyle.value = 'width: 300px; height: 100%; right: auto;'\r\n containerTitle.value = '左滑关闭'\r\n containerContent.value = '左侧弹出: 从内容区域向左滑动可关闭容器'\r\n } else if (position == 'right') {\r\n containerCustomStyle.value = 'width: 300px; height: 100%; left: auto;'\r\n containerTitle.value = '右滑关闭'\r\n containerContent.value = '右侧弹出: 从内容区域向右滑动可关闭容器'\r\n } else if (position == 'top') {\r\n containerCustomStyle.value = 'height: 300px;'\r\n containerTitle.value = '上滑关闭'\r\n containerContent.value = '顶部弹出: 从内容区域向上滑动可关闭容器'\r\n }\r\n\r\n containerShow.value = true\r\n }\r\n\r\n function autoClose() {\r\n resetConfig()\r\n containerShow.value = true\r\n containerPosition.value = 'bottom'\r\n containerTitle.value = 'Page-container'\r\n containerContent.value = '容器会在 2s 后自动关闭'\r\n setTimeout(() => {\r\n containerShow.value = false\r\n }, 2000)\r\n }\r\n\r\n function showScrollThrough() {\r\n resetConfig()\r\n enableScrollThrough.value = true\r\n containerShow.value = true\r\n containerPosition.value = 'bottom'\r\n containerTitle.value = 'Page-container'\r\n containerContent.value = `这是一个可滚动的内容区域。\\n\\n请向上或向下滚动此区域。\\n\\n当滚动到顶部或底部边界时\\n\\n测试主页面是否会跟随滚动(滚动穿透问题)\\n\\n理想情况下,当弹层内的scroll-view滚动到边界时,不应该触发主页面的滚动。\\n\\n已到达底部,现在可以测试向上滚动到顶部的情况。`\r\n }\r\n\r\n function onAfterLeave() {\r\n containerShow.value = false\r\n data.onAfterLeaveCallCount += 1\r\n }\r\n\r\n function closeContainer() {\r\n containerShow.value = false\r\n }\r\n\r\n function navigateBack() {\r\n uni.navigateBack()\r\n }\r\n\r\n function showAlign(selector : string, alignType : string) {\r\n const containerWidth = 200\r\n const arrowStyleMap = new Map<string, string>([['left', 'left: 28px;'], ['center', 'left: 92px;'], ['right', 'left: 156px;']])\r\n // #ifdef WEB\r\n const elementId = selector.substring(1)\r\n const targetElement = uni.getElementById(elementId)\r\n if (targetElement != null) {\r\n const rect = targetElement.getBoundingClientRect()\r\n const nodeWidth = rect.width\r\n let targetLeft = rect.left\r\n\r\n if (alignType == 'center') {\r\n targetLeft += (nodeWidth / 2 - containerWidth / 2)\r\n } else if (alignType == 'right') {\r\n targetLeft += (nodeWidth - containerWidth)\r\n }\r\n\r\n alignArrowStyle.value = arrowStyleMap.get(alignType) as string\r\n alignContainerStyle.value = `left: ${targetLeft}px; top: ${rect.bottom}px; background-color: transparent; transform: none`\r\n showAlignContainer.value = true\r\n return\r\n }\r\n // #endif\r\n\r\n uni.createSelectorQuery().select(selector).boundingClientRect().exec((ret) => {\r\n if (ret.length == 1) {\r\n const nodeInfo = ret[0] as NodeInfo;\r\n const nodeWidth = nodeInfo.width as number\r\n let targetLeft = nodeInfo.left as number\r\n\r\n if (alignType == 'center') {\r\n targetLeft += (nodeWidth / 2 - containerWidth / 2)\r\n } else if (alignType == 'right') {\r\n targetLeft += (nodeWidth - containerWidth)\r\n }\r\n\r\n alignArrowStyle.value = arrowStyleMap.get(alignType) as string\r\n\r\n const targetTop = (nodeInfo.top as number) + (nodeInfo.height as number)\r\n\r\n // #ifdef MP-WEIXIN\r\n alignContainerStyle.value = `left: ${targetLeft}px; top: ${targetTop}px; background-color: transparent; transform: none`\r\n // #endif\r\n\r\n // #ifndef MP-WEIXIN\r\n const windowInfo = uni.getWindowInfo()\r\n const maxLeft = Math.max(0, windowInfo.windowWidth - containerWidth)\r\n const popupLeft = Math.max(0, Math.min(targetLeft, maxLeft))\r\n alignContainerStyle.value = `transform: translate(${popupLeft}px, ${targetTop}px); background-color: transparent; transition: none`\r\n // #endif\r\n\r\n showAlignContainer.value = true\r\n }\r\n })\r\n }\r\n\r\n function showAlignLeft() {\r\n showAlign('#align-left-button', 'left')\r\n }\r\n\r\n function showAlignCenter() {\r\n showAlign('#align-center-button', 'center')\r\n }\r\n\r\n function showAlignRight() {\r\n showAlign('#align-right-button', 'right')\r\n }\r\n\r\n function closeAlignContainer() {\r\n showAlignContainer.value = false\r\n }\r\n\r\n function onAlignMenuClick(menuName : string) {\r\n closeAlignContainer()\r\n uni.showToast({\r\n title: `点击了${menuName}`,\r\n icon: 'none'\r\n })\r\n }\r\n\r\n // 多层堆叠弹层方法\r\n function showStackedLayer1() {\r\n showStackedPop1.value = true\r\n }\r\n\r\n function showStackedLayer2() {\r\n showStackedPop2.value = true\r\n }\r\n\r\n function showStackedLayer3() {\r\n showStackedPop3.value = true\r\n }\r\n\r\n function closeStackedLayer1() {\r\n showStackedPop1.value = false\r\n }\r\n\r\n function closeStackedLayer2() {\r\n showStackedPop2.value = false\r\n }\r\n\r\n function closeStackedLayer3() {\r\n showStackedPop3.value = false\r\n }\r\n\r\n defineExpose({\r\n data,\r\n showContainer,\r\n navigateBack\r\n })\r\n</script>\r\n\r\n<style scoped>\r\n .container {\n padding: 20px;\r\n background-color: var(--list-background-color, #ffffff);\n min-height: 300px;\r\n min-width: 300px;\r\n }\r\n\r\n .container-title {\n font-size: 18px;\r\n font-weight: bold;\r\n color: var(--text-color, #333);\n margin-bottom: 10px;\r\n }\r\n\r\n .container-content {\n font-size: 14px;\r\n color: var(--active-color, #666);\n margin-bottom: 15px;\r\n }\r\n\r\n .mt-5 {\r\n margin-top: 5px;\r\n }\r\n\r\n .slider-down-info {\n font-size: 12px;\r\n color: var(--active-color, #999);\n margin-top: 5px;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .stacked-container {\n padding: 10px;\r\n border-radius: 8px;\r\n min-height: 150px;\r\n }\n\n .stacked-container-level-1 {\n background-color: #ffffff;\n }\n\n .stacked-container-level-2 {\n background-color: #f0f0f0;\n }\n\n .stacked-container-level-3 {\n background-color: #e0e0e0;\n }\n\n .align-container {\n background-color: var(--list-background-color, #ffffff);\n width: 200px;\r\n border-radius: 8px;\r\n margin-top: -1px;\r\n }\r\n\r\n .align-menu-item {\n padding: 12px;\r\n border-bottom-width: 1px;\r\n border-bottom-style: solid;\r\n border-bottom-color: var(--border-color, #eeeeee);\n }\r\n\r\n .align-menu-item-last {\r\n border-bottom-width: 0;\r\n }\r\n\r\n .align-menu-text {\n font-size: 14px;\r\n color: var(--text-color, #333333);\n }\r\n\r\n .align-menu-item-hover {\n background-color: var(--active-background-color, #f5f5f5);\n }\r\n\r\n .align-shell {\r\n width: 200px;\r\n padding-top: 7px;\r\n position: relative;\r\n background-color: transparent;\r\n }\r\n\r\n .align-arrow {\n position: absolute;\r\n top: 0;\r\n width: 0;\r\n height: 0;\r\n border-left: 8px solid transparent;\r\n border-right: 8px solid transparent;\r\n border-bottom: 8px solid #ffffff;\n }\n\n @media (prefers-color-scheme: dark) {\n .container-content,\n .slider-down-info {\n color: #d0d0d0;\n }\n\n .stacked-container-level-1 {\n background-color: #2d2d2d;\n }\n\n .stacked-container-level-2 {\n background-color: #353535;\n }\n\n .stacked-container-level-3 {\n background-color: #3b3b3b;\n }\n\n .align-arrow {\n border-bottom-color: #2d2d2d;\n }\n }\n</style>\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.page-container)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/page-container.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=page-container&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=page-container&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=page-container&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=page-container&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=page-container)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=page-container&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"movable-area":{"name":"::: sourceCode\n## movable-area\n:::","originName":"## movable-area","description":"movable-view 的可移动区域","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- | :-: | :- |\n| scale-area | boolean | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(Boolean)*<br/>当里面的movable-view设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个movable-area |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.movable.movable-area)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/movable-area.html)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/movable-area.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=movable-area&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=movable-area&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=movable-area&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=movable-area&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=movable-area)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=movable-area&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"movable-view":{"name":"::: sourceCode\n## movable-view\n:::","originName":"## movable-view","description":"可移动的视图容器，在页面中可以拖拽滑动","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- | :-: | :- |\n| direction | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | movable-view的移动方向，属性值有all、vertical、horizontal、none |\n@| 合法值 |\n@| :- |\n@| all |\n@| vertical |\n@| horizontal |\n@| none |\n| inertia | boolean | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | movable-view 是否带有惯性。 |\n| out-of-bounds | boolean | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 超过可移动区域后，movable-view 是否还可以移动。 |\n| x | string \\| number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 定义 x 轴方向的偏移，如果 x 的值不在可移动范围内，会自动移动到可移动范围；改变 x 的值会触发动画。 |\n| y | string \\| number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 定义 y 轴方向的偏移，如果 y 的值不在可移动范围内，会自动移动到可移动范围；改变 y 的值会触发动画。 |\n| damping | number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 阻尼系数，用于控制 x 或 y 改变时的动画和过界回弹的动画，值越大移动越快。 |\n| friction | number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值 2。 |\n| disabled | boolean | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否禁用。 |\n| scale | boolean | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否支持双指缩放，默认缩放手势生效区域是在 movable-view 内。 |\n| scale-min | number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 定义缩放倍数最小值，默认为 0.5。 |\n| scale-max | number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 定义缩放倍数最大值，默认为 10。 |\n| scale-value | number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 定义缩放倍数，取值范围为 0.5 - 10 |\n| animation | boolean | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否使用动画，默认为 true。 |\n| htouchmove | eventhandle | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"-\",\"4.41\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandle)*<br/>初次手指触摸后移动为横向的移动时触发，如果catch此事件，则意味着touchmove事件也被catch |\n| vtouchmove | eventhandle | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"-\",\"4.41\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandle)*<br/>初次手指触摸后移动为纵向的移动时触发，如果catch此事件，则意味着touchmove事件也被catch |\n| @change | (event: [UniEvent](/component/common.md#unievent)) => void | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 拖动过程中触发的事件，event.detail = {x: x, y: y, source: source}。其中source表示产生移动的原因，值可为touch（拖动）、touch-out-of-bounds（超出移动范围）、out-of-bounds（超出移动范围后的回弹）、friction（惯性）和空字符串（setData）。 |\n| @scale | (event: [UniEvent](/component/common.md#unievent)) => void | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 缩放过程中触发的事件，event.detail = {x: x, y: y, scale: scale}。 |","event":"","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/movable-view/movable-view.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/movable-view/movable-view.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/movable-view/movable-view\n\n>示例\n```vue\n<template>\r\n <view class=\"page-body\">\r\n <page-head title=\"movable-view,可拖动视图\"></page-head>\r\n <view class=\"uni-padding-wrap uni-common-mt\">\r\n <view class=\"uni-title uni-common-mt\">\r\n 示例 1\r\n <text>\\nmovable-view 区域小于 movable-area</text>\r\n </view>\r\n <movable-area>\r\n <movable-view :x=\"x\" :y=\"y\" direction=\"all\" @change=\"onChange\">text</movable-view>\r\n </movable-area>\r\n <view @tap=\"tap\" class=\"uni-link uni-center uni-common-mt\">\r\n 点击这里移动至 (30px, 30px)\r\n </view>\r\n <view class=\"uni-title uni-common-mt\">\r\n 示例 2\r\n <text>\\nmovable-view区域大于movable-area</text>\r\n </view>\r\n <movable-area>\r\n <movable-view class=\"max\" direction=\"all\">text</movable-view>\r\n </movable-area>\r\n <view class=\"uni-title uni-common-mt\">\r\n 示例 3\r\n <text>\\n只可以横向移动</text>\r\n </view>\r\n <movable-area>\r\n <movable-view direction=\"horizontal\">text</movable-view>\r\n </movable-area>\r\n <view class=\"uni-title uni-common-mt\">\r\n 示例 4\r\n <text>\\n只可以纵向移动</text>\r\n </view>\r\n <movable-area>\r\n <movable-view direction=\"vertical\">text</movable-view>\r\n </movable-area>\r\n <view class=\"uni-title uni-common-mt\">\r\n 示例 5\r\n <text>\\n可超出边界</text>\r\n </view>\r\n <movable-area>\r\n <movable-view direction=\"all\" out-of-bounds>text</movable-view>\r\n </movable-area>\r\n <view class=\"uni-title uni-common-mt\">\r\n 示例 6\r\n <text>\\n带有惯性</text>\r\n </view>\r\n <movable-area>\r\n <movable-view direction=\"all\" inertia>text</movable-view>\r\n </movable-area>\r\n <view class=\"uni-title uni-common-mt\">\r\n 示例 7\r\n <text>\\n可放缩</text>\r\n </view>\r\n <movable-area scale-area>\r\n <movable-view direction=\"all\" @scale=\"onScale\" scale scale-min=\"0.5\" scale-max=\"4\"\r\n :scale-value=\"scale\">text</movable-view>\r\n </movable-area>\r\n <view @tap=\"tap2\" class=\"uni-link uni-center uni-common-mt\" style=\"padding-bottom:40px;\">\r\n 点击这里放大3倍\r\n </view>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n const x = ref(0)\r\n const y = ref(0)\r\n const scale = ref(2)\r\n const old = reactive({\r\n x: 0,\r\n y: 0,\r\n scale: 2\r\n })\r\n\r\n const tap = (e) => {\r\n // 解决view层不同步的问题\r\n x.value = old.x\r\n y.value = old.y\r\n nextTick(() => {\r\n x.value = 30\r\n y.value = 30\r\n })\r\n }\r\n\r\n const tap2 = () => {\r\n // 解决view层不同步的问题\r\n scale.value = old.scale\r\n nextTick(() => {\r\n scale.value = 3\r\n })\r\n }\r\n\r\n const onChange = (e) => {\r\n old.x = e.detail.x\r\n old.y = e.detail.y\r\n }\r\n\r\n const onScale = (e) => {\r\n old.scale = e.detail.scale\r\n }\r\n\r\n defineExpose({\r\n \tx,\r\n \ty,\r\n \tscale,\r\n \ttap,\r\n \ttap2 // 仅供自动化测试用例调用\r\n })\r\n\r\n</script>\r\n\r\n<style>\r\n movable-view {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n height: 75px;\r\n width: 75px;\r\n background-color: #007AFF;\r\n color: #fff;\r\n }\r\n\r\n movable-area {\r\n height: 150px;\r\n width: 100%;\r\n background-color: #D8D8D8;\r\n overflow: hidden;\r\n }\r\n\r\n .max {\r\n width: 250px;\r\n height: 250px;\r\n }\r\n</style>\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.movable.movable-view)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/movable-view.html)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=movable-view&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=movable-view&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=movable-view&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=movable-view&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=movable-view)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=movable-view&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"cover-view":{"name":"::: sourceCode\n~~## cover-view~~\n:::","originName":"~~## cover-view~~","description":"覆盖在原生组件之上的文本视图，可覆盖的原生组件包括map、video、canvas、camera，只支持嵌套cover-view、cover-image","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | 4.53 | 4.53 | 4.61 |\n","attribute":"### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- | :-: | :- |\n| scroll-top | number/string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(number/string)*<br/>设置顶部滚动偏移量，仅在设置了 overflow-y: scroll 成为滚动元素后生效 |","event":"","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/cover-view/cover-view.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/cover-view/cover-view.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/cover-view/cover-view\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/cover-view/cover-view\n\n>示例\n```vue\n<template>\r\n <view>\r\n <page-head title=\"cover-view用于覆盖map、video等原生组件\"></page-head>\r\n <view class=\"uni-padding-wrap uni-common-mb\">\r\n <text class=\"uni-subtitle-text\">注意：Web和App需正确配置地图SDK的Key才能正常显示地图组件</text>\r\n </view>\r\n <view class=\"cover-content\" v-if=\"showMap\">\r\n <map class=\"map\" :latitude=\"latitude\" :longitude=\"longitude\"></map>\r\n <cover-view class=\"cover-view\"><text>简单的cover-view</text></cover-view>\r\n <cover-image class=\"cover-image\" src=\"/static/test-image/logo.png\"></cover-image>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n const showMap = ref(false)\r\n const latitude = ref(39.909)\r\n const longitude = ref(116.39742)\r\n onLoad(() => {\r\n showMap.value = true\r\n })\r\n</script>\r\n\r\n<style>\r\n .map {\r\n width: 100%;\r\n height: 600px;\r\n }\r\n\r\n .cover-content {\r\n position: relative;\r\n }\r\n\r\n .cover-view {\r\n position: absolute;\r\n left: 5px;\r\n top: 5px;\r\n width: 188px;\r\n text-align: center;\r\n background-color: #DDDDDD;\r\n }\r\n\r\n .cover-image {\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n right: 0;\r\n bottom: 0;\r\n margin: auto;\r\n width: 96px;\r\n height: 96px;\r\n }\r\n\r\n</style>\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.cover.cover-view)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/cover-view.html)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=cover-view&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=cover-view&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=cover-view&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=cover-view&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=cover-view)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=cover-view&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"cover-image":{"name":"::: sourceCode\n~~## cover-image~~\n:::","originName":"~~## cover-image~~","description":"覆盖在原生组件之上的图片视图，可覆盖的原生组件同cover-view，支持嵌套在cover-view里。","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | 4.53 | 4.53 | 4.61 |\n","attribute":"### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- | :-: | :- |\n| src | string([string.ImageURIString](/uts/data-type.md#ide-string)) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.53\",\"4.53\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 图标路径，支持临时路径、网络地址（1.6.0起支持）。暂不支持base64格式。 |\n| referrer-policy | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>格式固定为 `https://servicewechat.com/{appid}/{version}/page-frame.html`，其中 {appid} 为小程序的 appid，{version} 为小程序的版本号，版本号为 0 表示为开发版、体验版以及审核版本，版本号为 devtools 表示为开发者工具，其余为正式版本； |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| origin | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 发送完整的referrer |\n@| no-referrer | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 不发送 |\n| @load | eventhandle | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.53\",\"4.53\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandle)*<br/>图片加载成功时触发 |\n| @error | eventhandle | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.53\",\"4.53\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandle)*<br/>图片加载失败时触发 |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.cover.cover-image)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/cover-image.html)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/cover-image.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=cover-image&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=cover-image&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=cover-image&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=cover-image&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=cover-image)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=cover-image&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"list-item":{"name":"::: sourceCode\n## list-item\n:::","originName":"## list-item","description":"> 组件类型：UniListItemElement \n\n list-view组件的子组件。每个item是一行","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.02 | 4.41 | 3.9 | 4.11 | 4.61 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| type | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.02\",\"4.41\",\"3.9\",\"4.25\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 对应list-item的类型 list-view 将对同类型条目进行复用，所以合理的类型拆分，可以很好地提升 list-view 性能 |\n| item-key | string \\| number | | | |\n| item-height | number | | | |","event":"","example":"","children":"### 子组件 @children-tags\n支持所有组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.list-view.list-item)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=list-item&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=list-item&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=list-item&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=list-item&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=list-item&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=list-item)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=list-item&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"sticky-header":{"name":"::: sourceCode\n## sticky-header\n:::","originName":"## sticky-header","description":"> 组件类型：UniStickyHeaderElement \n\n 吸顶布局容器 <br/><br/> 注意：暂时仅支持作为list-view、sticky-section的子节点, sticky-header不支持css样式！当一个容器视图设置多个sticky-header时，后一个sticky-header会停靠在前一个sticky-header的末尾处。","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS(VDOM) | HarmonyOS(Vapor) |\n| :- | :- | :- | :- | :- | :- |\n| 4.02 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 3.93 | 4.11 | 4.71 | 5.08 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| padding | Array\\<number> | \\[0,0,0,0\\] | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.02\",\"x\",\"3.98\",\"x\",\"4.11\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 长度为 4 的数组，按 top、right、bottom、left 顺序指定内边距 |","event":"","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/sticky-header/sticky-header.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/sticky-header/sticky-header.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/sticky-header/sticky-header\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/sticky-header/sticky-header\n\n>示例\n```vue\n<template>\r\n <list-view :scroll-y=\"true\" class=\"page uni-theme-root\" bounces=\"false\" show-scrollbar=false :scroll-top=\"data.scroll_top_input\"\n :refresher-enabled=\"data.refresher_enabled_boolean\" :refresher-triggered=\"data.refresher_triggered_boolean\"\r\n @refresherrefresh=\"list_view_refresherrefresh\">\r\n <list-item type=1>\r\n <swiper indicator-dots=\"true\" circular=\"true\" style=\"height: 240px;\">\r\n <swiper-item v-for=\"i in 3\" :item-id=\"i + ''\">\r\n <image src=\"/static/shuijiao.jpg\" style=\"height: 240px; width: 100%;\"></image>\r\n <text style=\"position: absolute;\">{{i}}</text>\r\n </swiper-item>\r\n </swiper>\r\n </list-item>\r\n <list-item class=\"content-item\" type=2>\r\n <text class=\"text\">向上滑动页面，体验sticky-header吸顶效果。</text>\r\n </list-item>\r\n <sticky-section>\r\n <sticky-header>\r\n <scroll-view class=\"sticky-tab-bar\" direction=\"horizontal\"\n :show-scrollbar=\"false\">\r\n <view style=\"align-self: flex-start; flex-direction: row;\">\r\n <text ref=\"swipertab\" class=\"sift-item\" v-for=\"(name,index) in data.sift_item\" @click=\"clickTH(index)\">\r\n {{name}}\r\n </text>\r\n </view>\r\n </scroll-view>\r\n </sticky-header>\r\n\r\n <list-item v-for=\"(item,index) in data.list_item\" :key=\"index\" class=\"content-item\" type=3>\r\n <text class=\"content-item-text\">{{item}}</text>\r\n </list-item>\r\n </sticky-section>\r\n </list-view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n type DataType = {\r\n sift_item: string[];\r\n list_item: string[];\r\n refresher_enabled_boolean: boolean;\r\n refresher_triggered_boolean: boolean;\r\n scroll_top_input: number;\r\n }\r\n\r\n const data = reactive({\r\n sift_item: [\"排序\", \"筛选\"],\r\n list_item: [],\r\n refresher_enabled_boolean: true,\r\n refresher_triggered_boolean: false,\r\n scroll_top_input: 0\r\n } as DataType)\r\n\r\n const loadListData = () => {\r\n let lists : Array<string> = []\r\n for (let i = 0; i < 40; i++) {\r\n lists.push(\"item---\" + i)\r\n }\r\n data.list_item = lists\r\n }\r\n\r\n onLoad(() => {\r\n loadListData()\r\n })\r\n\r\n const list_view_refresherrefresh = () => {\r\n console.log(\"下拉刷新被触发 \")\r\n data.refresher_triggered_boolean = true\r\n setTimeout(() => {\r\n data.refresher_triggered_boolean = false\r\n }, 1500)\r\n }\r\n\r\n const confirm_scroll_top_input = (value : number) => {\r\n data.scroll_top_input = value\r\n }\r\n\r\n const clickTH = (index : number) => {\r\n console.log(\"点击表头：\" + index);\r\n }\r\n\r\n //自动化测试使用\r\n const clearListData = () => {\r\n data.list_item = []\r\n }\r\n\r\n defineExpose({\r\n confirm_scroll_top_input,\r\n clearListData\r\n })\r\n</script>\r\n\r\n<style>\r\n .page {\n flex: 1;\n }\n\n .sticky-tab-bar {\n background-color: var(--background-color, #f5f5f5);\n flex-direction: row;\n }\r\n\r\n .content-item {\r\n padding-bottom: 10px;\r\n }\r\n\r\n .content-item-text {\r\n font-size: 14px;\r\n color: var(--text-color, #666666);\n line-height: 20px;\r\n padding: 15px;\r\n background-color: var(--list-background-color, #ffffff);\n }\r\n\r\n .sift-item {\r\n color: var(--text-color, #555555);\n font-size: 16px;\r\n padding: 12px 15px;\r\n }\r\n</style>\r\n\n```\n\n:::","children":"### 子组件 @children-tags\n支持所有组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.sticky.sticky-header)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/sticky-header.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=sticky-header&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=sticky-header&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=sticky-header&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=sticky-header&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=sticky-header)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=sticky-header&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"sticky-section":{"name":"::: sourceCode\n## sticky-section\n:::","originName":"## sticky-section","description":"> 组件类型：UniStickySectionElement \n\n 吸顶布局容器 <br/><br/> 注意：暂时仅支持作为list-view的子节点, sticky-section不支持css样式！","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS(VDOM) | HarmonyOS(Vapor) |\n| :- | :- | :- | :- | :- | :- |\n| 4.02 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 3.98 | 4.11 | 4.71 | 5.08 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| push-pinned-header | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"3.98\",\"4.11\",\"5.21\",\"x\",\"5.21\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | sticky-section元素重叠时是否继续上推 |\n| preload | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\",\"5.21\",\"x\",\"5.21\",\"x\",\"5.21\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | sticky-section即使在视图外也预加载内容 |\n| padding | Array\\<number> | \\[0,0,0,0\\] | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.02\",\"x\",\"3.98\",\"x\",\"4.11\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 长度为 4 的数组，按 top、right、bottom、left 顺序指定内边距 |","event":"","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/sticky-section/sticky-section.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/sticky-section/sticky-section.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/sticky-section/sticky-section\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/sticky-section/sticky-section\n\n>示例\n```vue\n<template>\r\n <page-head title=\"sticky-section\"></page-head>\r\n <list-view id=\"list-view\" ref=\"listViewRef\" show-scrollbar=false class=\"page uni-theme-root\" :scroll-into-view=\"pageData.scrollIntoView\"\n @scroll=\"onScroll\" @scrollend=\"onScrollEnd\" bounces=\"false\" refresher-enabled=\"true\" :refresher-triggered=\"pageData.refresherTriggered\" @refresherrefresh=\"onRefresherrefresh\">\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 <list-item style=\"padding: 10px; margin: 5px 0;align-items: center;\" :type=20>\r\n <button @click=\"appendSectionItem(0)\" size=\"mini\">第一组 section 新增5条内容</button>\r\n </list-item>\r\n <list-item style=\"padding: 10px; margin: 5px 0;align-items: center;\" :type=20>\r\n <button @click=\"deleteSection()\" size=\"mini\">删除第一组 section</button>\r\n </list-item>\r\n <sticky-section class=\"content-section\" ref=\"sectionRefs\" style=\"align-items: stretch; align-content: stretch;\" v-for=\"(section) in pageData.sectionArray\" :key=\"section.name\"\r\n \r\n :padding=\"pageData.sectionPadding\"\r\n \r\n \r\n :preload=\"true\"\r\n \r\n :push-pinned-header=\"true\">\r\n <sticky-header :id=\"section.name\">\r\n <text class=\"sticky-header-text\">{{section.name}}</text>\r\n </sticky-header>\r\n <list-item v-for=\"(list) in section.list\" :key=\"list.text\" :name=\"list.text\" class=\"content-item\" :type=10>\r\n <text class=\"content-item-text\">{{list.text}}</text>\r\n </list-item>\r\n </sticky-section>\r\n <list-item v-if=\"pageData.sectionArray.length > 0\" style=\"padding: 10px; margin: 5px 0;align-items: center;\" :type=30>\r\n \r\n <button @click=\"toTop\" size=\"mini\">回到顶部</button>\r\n </list-item>\n <list-item>\n <navigator url=\"/pages/component/sticky-section/sticky-section-push-pinned-header\">\n <button>push-pinned-header属性测试</button>\n </navigator>\n </list-item>\r\n </list-view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n export type sectionData = {\r\n name : string,\r\n list : sectionListItem[]\r\n }\r\n export type sectionListItem = {\r\n text : string\r\n }\r\n type DataType = {\r\n data: string[];\r\n sectionPadding: number[];\r\n scrollIntoView: string;\r\n scrolling: boolean;\r\n sectionArray: sectionData[];\r\n appendId: number;\r\n refresherTriggered: boolean;\r\n isReady: boolean;\r\n }\r\n\r\n const pageData = reactive({\r\n data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N'],\r\n sectionPadding: [0, 10, 0, 10],\r\n scrollIntoView: \"\",\r\n scrolling: false,\r\n sectionArray: [],\r\n appendId: 0,\r\n refresherTriggered: false,\r\n isReady: false//自动化测试使用\r\n } as DataType)\r\n\r\n const listViewRef = ref<UniElement | null>(null)\r\n const sectionRefs = ref<UniElement[] | null>(null)\r\n\r\n const initSectionArray = () => {\r\n pageData.sectionArray = []\r\n console.log(\"initSectionArray start\", pageData.sectionArray.length)\r\n pageData.data.forEach((key, index) => {\r\n const list = [] as sectionListItem[]\n const count = index === pageData.data.length - 1 ? 30 : 11\r\n for (let i = 1; i < count; i++) {\r\n const item = { text: key + \"--item--content----\" + i } as sectionListItem\r\n list.push(item)\r\n }\r\n const sectionDataItem = { name: key, list: list } as sectionData\r\n pageData.sectionArray.push(sectionDataItem)\r\n }\r\n )\r\n console.log(\"initSectionArray end\", pageData.sectionArray[0].name)\r\n }\r\n\r\n onReady(() => {\r\n //延迟onReady再加载数据校验issues:14705 bug\r\n initSectionArray()\r\n pageData.isReady = true\r\n })\r\n\r\n const toTop = () => {\r\n pageData.scrollIntoView = \"\"\r\n uni.getElementById(\"list-view\")!.scrollTop = 0\r\n }\r\n\r\n //用于自动化测试\r\n const listViewScrollByY = (y : number) => {\r\n const listview = listViewRef.value as UniElement\r\n // listview.scrollBy(0, y)\r\n listview.scrollTop = y\r\n }\r\n\r\n const gotoStickyHeader = (id : string) => {\r\n // #ifdef APP || WEB\r\n pageData.scrollIntoView = id\r\n // #endif\r\n }\r\n\r\n const onScroll = () => {\r\n pageData.scrolling = true\r\n }\r\n\r\n const onScrollEnd = () => {\r\n pageData.scrolling = false\r\n //滚动后重置scrollIntoView = \"\"\r\n if (pageData.scrollIntoView != \"\") {\r\n pageData.scrollIntoView = \"\"\r\n }\r\n }\r\n\r\n const appendSectionItem = (index : number) => {\r\n const sectionDataItem = pageData.sectionArray[index]\r\n pageData.appendId++\r\n const list = [\r\n { text: sectionDataItem.name + \"--item--content----new1--\" + pageData.appendId } as sectionListItem,\r\n { text: sectionDataItem.name + \"--item--content----new2--\" + pageData.appendId } as sectionListItem,\r\n { text: sectionDataItem.name + \"--item--content----new3--\" + pageData.appendId } as sectionListItem,\r\n { text: sectionDataItem.name + \"--item--content----new4--\" + pageData.appendId } as sectionListItem,\r\n { text: sectionDataItem.name + \"--item--content----new5--\" + pageData.appendId } as sectionListItem\r\n ] as sectionListItem[]\r\n sectionDataItem.list.unshift(...list)\r\n }\r\n\r\n const deleteSection = () => {\r\n pageData.sectionArray.shift()\r\n }\r\n\r\n const onRefresherrefresh = (_ : UniRefresherEvent) => {\r\n pageData.refresherTriggered = true;\r\n setTimeout(() => {\r\n initSectionArray()\r\n pageData.refresherTriggered = false;\r\n }, 1000)\r\n }\r\n\r\n const jest_checkPreload = () => {\r\n return sectionRefs.value?.every(sectionElement => {\r\n return sectionElement.querySelectorAll(\".content-item\").length > 0;\r\n }) ?? false;\r\n }\r\n\r\n defineExpose({\r\n pageData,\r\n deleteSection,\r\n listViewScrollByY,\r\n toTop,\r\n gotoStickyHeader,\r\n jest_checkPreload\r\n })\r\n</script>\r\n\r\n<style>\r\n .page {\n flex: 1;\n }\n\r\n .sticky-header-text {\r\n font-size: 16px;\r\n padding: 8px;\r\n color: var(--active-color, #959595);\n background-color: var(--background-color, #f5f5f5);\n }\n\n .content-section {\n /* #ifdef APP && VUE3-VAPOR */\n /* 蒸汽模式sticky-section支持padding样式，不支持padding属性 */\n padding: 0px 10px 0px 10px;\n /* #endif */\n }\r\n\r\n .content-item {\r\n padding-bottom: 10px;\r\n }\n\n .content-item-text {\n padding: 15px;\n color: var(--text-color, #333333);\n background-color: var(--list-background-color, #ffffff);\n }\r\n</style>\r\n\n```\n\n:::","children":"### 子组件 @children-tags\n支持所有组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.sticky.sticky-section)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/sticky-section.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=sticky-section&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=sticky-section&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=sticky-section&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=sticky-section&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=sticky-section)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=sticky-section&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"list-view":{"name":"::: sourceCode\n## list-view\n\n> GitCode: https://gitcode.com/dcloud/uni-component/tree/alpha/uni_modules/uni-list-view\n\n\n> GitHub: https://github.com/dcloudio/uni-component/tree/alpha/uni_modules/uni-list-view\n\n:::","originName":"## list-view","description":"> 组件类型：UniListViewElement \n\n 列表组件","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.02 | 4.41 | 3.9 | 4.11 | 4.61 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| direction | string | \"vertical\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 滚动方向，可取值 none、horizontal、vertical，默认值vertical。注：iOS 平台仅支持vertical |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.02\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 禁止滚动 |\n@| horizontal | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.0\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 横向滚动 |\n@| vertical | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.02\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 竖向滚动 |\n| ~~scroll-x~~ | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"3.9\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 允许横向滚动，不支持同时设置scroll-y属性为true，同时设置true时scroll-y生效。已废弃，请改用direction |\n| ~~scroll-y~~ | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"3.9\",\"4.11\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 允许纵向滚动，不支持同时设置scroll-x属性为true，同时设置true时scroll-y生效。已废弃，请改用direction |\n| ~~rebound~~ | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"4.41\",\"3.9\",\"4.11\",\"x\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 控制是否回弹效果。已废弃，请改用bounces |\n| bounces | boolean \\| string | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 控制是否回弹效果优先级高于rebound |\n| android-overscroll | boolean \\| string | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"5.21\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | Android平台是否开启弹簧回弹效果，开启后默认下拉刷新使用圆弧loading样式（推动页面内容），否则默认下拉刷新使用Android系统悬浮圆环样式（不推动页面内容） |\n| android-scrollbar-draggable | boolean \\| string | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"5.26\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | Android 平台是否允许拖动滚动条以快速定位滚动内容，默认值为 false，当前暂仅支持竖向滚动 |\n| android-refresher-color | string([string.ColorString](/uts/data-type.md#ide-string)) | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"5.25\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 设置 Android 平台 scroll-view 默认下拉刷新样式的前景颜色，优先级高于 refresher-default-style |\n| associative-container | string | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"4.11\",\"4.11\",\"x\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 关联的滚动容器 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| nested-scroll-view | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"4.11\",\"4.11\",\"x\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 嵌套滚动 |\n| upper-threshold | number | 50 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.02\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 距顶部/左边多远时（单位px），触发 scrolltoupper 事件 |\n| lower-threshold | number | 50 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.02\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 距底部/右边多远时（单位px），触发 scrolltolower 事件 |\n| scroll-top | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.02\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 设置竖向滚动条位置 |\n| scroll-left | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"4.41\",\"3.9\",\"4.11\",\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 设置横向滚动条位置 |\n| show-scrollbar | boolean \\| string | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.02\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 控制是否出现滚动条 |\n| scroll-into-view | string([string.IDString](/uts/data-type.md#ide-string)) | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"5.08\",\"4.41\",\"3.9\",\"5.25\",\"4.11\",\"5.25\",\"4.61\",\"5.25\"]],\"status\":\"SUPPORTED\"}' /> | 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素起始位置 |\n| scroll-with-animation | boolean \\| string | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.02\",\"4.41\",\"3.9\",\"4.11\",\"4.61\",\"5.08\"]],\"status\":\"SUPPORTED\"}' /> | 是否在设置滚动条位置时使用滚动动画，设置false没有滚动动画 |\n| refresher-enabled | boolean \\| string | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.11\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 开启下拉刷新，暂时不支持scroll-x = true横向刷新 |\n| refresher-threshold | number | 45 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.11\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 设置下拉刷新阈值, 仅 refresher-default-style = 'none' 自定义样式下生效 |\n| refresher-max-drag-distance | number | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 设置下拉最大拖拽距离（单位px），默认是下拉刷新控件高度的2.5倍 |\n| refresher-default-style | string | \"black\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.11\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 设置下拉刷新默认样式，支持设置 black \\| white \\| none， none 表示不使用默认样式 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| black | <CompatibilityTable table='{\"headers\":[{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 深颜色雪花样式 |\n@| white | <CompatibilityTable table='{\"headers\":[{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 浅白色雪花样式 |\n@| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.11\",\"4.41\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 不使用默认样式 |\n| refresher-background | string([string.ColorString](/uts/data-type.md#ide-string)) | \"transparent\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.11\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 设置下拉刷新区域背景颜色，默认透明。Android 平台下，当 android-overscroll=false 时，默认下拉刷新使用悬浮圆环样式，此时背景默认不再透明，而是由 refresher-default-style 决定 |\n| refresher-triggered | boolean \\| string | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.11\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发 |\n| enable-back-to-top | boolean \\| string | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"4.11\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | iOS点击顶部状态栏滚动条返回顶部，只支持竖向 |\n| custom-nested-scroll | boolean \\| string | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"3.9\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 子元素是否开启嵌套滚动将滚动事件与父元素协商处理 |\n| padding | Array | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(Array)*<br/>长度为 4 的数组，按 top、right、bottom、left 顺序指定内边距 |\n| nested-scroll-child | string | | | |\n| scroll-anchoring | boolean \\| string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"5.25\",\"x\",\"5.25\",\"x\",\"5.25\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否启用滚动锚定，默认不启用 |\n| initial-scroll-bottom | boolean \\| string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"5.25\",\"x\",\"5.25\",\"x\",\"5.25\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否在初始化时滚动到底部，默认不启用 |\n| @refresherpulling | (event: [UniRefresherEvent](#unirefresherevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.11\",\"x\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 下拉刷新控件被下拉 |\n| @refresherrefresh | (event: [UniRefresherEvent](#unirefresherevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.11\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 下拉刷新被触发 |\n| @refresherrestore | (event: [UniRefresherEvent](#unirefresherevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.11\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 下拉刷新被复位 |\n| @refresherabort | (event: [UniRefresherEvent](#unirefresherevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.11\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 下拉刷新被中止 |\n| @scrolltoupper | (event: [UniScrollToUpperEvent](#uniscrolltoupperevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.02\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 滚动到顶部/左边，会触发 scrolltoupper 事件 |\n| @scrolltolower | (event: [UniScrollToLowerEvent](#uniscrolltolowerevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.02\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 滚动到底部/右边，会触发 scrolltolower 事件 |\n| @scroll | (event: [UniScrollEvent](#uniscrollevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.02\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |\n| @scrollend | (event: [UniScrollEvent](#uniscrollevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 滚动结束时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |","event":"\n### 事件\n#### UniRefresherEvent\n\n```mermaid\ngraph LR\n \nUniRefresherEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniRefresherEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniRefresherEventDetail** | 是 |\n@| 名称 | 类型 | 必备 |\n@| :- | :- | :- |\n@| dy | number | 是 |\n\n\n#### UniScrollToUpperEvent\n\n```mermaid\ngraph LR\n \nUniScrollToUpperEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniScrollToUpperEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniScrollToUpperEventDetail** | 是 |\n@| 名称 | 类型 | 必备 | 描述 |\n@| :- | :- | :- | :- |\n@| direction | string | 是 | 滚动方向 top 或 left |\n\n\n#### UniScrollToLowerEvent\n\n```mermaid\ngraph LR\n \nUniScrollToLowerEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniScrollToLowerEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniScrollToLowerEventDetail** | 是 |\n@| 名称 | 类型 | 必备 | 描述 |\n@| :- | :- | :- | :- |\n@| direction | string | 是 | 滚动方向 bottom 或 right |\n\n\n#### UniScrollEvent\n\n```mermaid\ngraph LR\n \nUniScrollEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniScrollEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniScrollEventDetail** | 是 |\n@| 名称 | 类型 | 必备 | 描述 |\n@| :- | :- | :- | :- |\n@| scrollTop | number | 是 | 竖向滚动的距离 |\n@| scrollLeft | number | 是 | 横向滚动的距离 |\n@| scrollHeight | number | 是 | 滚动区域的高度 |\n@| scrollWidth | number | 是 | 滚动区域的宽度 |\n@| deltaY | number | 是 | 当次滚动事件竖向滚动量 |\n@| deltaX | number | 是 | 当次滚动事件横向滚动量 |\n\n","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/list-view/list-view.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/list-view/list-view.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/list-view/list-view\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/list-view/list-view\n\n>示例\n```vue\n<script setup lang=\"uts\">\r\n type ScrollEventTest = {\r\n type : string;\r\n target : UniElement | null;\r\n currentTarget : UniElement | null;\r\n direction ?: string\r\n }\r\n\r\n import { ItemType } from '@/components/enum-data/enum-data-types'\r\n\r\n type DataType = {\r\n refresher_triggered_boolean: boolean;\r\n refresher_enabled_boolean: boolean;\r\n scroll_with_animation_boolean: boolean;\r\n show_scrollbar_boolean: boolean;\r\n bounces_boolean: boolean;\r\n scroll_y_boolean: boolean;\r\n scroll_x_boolean: boolean;\r\n scroll_direction: string;\r\n upper_threshold_input: number;\r\n lower_threshold_input: number;\r\n scroll_top_input: number;\r\n scroll_left_input: number;\r\n refresher_background_input: string;\r\n scrollData: Array<string>;\r\n size_enum: ItemType[];\r\n scrollIntoView: string;\r\n refresherrefresh: boolean;\r\n refresher_default_style_input: string;\r\n text: string[];\r\n state: number;\r\n reset: boolean;\r\n // 自动化测试\r\n isScrollTest: string;\r\n isScrolltolowerTest: string;\r\n isScrolltoupperTest: string;\r\n scrollDetailTest: UniScrollEventDetail | null;\r\n scrollEndDetailTest: UniScrollEventDetail | null;\r\n }\r\n\r\n // 使用reactive解决ref数据在自动化测试中无法访问\r\n const data = reactive({\r\n refresher_triggered_boolean: false,\r\n refresher_enabled_boolean: false,\r\n scroll_with_animation_boolean: false,\r\n show_scrollbar_boolean: false,\r\n bounces_boolean: true,\r\n scroll_y_boolean: true,\r\n scroll_x_boolean: false,\r\n scroll_direction: \"vertical\",\r\n upper_threshold_input: 50,\r\n lower_threshold_input: 50,\r\n scroll_top_input: 0,\r\n scroll_left_input: 0,\r\n refresher_background_input: \"#FFF\",\r\n scrollData: [],\r\n size_enum: [{ \"value\": 0, \"name\": \"item---0\" }, { \"value\": 3, \"name\": \"item---3\" }],\r\n scrollIntoView: \"\",\r\n refresherrefresh: false,\r\n refresher_default_style_input: \"black\",\r\n text: ['继续下拉执行刷新', '释放立即刷新', '刷新中', \"\"],\r\n state: 3,\r\n reset: true,\r\n // 自动化测试\r\n isScrollTest: '',\r\n isScrolltolowerTest: '',\r\n isScrolltoupperTest: '',\r\n scrollDetailTest: null,\r\n scrollEndDetailTest: null,\r\n } as DataType)\r\n\r\n onLoad(() => {\r\n let lists : Array<string> = []\r\n for (let i = 0; i < 10; i++) {\r\n lists.push(\"item---\" + i)\r\n }\r\n data.scrollData = lists\r\n })\r\n const list_view_click = () => { console.log(\"组件被点击时触发\") }\r\n const list_view_touchstart = () => { console.log(\"手指触摸动作开始\") }\r\n const list_view_touchmove = () => { console.log(\"手指触摸后移动\") }\r\n const list_view_touchcancel = () => { console.log(\"手指触摸动作被打断，如来电提醒，弹窗\") }\r\n const list_view_touchend = () => { console.log(\"手指触摸动作结束\") }\r\n const list_view_tap = () => { console.log(\"手指触摸后马上离开\") }\r\n const list_view_longpress = () => { console.log(\"如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。\") }\r\n\r\n const list_view_refresherpulling = (e: RefresherEvent) => {\r\n console.log(\"下拉刷新控件被下拉\")\r\n if (data.reset) {\r\n if (e.detail.dy > 45) {\r\n data.state = 1\r\n } else {\r\n data.state = 0\r\n }\r\n }\r\n }\r\n\r\n const list_view_refresherrefresh = () => {\r\n console.log(\"下拉刷新被触发 \")\r\n data.refresherrefresh = true\r\n data.refresher_triggered_boolean = true\r\n data.state = 2\r\n data.reset = false;\r\n setTimeout(() => {\r\n data.refresher_triggered_boolean = false\r\n }, 1500)\r\n }\r\n\r\n const list_view_refresherrestore = () => {\r\n data.refresherrefresh = false\r\n data.state = 3\r\n data.reset = true\r\n console.log(\"下拉刷新被复位\")\r\n }\r\n\r\n const list_view_refresherabort = () => { console.log(\"下拉刷新被中止\") }\r\n\r\n // 自动化测试专用（由于事件event参数对象中存在循环引用，在ios端JSON.stringify报错，自动化测试无法page.data获取）\r\n const checkEventTest = (e: ScrollEventTest, eventName: String) => {\r\n const isPass = e.type === eventName && e.target instanceof UniElement && e.currentTarget instanceof UniElement;\r\n const result = isPass ? `${eventName}:Success` : `${eventName}:Fail`;\r\n switch (eventName) {\r\n case 'scroll':\r\n data.isScrollTest = result\r\n break;\r\n case 'scrolltolower':\r\n data.isScrolltolowerTest = result + `-${e.direction}`\r\n break;\r\n case 'scrolltoupper':\r\n data.isScrolltoupperTest = result + `-${e.direction}`\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n\r\n const list_view_scrolltoupper = (e: UniScrollToUpperEvent) => {\r\n console.log(\"滚动到顶部/左边，会触发 scrolltoupper 事件 direction=\" + e.detail.direction)\r\n checkEventTest({\r\n type: e.type,\r\n target: e.target,\r\n currentTarget: e.currentTarget,\r\n direction: e.detail.direction,\r\n } as ScrollEventTest, 'scrolltoupper')\r\n }\r\n\r\n const list_view_scrolltolower = (e: UniScrollToLowerEvent) => {\r\n console.log(\"滚动到底部/右边，会触发 scrolltolower 事件 direction=\" + e.detail.direction)\r\n checkEventTest({\r\n type: e.type,\r\n target: e.target,\r\n currentTarget: e.currentTarget,\r\n direction: e.detail.direction,\r\n } as ScrollEventTest, 'scrolltolower')\r\n }\r\n\r\n const list_view_scroll = (e: UniScrollEvent) => {\r\n console.log(\"滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}\")\r\n data.scrollDetailTest = e.detail\r\n checkEventTest({\r\n type: e.type,\r\n target: e.target,\r\n currentTarget: e.currentTarget\r\n } as ScrollEventTest, 'scroll')\r\n }\r\n\r\n const list_view_scrollend = (e: UniScrollEvent) => {\r\n console.log(\"滚动结束时触发\", e.detail)\r\n data.scrollEndDetailTest = e.detail\r\n checkEventTest({\r\n type: e.type,\r\n target: e.target,\r\n currentTarget: e.currentTarget\r\n } as ScrollEventTest, 'scrollend')\r\n }\r\n\r\n const list_item_click = () => { console.log(\"list-item组件被点击时触发\") }\r\n const list_item_touchstart = () => { console.log(\"手指触摸list-item组件动作开始\") }\r\n const list_item_touchmove = () => { console.log(\"手指触摸list-item组件后移动\") }\r\n const list_item_touchcancel = () => { console.log(\"手指触摸list-item组件动作被打断，如来电提醒，弹窗\") }\r\n const list_item_touchend = () => { console.log(\"手指触摸list-item组件动作结束\") }\r\n const list_item_tap = () => { console.log(\"手指触摸list-item组件后马上离开\") }\r\n const list_item_longpress = () => { console.log(\"list-item组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。\") }\r\n\r\n const change_refresher_triggered_boolean = (checked: boolean) => { data.refresher_triggered_boolean = checked }\r\n const change_refresher_enabled_boolean = (checked: boolean) => { data.refresher_enabled_boolean = checked }\r\n const change_scroll_with_animation_boolean = (checked: boolean) => { data.scroll_with_animation_boolean = checked }\r\n const change_show_scrollbar_boolean = (checked: boolean) => { data.show_scrollbar_boolean = checked }\r\n const change_bounces_boolean = (checked: boolean) => { data.bounces_boolean = checked }\r\n\r\n const change_scroll_direction = () => {\r\n if (data.scroll_y_boolean && data.scroll_x_boolean || data.scroll_y_boolean) {\r\n data.scroll_direction = \"vertical\"\r\n } else if (!data.scroll_y_boolean && !data.scroll_x_boolean) {\r\n data.scroll_direction = \"none\"\r\n } else if (!data.scroll_y_boolean && data.scroll_x_boolean) {\r\n data.scroll_direction = \"horizontal\"\r\n }\r\n }\r\n\r\n const change_scroll_y_boolean = (checked: boolean) => {\r\n data.scroll_y_boolean = checked\r\n change_scroll_direction()\r\n }\r\n\r\n const change_scroll_x_boolean = (checked: boolean) => {\r\n data.scroll_x_boolean = checked\r\n change_scroll_direction()\r\n }\r\n\r\n const confirm_upper_threshold_input = (value: number) => { data.upper_threshold_input = value }\r\n const confirm_lower_threshold_input = (value: number) => { data.lower_threshold_input = value }\r\n const confirm_scroll_top_input = (value: number) => { data.scroll_top_input = value }\r\n const confirm_scroll_left_input = (value: number) => { data.scroll_left_input = value }\r\n const confirm_refresher_background_input = (value: string) => { data.refresher_background_input = value }\r\n const item_change_size_enum = (index: number) => { data.scrollIntoView = \"item---\" + index }\r\n\r\n //自动化测试专用\r\n const setScrollIntoView = (id: string) => { data.scrollIntoView = id }\r\n\r\n //自动化测试例专用\r\n const check_scroll_height = (): Boolean => {\r\n var listElement = uni.getElementById(\"listview\") as UniElement\r\n console.log(\"check_scroll_height--\" + listElement.scrollHeight)\r\n if (listElement.scrollHeight > 2000) {\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n //自动化测试例专用\r\n const check_scroll_width = (): Boolean => {\r\n var listElement = uni.getElementById(\"listview\") as UniElement\r\n console.log(\"check_scroll_width\" + listElement.scrollWidth)\r\n if (listElement.scrollWidth > 2000) {\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n const change_refresher_style_boolean = (checked: boolean) => {\r\n if (checked) {\r\n data.refresher_default_style_input = \"none\"\r\n } else {\r\n data.refresher_default_style_input = \"black\"\r\n }\r\n }\r\n\r\n defineExpose({\r\n data,\r\n confirm_scroll_top_input,\r\n change_scroll_x_boolean,\r\n change_scroll_y_boolean,\r\n confirm_scroll_left_input,\r\n check_scroll_height,\r\n check_scroll_width,\r\n item_change_size_enum,\r\n setScrollIntoView\r\n })\r\n</script>\r\n\r\n<template>\r\n <view class=\"main\">\r\n <list-view :direction=\"data.scroll_direction\" :bounces=\"data.bounces_boolean\" :upper-threshold=\"data.upper_threshold_input\"\r\n :lower-threshold=\"data.lower_threshold_input\" :scroll-top=\"data.scroll_top_input\" :scroll-left=\"data.scroll_left_input\"\r\n :show-scrollbar=\"data.show_scrollbar_boolean\" :scroll-into-view=\"data.scrollIntoView\"\r\n :scroll-with-animation=\"data.scroll_with_animation_boolean\" :refresher-enabled=\"data.refresher_enabled_boolean\"\r\n :refresher-background=\"data.refresher_background_input\" :refresher-triggered=\"data.refresher_triggered_boolean\"\r\n :refresher-default-style=\"data.refresher_default_style_input\" @click=\"list_view_click\"\r\n @touchstart=\"list_view_touchstart\" @touchmove=\"list_view_touchmove\" @touchcancel=\"list_view_touchcancel\"\r\n @touchend=\"list_view_touchend\" @tap=\"list_view_tap\" @longpress=\"list_view_longpress\"\r\n @refresherpulling=\"list_view_refresherpulling\" @refresherrefresh=\"list_view_refresherrefresh\"\r\n @refresherrestore=\"list_view_refresherrestore\" @refresherabort=\"list_view_refresherabort\"\r\n @scrolltoupper=\"list_view_scrolltoupper\" ref=\"listview\" @scrolltolower=\"list_view_scrolltolower\"\r\n @scroll=\"list_view_scroll\" @scrollend=\"list_view_scrollend\" style=\"width:100%;\" id=\"listview\">\r\n <list-item v-for=\"key in data.scrollData\" :key=\"key\" :id=\"key\" @click=\"list_item_click\"\r\n @touchstart=\"list_item_touchstart\" @touchmove=\"list_item_touchmove\" @touchcancel=\"list_item_touchcancel\"\r\n @touchend=\"list_item_touchend\" @tap=\"list_item_tap\" @longpress=\"list_item_longpress\" class=\"list-item\">\r\n <text>{{key}}</text>\r\n </list-item>\r\n \r\n <list-item slot=\"refresher\" class=\"refresh-box\">\r\n <text class=\"tip-text\">{{data.text[data.state]}}</text>\r\n </list-item>\r\n \r\n </list-view>\r\n </view>\r\n\r\n <scroll-view style=\"flex:1\" direction=\"vertical\">\r\n <view class=\"content\">\r\n \r\n <boolean-data :defaultValue=\"false\" title=\"设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发\"\r\n @change=\"change_refresher_triggered_boolean\"></boolean-data>\r\n <boolean-data :defaultValue=\"false\" title=\"开启下拉刷新\" @change=\"change_refresher_enabled_boolean\"></boolean-data>\r\n <boolean-data :defaultValue=\"false\" title=\"开启自定义样式\" @change=\"change_refresher_style_boolean\"></boolean-data>\r\n \r\n <boolean-data :defaultValue=\"false\" title=\"是否在设置滚动条位置时使用滚动动画，设置false没有滚动动画\"\r\n @change=\"change_scroll_with_animation_boolean\"></boolean-data>\r\n <boolean-data :defaultValue=\"false\" title=\"控制是否出现滚动条\" @change=\"change_show_scrollbar_boolean\"></boolean-data>\r\n \r\n <boolean-data :defaultValue=\"true\" title=\"控制是否回弹效果\" @change=\"change_bounces_boolean\"></boolean-data>\r\n \r\n <boolean-data :defaultValue=\"true\" title=\"允许纵向滚动\" @change=\"change_scroll_y_boolean\"></boolean-data>\r\n \r\n <boolean-data :defaultValue=\"false\" title=\"允许横向滚动\" @change=\"change_scroll_x_boolean\"></boolean-data>\r\n \r\n <input-data defaultValue=\"50\" title=\"距顶部/左边多远时（单位px），触发 scrolltoupper 事件\" type=\"number\"\r\n @confirm=\"confirm_upper_threshold_input\"></input-data>\r\n <input-data defaultValue=\"50\" title=\"距底部/右边多远时（单位px），触发 scrolltolower 事件\" type=\"number\"\r\n @confirm=\"confirm_lower_threshold_input\"></input-data>\r\n <input-data defaultValue=\"0\" title=\"设置竖向滚动条位置\" type=\"number\" @confirm=\"confirm_scroll_top_input\"></input-data>\r\n \r\n <input-data defaultValue=\"0\" title=\"设置横向滚动条位置\" type=\"number\" @confirm=\"confirm_scroll_left_input\"></input-data>\r\n <input-data defaultValue=\"#FFF\" title=\"设置下拉刷新区域背景颜色\" type=\"text\"\r\n @confirm=\"confirm_refresher_background_input\"></input-data>\r\n \r\n \r\n <enum-data :items=\"data.size_enum\" title=\"通过id位置跳转\" @change=\"item_change_size_enum\"></enum-data>\r\n \r\n <navigator url=\"/pages/component/list-view/list-view-refresh\">\r\n <button type=\"primary\" class=\"button\">\r\n list-view 下拉刷新\r\n </button>\r\n </navigator>\r\n \r\n <navigator url=\"/pages/component/list-view/list-view-multiplex\">\r\n <button type=\"primary\" class=\"button\">\r\n list-view 对list-item复用测试\r\n </button>\r\n </navigator>\r\n <navigator url=\"/pages/component/list-view/list-view-multiplex-input\">\r\n <button type=\"primary\" class=\"button\">\r\n list-view 复用测试（item中嵌入input）\r\n </button>\r\n </navigator>\r\n <navigator url=\"/pages/component/list-view/list-view-multiplex-video\">\r\n <button type=\"primary\" class=\"button\">\r\n list-view 复用测试（item中嵌入video）\r\n </button>\r\n </navigator>\r\n <navigator url=\"/pages/component/list-view/list-view-children-in-slot\">\r\n <button type=\"primary\" class=\"button\">\r\n list-view 测试插槽中子组件增删\r\n </button>\r\n </navigator>\r\n <navigator url=\"/pages/component/list-view/list-view-children-if-show\">\r\n <button type=\"primary\" class=\"button\">\r\n list-item v-if v-show 组合增删\r\n </button>\r\n </navigator>\r\n <navigator url=\"/pages/template/chat-stream-reply/chat-stream-reply\">\r\n <button type=\"primary\" class=\"button\">\r\n list-item 中设置长按事件测试\r\n </button>\r\n </navigator>\r\n <navigator url=\"/pages/component/list-view/list-view-form-item\">\r\n <button type=\"primary\" class=\"button\">\r\n list-item 中使用表单元素测试\r\n </button>\r\n </navigator>\r\n <navigator url=\"/pages/component/list-view/list-view-with-type\">\r\n <button type=\"primary\" class=\"button\">\r\n list-item 上使用 type 属性测试\r\n </button>\r\n </navigator>\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, .06);\r\n flex-direction: row;\r\n justify-content: center;\r\n }\r\n\r\n .list-item {\r\n width: 100%;\r\n height: 250px;\r\n border: 1px solid #666;\r\n background-color: #66ccff;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .tip-text {\r\n color: #888;\r\n font-size: 12px;\r\n }\r\n\r\n .refresh-box {\r\n justify-content: center;\r\n align-items: center;\r\n flex-direction: row;\r\n height: 45px;\r\n width: 100%;\r\n }\r\n\r\n .button {\r\n margin-top: 15px;\r\n }\r\n .content{\r\n padding-bottom: 20px;\r\n }\r\n</style>\r\n\n```\n\n:::","children":"### 子组件 @children-tags\n| 子组件 | 兼容性 |\n| :- | :- |\n| [list-item](list-item.md)<br/>[sticky-header](sticky-header.md)<br/>[sticky-section](sticky-section.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.02\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.list-view.list-view)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/list-view.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=list-view&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=list-view&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=list-view&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=list-view&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=list-view)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=list-view&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"flow-item":{"name":"::: sourceCode\n## flow-item\n:::","originName":"## flow-item","description":"> 组件类型：UniFlowItemElement \n\n waterflow组件的唯一合法子组件","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS(VDOM) | HarmonyOS(Vapor) |\n| :- | :- | :- | :- | :- | :- |\n| <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.41 | 4.41 | 4.81 | 5.02 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| type | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"4.41\",\"4.41\",\"4.81\",\"5.02\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 对应flow-item的类型 waterflow 将对同类型条目进行复用，所以合理的类型拆分，可以很好地提升 waterflow 性能 |\n| item-key | string \\| number | | | |\n| item-height | number | | | |","event":"","example":"","children":"### 子组件 @children-tags\n支持所有组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.waterflow.flow-item)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=flow-item&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=flow-item&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=flow-item&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=flow-item&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=flow-item&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=flow-item)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=flow-item&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"waterflow":{"name":"::: sourceCode\n## waterflow\n:::","originName":"## waterflow","description":"> 组件类型：UniWaterFlowElement \n\n 瀑布流组件","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS(VDOM) | HarmonyOS(Vapor) |\n| :- | :- | :- | :- | :- | :- |\n| <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.41 | 4.41 | 4.81 | 5.02 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| cross-axis-count | number \\| string | 2 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"4.41\",\"4.41\",\"4.81\",\"5.02\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 交叉轴元素数量 |\n| main-axis-gap | number \\| string | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"4.41\",\"4.41\",\"4.81\",\"5.02\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 主轴方向间隔 |\n| cross-axis-gap | number \\| string | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"4.41\",\"4.41\",\"4.81\",\"5.02\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 交叉轴方向间隔 |\n| max-cross-axis-extent | number \\| string | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\",\"5.11\",\"x\",\"5.02\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | flow-item交叉轴方向最大尺寸 |\n| padding | Array | \\[0,0,0,0\\] | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.41\",\"4.41\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 长度为 4 的数组，按 top、right、bottom、left 顺序指定内边距。蒸汽模式已废弃此属性，推荐使用 css padding 属性 |\n| associative-container | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.41\",\"4.41\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 关联的滚动容器 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| nested-scroll-view | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.41\",\"4.41\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 嵌套滚动 |\n| bounces | boolean \\| string | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"4.41\",\"4.41\",\"4.81\",\"5.02\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 控制是否回弹效果 |\n| android-overscroll | boolean \\| string | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"5.21\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | Android平台是否开启弹簧回弹效果，开启后默认下拉刷新使用圆弧loading样式（推动页面内容），否则默认下拉刷新使用Android系统悬浮圆环样式（不推动页面内容） |\n| android-scrollbar-draggable | boolean \\| string | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"5.26\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | Android 平台是否允许拖动滚动条以快速定位滚动内容，默认值为 false，当前暂仅支持竖向滚动 |\n| android-refresher-color | string([string.ColorString](/uts/data-type.md#ide-string)) | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"5.25\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 设置 Android 平台 scroll-view 默认下拉刷新样式的前景颜色，优先级高于 refresher-default-style |\n| upper-threshold | number | 50 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"4.41\",\"4.41\",\"4.81\",\"5.02\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 距顶部/左边多远时（单位px），触发 scrolltoupper 事件 |\n| lower-threshold | number | 50 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"4.41\",\"4.41\",\"4.81\",\"5.02\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 距底部/右边多远时（单位px），触发 scrolltolower 事件 |\n| scroll-top | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"4.41\",\"4.41\",\"4.81\",\"5.02\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 设置竖向滚动条位置 |\n| show-scrollbar | boolean \\| string | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"4.41\",\"4.41\",\"4.81\",\"5.02\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 控制是否出现滚动条 |\n| scroll-into-view | string([string.IDString](/uts/data-type.md#ide-string)) | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"4.41\",\"5.25\",\"4.41\",\"5.25\",\"x\",\"5.25\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素起始位置 |\n| scroll-with-animation | boolean \\| string | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"4.41\",\"4.41\",\"4.81\",\"5.02\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否在设置滚动条位置时使用滚动动画，设置false没有滚动动画 |\n| refresher-enabled | boolean \\| string | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"4.41\",\"4.41\",\"4.81\",\"5.02\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 开启下拉刷新，暂时不支持scroll-x = true横向刷新 |\n| refresher-threshold | number | 45 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"4.41\",\"4.41\",\"4.81\",\"5.02\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 设置下拉刷新阈值, 仅 refresher-default-style = 'none' 自定义样式下生效 |\n| refresher-max-drag-distance | number | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"4.41\",\"4.41\",\"4.81\",\"5.02\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 设置下拉最大拖拽距离（单位px），默认是下拉刷新控件高度的2.5倍 |\n| refresher-default-style | string | \"black\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"4.41\",\"4.41\",\"4.81\",\"5.02\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 设置下拉刷新默认样式，支持设置 black \\| white \\| none， none 表示不使用默认样式 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| black | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"4.41\",\"4.41\",\"4.81\",\"5.02\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 深颜色雪花样式 |\n@| white | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"4.41\",\"4.41\",\"4.81\",\"5.02\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 浅白色雪花样式 |\n@| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"4.41\",\"4.41\",\"4.81\",\"5.02\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 不使用默认样式 |\n| refresher-background | string([string.ColorString](/uts/data-type.md#ide-string)) | \"transparent\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"4.41\",\"4.41\",\"4.81\",\"5.02\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 设置下拉刷新区域背景颜色，默认透明。Android 平台下，当 android-overscroll=false 时，默认下拉刷新使用悬浮圆环样式，此时背景默认不再透明，而是由 refresher-default-style 决定 |\n| refresher-triggered | boolean \\| string | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"4.41\",\"4.41\",\"4.81\",\"5.02\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发 |\n| enable-back-to-top | boolean \\| string | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\",\"4.41\",\"x\",\"5.02\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | iOS点击顶部状态栏滚动条返回顶部，只支持竖向 |\n| custom-nested-scroll | boolean \\| string | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 子元素是否开启嵌套滚动将滚动事件与父元素协商处理 |\n| scroll-left | number | | | |\n| nested-scroll-child | string | | | |\n| @refresherpulling | (event: [UniRefresherEvent](#unirefresherevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"4.41\",\"4.41\",\"4.81\",\"5.02\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 下拉刷新控件被下拉 |\n| @refresherrefresh | (event: [UniRefresherEvent](#unirefresherevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"4.41\",\"4.41\",\"4.81\",\"5.02\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 下拉刷新被触发 |\n| @refresherrestore | (event: [UniRefresherEvent](#unirefresherevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"4.41\",\"4.41\",\"4.81\",\"5.02\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 下拉刷新被复位 |\n| @refresherabort | (event: [UniRefresherEvent](#unirefresherevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"4.41\",\"4.41\",\"4.81\",\"5.02\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 下拉刷新被中止 |\n| @scrolltoupper | (event: [UniScrollToUpperEvent](#uniscrolltoupperevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"4.41\",\"4.41\",\"4.81\",\"5.02\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 滚动到顶部/左边，会触发 scrolltoupper 事件 |\n| @scrolltolower | (event: [UniScrollToLowerEvent](#uniscrolltolowerevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"4.41\",\"4.41\",\"4.81\",\"5.02\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 滚动到底部/右边，会触发 scrolltolower 事件 |\n| @scroll | (event: [UniScrollEvent](#uniscrollevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"4.41\",\"4.41\",\"4.81\",\"5.02\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |\n| @scrollend | (event: [UniScrollEvent](#uniscrollevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"4.41\",\"4.41\",\"4.81\",\"5.02\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 滚动结束时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |","event":"\n### 事件\n#### UniRefresherEvent\n\n```mermaid\ngraph LR\n \nUniRefresherEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniRefresherEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniRefresherEventDetail** | 是 |\n@| 名称 | 类型 | 必备 |\n@| :- | :- | :- |\n@| dy | number | 是 |\n\n\n#### UniScrollToUpperEvent\n\n```mermaid\ngraph LR\n \nUniScrollToUpperEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniScrollToUpperEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniScrollToUpperEventDetail** | 是 |\n@| 名称 | 类型 | 必备 | 描述 |\n@| :- | :- | :- | :- |\n@| direction | string | 是 | 滚动方向 top 或 left |\n\n\n#### UniScrollToLowerEvent\n\n```mermaid\ngraph LR\n \nUniScrollToLowerEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniScrollToLowerEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniScrollToLowerEventDetail** | 是 |\n@| 名称 | 类型 | 必备 | 描述 |\n@| :- | :- | :- | :- |\n@| direction | string | 是 | 滚动方向 bottom 或 right |\n\n\n#### UniScrollEvent\n\n```mermaid\ngraph LR\n \nUniScrollEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniScrollEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniScrollEventDetail** | 是 |\n@| 名称 | 类型 | 必备 | 描述 |\n@| :- | :- | :- | :- |\n@| scrollTop | number | 是 | 竖向滚动的距离 |\n@| scrollLeft | number | 是 | 横向滚动的距离 |\n@| scrollHeight | number | 是 | 滚动区域的高度 |\n@| scrollWidth | number | 是 | 滚动区域的宽度 |\n@| deltaY | number | 是 | 当次滚动事件竖向滚动量 |\n@| deltaX | number | 是 | 当次滚动事件横向滚动量 |\n\n","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/waterflow/waterflow.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/waterflow/waterflow.uvue) \n>\n> 该 API 不支持 Web，请运行 hello uni-app x 到 App 平台体验 \n\n::: preview\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/waterflow/waterflow\n```uvue\n<script setup lang=\"uts\">\r\n type ScrollEventTest = {\r\n type : string;\r\n target : UniElement | null;\r\n currentTarget : UniElement | null;\r\n direction ?: string\r\n }\r\n type flowItemData = {\r\n height : number,\r\n text : string\r\n }\r\n type DataType = {\r\n refresher_triggered_boolean: boolean;\r\n refresher_enabled_boolean: boolean;\r\n scroll_with_animation_boolean: boolean;\r\n show_scrollbar_boolean: boolean;\r\n bounces_boolean: boolean;\r\n upper_threshold_input: number;\r\n lower_threshold_input: number;\r\n scroll_top_input: number;\r\n scroll_left_input: number;\r\n refresher_background_input: string;\r\n scrollData: Array<flowItemData>;\r\n size_enum: ItemType[];\r\n scrollIntoView: string;\r\n refresherrefresh: boolean;\r\n refresher_default_style_input: string;\r\n text: string[];\r\n state: number;\r\n reset: boolean;\r\n isScrollTest: string;\r\n isScrolltolowerTest: string;\r\n isScrolltoupperTest: string;\r\n scrollDetailTest: UniScrollEventDetail | null;\r\n scrollEndDetailTest: UniScrollEventDetail | null;\r\n cross_axis_count: number;\r\n main_axis_gap: number;\r\n cross_axis_gap: number;\r\n waterflowPadding: Array<number>;\r\n isLoadingMore: boolean;\r\n hasMore: boolean;\n osHarmonySDKAPIVersion: number;\r\n }\r\n import { ItemType } from '@/components/enum-data/enum-data-types'\r\n\r\n const data = reactive({\r\n refresher_triggered_boolean: false,\r\n refresher_enabled_boolean: false,\r\n scroll_with_animation_boolean: false,\r\n show_scrollbar_boolean: false,\r\n bounces_boolean: true,\r\n upper_threshold_input: 50,\r\n lower_threshold_input: 50,\r\n scroll_top_input: 0,\r\n scroll_left_input: 0,\r\n refresher_background_input: \"#FFF\",\r\n scrollData: [],\r\n size_enum: [{ \"value\": 0, \"name\": \"item---0\" }, { \"value\": 3, \"name\": \"item---3\" }],\r\n scrollIntoView: \"\",\r\n refresherrefresh: false,\r\n refresher_default_style_input: \"black\",\r\n text: ['继续下拉执行刷新', '释放立即刷新', '刷新中', \"\"],\r\n state: 3,\r\n reset: true,\r\n // 自动化测试\r\n isScrollTest: '',\r\n isScrolltolowerTest: '',\r\n isScrolltoupperTest: '',\r\n scrollDetailTest: null,\r\n scrollEndDetailTest: null,\r\n cross_axis_count: 2,\r\n main_axis_gap: 2,\r\n cross_axis_gap: 2,\r\n waterflowPadding: [10, 5, 10, 5],\r\n isLoadingMore: false,\r\n hasMore: true,\n osHarmonySDKAPIVersion: 0\r\n } as DataType)\r\n\r\n const waterflowRef = ref<UniWaterFlowElement | null>(null)\n\n // #ifdef APP-HARMONY\n const deviceInfo = uni.getDeviceInfo()\n data.osHarmonySDKAPIVersion = deviceInfo.osHarmonySDKAPIVersion\n // #endif\r\n\r\n onLoad(() => {\r\n //静态瀑布流数据\r\n data.scrollData = [\r\n { height: 300, text: \"item---0\" },\r\n { height: 150, text: \"item---1\" },\r\n { height: 120, text: \"item---2\" },\r\n { height: 100, text: \"item---3\" },\r\n { height: 100, text: \"item---4\" },\r\n { height: 150, text: \"item---5\" },\r\n { height: 140, text: \"item---6\" },\r\n { height: 190, text: \"item---7\" },\r\n { height: 160, text: \"item---8\" },\r\n { height: 120, text: \"item---9\" },\r\n { height: 109, text: \"item---10\" },\r\n { height: 102, text: \"item---11\" },\r\n { height: 123, text: \"item---12\" },\r\n { height: 156, text: \"item---13\" },\r\n { height: 177, text: \"item---14\" },\r\n { height: 105, text: \"item---15\" },\r\n { height: 110, text: \"item---16\" },\r\n { height: 90, text: \"item---17\" },\r\n { height: 130, text: \"item---18\" },\r\n { height: 140, text: \"item---19\" },\r\n ] as Array<flowItemData>\r\n })\r\n\r\n const waterflow_click = () => { console.log(\"组件被点击时触发\") }\r\n const waterflow_touchstart = () => { console.log(\"手指触摸动作开始\") }\r\n const waterflow_touchmove = () => { console.log(\"手指触摸后移动\") }\r\n const waterflow_touchcancel = () => { console.log(\"手指触摸动作被打断，如来电提醒，弹窗\") }\r\n const waterflow_touchend = () => { console.log(\"手指触摸动作结束\") }\r\n const waterflow_tap = () => { console.log(\"手指触摸后马上离开\") }\r\n const waterflow_longpress = () => { console.log(\"如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。\") }\r\n const waterflow_refresherpulling = (e : RefresherEvent) => {\r\n console.log(\"下拉刷新控件被下拉\")\r\n if (data.reset) {\r\n if (e.detail.dy > 45) {\r\n data.state = 1\r\n } else {\r\n data.state = 0\r\n }\r\n }\r\n }\r\n const waterflow_refresherrefresh = () => {\r\n console.log(\"下拉刷新被触发 \")\r\n data.refresherrefresh = true\r\n data.refresher_triggered_boolean = true\r\n data.state = 2\r\n data.reset = false;\r\n setTimeout(() => {\r\n data.refresher_triggered_boolean = false\r\n }, 1500)\r\n }\r\n const waterflow_refresherrestore = () => {\r\n data.refresherrefresh = false\r\n data.state = 3\r\n data.reset = true\r\n console.log(\"下拉刷新被复位\")\r\n }\r\n const waterflow_refresherabort = () => { console.log(\"下拉刷新被中止\") }\r\n\r\n // 自动化测试专用（由于事件event参数对象中存在循环引用，在ios端JSON.stringify报错，自动化测试无法page.data获取）\r\n const checkEventTest = (e : ScrollEventTest, eventName : String) => {\r\n const isPass = e.type === eventName && e.target instanceof UniElement && e.currentTarget instanceof UniElement;\r\n const result = isPass ? `${eventName}:Success` : `${eventName}:Fail`;\r\n switch (eventName) {\r\n case 'scroll':\r\n data.isScrollTest = result\r\n break;\r\n case 'scrolltolower':\r\n data.isScrolltolowerTest = result + `-${e.direction}`\r\n break;\r\n case 'scrolltoupper':\r\n data.isScrolltoupperTest = result + `-${e.direction}`\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n const waterflow_scrolltoupper = (e : UniScrollToUpperEvent) => {\r\n console.log(\"滚动到顶部/左边，会触发 scrolltoupper 事件 direction=\" + e.detail.direction)\r\n checkEventTest({\r\n type: e.type,\r\n target: e.target,\r\n currentTarget: e.currentTarget,\r\n direction: e.detail.direction,\r\n } as ScrollEventTest, 'scrolltoupper')\r\n }\r\n const waterflow_scrolltolower = (e : UniScrollToLowerEvent) => {\r\n console.log(\"滚动到底部/右边，会触发 scrolltolower 事件 direction=\" + e.detail.direction)\r\n checkEventTest({\r\n type: e.type,\r\n target: e.target,\r\n currentTarget: e.currentTarget,\r\n direction: e.detail.direction,\r\n } as ScrollEventTest, 'scrolltolower')\r\n }\r\n const waterflow_scroll = (e : UniScrollEvent) => {\r\n console.log(\"滚动时触发，event.detail = \", e.detail)\r\n data.scrollDetailTest = e.detail\r\n checkEventTest({\r\n type: e.type,\r\n target: e.target,\r\n currentTarget: e.currentTarget\r\n } as ScrollEventTest, 'scroll')\r\n }\r\n const waterflow_scrollend = (e : UniScrollEvent) => {\r\n console.log(\"滚动结束时触发\", e.detail)\r\n data.scrollEndDetailTest = e.detail\r\n checkEventTest({\r\n type: e.type,\r\n target: e.target,\r\n currentTarget: e.currentTarget\r\n } as ScrollEventTest, 'scrollend')\r\n }\r\n const flow_item_click = () => { console.log(\"flow-item组件被点击时触发\") }\r\n const flow_item_touchstart = () => { console.log(\"手指触摸flow-item组件动作开始\") }\r\n const flow_item_touchmove = () => { console.log(\"手指触摸flow-item组件后移动\") }\r\n const flow_item_touchcancel = () => { console.log(\"手指触摸flow-item组件动作被打断，如来电提醒，弹窗\") }\r\n const flow_item_touchend = () => { console.log(\"手指触摸flow-item组件动作结束\") }\r\n const flow_item_tap = () => { console.log(\"手指触摸flow-item组件后马上离开\") }\r\n const flow_item_longpress = () => { console.log(\"flow-item组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。\") }\r\n const change_refresher_triggered_boolean = (checked : boolean) => { data.refresher_triggered_boolean = checked }\r\n const change_refresher_enabled_boolean = (checked : boolean) => { data.refresher_enabled_boolean = checked }\r\n const change_scroll_with_animation_boolean = (checked : boolean) => { data.scroll_with_animation_boolean = checked }\r\n const change_show_scrollbar_boolean = (checked : boolean) => { data.show_scrollbar_boolean = checked }\r\n const change_bounces_boolean = (checked : boolean) => { data.bounces_boolean = checked }\r\n const confirm_upper_threshold_input = (value : number) => { data.upper_threshold_input = value }\r\n const confirm_lower_threshold_input = (value : number) => { data.lower_threshold_input = value }\r\n const confirm_scroll_top_input = (value : number) => { data.scroll_top_input = value }\r\n const confirm_scroll_left_input = (value : number) => { data.scroll_left_input = value }\r\n const confirm_refresher_background_input = (value : string) => { data.refresher_background_input = value }\r\n const item_change_size_enum = (index : number) => { data.scrollIntoView = \"item---\" + index }\r\n\r\n //自动化测试专用\r\n const setScrollIntoView = (id : string) => { data.scrollIntoView = id }\r\n\r\n //自动化测试例专用\r\n const check_scroll_height = () : Boolean => {\r\n if (waterflowRef.value == null) {\r\n console.log(\"check_scroll_height--waterflowRef is null\")\r\n return false\r\n }\r\n var listElement = waterflowRef.value as UniWaterFlowElement\r\n console.log(\"check_scroll_height--\" + listElement.scrollHeight)\r\n return listElement.scrollHeight > 1400\r\n }\r\n const getScrollTop = () : number => {\r\n var ret = waterflowRef.value?.scrollTop ?? 0\r\n console.log(ret)\r\n return ret\r\n }\r\n const change_refresher_style_boolean = (checked : boolean) => {\r\n if (checked) {\r\n data.refresher_default_style_input = \"none\"\r\n } else {\r\n data.refresher_default_style_input = \"black\"\r\n }\r\n }\r\n const change_load_more_boolean = (checked : boolean) => {\r\n data.hasMore = checked\r\n }\r\n const handleChangeCrossAxisCount = (value : number) => {\r\n if (value < 1) {\r\n uni.showToast({ title: \"cross-axis-count 最小值为 1 请重新设置\" })\r\n return\r\n }\r\n data.cross_axis_count = value\r\n }\r\n const handleChangeCrossAxisGap = (e : UniSliderChangeEvent) => {\r\n data.cross_axis_gap = e.detail.value\r\n }\r\n const handleChangeMainAxisGap = (e : UniSliderChangeEvent) => {\r\n data.main_axis_gap = e.detail.value\r\n }\r\n //仅自动化测试调用\r\n const testModifyWaterflowProps = () => {\r\n data.cross_axis_count = 4\r\n data.main_axis_gap = 6\r\n data.cross_axis_gap = 6\r\n data.waterflowPadding = [5, 10, 5, 10]\r\n }\r\n //仅自动化测试调用\r\n const testModifyWaterflowSingleRow = () => {\r\n data.cross_axis_count = 1\r\n data.main_axis_gap = 6\r\n data.cross_axis_gap = 6\r\n }\r\n\r\n const PAGE_SIZE = 5;\r\n const NETWORK_DELAY = 800;\r\n\r\n const load_more_click = () => {\r\n if (!data.hasMore) return; // 已无更多\r\n if (data.isLoadingMore) return; // 正在加载中，忽略重复点击\r\n data.isLoadingMore = true\r\n console.log(\"加载更多：开始加载\")\r\n setTimeout(() => {\r\n\r\n const start = data.scrollData.length\r\n for (let i = 0; i < PAGE_SIZE; i++) {\r\n data.scrollData.push({\r\n height: 90 + Math.floor(Math.random() * 120),\r\n text: `item---${start + i}`\r\n } as flowItemData)\r\n }\r\n data.isLoadingMore = false\r\n console.log(\"加载更多：完成，当前总数：\" + data.scrollData.length)\r\n }, NETWORK_DELAY) // 模拟网络延迟\r\n }\r\n\r\n defineExpose({\r\n data,\r\n confirm_scroll_top_input,\r\n change_load_more_boolean,\r\n check_scroll_height,\r\n setScrollIntoView,\r\n getScrollTop,\r\n testModifyWaterflowProps,\r\n testModifyWaterflowSingleRow\r\n })\r\n</script>\r\n\r\n<template>\n <page-intro content=\"本页演示 waterflow 瀑布流组件：列数、间距、下拉刷新与加载更多；下方可调节滚动与 refresher 等属性，可跳转固定高度示例。\"></page-intro>\r\n <view class=\"main\">\r\n <waterflow :cross-axis-count=\"data.cross_axis_count\" :main-axis-gap=\"data.main_axis_gap\" :cross-axis-gap=\"data.cross_axis_gap\"\r\n :bounces=\"data.bounces_boolean\" :upper-threshold=\"data.upper_threshold_input\" :lower-threshold=\"data.lower_threshold_input\"\r\n :scroll-top=\"data.scroll_top_input\" :scroll-left=\"data.scroll_left_input\" :show-scrollbar=\"data.show_scrollbar_boolean\"\r\n :scroll-into-view=\"data.scrollIntoView\" :scroll-with-animation=\"data.scroll_with_animation_boolean\"\r\n :refresher-enabled=\"data.refresher_enabled_boolean\" :refresher-background=\"data.refresher_background_input\"\r\n :refresher-triggered=\"data.refresher_triggered_boolean\" :refresher-default-style=\"data.refresher_default_style_input\"\r\n @click=\"waterflow_click\" @touchstart=\"waterflow_touchstart\" @touchmove=\"waterflow_touchmove\"\r\n @touchcancel=\"waterflow_touchcancel\" @touchend=\"waterflow_touchend\" @tap=\"waterflow_tap\"\r\n @longpress=\"waterflow_longpress\" @refresherpulling=\"waterflow_refresherpulling\"\r\n @refresherrefresh=\"waterflow_refresherrefresh\" @refresherrestore=\"waterflow_refresherrestore\"\r\n @refresherabort=\"waterflow_refresherabort\" @scrolltoupper=\"waterflow_scrolltoupper\" ref=\"waterflowRef\"\r\n @scrolltolower=\"waterflow_scrolltolower\" @scroll=\"waterflow_scroll\" @scrollend=\"waterflow_scrollend\"\r\n style=\"width:100%; \" id=\"waterflow\" :padding=\"data.waterflowPadding\">\r\n\r\n <flow-item v-for=\"(item, index) in data.scrollData\" :key=\"index\" :id=\"item.text\" @click=\"flow_item_click\"\r\n :style=\"{'height' : item.height}\" @touchstart=\"flow_item_touchstart\" @touchmove=\"flow_item_touchmove\"\r\n @touchcancel=\"flow_item_touchcancel\" @touchend=\"flow_item_touchend\" @tap=\"flow_item_tap\"\r\n @longpress=\"flow_item_longpress\" class=\"flow-item\" type=1>\r\n <text>{{item.text}}</text>\r\n </flow-item>\r\n\r\n <flow-item slot=\"refresher\" id=\"refresher\" type=2 class=\"refresh-box\">\r\n <text class=\"tip-text\">{{data.text[data.state]}}</text>\r\n </flow-item>\r\n <flow-item v-show=\"data.hasMore\" slot=\"load-more\" id=\"loadmore\" type=6 class=\"load-more-box\" @click=\"load_more_click\">\r\n <text>加载更多</text>\r\n </flow-item>\r\n </waterflow>\r\n </view>\r\n\r\n <scroll-view style=\"flex:1\" direction=\"vertical\">\r\n <view class=\"content\">\r\n <boolean-data :defaultValue=\"false\" title=\"设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发\"\r\n @change=\"change_refresher_triggered_boolean\"></boolean-data>\r\n <boolean-data :defaultValue=\"false\" title=\"开启下拉刷新\" @change=\"change_refresher_enabled_boolean\"></boolean-data>\r\n <boolean-data :defaultValue=\"false\" title=\"开启自定义样式\" @change=\"change_refresher_style_boolean\"></boolean-data>\r\n <boolean-data :defaultValue=\"false\" title=\"是否在设置滚动条位置时使用滚动动画，设置false没有滚动动画\"\r\n @change=\"change_scroll_with_animation_boolean\"></boolean-data>\r\n <boolean-data :defaultValue=\"false\" title=\"控制是否出现滚动条\" @change=\"change_show_scrollbar_boolean\"></boolean-data>\r\n <boolean-data :defaultValue=\"true\" title=\"控制是否回弹效果\" @change=\"change_bounces_boolean\"></boolean-data>\r\n <boolean-data :defaultValue=\"true\" title=\"是否显示加载更多\" @change=\"change_load_more_boolean\"></boolean-data>\r\n <input-data defaultValue=\"2\" title=\"设置cross-axis-count，触发 scrolltoupper 事件\" type=\"number\"\r\n @confirm=\"handleChangeCrossAxisCount\"></input-data>\r\n <view class=\"uni-slider uni-list-cell-padding\">\r\n <text>拖动设置cross-axis-gap</text>\r\n </view>\r\n <view class=\"uni-slider uni-list-cell-padding\">\r\n <slider :max=\"20\" :min=\"0\" :step=\"1\" :value=\"data.cross_axis_gap\" :show-value=\"true\"\r\n @change=\"handleChangeCrossAxisGap\" />\r\n </view>\r\n <view class=\"uni-slider uni-list-cell-padding\">\r\n <text>拖动设置main-axis-gap</text>\r\n </view>\r\n <view class=\"uni-slider uni-list-cell-padding\">\r\n <slider :max=\"20\" :min=\"0\" :step=\"1\" :value=\"data.main_axis_gap\" :show-value=\"true\"\r\n @change=\"handleChangeMainAxisGap\" />\r\n </view>\r\n <input-data defaultValue=\"50\" title=\"距顶部/左边多远时（单位px），触发 scrolltoupper 事件\" type=\"number\"\r\n @confirm=\"confirm_upper_threshold_input\"></input-data>\r\n <input-data defaultValue=\"50\" title=\"距底部/右边多远时（单位px），触发 scrolltolower 事件\" type=\"number\"\r\n @confirm=\"confirm_lower_threshold_input\"></input-data>\r\n <input-data defaultValue=\"0\" title=\"设置竖向滚动条位置\" type=\"number\" @confirm=\"confirm_scroll_top_input\"></input-data>\r\n <input-data defaultValue=\"#FFF\" title=\"设置下拉刷新区域背景颜色\" type=\"text\"\r\n @confirm=\"confirm_refresher_background_input\"></input-data>\n \r\n <enum-data :items=\"data.size_enum\" title=\"通过id位置跳转\" @change=\"item_change_size_enum\"></enum-data>\n \r\n <navigator url=\"/pages/component/waterflow/waterflow-fit-height\">\r\n <button type=\"primary\" class=\"button\">\r\n item高度自适应\r\n </button>\r\n </navigator>\r\n </view>\n\n <bottom-safe-area />\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, .06);\r\n flex-direction: row;\r\n justify-content: center;\r\n }\r\n\r\n .flow-item {\r\n width: 100%;\r\n height: 200px;\r\n border: 1px solid #666;\r\n background-color: #66ccff;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .tip-text {\r\n color: #888;\r\n font-size: 12px;\r\n }\r\n\r\n .refresh-box {\r\n justify-content: center;\r\n align-items: center;\r\n flex-direction: row;\r\n height: 45px;\r\n width: 100%;\r\n }\r\n\r\n .load-more-box {\r\n justify-content: center;\r\n align-items: center;\r\n flex-direction: row;\r\n height: 45px;\r\n width: 100%;\r\n border-style: solid;\r\n }\r\n\r\n .button {\r\n margin-top: 15px;\r\n }\r\n</style>\r\n\n```\n:::","children":"### 子组件 @children-tags\n| 子组件 | 兼容性 |\n| :- | :- |\n| [flow-item](flow-item.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"4.41\",\"4.41\",\"4.81\",\"5.02\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.waterflow.waterflow)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=waterflow&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=waterflow&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=waterflow&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=waterflow&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=waterflow&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=waterflow)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=waterflow&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"nested-scroll-header":{"name":"::: sourceCode\n## nested-scroll-header\n:::","originName":"## nested-scroll-header","description":"> 组件类型：UniNestedScrollHeaderElement \n\n scroll-view 嵌套模式场景中属于外层 scroll-view 的节点，仅支持作为 \\<scroll-view type='nested'\\> 嵌套模式的直接子节点。不支持复数子节点，渲染时会取其第一个子节点来渲染","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.11 | 4.11 | 4.61 |\n","attribute":"","event":"","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/nested-scroll-header/nested-scroll-header.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/nested-scroll-header/nested-scroll-header.uvue) \n>\n> 该 API 不支持 Web，请运行 hello uni-app x 到 App 平台体验 \n\n::: preview\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/nested-scroll-header/nested-scroll-header\n```uvue\n<template>\r\n <scroll-view class=\"uni-theme-root\" style=\"flex:1\" type=\"nested\" direction=\"vertical\">\r\n <nested-scroll-header>\r\n <view class=\"scroll-header-tiem1\">\r\n <text>会渲染的nested-scroll-header</text>\r\n </view>\r\n \r\n \r\n </nested-scroll-header>\r\n <nested-scroll-header>\r\n <swiper ref=\"headerRef\" indicator-dots=\"true\" circular=\"true\">\r\n <swiper-item v-for=\"i in num\" :item-id=\"i + ''\">\r\n <view class=\"scroll-header-tiem2\">\r\n <text>如果存在多个头部节点，那么就使用多个 nested-scroll-header 来将其包裹</text>\r\n </view>\r\n </swiper-item>\r\n </swiper>\r\n </nested-scroll-header>\r\n <nested-scroll-body>\r\n <scroll-view style=\"flex:1\" associative-container=\"nested-scroll-view\">\r\n <view v-for=\"key in scrollData\">\r\n <view class=\"scroll-item\">\r\n <text class=\"scroll-item-title\">{{key}}</text>\r\n </view>\r\n </view>\r\n </scroll-view>\r\n </nested-scroll-body>\r\n </scroll-view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n const scrollData = ref([] as Array<string>)\r\n const num = ref(0)\r\n const headerRef = ref<UniSwiperElement | null>(null)\r\n\r\n onLoad(() => {\r\n let lists : Array<string> = []\r\n for (let i = 0; i < 30; i++) {\r\n lists.push(\"item---\" + i)\r\n }\r\n scrollData.value = lists\r\n })\r\n\r\n onReady(() => {\r\n num.value = 3\r\n })\r\n\r\n</script>\r\n\r\n<style>\r\n .scroll-item {\r\n margin-left: 6px;\r\n margin-right: 6px;\r\n margin-top: 6px;\r\n background-color: var(--list-background-color, #fff);\r\n border-radius: 4px;\r\n }\r\n\r\n .scroll-item-title {\r\n width: 100%;\r\n height: 60px;\r\n line-height: 60px;\r\n text-align: center;\r\n color: var(--text-color, #555555);\r\n }\r\n\r\n .scroll-header-tiem1 {\r\n height: 200px;\r\n background-color: #66ccff;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .scroll-header-tiem2 {\r\n height: 100px;\r\n background-color: #89ff8d;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n</style>\r\n\n```\n:::","children":"### 子组件 @children-tags\n支持所有组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.nested-scroll.nested-scroll-header)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/nested-scroll-header.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=nested-scroll-header&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=nested-scroll-header&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=nested-scroll-header&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=nested-scroll-header&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=nested-scroll-header)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=nested-scroll-header&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"nested-scroll-body":{"name":"::: sourceCode\n## nested-scroll-body\n:::","originName":"## nested-scroll-body","description":"> 组件类型：UniNestedScrollBodyElement \n\n scroll-view 嵌套模式场景中属于嵌套内层 scroll-view 的父节点，仅支持作为 \\<scroll-view type='nested'\\> 嵌套模式的直接子节点。不支持复数子节点，渲染时会取其第一个子节点来渲染","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.11 | 4.11 | 4.61 |\n","attribute":"","event":"","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/nested-scroll-body/nested-scroll-body.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/nested-scroll-body/nested-scroll-body.uvue) \n>\n> 该 API 不支持 Web，请运行 hello uni-app x 到 App 平台体验 \n\n::: preview\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/nested-scroll-body/nested-scroll-body\n```uvue\n<template>\r\n <scroll-view class=\"uni-theme-root\" style=\"flex:1\" type=\"nested\" direction=\"vertical\" refresher-enabled=\"true\" refresher-default-style=\"none\"\r\n bounces=\"false\" :refresher-triggered=\"data.refresherTriggered\" @refresherpulling=\"onRefresherpulling\"\r\n @refresherrefresh=\"onRefresherrefresh\" @refresherrestore=\"onRefreshrestore\" @scrollend=\"scrollEnd\">\r\n <nested-scroll-header>\r\n <swiper ref=\"header\" indicator-dots=\"true\" circular=\"true\">\r\n <swiper-item v-for=\"i in 3\" :item-id=\"i + ''\">\r\n <image src=\"/static/shuijiao.jpg\" style=\"width:100% ;height: 240px;\"></image>\r\n </swiper-item>\r\n </swiper>\r\n </nested-scroll-header>\r\n <nested-scroll-body>\r\n <view style=\"flex:1\">\r\n <view style=\"flex-direction: row;\">\r\n <text style=\"padding: 12px 15px;\">nested-scroll-body</text>\r\n </view>\r\n <swiper style=\"flex: 1;\">\r\n <swiper-item style=\"flex: 1;\" v-for=\"item in data.swiperList\">\r\n \r\n <list-view bounces=\"false\" id=\"body-list\" :scroll-top=\"data.scrollTop\" style=\"flex:1\" :key=\"item.type\"\r\n associative-container=\"nested-scroll-view\" :refresher-enabled=\"false\">\r\n <list-item v-for=\"key in data.scrollData\" :key=\"key\">\r\n <view class=\"scroll-item\">\r\n <text class=\"scroll-item-title\">{{key}}</text>\r\n </view>\r\n </list-item>\r\n </list-view>\r\n </swiper-item>\r\n </swiper>\r\n </view>\r\n \r\n \r\n </nested-scroll-body>\r\n \r\n <refresh-box slot=\"refresher\" :state=\"state\"></refresh-box>\r\n </scroll-view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n import refreshBox from '../../template/pull-refresh-custom-indicator/refresh-box/refresh-box.uvue';\n\r\n type DataType = {\r\n scrollData: Array<string>;\r\n swiperList: UTSJSONObject[];\r\n scrollTop: number;\r\n refresherTriggered: boolean;\r\n pullingDistance: number;\r\n resetting: boolean;\r\n testScrollTop: number;\r\n }\r\n\r\n const data = reactive({\r\n scrollData: [] as Array<string>,\r\n swiperList: [] as UTSJSONObject[],\r\n scrollTop: 0,\r\n refresherTriggered: false,\r\n pullingDistance: 0,\r\n resetting: false,\r\n testScrollTop: 0\r\n } as DataType)\r\n\r\n const state = computed((): number => {\r\n if (data.resetting) {\r\n return 3;\r\n }\r\n if (data.refresherTriggered) {\r\n return 2\r\n }\r\n if (data.pullingDistance > 45) {\r\n return 1\r\n } else {\r\n return 0;\r\n }\r\n })\r\n\r\n const onRefresherpulling = (e: RefresherEvent) => {\r\n data.pullingDistance = e.detail.dy;\r\n }\r\n\r\n const onRefresherrefresh = () => {\r\n data.refresherTriggered = true\r\n setTimeout(() => {\r\n data.refresherTriggered = false\r\n data.resetting = true;\r\n }, 1500)\r\n }\r\n\r\n const onRefreshrestore = () => {\r\n data.pullingDistance = 0\r\n data.resetting = false;\r\n }\r\n\r\n const testBodyScrollBy = (y: number) => {\r\n data.scrollTop = y\r\n }\r\n\r\n const scrollEnd = (e: UniScrollEvent) => {\r\n data.testScrollTop = e.detail.scrollTop\r\n console.log('testScrollTop:', data.testScrollTop)\r\n }\r\n\r\n onLoad(() => {\r\n setTimeout(() => {\r\n data.swiperList = [\r\n { type: 'list1'},\r\n { type: 'list2'},\r\n { type: 'list3'}\r\n ];\r\n let lists: Array<string> = []\r\n for (let i = 0; i < 30; i++) {\r\n lists.push(\"item---\" + i)\r\n }\r\n data.scrollData = lists\r\n }, 500)\r\n })\r\n\r\n defineExpose({\r\n data,\r\n testBodyScrollBy\r\n })\r\n</script>\r\n\r\n<style>\r\n .scroll-item {\r\n margin-left: 6px;\r\n margin-right: 6px;\r\n margin-top: 6px;\r\n background-color: var(--list-background-color, #fff);\r\n border-radius: 4px;\r\n }\r\n\r\n .scroll-item-title {\r\n width: 100%;\r\n height: 60px;\r\n line-height: 60px;\r\n text-align: center;\r\n color: var(--text-color, #555555);\r\n }\r\n\r\n .scroll-header-tiem {\r\n height: 200px;\r\n background-color: #66ccff;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n</style>\r\n\n```\n:::","children":"### 子组件 @children-tags\n支持所有组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.nested-scroll.nested-scroll-body)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/nested-scroll-body.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=nested-scroll-body&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=nested-scroll-body&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=nested-scroll-body&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=nested-scroll-body&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=nested-scroll-body)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=nested-scroll-body&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"share-element":{"name":"::: sourceCode\n## share-element\n:::","originName":"## share-element","description":"> 组件类型：UniShareElement \n\n 共享元素","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS |\n| :- | :- | :- | :- | :- | :- | :- |\n| <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.51 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.51 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| share-key | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.51\",\"x\",\"4.51\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 映射标记，页面内唯一 |\n| easing-function | string | \"ease-out\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.51\",\"x\",\"4.51\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | `css`缓动函数 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| ease | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.51\",\"x\",\"4.51\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 表示过渡效果开始缓慢，然后逐渐加速，最后减速结束。这是大多数情况下的推荐值，因为它创建了平滑的过渡效果 |\n@| ease-out | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.51\",\"x\",\"4.51\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 过渡开始时较快，然后逐渐减速。这会在过渡末尾创建一个缓慢的效果 |\n@| ease-in | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.51\",\"x\",\"4.51\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 过渡开始时较慢，然后逐渐加速。这会在过渡初期创建一个缓慢的效果 |\n@| ease-in-out | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.51\",\"x\",\"4.51\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 过渡开始时较慢，然后加速，最后减速。这是一个结合了ease-in和ease-out的时间函数，产生平滑的过渡效果 |\n@| linear | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.51\",\"x\",\"4.51\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 过渡效果是线性的，速度保持恒定，没有加速或减速。这会在整个过渡期间保持相同的速度 |\n@| cubic-bezier | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.51\",\"x\",\"4.51\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 用于自定义 CSS 过渡（transition）的时间函数的函数，它允许你精确地定义过渡效果的速度变化 |\n| shuttle-on-push | string | \"to\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"4.51\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 指定 push 阶段的飞跃物 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| from | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"4.51\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | push 阶段采用源页面节点作为飞跃物 |\n@| to | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"4.51\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | push 阶段采用目标页面节点作为飞跃物 |\n| shuttle-on-pop | string | \"to\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"4.51\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 指定 pop 阶段的飞跃物 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| from | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"4.51\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | pop 阶段采用源页面节点作为飞跃物 |\n@| to | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"4.51\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | pop 阶段采用目标页面节点作为飞跃物 |\n| transition-on-gesture | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"4.51\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 手势返回时是否进行动画 |","event":"","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/share-element/share-element.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/share-element/share-element.uvue) \n>\n> 该 API 不支持 Web，请运行 hello uni-app x 到 App 平台体验 \n```uvue\n<template>\r\n <page-head title=\"share-element\"></page-head>\r\n <page-intro content=\"本页演示 share-element 共享元素组件：点击图片打开详情页时的转场共享效果；下方可配置过渡手势、easing、shuttle-on-push/pop 等。\"></page-intro>\r\n <view class=\"main\">\r\n <share-element class=\"share-element\" share-key=\"left\" :shuttle-on-pop=\"shuttleOnPopType\"\r\n :transition-on-gesture=\"transitionOnGesture\" :shuttle-on-push=\"shuttleOnPushType\" :easing-function=\"easingFunctionType\" @tap=\"openPage()\">\r\n <image style=\"width: 100px;height: 150px;\"\r\n src=\"https://web-ext-storage.dcloud.net.cn/hello-uni-app-x/drop-card-1.jpg\">\r\n </image>\r\n </share-element>\r\n </view>\r\n <button type=\"primary\" @click=\"openPage\" class=\"button\">\r\n 打开share-element页面\r\n </button>\r\n\r\n <scroll-view style=\"flex: 1\">\r\n <view class=\"content\">\r\n <boolean-data :defaultValue=\"transitionOnGesture\" title=\"transition-on-gesture= true(仅iOS生效)\"\r\n @change=\"changeTransitionOnGesture\"></boolean-data>\r\n\r\n <text class=\"uni-common-mt choose-property-title\">easing-function:</text>\r\n <radio-group class=\"choose-property-type-radio-group\" @change=\"handleEasingFunction\">\r\n <view class=\"ml-10 uni-common-mt\" v-for=\"item in easingFunctionTypeList\" :key=\"item\">\r\n <radio :value=\"item\" :checked=\"easingFunctionType == item\" />\r\n <text>{{ item }}</text>\r\n </view>\r\n </radio-group>\r\n\r\n <text class=\"uni-common-mt choose-property-title\">shuttle-on-push(仅iOS生效):</text>\r\n <radio-group class=\"choose-property-type-radio-group\" @change=\"handleShuttleOnPushType\">\r\n <view class=\"ml-10 uni-common-mt\" v-for=\"item in shuttleOnTypeList\" :key=\"item\">\r\n <radio :value=\"item\" :checked=\"shuttleOnPushType == item\" />\r\n <text>{{ item }}</text>\r\n </view>\r\n </radio-group>\r\n\r\n <text class=\"uni-common-mt choose-property-title\">shuttle-on-pop(仅iOS生效):</text>\r\n <radio-group class=\"choose-property-type-radio-group\" @change=\"handleShuttleOnPopType\">\r\n <view class=\"ml-10 uni-common-mt\" v-for=\"item in shuttleOnTypeList\" :key=\"item\">\r\n <radio :value=\"item\" :checked=\"shuttleOnPopType == item\" />\r\n <text>{{ item }}</text>\r\n </view>\r\n </radio-group>\r\n\r\n <text class=\"uni-common-mt choose-property-title\">animationType(页面动画降级):</text>\r\n <radio-group class=\"choose-property-type-radio-group\" @change=\"handleOpenAnimationType\">\r\n <view class=\"ml-10 uni-common-mt\" v-for=\"item in openAnimationTypeList\" :key=\"item\">\r\n <radio :value=\"item\" :checked=\"openAnimationType == item\" />\r\n <text>{{ item }}</text>\r\n </view>\r\n </radio-group>\r\n </view>\r\n </scroll-view>\r\n <button @click=\"gotoShareElementWithSwiper\" class=\"button\">\r\n 打开share-element-with-swiper页面\r\n </button>\r\n <view style=\"height: 80px;\"></view>\r\n <share-element class=\"bottomWrap\" share-key=\"bottom\" @tap=\"openPage()\" transitionOnGesture=true>\r\n <view class=\"bottom\">\r\n <text style=\"color: white;\">share-element(底部固定)</text>\r\n </view>\r\n </share-element>\r\n</template>\r\n<script setup lang=\"uts\">\r\n type ShareElementOpenAnimationType =\r\n 'auto' |\r\n 'none' |\r\n 'slide-in-right' |\r\n 'slide-in-left' |\r\n 'slide-in-top' |\r\n 'slide-in-bottom' |\r\n 'fade-in' |\r\n 'pop-in' |\r\n 'zoom-out' |\r\n 'zoom-fade-out'\r\n\r\n type ShareElementEasingFunctionType =\r\n 'ease' |\r\n 'ease-in' |\r\n 'ease-out' |\r\n 'ease-in-out' |\r\n 'linear'\r\n\r\n type ShuttleOnType =\r\n 'from' |\r\n 'to'\r\n\r\n import { ItemType } from '@/components/enum-data/enum-data-types'\r\n\r\n const transitionOnGesture = ref(true)\r\n const shuttleOnPopType = ref('to' as ShuttleOnType)\r\n const shuttleOnPushType = ref('to' as ShuttleOnType)\r\n const shuttleOnTypeList = [\r\n 'from',\r\n 'to'\r\n ]\r\n const openAnimationType = ref('slide-in-right' as ShareElementOpenAnimationType)\r\n const openAnimationTypeList = [\r\n 'auto',\r\n 'none',\r\n 'slide-in-right',\r\n 'slide-in-left',\r\n 'slide-in-top',\r\n 'slide-in-bottom',\r\n 'fade-in',\r\n 'pop-in',\r\n 'zoom-out',\r\n 'zoom-fade-out'\r\n ]\r\n const easingFunctionType = ref('ease' as ShareElementEasingFunctionType)\r\n const easingFunctionTypeList = [\r\n 'ease',\r\n 'ease-in',\r\n 'ease-out',\r\n 'ease-in-out',\r\n 'linear'\r\n ]\r\n\r\n const openPage = () => {\r\n uni.navigateTo({\r\n animationType: openAnimationType.value,\r\n url: \"/pages/component/share-element/share-element-to?shuttleOnPush=\" + shuttleOnPushType.value + \"&transitionOnGesture=\" + transitionOnGesture.value\r\n })\r\n }\r\n\r\n const gotoShareElementWithSwiper = () => {\r\n uni.navigateTo({\r\n url:'/pages/component/share-element/share-element-with-swiper'\r\n })\r\n }\r\n\r\n const changeTransitionOnGesture = (checked : boolean) => {\r\n console.log(`changeTransitionOnGesture:${checked}`)\r\n transitionOnGesture.value = checked\r\n }\r\n\r\n const handleOpenAnimationType = (e : RadioGroupChangeEvent) => {\r\n openAnimationType.value = e.detail.value as ShareElementOpenAnimationType\r\n }\r\n\r\n const handleEasingFunction = (e : RadioGroupChangeEvent) => {\r\n easingFunctionType.value = e.detail.value as ShareElementEasingFunctionType\r\n }\r\n\r\n const handleShuttleOnPopType = (e : RadioGroupChangeEvent) => {\r\n shuttleOnPopType.value = e.detail.value as ShuttleOnType\r\n }\r\n\r\n const handleShuttleOnPushType = (e : RadioGroupChangeEvent) => {\r\n shuttleOnPushType.value = e.detail.value as ShuttleOnType\r\n }\r\n\r\n defineExpose({\r\n transitionOnGesture,\r\n shuttleOnPopType,\r\n shuttleOnPushType,\r\n shuttleOnTypeList,\r\n openAnimationType,\r\n openAnimationTypeList,\r\n easingFunctionType,\r\n easingFunctionTypeList,\r\n openPage,\r\n gotoShareElementWithSwiper,\r\n changeTransitionOnGesture,\r\n handleOpenAnimationType,\r\n handleEasingFunction,\r\n handleShuttleOnPopType,\r\n handleShuttleOnPushType\r\n })\r\n</script>\r\n\r\n<style>\r\n .ml-10 {\r\n margin-left: 10px;\r\n }\r\n\r\n .choose-property-title {\r\n font-weight: bold;\r\n }\r\n\r\n .choose-property-type-radio-group {\r\n flex-direction: row;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .bottomWrap {\r\n width: 100%;\r\n bottom: 0px;\r\n height: 80px;\r\n position: fixed;\r\n }\r\n\r\n .bottom {\r\n width: 100%;\r\n height: 100%;\r\n align-items: center;\r\n justify-content: center;\r\n background-color: #007aff;\r\n }\r\n\r\n .main {\r\n padding: 5px 0;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n</style>\r\n\n```","children":"### 子组件 @children-tags\n支持所有组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.share-element)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=share-element&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=share-element&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=share-element&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=share-element&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=share-element&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=share-element)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=share-element&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"icon":{"name":"::: sourceCode\n## icon\n:::","originName":"## icon","description":"图标","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- | :-: | :- |\n| type | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear |\n@| 合法值 |\n@| :- |\n@| success |\n@| success_no_circle |\n@| warn |\n@| waiting |\n@| cancel |\n@| download |\n@| search |\n@| clear |\n| size | number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | icon的大小，单位px |\n| color | string([string.ColorString](/uts/data-type.md#ide-string)) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | icon的颜色，同css的color |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.basic-content.icon)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/icon.html)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/icon.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=icon&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=icon&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=icon&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=icon&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=icon)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=icon&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"text":{"name":"::: sourceCode\n## text\n:::","originName":"## text","description":"> 组件类型：[UniTextElement](/api/dom/unitextelement.md) \n\n 文本","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | 3.9 | 4.11 | 4.61 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| selectable | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\",\"5.24\"]],\"status\":\"SUPPORTED\"}' /> | 文本是否可选，蒸汽模式（Vapor）推荐使用user-select替换 |\n| space | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"x\",\"4.11\",\"x\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 显示连续空格，App平台蒸汽模式（Vapor）已废弃此属性 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| ensp | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"x\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 中文字符空格一半大小 |\n@| emsp | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"x\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 中文字符空格大小 |\n@| nbsp | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"3.9\",\"4.11\",\"x\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 根据字体设置的空格大小 |\n| decode | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"x\",\"4.11\",\"x\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否解码，App平台蒸汽模式（Vapor）已废弃此属性 |\n| user-select | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"5.11\",\"x\",\"5.11\",\"x\",\"5.24\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 文本是否可选，Web平台该属性会使文本节点显示为 inline-block，App平台弹出\"复制\"菜单 |\n| hover-class | string([string.ClassString](/uts/data-type.md#ide-string)) | \"none\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\",\"5.21\",\"x\",\"5.11\",\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 指定按下去的样式类。当 hover-class=\"none\" 时，没有点击态效果 |\n| hover-stop-propagation | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\",\"5.21\",\"x\",\"5.11\",\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 指定是否阻止本节点的祖先节点出现点击态(祖先节点：指根节点到该节点路径上的所有节点都是这个节点的祖先节点) |\n| hover-start-time | number | 50 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\",\"5.21\",\"x\",\"5.11\",\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 按住后多久出现点击态，单位毫秒 |\n| hover-stay-time | number | 400 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\",\"5.21\",\"x\",\"5.11\",\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 手指松开后点击态保留时间，单位毫秒 |\n| max-lines | number | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\",\"5.21\",\"x\",\"5.11\",\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 文本的最大行数，默认不限制最大行数 |\n| flatten | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\",\"5.21\",\"x\",\"5.11\",\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否拍平组件 |","event":"","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/text/text.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/text/text.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/text/text\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/text/text\n\n>示例\n```vue\n<template>\r\n \r\n <scroll-view class=\"uni-theme-root\" style=\"flex: 1\">\n \r\n <page-head :title=\"title\"></page-head>\r\n <view class=\"text-page uni-padding-wrap uni-common-mt uni-theme-root\">\n \r\n <text class=\"uni-title-text\">单行文本</text>\r\n <view class=\"text-box\">\r\n <text class=\"styled-text single-line\">{{ singleLineText }}</text>\r\n </view>\r\n <text class=\"uni-subtitle-text\">单行文本 - 拍平</text>\r\n <view class=\"text-box\" flatten>\r\n <text class=\"styled-text single-line\" flatten>{{ singleLineText }}</text>\r\n </view>\r\n\r\n \r\n <text class=\"uni-title-text\">多行文本</text>\r\n <view class=\"text-box\">\r\n <text class=\"styled-text\">{{ multiLineText }}</text>\r\n </view>\r\n <text class=\"uni-subtitle-text\">多行文本 - 拍平</text>\r\n <view class=\"text-box\" flatten>\r\n <text class=\"styled-text\" flatten>{{ multiLineText }}</text>\r\n </view>\r\n\r\n <text class=\"uni-title-text\">嵌套的text样式合集</text>\r\n <text class=\"uni-common-mt uni-common-mb\">\r\n <text class=\"styled-text\">text嵌套text的内容：</text>\r\n <text class=\"styled-text\">{{multiLineText}}</text>\r\n </text>\r\n\r\n \r\n <text class=\"uni-title-text\">自定义组件：右边拍平</text>\r\n <view class=\"view-row\">\r\n <child></child>\r\n <child flatten></child>\r\n </view>\r\n\r\n \r\n <text class=\"uni-title-text\">动态文本</text>\r\n <view class=\"dynamic-text-box\">\r\n <text class=\"text\">{{ text }}</text>\r\n </view>\r\n <text class=\"uni-subtitle-text\">动态文本 - 拍平</text>\r\n <view class=\"dynamic-text-box\" flatten>\r\n <text class=\"text\" flatten>{{ text }}</text>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <button class=\"uni-btn\" type=\"primary\" :disabled=\"!canAdd\" @click=\"add\">\r\n add line\r\n </button>\r\n <button class=\"uni-btn\" type=\"warn\" :disabled=\"!canRemove\" @click=\"remove\">\r\n remove line\r\n </button>\r\n <button class=\"uni-btn\" type=\"primary\" @click=\"textProps\">\r\n 更多属性示例\r\n </button>\r\n \r\n <button class=\"uni-btn\" type=\"primary\" @click=\"textWriter\">\r\n 打字机效果示例\r\n </button>\r\n \r\n \r\n <button class=\"uni-btn\" type=\"primary\" @click=\"textLayout\">\r\n 文本测量\r\n </button>\r\n \r\n </view>\r\n \n <navigator url=\"/pages/template/4050/4050\">\n <button class=\"uni-btn uni-common-mb\">组件性能测试</button>\n </navigator>\n \r\n </view>\r\n \r\n </scroll-view>\r\n \r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n import Child from './child.uvue'\r\n const title = ref('text')\r\n\r\n // 单行文本\r\n const singleLineText = ref('单行文本：16px字体、500粗细、斜体、下划线、1px字间距、1.8行高、文本阴影、居中对齐、不换行溢出省略、带边框圆角、内外边距、背景色')\r\n\r\n // 多行文本\r\n const multiLineText = ref('多行文本：字体(16px/500粗细/斜体)、装饰(下划线/阴影)、间距(1px字间距/1.8行高)、对齐(左对齐)、盒模型(边框/圆角/内外边距/背景色)。\\n 第二行：展示自动换行效果及所有CSS样式的渲染表现。')\r\n\r\n // 动态文本测试数据\r\n const texts: string[] = [\r\n 'HBuilderX，轻巧、极速，极客编辑器',\r\n 'uni-app x，终极跨平台方案',\r\n 'uniCloud，js serverless云服务',\r\n 'uts，大一统语言',\r\n 'uniMPSdk，让你的App具备小程序能力',\r\n 'uni-admin，开源、现成的全端管理后台',\r\n 'uni-id，开源、全端的账户中心',\r\n 'uni-pay，开源、云端一体、全平台的支付',\r\n 'uni-ai，聚合ai能力',\r\n 'uni-cms，开源、云端一体、全平台的内容管理平台',\r\n 'uni-im，开源、云端一体、全平台的im即时消息',\r\n 'uni统计，开源、完善、全平台的统计报表',\r\n '......'\r\n ]\r\n const text = ref('')\r\n const canAdd = ref(true)\r\n const canRemove = ref(false)\r\n let extraLine: string[] = []\r\n\r\n const add = () => {\r\n extraLine.push(texts[extraLine.length % 12])\r\n text.value = extraLine.join('\\n')\r\n canAdd.value = extraLine.length < 12\r\n canRemove.value = extraLine.length > 0\r\n }\r\n\r\n const remove = () => {\r\n if (extraLine.length > 0) {\r\n extraLine.pop()\r\n text.value = extraLine.join('\\n')\r\n canAdd.value = extraLine.length < 12\r\n canRemove.value = extraLine.length > 0\r\n }\r\n }\r\n\r\n const textProps = () => {\r\n uni.navigateTo({\r\n url: '/pages/component/text/text-props'\r\n })\r\n }\r\n\r\n const textWriter = () => {\r\n uni.navigateTo({\r\n url: '/pages/component/text/text-writer'\r\n })\r\n }\r\n\r\n const textLayout = () => {\r\n uni.navigateTo({\r\n url: '/pages/component/text/text-layout'\r\n })\r\n }\r\n</script>\r\n\r\n<style>\n .view-row {\n flex-direction: row;\n background-color: var(--list-background-color, #ffffff);\n justify-content: space-around;\r\n }\r\n .text-box {\r\n margin-bottom: 15px;\r\n padding: 10px;\r\n display: flex;\r\n min-height: 60px;\r\n background-color: var(--list-background-color, #ffffff);\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n /* 包含所有文字和排版CSS的综合样式 */\r\n .styled-text {\r\n /* 文字专用CSS */\r\n /* 字体相关 */\r\n font-size: 16px;\r\n font-weight: 500;\r\n font-style: italic;\r\n color: var(--text-color, #1a1a1a);\n /* 行高与字间距 */\r\n line-height: 1.8;\r\n letter-spacing: 1px;\r\n /* 对齐 */\r\n text-align: left;\r\n /* 文字装饰 */\r\n text-decoration-line: underline;\r\n /* 文本阴影 */\r\n text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);\r\n /* 排版CSS */\r\n width: 100%;\r\n margin: 5px 0;\r\n padding: 8px 12px;\r\n border: 1px solid var(--border-color, #e0e0e0);\n border-radius: 4px;\r\n background-color: var(--active-background-color, #f9f9f9);\n }\r\n\r\n /* 单行文本特定样式 */\r\n .single-line {\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n text-align: center;\r\n }\r\n\r\n .dynamic-text-box {\r\n margin-bottom: 15px;\r\n padding: 10px;\r\n display: flex;\r\n min-height: 50px;\r\n background-color: var(--list-background-color, #ffffff);\n border: 1px solid var(--border-color, #dddddd);\n border-radius: 5px;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n .text {\r\n font-size: 14px;\r\n color: var(--text-color, #353535);\n line-height: 22px;\r\n text-align: center;\r\n }\r\n</style>\r\n\n```\n\n:::","children":"### 子组件 @children-tags\n| 子组件 | 兼容性 |\n| :- | :- |\n| [text](text.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.basic-content.text)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/text.html)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/text.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=text&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=text&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=text&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=text&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=text)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=text&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"rich-text":{"name":"::: sourceCode\n## rich-text\n\n> GitCode: https://gitcode.com/dcloud/uni-component/tree/alpha/uni_modules/uni-rich-text\n\n\n> GitHub: https://github.com/dcloudio/uni-component/tree/alpha/uni_modules/uni-rich-text\n\n:::","originName":"## rich-text","description":"> 组件类型：UniRichTextElement \n\n 富文本。可渲染文字样式、图片、超链接。支持部分HTML标签","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | 3.9 | 4.11 | 4.61 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| nodes | any | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 节点列表/HTML String |\n| ~~selectable~~ | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"5.24\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 文本是否可选。已废弃，请使用 user-select |\n| mode | string | \"web\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.71\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 渲染模式 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| web | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.71\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 使用webview渲染 |\n@| native | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"4.71\",\"x\",\"5.21\",\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 使用原生渲染 |\n| space | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>显示连续空格 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| ensp | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 中文字符空格一半大小 |\n@| emsp | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 中文字符空格大小 |\n@| nbsp | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 根据字体设置的空格大小 |\n| user-select | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"5.25\",\"4.41\",\"3.9\",\"5.25\",\"4.11\",\"5.25\",\"4.61\",\"5.25\"]],\"status\":\"SUPPORTED\"}' /> | 文本是否可选，该属性会使节点显示为 block |\n| selection-handle-color | string | \"#4285F4FF\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"5.21\",\"x\",\"5.22\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 选择区域高亮手柄颜色 |\n| selection-background-color | string | \"#33B5E566\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"5.21\",\"x\",\"5.22\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 选择区域高亮背景颜色 |\n| @itemclick | (event: [UniRichTextItemClickEvent](#unirichtextitemclickevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\",\"4.71\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 内容点击事件 |","event":"\n### 事件\n#### UniRichTextItemClickEvent\n\n```mermaid\ngraph LR\n \nUniRichTextItemClickEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniRichTextItemClickEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniRichTextItemClickEventDetail** | 是 |\n@| 名称 | 类型 | 必备 | 描述 |\n@| :- | :- | :- | :- |\n@| src | string | 否 | \\<img/>图片链接 |\n@| href | string | 否 | \\<a/>超链接 |\n\n","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/rich-text/rich-text.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/rich-text/rich-text.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/rich-text/rich-text\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/rich-text/rich-text\n\n>示例\n```vue\n<template>\r\n \r\n <scroll-view class=\"uni-theme-root\" style=\"flex: 1;\">\n \r\n\t\t<view class=\"rich-text-page uni-padding-wrap uni-common-mt uni-theme-root\">\n <navigator url=\"/pages/component/rich-text/rich-text-tags\" class=\"uni-btn-v\">\r\n <button>rich-text渲染单个HTML标签示例</button>\r\n </navigator>\r\n <navigator url=\"/pages/component/rich-text/rich-text-complex\" class=\"uni-btn-v\">\r\n <button>rich-text渲染复杂HTML示例</button>\r\n </navigator>\r\n <navigator url=\"/pages/component/rich-text/rich-text-highlight\" class=\"uni-btn-v\">\r\n <button>rich-text高亮覆盖测试</button>\r\n </navigator>\r\n \n <navigator url=\"/pages/template/long-rich-text/long-rich-text\" class=\"uni-btn-v\">\n <button class=\"uni-btn\">组件性能测试</button>\n </navigator>\n \n\t\t\t<view class=\"uni-title\">\r\n\t\t\t\t<button type=\"default\" @click=\"changeText\">修改文本内容</button>\r\n\t\t\t</view>\r\n\t\t\t<view class=\"uni-title\">\r\n\t\t\t\t<button type=\"default\" @click=\"changeFontSize\">切换 font-size ({{ data.currentFontSize }})</button>\r\n\t\t\t</view>\r\n\t\t\t<view class=\"uni-title\">\r\n\t\t\t\t<button type=\"default\" @click=\"changeColor\">切换 color ({{ data.currentColor }})</button>\r\n\t\t\t</view>\r\n\t\t\t<view class=\"uni-title\">\r\n\t\t\t\t<button type=\"default\" @click=\"changeLineHeight\">切换 line-height ({{ data.currentLineHeight }})</button>\r\n\t\t\t</view>\r\n\t\t\t<view class=\"uni-title\">\r\n\t\t\t\t<button type=\"default\" @click=\"changeFontFamily\">切换 font-family ({{ data.currentFontFamily }})</button>\r\n\t\t\t</view>\r\n\t\t\t<view class=\"text-box\" id=\"rich-text-parent\" @click=\"richTextParentClick\">\r\n\t\t\t\t<rich-text id='rich-text' class=\"rich-text-content\" :style=\"data.richTextStyle\" :nodes=\"data.text\" mode=\"native\">\n\t\t\t\t</rich-text>\r\n\t\t\t\t<view>\r\n\t\t\t\t\t<text class=\"rich-text-label\">rich-text-parent</text>\n\t\t\t\t\t<text id='rich-text-str' class=\"rich-text-label\">{{ data.richTextStr }}</text>\n\t\t\t\t</view>\r\n\t\t\t</view>\r\n\t\t\t<view class=\"uni-title\">\r\n\t\t\t\t<text class=\"uni-subtitle-text\">user-select</text>\r\n\t\t\t</view>\r\n\t\t\t<view class=\"text-box2\">\r\n\t\t\t\t<rich-text id=\"user-select-rich-text\" class=\"rich-text-content\" style=\"height: 80px;\" :user-select=\"data.userSelect\" :nodes=\"data.text\"></rich-text>\n\t\t\t</view>\r\n\t\t</view>\r\n \r\n </scroll-view>\r\n \r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n\ttype DataType = {\r\n\t\ttext : string;\r\n\t\trichTextHeight : number;\r\n\t\trichTextElement : UniElement | null;\r\n\t\trichTextStr : boolean;\r\n\t\trichTextStyle : string;\r\n\t\tcurrentFontSize : string;\r\n\t\tcurrentColor : string;\r\n\t\tcurrentLineHeight : string;\r\n\t\tcurrentFontFamily : string;\r\n\t\tfontSizeIndex : number;\r\n\t\tcolorIndex : number;\r\n\t\tlineHeightIndex : number;\r\n\t\tfontFamilyIndex : number;\r\n\t\tuserSelect : boolean;\r\n\t\tuserSelectRectX : number;\r\n\t\tuserSelectRectY : number;\r\n\t\tuserSelectRectWidth : number;\r\n\t\tuserSelectRectHeight : number;\r\n\t}\r\n\t// 定义各属性的可选值\r\n\tconst fontSizeList : string[] = [\"默认\", \"12px\", \"16px\", \"20px\", \"24px\", \"32px\"]\r\n\tconst colorList : string[] = [\"默认\", \"red\", \"blue\", \"green\", \"#ff9800\", \"#8e44ad\"]\r\n\tconst lineHeightList : string[] = [\"默认\", \"1\", \"1.5\", \"2\", \"2.5\", \"3\"]\r\n\tconst fontFamilyList : string[] = [\"默认\", \"serif\", \"sans-serif\", \"monospace\", \"cursive\"]\r\n\r\n\t// 使用reactive避免ref数据在自动化测试中无法访问\r\n\tconst data = reactive({\r\n\t\ttext: \"<span>hello uni-app x!</span><br/><span>uni-app x，终极跨平台方案</span>\",\r\n\t\trichTextHeight: 0,\r\n\t\trichTextElement: null,\r\n\t\trichTextStr: false,\r\n\t\trichTextStyle: \"border: 1px; border-style: solid; border-color: red;\",\r\n\t\tcurrentFontSize: \"默认\",\r\n\t\tcurrentColor: \"默认\",\r\n\t\tcurrentLineHeight: \"默认\",\r\n\t\tcurrentFontFamily: \"默认\",\r\n\t\tfontSizeIndex: 0,\r\n\t\tcolorIndex: 0,\r\n\t\tlineHeightIndex: 0,\r\n\t\tfontFamilyIndex: 0,\r\n\t\tuserSelect: true,\r\n\t\tuserSelectRectX: 0,\r\n\t\tuserSelectRectY: 0,\r\n\t\tuserSelectRectWidth: 0,\r\n\t\tuserSelectRectHeight: 0\r\n\t} as DataType)\r\n\r\n const onUserSelectChange = (checked: boolean) => {\r\n data.userSelect = checked\r\n }\r\n\r\n\tconst updateRichTextHeight = () => {\r\n\t\tif (data.richTextElement != null) {\r\n\t\t\tdata.richTextElement!.getBoundingClientRectAsync()!.then((elRect : DOMRect) => {\r\n\t\t\t\tdata.richTextHeight = elRect.height\r\n\t\t\t\tconsole.log('richTextHeight:', data.richTextHeight)\r\n\t\t\t})\r\n\t\t}\r\n\t}\r\n\r\n\tonReady(() => {\r\n\r\n\t\tdata.richTextElement = uni.getElementById('rich-text') as UniElement\r\n\t\tconsole.log(\"onReady 加载完成，richTextElement= \", data.richTextElement?.tagName)\r\n\t\tsetTimeout(() => {\r\n\t\t\tupdateRichTextHeight()\r\n\t\t}, 2500)\r\n\t})\r\n\r\n\tconst changeText = () => {\r\n\t\tif (data.text === \"<span>hello uni-app x!</span><br/><span>uni-app x，终极跨平台方案</span>\") {\r\n\t\t\tdata.text = \"<h1>hello uni-app x!</h1><br/><h2>uni-app x，终极跨平台方案</h2>\"\r\n\t\t} else {\r\n\t\t\tdata.text = \"<span>hello uni-app x!</span><br/><span>uni-app x，终极跨平台方案</span>\"\r\n\t\t}\r\n nextTick(() => {\r\n setTimeout(() => {\r\n \tconsole.log(\"修改文本内容: \", data.text)\r\n\r\n \tupdateRichTextHeight()\r\n }, 1000)\r\n })\r\n\t}\r\n\r\n\t// 更新组合样式\r\n\tconst updateRichTextStyle = () => {\r\n\t\tlet style = \"border: 1px; border-style: solid; border-color: red;\"\r\n\t\tif (data.currentFontSize != \"默认\") {\r\n\t\t\tstyle += \" font-size: \" + data.currentFontSize + \";\"\r\n\t\t}\r\n\t\tif (data.currentColor != \"默认\") {\r\n\t\t\tstyle += \" color: \" + data.currentColor + \";\"\r\n\t\t}\r\n\t\tif (data.currentLineHeight != \"默认\") {\r\n\t\t\tstyle += \" line-height: \" + data.currentLineHeight + \";\"\r\n\t\t}\r\n\t\tif (data.currentFontFamily != \"默认\") {\r\n\t\t\tstyle += \" font-family: \" + data.currentFontFamily + \";\"\r\n\t\t}\r\n\t\tdata.richTextStyle = style\r\n\t\tconsole.log(\"更新样式:\", data.richTextStyle)\r\n\t}\r\n\r\n\tconst changeFontSize = () => {\r\n\t\tdata.fontSizeIndex = (data.fontSizeIndex + 1) % fontSizeList.length\r\n\t\tdata.currentFontSize = fontSizeList[data.fontSizeIndex]\r\n\t\tconsole.log(\"切换 font-size:\", data.currentFontSize)\r\n\t\tupdateRichTextStyle()\r\n\t}\r\n\r\n\tconst changeColor = () => {\r\n\t\tdata.colorIndex = (data.colorIndex + 1) % colorList.length\r\n\t\tdata.currentColor = colorList[data.colorIndex]\r\n\t\tconsole.log(\"切换 color:\", data.currentColor)\r\n\t\tupdateRichTextStyle()\r\n\t}\r\n\r\n\tconst changeLineHeight = () => {\r\n\t\tdata.lineHeightIndex = (data.lineHeightIndex + 1) % lineHeightList.length\r\n\t\tdata.currentLineHeight = lineHeightList[data.lineHeightIndex]\r\n\t\tconsole.log(\"切换 line-height:\", data.currentLineHeight)\r\n\t\tupdateRichTextStyle()\r\n\t}\r\n\r\n\tconst changeFontFamily = () => {\r\n\t\tdata.fontFamilyIndex = (data.fontFamilyIndex + 1) % fontFamilyList.length\r\n\t\tdata.currentFontFamily = fontFamilyList[data.fontFamilyIndex]\r\n\t\tconsole.log(\"切换 font-family:\", data.currentFontFamily)\r\n\t\tupdateRichTextStyle()\r\n\t}\r\n\r\n\r\n\tconst getBoundingClientRectForTest = () : DOMRect => {\r\n\t\treturn uni.getElementById('test-rich-text')?.getBoundingClientRect()!;\r\n\t}\r\n\r\n\tconst richTextParentClick = () => {\r\n\t\tdata.richTextStr = true;\r\n\t}\r\n\r\n\tconst testOpenDialogPage = () => {\r\n\t\tuni.openDialogPage({\r\n\t\t\turl: '/pages/API/dialog-page/rich-text-in-dialog-page'\r\n\t\t});\r\n\t}\r\n\r\n\tconst testCloseDialogPage = () => {\r\n\t\tuni.closeDialogPage();\r\n\t}\r\n\r\n\tfunction queryUserSelectRect() {\r\n\t\tconst el = uni.getElementById('user-select-rich-text')\r\n\t\tconst rect = el?.getBoundingClientRect()\r\n\t\tif (rect != null) {\r\n\t\t\tconst windowInfo = uni.getWindowInfo()\r\n\t\t\tconst offsetY = windowInfo.safeAreaInsets.top + 44\r\n\t\t\tdata.userSelectRectX = rect.left\r\n\t\t\tdata.userSelectRectY = rect.top + offsetY\r\n\t\t\tdata.userSelectRectWidth = rect.width\r\n\t\t\tdata.userSelectRectHeight = rect.height\r\n\t\t}\r\n\t}\r\n\r\n\tdefineExpose({\r\n\t\tdata,\r\n\t\tchangeText,\r\n\t\tchangeFontSize,\r\n\t\tchangeColor,\r\n\t\tchangeLineHeight,\r\n\t\tchangeFontFamily,\r\n\t\tgetBoundingClientRectForTest,\r\n\t\ttestOpenDialogPage,\r\n\t\ttestCloseDialogPage,\r\n\t\tqueryUserSelectRect\r\n\t})\r\n</script>\r\n\r\n<style>\n\t.text-box {\n\t\tpadding: 20px 0;\n\t\tbackground-color: #ffffff;\n\t}\n\n\t.text-box2 {\n\t\ttop: 20px;\n\t\tbackground-color: #ffffff;\n\t}\n\n\t.rich-text-label {\n\t\tcolor: #333333;\n\t}\n</style>\r\n\n```\n\n:::","children":"### 子组件 @children-tags\n不可以嵌套组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.basic-content.rich-text)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/rich-text.html)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=rich-text&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=rich-text&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=rich-text&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=rich-text&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=rich-text)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=rich-text&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"progress":{"name":"::: sourceCode\n## progress\n\n> GitCode: https://gitcode.com/dcloud/uni-component/tree/alpha/uni_modules/uni-progress\n\n\n> GitHub: https://github.com/dcloudio/uni-component/tree/alpha/uni_modules/uni-progress\n\n:::","originName":"## progress","description":"> 组件类型：UniProgressElement \n\n 进度条","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | 3.9 | 4.11 | 4.61 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| duration | number | 30 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 进度增加1%所需毫秒数 |\n| percent | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 进度百分比 |\n| show-info | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 是否显示进度条值 |\n| border-radius | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"4.41\",\"3.9\",\"4.11\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 进度条圆角 |\n| font-size | number | 12 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"4.41\",\"3.9\",\"4.11\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 进度条字体大小 |\n| stroke-width | number | 3 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 进度条宽度 |\n| activeColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#09BB07\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 已选择的进度条的颜色 |\n| backgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#EBEBEB\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 未选择的进度条的颜色 |\n| active | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 是否启用动画 |\n| active-mode | string | \"backwards\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 动画模式 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| backwards | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 动画从头播 |\n@| forwards | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 动画从上次结束点接着播 |\n| ~~color~~ | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>进度条颜色（请使用activeColor） |\n| background-color | string | \"#ebebeb\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"5.21\",\"5.11\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 未选择的进度条的颜色 |\n| active-color | string | \"#007aff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"5.21\",\"5.11\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 已选择的进度条的颜色 |\n| @activeend | (event: [UniProgressActiveendEvent](#uniprogressactiveendevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 动画完成事件 |","event":"\n### 事件\n#### UniProgressActiveendEvent\n\n```mermaid\ngraph LR\n \nUniProgressActiveendEvent -- Extends --> UniCustomEvent&ltUniProgressActiveendEventDetail&gt\n style UniCustomEvent&ltUniProgressActiveendEventDetail&gt color:#42b983\n click UniCustomEvent&ltUniProgressActiveendEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniProgressActiveendEventDetail\n\n\n###### UniProgressActiveendEventDetail 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| curPercent | number | 是 |\n\n","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/progress/progress.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/progress/progress.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/progress/progress\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/progress/progress\n\n>示例\n```vue\n<script setup lang=\"uts\">\r\n import { state, setEventCallbackNum } from '@/store/index.uts'\r\n import { ItemType } from '@/components/enum-data/enum-data-types'\r\n\r\n type DataType = {\r\n title: string;\r\n pgList: number[];\r\n curPercent: number;\r\n showInfo: boolean;\r\n borderRadius: number;\r\n fontSize: number;\r\n strokeWidth: number;\r\n backgroundColor: string;\r\n // 组件属性 autotest\r\n active_boolean: boolean;\r\n show_info_boolean: boolean;\r\n duration_input: number;\r\n percent_input: number;\r\n stroke_width_input: number;\r\n activeColor_input: string;\r\n backgroundColor_input: string;\r\n active_mode_enum: ItemType[];\r\n active_mode_enum_current: number;\r\n }\r\n\r\n // 使用reactive包装数据，避免ref数据在自动化测试中无法获取的问题\r\n const data = reactive({\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 // 组件属性 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 } as DataType)\r\n\r\n // 自动化测试\r\n const getEventCallbackNum = () : number => {\r\n return state.eventCallbackNum\r\n }\r\n // 自动化测试\r\n const setEventCallbackNumTest = (num : number) => {\r\n setEventCallbackNum(num)\r\n }\r\n\r\n const setProgress = () => {\r\n data.pgList = [20, 40, 60, 80] as number[]\r\n }\r\n const clearProgress = () => {\r\n data.pgList = [0, 0, 0, 0] as number[]\r\n }\r\n const activeend = (e : UniProgressActiveendEvent) => {\r\n // 自动化测试\r\n if ((e.target?.tagName ?? '').includes('PROGRESS')) {\r\n setEventCallbackNumTest(state.eventCallbackNum + 1)\r\n }\r\n if (e.type === 'activeend') {\r\n setEventCallbackNumTest(state.eventCallbackNum + 2)\r\n }\r\n data.curPercent = e.detail.curPercent\r\n }\r\n const progress_touchstart = () => { console.log(\"手指触摸动作开始\") }\r\n const progress_touchmove = () => { console.log(\"手指触摸后移动\") }\r\n const progress_touchcancel = () => { console.log(\"手指触摸动作被打断，如来电提醒，弹窗\") }\r\n const progress_touchend = () => { console.log(\"手指触摸动作结束\") }\r\n const progress_tap = () => { console.log(\"手指触摸后马上离开\") }\r\n const change_active_boolean = (checked : boolean) => { data.active_boolean = checked }\r\n const change_show_info_boolean = (checked : boolean) => { data.show_info_boolean = checked }\r\n const confirm_duration_input = (value : number) => { data.duration_input = value }\r\n const confirm_percent_input = (value : number) => { data.percent_input = value }\r\n const confirm_stroke_width_input = (value : number) => { data.stroke_width_input = value }\r\n const confirm_activeColor_input = (value : string) => { data.activeColor_input = value }\r\n const confirm_backgroundColor_input = (value : string) => { data.backgroundColor_input = value }\r\n const radio_change_active_mode_enum = (checked : number) => { data.active_mode_enum_current = checked }\r\n\r\n defineExpose({\r\n data,\r\n getEventCallbackNum,\r\n setEventCallbackNumTest,\r\n setProgress,\r\n clearProgress,\r\n })\r\n</script>\r\n\r\n<template>\n <view class=\"main\">\r\n <progress :duration=\"data.duration_input\" :percent=\"data.percent_input\" :show-info=\"data.show_info_boolean\"\r\n :stroke-width=\"data.stroke_width_input\" :activeColor=\"data.activeColor_input\" :backgroundColor=\"data.backgroundColor_input\"\r\n :active=\"data.active_boolean\" :active-mode=\"data.active_mode_enum[data.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 </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=\"data.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=\"data.pgList[0]\" :active=\"true\" :border-radius=\"data.borderRadius\" :show-info=\"data.showInfo\"\r\n :font-size=\"data.fontSize\" :stroke-width=\"data.strokeWidth\" :background-color=\"data.backgroundColor\" class=\"progress p\"\r\n @activeend=\"activeend\" />\r\n </view>\r\n <view class=\"progress-box\">\r\n <progress :percent=\"data.pgList[1]\" :stroke-width=\"3\" class=\"progress p1\" />\r\n </view>\r\n <view class=\"progress-box\">\r\n <progress :percent=\"data.pgList[2]\" :stroke-width=\"3\" class=\"progress p2\" />\r\n </view>\r\n <view class=\"progress-box\">\r\n <progress :percent=\"data.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\r\n \n <navigator class=\"uni-common-mb\" url=\"/pages/template/progress-100/progress-100\">\n <button>组件性能测试</button>\n </navigator>\n \n </scroll-view>\n</template>\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 .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>\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.basic-content.progress)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/progress.html)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/progress.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=progress&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=progress&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=progress&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=progress&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=progress)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=progress&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"loading":{"name":"::: sourceCode\n## loading\n\n> GitCode: https://gitcode.com/dcloud/uni-component/tree/alpha/uni_modules/uni-loading\n\n\n> GitHub: https://github.com/dcloudio/uni-component/tree/alpha/uni_modules/uni-loading\n\n:::","originName":"## loading","description":"加载组件。利用系统GPU进行加速渲染，不受主线程繁忙影响。","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 5.0 | 5.0 | 5.0 | 5.0 | 5.0 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| paused | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"5.0\",\"5.0\",\"5.0\",\"5.0\",\"5.0\"]],\"status\":\"SUPPORTED\"}' /> | 是否暂停动画 |\n| bold | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"5.0\",\"x\",\"5.0\",\"5.0\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否加粗线条 |\n| ios-spinner | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"5.0\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | iOS是否采用系统雪花状样式 |","event":"","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/loading/loading.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/loading/loading.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/loading/loading\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/loading/loading\n\n>示例\n```vue\n<template>\r\n <scroll-view class=\"container uni-theme-root\">\r\n <page-head title=\"loading组件\"></page-head>\r\n <view class=\"section\">\r\n <view class=\"row\">\r\n <view class=\"item\">\r\n <text class=\"label\">默认样式</text>\r\n <loading/>\r\n </view>\r\n <view class=\"item\">\r\n <text class=\"label\">paused为true</text>\r\n <loading paused/>\r\n </view>\r\n <view class=\"item\">\r\n <text class=\"label\">bold为true</text>\r\n <loading bold/>\r\n </view>\r\n <view class=\"item\">\r\n <text class=\"label\">背景圈黑色，前景白色</text>\r\n \r\n <view class=\"loading-background\" style=\"width: 17px;height: 17px;border-radius: 8.5px;border-width: 2px;border-style: solid;align-items: center;justify-content: center;overflow: visible;\">\r\n <loading class=\"loading-inner\" bold />\r\n </view>\r\n \r\n \r\n \r\n <view class=\"loading-background\" style=\"width: 17px;height: 17px;border-radius:50%;align-items: center;justify-content: center;overflow: visible;position: relative;\">\r\n <view class=\"loading-foreground\" style=\"width: 13px;height: 13px;border-radius:50%;position: absolute;\"></view>\r\n <loading class=\"loading-inner\" bold />\r\n </view>\r\n \r\n </view>\r\n </view>\r\n </view>\r\n\r\n \r\n <view class=\"section\">\r\n <text class=\"section-title\">动态 style</text>\r\n <view class=\"controls\">\r\n <button size=\"mini\" @click=\"decreaseSize\">-10px</button>\r\n <button size=\"mini\" @click=\"increaseSize\">+10px</button>\r\n <button size=\"mini\" @click=\"toggleBold\">bold 属性: {{ isBold }}</button>\r\n <button size=\"mini\" @click=\"nextColor\">color style: {{ borderColor }}</button>\r\n <button size=\"mini\" @click=\"setPaused\">paused 属性：{{ paused }}</button>\r\n \r\n <button size=\"mini\" @click=\"setIOSSpinner\">ios-spinner 属性：{{ iosSpinner }}</button>\r\n \r\n <button size=\"mini\" @click=\"reset\">reset</button>\r\n </view>\r\n\r\n <view class=\"row\">\r\n <view class=\"item\">\r\n <text class=\"label\">{{ widthPx }}×{{ heightPx }} / {{ borderColor }} / bold: {{ isBold }} / paused: {{ paused }} / ios-spinner: {{ iosSpinner }}</text>\r\n <view class=\"box\">\r\n <loading :bold=isBold :paused=\"paused\" :ios-spinner=\"iosSpinner\" :style=\"dynamicStyle\" />\r\n </view>\r\n </view>\r\n </view>\r\n </view>\r\n\r\n \r\n <view class=\"section\">\r\n <text class=\"section-title\">Class 自定义样式</text>\r\n <view class=\"row\">\r\n <view class=\"item\">\r\n <text class=\"label\">100×100 / blue / bold=false</text>\r\n <view class=\"box\">\r\n <loading :bold=false class=\"size-100 bc-blue\" />\r\n </view>\r\n </view>\r\n <view class=\"item\">\r\n <text class=\"label\">100×100 / red / bold=true</text>\r\n <view class=\"box\">\r\n <loading :bold=true class=\"size-100 bc-red\" />\r\n </view>\r\n </view>\r\n <view class=\"item\">\r\n <text class=\"label\">80×80 / green / bold=false</text>\r\n <view class=\"box\">\r\n <loading :bold=false class=\"size-80 bc-green\" />\r\n </view>\r\n </view>\r\n <view class=\"item\">\r\n <text class=\"label\">140×140 / yellow / bold=true</text>\r\n <view class=\"box\">\r\n <loading :bold=true class=\"size-140 bc-yellow\" />\r\n </view>\r\n </view>\r\n <view class=\"item\">\r\n <text class=\"label\">140×140 / yellow / bold=true, 默认paused属性=true</text>\r\n <view class=\"box\">\r\n <loading :bold=true :paused=\"true\" class=\"size-140 bc-yellow\" />\r\n </view>\r\n </view>\r\n </view>\r\n </view>\r\n\r\n \r\n <view class=\"section\">\r\n <text class=\"section-title\">Style 自定义样式</text>\r\n <view class=\"row\">\r\n <view class=\"item\">\r\n <text class=\"label\">80×80 / red / bold=true</text>\r\n <view class=\"box\">\r\n <loading :bold=true :style=\"{ width:'80px', height:'80px', borderColor:'red'}\" />\r\n </view>\r\n </view>\r\n\r\n <view class=\"item\">\r\n <text class=\"label\">120×120 / green / bold=false</text>\r\n <view class=\"box\">\r\n <loading :bold=false :style=\"{ width:'120px', height:'120px', borderColor:'green'}\" />\r\n </view>\r\n </view>\r\n </view>\r\n </view>\r\n\r\n \r\n <button class=\"uni-common-mb\" @click=\"navigateTo('/pages/template/loading-100/loading-100')\">组件性能测试</button>\r\n \r\n </scroll-view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst widthPx = ref(100)\r\nconst heightPx = ref(100)\r\nconst borderColor = ref('blue')\r\nconst isBold = ref(false)\r\nconst colors = ['blue', 'red', 'green', 'yellow']\r\nconst colorIndex = ref(0)\r\nconst paused = ref(false)\r\nconst iosSpinner = ref(false)\r\n\r\nconst dynamicStyle = computed(() => {\r\n return {\r\n width: widthPx.value + 'px',\r\n height: heightPx.value + 'px',\r\n borderColor: borderColor.value,\r\n borderWidth: isBold.value ? 'thick' : 'medium'\r\n }\r\n})\r\n\r\nconst increaseSize = () => {\r\n widthPx.value += 10\r\n heightPx.value += 10\r\n}\r\n\r\nconst decreaseSize = () => {\r\n widthPx.value = Math.max(20, widthPx.value - 10)\r\n heightPx.value = Math.max(20, heightPx.value - 10)\r\n}\r\n\r\nconst toggleBold = () => {\r\n isBold.value = !isBold.value\r\n}\r\n\r\nconst nextColor = () => {\r\n colorIndex.value = (colorIndex.value + 1) % colors.length\r\n borderColor.value = colors[colorIndex.value]\r\n}\r\n\r\nconst reset = () => {\r\n widthPx.value = 100\r\n heightPx.value = 100\r\n borderColor.value = 'blue'\r\n isBold.value = false\r\n iosSpinner.value = false\r\n colorIndex.value = 0\r\n paused.value = false\r\n}\r\n\r\nconst setPaused = () => {\r\n paused.value = !paused.value\r\n}\r\n\r\nconst setIOSSpinner = () => {\r\n iosSpinner.value = !iosSpinner.value\r\n}\r\n\r\nconst navigateTo = (url: string) => {\r\n uni.navigateTo({\r\n url\r\n })\r\n}\r\n</script>\r\n\r\n<style>\r\n.container {\r\n flex: 1;\r\n padding: 8px;\r\n}\r\n\r\n.header {\r\n margin-bottom: 16px;\r\n align-items: center;\r\n}\r\n\r\n.title {\r\n font-size: 22px;\r\n font-weight: bold;\r\n color: var(--text-color, #333333);\r\n text-align: center;\r\n}\r\n\r\n.subtitle {\r\n font-size: 14px;\r\n color: var(--active-color, #666666);\r\n margin-top: 6px;\r\n text-align: center;\r\n}\r\n\r\n.section {\r\n margin-bottom: 18px;\r\n background-color: var(--list-background-color, #ffffff);\r\n border-radius: 10px;\r\n padding: 10px;\r\n box-shadow: 0 2px 8px rgba(0,0,0,0.05);\r\n}\r\n\r\n.section-title {\r\n font-size: 16px;\r\n font-weight: bold;\r\n color: var(--text-color, #444444);\r\n margin-bottom: 10px;\r\n text-align: center;\r\n background-color: var(--active-background-color, #f0f0f0);\r\n padding: 6px;\r\n border-radius: 6px;\r\n}\r\n\r\n.row {\r\n flex-direction: row;\r\n flex-wrap: wrap;\r\n justify-content: space-around;\r\n}\r\n\r\n.item {\r\n align-items: center;\r\n margin: 8px 4px;\r\n}\r\n\r\n.label {\r\n font-size: 12px;\r\n color: var(--text-color, #666666);\r\n margin-bottom: 8px;\r\n text-align: center;\r\n}\r\n\r\n.box {\r\n border-style: none;\r\n}\r\n\r\n/* NOTE mp-weixin 类名需要加上父级以提高优先级，否则 class 样式无法生效 */\r\n\r\n/* #ifdef MP */\r\n.item .size-80 { width: 80px; height: 80px; }\r\n.item .size-100 { width: 100px; height: 100px; }\r\n.item .size-140 { width: 140px; height: 140px; }\r\n\r\n.item .bc-blue { border-color: blue; }\r\n.item .bc-red { border-color: red; }\r\n.item .bc-green { border-color: green; }\r\n.item .bc-yellow { border-color: yellow; }\r\n.loading-inner .__uni-loading__ {\r\n border-width: 3px;\r\n}\r\n/* #endif */\r\n\r\n/* #ifndef MP */\r\n.size-80 { width: 80px; height: 80px; }\r\n.size-100 { width: 100px; height: 100px; }\r\n.size-140 { width: 140px; height: 140px; }\r\n\r\n.bc-blue { border-color: blue; }\r\n.bc-red { border-color: red; }\r\n.bc-green { border-color: green; }\r\n.bc-yellow { border-color: yellow; }\r\n/* #endif */\r\n\r\n/* #ifdef APP-HARMONY */\r\n.loading-foreground {\r\n background-color: var(--list-background-color);\r\n}\r\n.loading-background {\r\n background-color: black;\r\n}\r\n/* #endif */\r\n/* #ifndef APP-HARMONY */\r\n.loading-background {\r\n border-color: black;\r\n}\r\n/* #endif */\r\n.loading-inner {\r\n border-color: white;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n /* #ifdef APP-HARMONY */\r\n .loading-background {\r\n background-color: white;\r\n }\r\n /* #endif */\r\n /* #ifndef APP-HARMONY */\r\n .loading-background {\r\n border-color: white;\r\n }\r\n /* #endif */\r\n .loading-inner {\r\n border-color: var(--list-background-color);\r\n }\r\n}\r\n</style>\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.basic-content.loading)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=loading&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=loading&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=loading&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=loading&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=loading&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=loading)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=loading&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"native-view":{"name":"::: sourceCode\n## native-view\n:::","originName":"## native-view","description":"> 组件类型：[UniNativeViewElement](/api/dom/uninativeviewelement.md) \n\n 自定义原生View组件","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.31 | 4.31 | 4.61 |\n","attribute":"### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- | :-: | :- |\n| @init | (event: [UniNativeViewInitEvent](#uninativeviewinitevent)) => void | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.31\",\"4.31\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | native-view初始化时回调，event.detail = { element: 'native-view元素实例对象'} |","event":"\n### 事件\n#### UniNativeViewInitEvent\nnative-view 组件 init事件event\n```mermaid\ngraph LR\n \nUniNativeViewInitEvent -- Extends --> UniCustomEvent&ltUniNativeViewInitEventDetail&gt\n style UniCustomEvent&ltUniNativeViewInitEventDetail&gt color:#42b983\n click UniCustomEvent&ltUniNativeViewInitEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniNativeViewInitEventDetail\n\n\n###### UniNativeViewInitEventDetail 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| element | [UniNativeViewElement](/api/dom/uninativeviewelement.md) | 是 |\n\n","example":"### 示例\n#### native-view\n展示使用 native-view 封装的原生view的UTS插件-标准模式组件\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/native-view/native-view.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/native-view/native-view.uvue) \n>\n> 该 API 不支持 Web，请运行 hello uni-app x 到 App 平台体验 \n\n::: preview\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/native-view/native-view\n```uvue\n<template>\n \n <scroll-view style=\"flex: 1;\">\n \n <page-intro content=\"本页演示 native-view 原生视图与 UTS 插件组件：调用组件方法、native-button 与容器、native-view 样式；可跳转 native-time-picker 等原生能力。\"></page-intro>\n <view style=\"padding-bottom: 50px;\">\n \n <text class=\"tips\">说明：如果本地无 uts 插件编译环境请提交打包自定义基座查看效果</text>\n \n <text>在 uvue 页面中使用 native-button</text>\n <button type=\"primary\" @tap=\"testCallMethod\">调用组件方法</button>\n \n <native-button id=\"helloView\" class=\"native-button\" style=\"width: 200px; height: 100px;\" :text=\"buttonText\" @buttonTap=\"ontap\"\n @load=\"onload\"></native-button>\n <native-button-container></native-button-container>\n \n <button type=\"primary\" @click=\"gotoTimePicker\">调用native-time-picker</button>\n \n\n <text class=\"uni-title-text\">native-view样式（仅支持排版相关样式）</text>\n <view class=\"styled-native-container\">\n <native-view class=\"styled-native-view\"></native-view>\n </view>\n\n <text class=\"uni-title-text\">test-native-view fixed + v-if 复现</text>\n <view class=\"fixed-case-panel\">\n <button id=\"toggle-fixed-test-native-view\" type=\"primary\" @click=\"toggleFixedTestNativeView\">切换 fixed test-native-view</button>\n </view>\n\n <test-native-view v-if=\"showFixedTestNativeView\" id=\"fixed-test-native-view\" class=\"fixed-test-native-view\"></test-native-view>\n </view>\n \n </scroll-view>\n \n</template>\n\n<script setup lang=\"uts\">\nimport { createNativeButtonContext } from \"@/uni_modules/native-button\";\n\nconst buttonText = ref(\"native-button\")\nconst showFixedTestNativeView = ref(true)\nlet isLoad = false\nlet clickCount = 0\nlet buttonTapValue = \"\"\n\nfunction ontap(e : UniNativeViewEvent) {\n uni.showToast({\n title: \"按钮被点击了\"\n })\n clickCount ++\n buttonText.value = \"native-button\"+clickCount\n buttonTapValue = e.detail[\"value\"] as string\n}\n\nfunction onload() {\n //标记已初始化用于自动化测试\n isLoad = true\n}\n\n//用于自动化测试\nfunction getIsLoadTest():boolean {\n return isLoad\n}\n\n//用于自动化测试\nfunction getButtonTapValueTest():string {\n return buttonTapValue\n}\n\nfunction testCallMethod() {\n let context = createNativeButtonContext(\"helloView\")\n context?.updateText(\"test code\")\n}\n\nfunction gotoTimePicker() {\n uni.openDialogPage({\n url: \"/pages/component/native-view/native-view-time-picker-dialog\",\n animationType: \"fade-in\"\n })\n}\n\nfunction toggleFixedTestNativeView() {\n showFixedTestNativeView.value = !showFixedTestNativeView.value\n}\n\ndefineExpose({getIsLoadTest, getButtonTapValueTest, showFixedTestNativeView, toggleFixedTestNativeView})\n\n</script>\n\n<style>\n .tips {\n font-size: 14px;\n color: #BEBEBE;\n margin: 25px auto 25px auto;\n text-align: center;\n }\n\n .native-button {\n height: 100px;\n width: 100px;\n margin: 25px auto 25px auto;\n }\n\n .styled-native-container {\n background-color: cyan;\n align-self: center;\n }\n\n .styled-native-view {\n width: 80px;\n height: 80px;\n margin: 20px 30px;\n }\n\n .fixed-case-panel {\n margin-top: 20px;\n flex-direction: column;\n }\n\n .fixed-test-native-view {\n position: fixed;\n right: 10px;\n bottom: 20px;\n width: 40px;\n height: 40px;\n background-color: #ff0000;\n }\n</style>\n\n```\n:::\n#### native-button\n通过 native-view 绑定原生 button 实现的UTS插件-标准模式组件\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/uni_modules/native-button/components/native-button/native-button.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//uni_modules/native-button/components/native-button/native-button.uvue) \n>\n> 该 API 不支持 Web，请运行 hello uni-app x 到 App 平台体验 \n```uvue\n<template>\r\n \r\n <view>\r\n <native-view style=\"height: 100px;\" @init=\"onviewinit\" @customClick=\"ontap\"></native-view>\r\n <button style=\"width: 50%;margin: 10px 0px;align-self: center;\">测试按钮</button>\r\n </view>\r\n</template>\r\n<script setup lang=\"uts\">\r\n import { NativeButton } from \"@/uni_modules/native-button\";\r\n let button : NativeButton | null = null\r\n\r\n //声明属性\r\n const props = defineProps<{ text : string }>()\r\n\r\n //声明事件\r\n const emit = defineEmits<{\r\n (e : \"load\") : void\r\n (e : \"buttonTap\", event : UniNativeViewEvent) : void\r\n }>()\r\n\r\n //声明方法\r\n function updateText(value : string) {\r\n button?.updateText(value)\r\n }\r\n\r\n //监听属性变化\r\n watchEffect(() => {\r\n const text = props.text\r\n updateText(text)\r\n })\r\n\r\n /**\n * native-view组件初始化时触发\n * 用于绑定App平台原生View\n */\r\n function onviewinit(e : UniNativeViewInitEvent) {\r\n //获取UniNativeViewElement 传递给NativeButton对象\r\n button = new NativeButton(e.detail.element);\r\n updateText(props.text)\r\n emit(\"load\")\r\n }\r\n\n /**\n * 将native-view组件的ontap事件转换为buttonTap事件\n */\r\n function ontap(e : UniNativeViewEvent) {\r\n emit(\"buttonTap\", e)\r\n }\r\n\n /**\n * App平台需要主动释放资源\n */\r\n onUnmounted(() => {\n button?.destroy()\n })\r\n</script>\n\n```","children":"### 子组件 @children-tags\n不可以嵌套组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.basic-content.native-view)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=native-view&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=native-view&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=native-view&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=native-view&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=native-view&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=native-view)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=native-view&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"button":{"name":"::: sourceCode\n## button\n:::","originName":"## button","description":"> 组件类型：UniButtonElement \n\n 按钮","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | 3.9 | 4.11 | 4.61 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| disabled | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 是否禁用 |\n| hover-class | string([string.ClassString](/uts/data-type.md#ide-string)) | \"button-hover\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 指定按下去的样式类。当 hover-class=\"none\" 时，没有点击态效果 |\n| hover-stop-propagation | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"5.21\",\"x\",\"5.11\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 指定是否阻止本节点的祖先节点出现点击态 |\n| hover-start-time | number | 20 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 按住后多久出现点击态，单位毫秒 |\n| hover-stay-time | number | 70 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 手指松开后点击态保留时间，单位毫秒 |\n| size | string | \"default\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 按钮大小 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| default | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 默认大小 |\n@| mini | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 小尺寸 |\n| type | string | \"default\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 按钮类型 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| default | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 白色 |\n@| primary | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 蓝色 |\n@| warn | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 红色 |\n| plain | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 按钮是否镂空，背景色透明 |\n| loading | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"5.21\",\"x\",\"5.11\",\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 名称前是否带 loading 图标 |\n| form-type | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| submit | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 提交表单 |\n@| reset | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 重置表单 |\n| open-type | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.31\",\"4.31\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 开放能力 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| agreePrivacyAuthorization | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.31\",\"4.31\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 用户同意隐私协议按钮。用户点击一次此按钮后，所有已声明过的隐私接口可以正常调用。 |\n@| feedback | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 打开“意见反馈”页面，用户可提交反馈内容并上传日志 |\n@| share | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 触发用户转发 |\n@| getUserInfo | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 获取用户信息，可以从@getuserinfo回调中获取到用户信息 |\n@| contact | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 打开客服会话，如果用户在会话中点击消息卡片后返回应用，可以从 @contact 回调中获得具体信息 |\n@| getPhoneNumber | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 获取用户手机号，可以从@getphonenumber回调中获取到用户信息 |\n@| launchApp | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 打开APP，可以通过app-parameter属性设定向APP传的参数 |\n@| openSetting | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 打开授权设置页 |\n@| chooseAvatar | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 获取用户头像，可以从@chooseavatar回调中获取到头像信息 |\n@| getAuthorize | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 支持小程序授权 |\n@| lifestyle | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 关注生活号 |\n@| contactShare | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 分享到通讯录好友 |\n@| openGroupProfile | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 呼起QQ群资料卡页面，可以通过group-id属性设定需要打开的群资料卡的群号，同时manifest.json中必须配置groupIdList |\n@| openGuildProfile | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 呼起频道页面，可以通过guild-id属性设定需要打开的频道ID |\n@| openPublicProfile | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 打开公众号资料卡，可以通过public-id属性设定需要打开的公众号资料卡的号码，同时manifest.json中必须配置publicIdList |\n@| shareMessageToFriend | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 在自定义开放数据域组件中,向指定好友发起分享 |\n@| addFriend | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 添加好友，对方需要通过该小程序进行授权，允许被加好友后才能调用成功用户授权 |\n@| addColorSign | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 添加彩签，点击后添加状态有用户提示，无回调 |\n@| addGroupApp | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 添加群应用（只有管理员或群主有权操作），添加后给button绑定@addgroupapp事件接收回调数据 |\n@| addToFavorites | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 收藏当前页面，点击按钮后会触发Page.onAddToFavorites方法 |\n@| chooseAddress | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 选择用户收货地址，可以从@chooseaddress回调中获取到用户选择的地址信息 |\n@| chooseInvoiceTitle | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 选择用户发票抬头，可以从@chooseinvoicetitle回调中获取到用户选择发票抬头信息 |\n@| login | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 登录，可以从@login回调中确认是否登录成功 |\n@| subscribe | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 订阅类模板消息，需要用户授权才可发送 |\n@| favorite | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 触发用户收藏 |\n@| watchLater | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 触发用户稍后再看 |\n@| openProfile | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 触发打开用户主页 |\n@| liveActivity | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 通过前端获取[新的一次性订阅消息下发机制](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/subscribe-message-2.html)使用的 code |\n@| getRealtimePhoneNumber | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 手机号实时验证，向用户申请，并在用户同意后，快速填写和实时验证手机号。[具体说明]((getRealtimePhoneNumber)) （*小程序插件中不能使用*） |\n| lang | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| en | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 英文 |\n@| zh_CN | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 简体中文 |\n@| zh_TW | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 繁体中文 |\n| session-from | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 会话来源 |\n| send-message-title | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 会话内消息卡片标题 |\n| send-message-path | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 会话内消息卡片点击跳转应用路径 |\n| send-message-img | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 会话内消息卡片图片 |\n| show-message-card | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 显示会话内消息卡片 |\n| app-parameter | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 打开 APP 时，向 APP 传递的参数 |\n| group-id | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 打开群资料卡时，传递的群号 |\n| guild-id | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 打开频道页面时，传递的频道号 |\n| public-id | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 打开公众号资料卡时，传递的号码 |\n| phone-number-no-quota-toast | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(boolean)*<br/>当手机号快速验证或手机号实时验证额度用尽时，是否对用户展示“申请获取你的手机号，但该功能使用次数已达当前小程序上限，暂时无法使用”的提示，默认展示，open-type=\"getPhoneNumber\" 或 open-type=\"getRealtimePhoneNumber\" 时有效 |\n| createliveactivity | eventhandle | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandle)*<br/>[新的一次性订阅消息下发机制](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/subscribe-message-2.html)回调，open-type=liveActivity时有效 |\n| loading-class | string([string.ClassString](/uts/data-type.md#ide-string)) | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"5.21\",\"5.11\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | loading 图标的类名 |\n| loading-text-class | string([string.ClassString](/uts/data-type.md#ide-string)) | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"5.21\",\"5.21\",\"5.21\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | loading 文案的类名 |\n| ios-loading-snow | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"iOS(Vapor)\"}],\"rows\":[[\"5.11\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | iOS 雪花加载效果 |\n| @getuserinfo | (event: [UniEvent](/component/common.md#unievent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与uni.getUserInfo返回的一致 |\n| @contact | (event: [UniEvent](/component/common.md#unievent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 客服消息回调 |\n| @getphonenumber | (event: [UniEvent](/component/common.md#unievent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 获取用户手机号回调 |\n| @error | (event: [UniEvent](/component/common.md#unievent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 当使用开放能力时，发生错误的回调 |\n| @opensetting | (event: [UniEvent](/component/common.md#unievent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 在打开授权设置页后回调 |\n| @launchapp | (event: [UniEvent](/component/common.md#unievent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 打开 APP 成功的回调 |\n| @chooseavatar | (event: [UniEvent](/component/common.md#unievent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 获取用户头像回调 |\n| @chooseaddress | (event: [UniEvent](/component/common.md#unievent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 调起用户编辑并选择收货地址的回调 |\n| @chooseinvoicetitle | (event: [UniEvent](/component/common.md#unievent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 用户选择发票抬头的回调 |\n| @addgroupapp | (event: [UniEvent](/component/common.md#unievent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 添加群应用的回调 |\n| @subscribe | (event: [UniEvent](/component/common.md#unievent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 订阅消息授权回调 |\n| @login | (event: [UniEvent](/component/common.md#unievent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 登录回调 |\n| @getrealtimephonenumber | eventhandle | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandle)*<br/>手机号实时验证回调，open-type=getRealtimePhoneNumber 时有效。Tips：在触发 bindgetrealtimephonenumber 回调后应立即隐藏手机号按钮组件，或置为 disabled 状态，避免用户重复授权手机号产生额外费用。 |\n| @agreeprivacyauthorization | eventhandle | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandle)*<br/>用户同意隐私协议事件回调，open-type=agreePrivacyAuthorization时有效（Tips: 如果使用 onNeedPrivacyAuthorization 接口，需要在 bindagreeprivacyauthorization 触发后再调用 `resolve({ event: \"agree\", buttonId })`） |","event":"","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/button/button.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/button/button.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/button/button\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/button/button\n\n>示例\n```vue\n<script setup lang=\"uts\">\r\n import { ItemType } from '@/components/enum-data/enum-data-types'\r\n\r\n type DataType = {\r\n plain_boolean: boolean;\r\n disabled_boolean: boolean;\r\n default_style: boolean;\r\n size_enum: ItemType[];\r\n size_enum_current: number;\r\n type_enum: ItemType[];\r\n type_enum_current: number;\r\n count: number;\r\n text: string;\r\n loading: boolean;\r\n }\r\n // 使用reactive避免ref数据在自动化测试中无法访问\r\n const data = reactive({\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\" }],\r\n size_enum_current: 0,\r\n type_enum: [{ \"value\": 0, \"name\": \"default\" }, { \"value\": 1, \"name\": \"primary\" }, { \"value\": 2, \"name\": \"warn\" }],\r\n type_enum_current: 0,\r\n count: 0,\r\n text: '',\r\n loading: false,\r\n } as DataType)\r\n\r\n onReady(() => {\r\n data.text = 'uni-app-x'\r\n })\r\n\r\n const button_click = () => {\r\n console.log(\"组件被点击时触发\")\r\n data.count++\r\n }\r\n\r\n const button_touchstart = () => {\r\n console.log(\"手指触摸动作开始\")\r\n }\r\n\r\n const button_touchmove = () => {\r\n console.log(\"手指触摸后移动\")\r\n }\r\n\r\n const button_touchcancel = () => {\r\n console.log(\"手指触摸动作被打断，如来电提醒，弹窗\")\r\n }\r\n\r\n const button_touchend = () => {\r\n console.log(\"手指触摸动作结束\")\r\n }\r\n\r\n const button_tap = () => {\r\n console.log(\"手指触摸后马上离开\")\r\n }\r\n\r\n const button_longpress = () => {\r\n console.log(\"如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。\")\r\n }\r\n\r\n const change_plain_boolean = (checked: boolean) => {\r\n data.plain_boolean = checked\r\n }\r\n\r\n const change_loading = (checked: boolean) => {\r\n data.loading = checked\r\n }\r\n\r\n const change_disabled_boolean = (checked: boolean) => {\r\n data.disabled_boolean = checked\r\n }\r\n\r\n const change_default_style = (checked: boolean) => {\r\n data.default_style = checked\r\n }\r\n\r\n const radio_change_size_enum = (checked: number) => {\r\n data.size_enum_current = checked\r\n }\r\n\r\n const radio_change_type_enum = (checked: number) => {\r\n data.type_enum_current = checked\r\n }\r\n\r\n const confirm_text_input = (value: string) => {\r\n data.text = value\r\n }\r\n\r\n const navigateToChild = () => {\r\n uni.navigateTo({\r\n url: '/pages/component/button/buttonstatus',\r\n })\r\n }\r\n\r\n const openPrivacyDialog = () => {\r\n uni.openDialogPage({\r\n url: '/pages/component/button/privacy',\r\n })\r\n }\r\n\r\n //用于自动化测试\r\n const 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 defineExpose({\r\n data,\r\n checkUniButtonElement\r\n })\r\n</script>\r\n\r\n<template>\r\n <view class=\"main\">\r\n <button id=\"testButton\" :loading=\"data.loading\" :disabled=\"data.disabled_boolean\"\r\n :size=\"data.size_enum[data.size_enum_current].name\" :type=\"data.type_enum[data.type_enum_current].name\"\r\n :plain=\"data.plain_boolean\" @touchstart=\"button_touchstart\" @touchmove=\"button_touchmove\"\r\n @touchcancel=\"button_touchcancel\" @touchend=\"button_touchend\" @tap=\"button_tap\" @click=\"button_click\"\r\n @longpress=\"button_longpress\" class=\"btn\"\r\n :loading-text-class=\"data.loading ? (data.type_enum[data.type_enum_current].name == 'default' ? 'black-loading-text' : 'white-loading-text') : ''\"\r\n :class=\"data.default_style ? (data.disabled_boolean ? 'custom-btn-disable' : 'custom-btn') : ''\"\r\n :hover-class=\"data.default_style ? 'is-hover' : 'button-hover'\">\r\n {{ data.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 <boolean-data :defaultValue=\"false\" title=\"显示loading（限小程序和蒸汽模式的App）\" @change=\"change_loading\"></boolean-data>\r\n <enum-data :items=\"data.size_enum\" title=\"按钮的大小\" @change=\"radio_change_size_enum\"></enum-data>\r\n <enum-data :items=\"data.type_enum\" title=\"按钮的类型\" @change=\"radio_change_type_enum\"></enum-data>\r\n <input-data :defaultValue=\"data.text\" title=\"按钮的文案\" type=\"text\" @confirm=\"confirm_text_input\"></input-data>\r\n <view style=\"height: 10px;\"></view>\r\n <button @click=\"navigateToChild\">更多button示例</button>\r\n <view style=\"height: 10px;\"></view>\r\n \r\n <button @click=\"openPrivacyDialog\">open-type实现App隐私政策弹框</button>\r\n <view style=\"height: 10px;\"></view>\r\n \r\n </view>\r\n\r\n \n <navigator url=\"/pages/template/button-100/button-100\">\n <button>组件性能测试</button>\n </navigator>\n \n </scroll-view>\n</template>\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 .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\r\n .default-button {\r\n color: #000000;\r\n background-color: #f8f8f8;\r\n border-color: rgba(0, 0, 0, 0.2);\r\n }\r\n\r\n .black-loading-text {\r\n color: #000000\r\n }\r\n\r\n .white-loading-text {\r\n color: #ffffff\r\n }\r\n</style>\r\n\n```\n\n:::","children":"### 子组件 @children-tags\n不可以嵌套组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.button)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/button.html)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=button&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=button&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=button&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=button&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=button)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=button&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"checkbox-group":{"name":"::: sourceCode\n## checkbox-group\n:::","originName":"## checkbox-group","description":"> 组件类型：UniCheckboxGroupElement \n\n 多选框组","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | 3.9 | 4.11 | 4.61 |\n","attribute":"### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- | :-: | :- |\n| name | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| @change | (event: [UniCheckboxGroupChangeEvent](#unicheckboxgroupchangeevent)) => void | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | checkbox-group中选中项发生改变是触发 change 事件，detail = {value:\\[选中的checkbox的value的数组]} |","event":"\n### 事件\n#### UniCheckboxGroupChangeEvent\n\n```mermaid\ngraph LR\n \nUniCheckboxGroupChangeEvent -- Extends --> UniCustomEvent&ltUniCheckboxGroupChangeEventDetail&gt\n style UniCustomEvent&ltUniCheckboxGroupChangeEventDetail&gt color:#42b983\n click UniCustomEvent&ltUniCheckboxGroupChangeEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniCheckboxGroupChangeEventDetail\n\n\n###### UniCheckboxGroupChangeEventDetail 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| value | Array<string> | 是 |\n\n","example":"","children":"### 子组件 @children-tags\n| 子组件 | 兼容性 |\n| :- | :- |\n| [*](*.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.checkbox.checkbox-group)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/checkbox.html)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/checkbox-group.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=checkbox-group&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=checkbox-group&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=checkbox-group&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=checkbox-group&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=checkbox-group)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=checkbox-group&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"checkbox":{"name":"::: sourceCode\n## checkbox\n:::","originName":"## checkbox","description":"> 组件类型：UniCheckboxElement \n\n 多选项。在1组check-group中可选择多个","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | 3.9 | 4.11 | 4.61 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| disabled | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 是否禁用 |\n| value | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| checked | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 当前是否选中，可用来设置默认选中 |\n| ~~color~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | checkbox的颜色 (使用foreColor替代) |\n| backgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | checkbox默认的背景颜色 |\n| borderColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#d1d1d1\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | checkbox默认的边框颜色 |\n| activeBackgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | checkbox选中时的背景颜色 |\n| activeBorderColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#d1d1d1\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | checkbox选中时的边框颜色 |\n| ~~iconColor~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | checkbox的图标颜色，优先级大于color属性 (使用foreColor替代) |\n| foreColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.18\",\"x\",\"4.18\",\"4.18\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | checkbox的图标颜色，优先级大于color属性 |\n| icon-class | string([string.ClassString](/uts/data-type.md#ide-string)) | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"5.21\",\"5.11\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 复选框选中图标的类名 |\n| checkbox-class | string([string.ClassString](/uts/data-type.md#ide-string)) | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"5.21\",\"5.11\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 复选框未选中的类名 |\n| checkbox-active-class | string([string.ClassString](/uts/data-type.md#ide-string)) | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"5.21\",\"5.11\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 复选框选中的类名 |","event":"","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/checkbox/checkbox.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/checkbox/checkbox.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/checkbox/checkbox\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/checkbox/checkbox\n\n>示例\n```vue\n<script setup lang=\"uts\">\r\n type ItemType = {\r\n value: string\r\n name: string\r\n checked: boolean\r\n }\r\n\r\n type DataType = {\r\n items: ItemType[];\r\n testEvent: boolean;\r\n text: string;\r\n wrapText: string;\r\n value: string[];\r\n disabled: boolean;\r\n checked: boolean;\r\n color: string;\r\n iconColor: string;\r\n foreColor: string;\r\n checked_boolean: boolean;\r\n disabled_boolean: boolean;\r\n color_input: string;\r\n backgroundColor_input: string;\r\n borderColor_input: string;\r\n activeBackgroundColor_input: string;\r\n activeBorderColor_input: string;\r\n iconColor_input: string;\r\n foreColor_input: string;\r\n }\r\n // 使用reactive避免ref数据在自动化测试中无法访问\r\n const data = reactive({\r\n items: [\r\n {\r\n value: 'CHN',\r\n name: '中国',\r\n checked: true,\r\n },\r\n {\r\n value: 'USA',\r\n name: '美国',\r\n checked: false,\r\n },\r\n {\r\n value: 'BRA',\r\n name: '巴西',\r\n checked: false,\r\n },\r\n {\r\n value: 'JPN',\r\n name: '日本',\r\n checked: false,\r\n },\r\n {\r\n value: 'ENG',\r\n name: '英国',\r\n checked: false,\r\n },\r\n {\r\n value: 'FRA',\r\n name: '法国',\r\n checked: false,\r\n },\r\n ],\r\n testEvent: false,\r\n text: '未选中',\r\n wrapText: 'uni-app x，终极跨平台方案 uts，大一统语言',\r\n value: [],\r\n disabled: true,\r\n checked: true,\r\n color: '#007aff',\r\n iconColor: '#211cfe',\r\n foreColor: '#ff0000',\r\n // 组件属性 autotest\r\n checked_boolean: false,\r\n disabled_boolean: false,\r\n color_input: \"#007aff\",\r\n backgroundColor_input: \"#ffffff\",\r\n borderColor_input: \"#d1d1d1\",\r\n activeBackgroundColor_input: \"#ffffff\",\r\n activeBorderColor_input: \"#d1d1d1\",\r\n iconColor_input: \"#007aff\",\r\n foreColor_input: '#ff0000'\r\n } as DataType)\r\n\r\n const checkboxChange = (e: UniCheckboxGroupChangeEvent) => {\r\n // 自动化测试\r\n if ((e.target?.tagName ?? '') == 'CHECKBOX-GROUP' && e.type === 'change') {\r\n data.testEvent = true\r\n }\r\n\r\n const selectedNames: string[] = []\r\n data.items.forEach((item) => {\r\n if (e.detail.value.includes(item.value)) {\r\n selectedNames.push(item.name)\r\n }\r\n })\r\n uni.showToast({\r\n icon: 'none',\r\n title: '当前选中:' + selectedNames.join(','),\r\n })\r\n }\r\n\r\n const testChange = (e: UniCheckboxGroupChangeEvent) => {\r\n data.value = e.detail.value\r\n }\r\n\r\n const checkbox_click = () => {\r\n console.log(\"组件被点击时触发\")\r\n }\r\n\r\n const checkbox_touchstart = () => {\r\n console.log(\"手指触摸动作开始\")\r\n }\r\n\r\n const checkbox_touchmove = () => {\r\n console.log(\"手指触摸后移动\")\r\n }\r\n\r\n const checkbox_touchcancel = () => {\r\n console.log(\"手指触摸动作被打断，如来电提醒，弹窗\")\r\n }\r\n\r\n const checkbox_touchend = () => {\r\n console.log(\"手指触摸动作结束\")\r\n }\r\n\r\n const checkbox_tap = () => {\r\n console.log(\"手指触摸后马上离开\")\r\n }\r\n\r\n const checkbox_longpress = () => {\r\n console.log(\"如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。\")\r\n }\r\n\r\n const change_checked_boolean = (checked: boolean) => {\r\n data.checked_boolean = checked\r\n }\r\n\r\n const change_disabled_boolean = (checked: boolean) => {\r\n data.disabled_boolean = checked\r\n }\r\n\r\n const confirm_color_input = (value: string) => {\r\n data.color_input = value\r\n }\r\n\r\n const confirm_backgroundColor_input = (value: string) => {\r\n data.backgroundColor_input = value\r\n }\r\n\r\n const confirm_borderColor_input = (value: string) => {\r\n data.borderColor_input = value\r\n }\r\n\r\n const confirm_activeBackgroundColor_input = (value: string) => {\r\n data.activeBackgroundColor_input = value\r\n }\r\n\r\n const confirm_activeBorderColor_input = (value: string) => {\r\n data.activeBorderColor_input = value\r\n }\r\n\r\n const confirm_iconColor_input = (value: string) => {\r\n data.iconColor_input = value\r\n }\r\n\r\n const confirm_foreColor_input = (value: string) => {\r\n data.foreColor_input = value\r\n }\r\n\r\n defineExpose({\r\n data\r\n })\r\n</script>\r\n\r\n<template>\r\n <view class=\"main\">\r\n <view class=\"control-row\">\r\n <checkbox :disabled=\"data.disabled_boolean\" :checked=\"data.checked_boolean\" :color=\"data.color_input\"\r\n :iconColor=\"data.iconColor_input\" :foreColor=\"data.foreColor_input\" :backgroundColor=\"data.backgroundColor_input\"\r\n :borderColor=\"data.borderColor_input\" :activeBackgroundColor=\"data.activeBackgroundColor_input\"\r\n :activeBorderColor=\"data.activeBorderColor_input\" @click=\"checkbox_click\" @touchstart=\"checkbox_touchstart\"\r\n @touchmove=\"checkbox_touchmove\" @touchcancel=\"checkbox_touchcancel\" @touchend=\"checkbox_touchend\"\r\n @tap=\"checkbox_tap\" @longpress=\"checkbox_longpress\" />\r\n <text class=\"control-row-text\">uni-app-x</text>\r\n </view>\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_checked_boolean\"></boolean-data>\r\n <boolean-data :defaultValue=\"false\" title=\"是否禁用\" @change=\"change_disabled_boolean\"></boolean-data>\r\n </view>\r\n\r\n <view>\r\n <page-head title=\"默认及使用\"></page-head>\r\n <view class=\"uni-padding-wrap uni-common-mt\">\r\n <view class=\"uni-title uni-common-mt\">\r\n <text class=\"uni-title-text\"> 默认样式 </text>\r\n </view>\r\n <view>\r\n <checkbox-group class=\"uni-row checkbox-group\" @change=\"testChange\" style=\"flex-wrap: wrap\">\r\n <view style=\"margin-right: 15px\" class=\"checkbox\">\r\n <checkbox class=\"cb\" value=\"cb\" :checked=\"data.checked\" :color=\"data.color\" :iconColor=\"data.iconColor\"\r\n :foreColor=\"data.foreColor\">选中</checkbox>\r\n </view>\r\n <view style=\"margin-right: 15px\" class=\"checkbox\">\r\n <checkbox class=\"cb1\" value=\"cb1\">{{ data.text }}</checkbox>\r\n </view>\r\n <view class=\"checkbox\">\r\n <checkbox class=\"cb2\" value=\"cb2\" :disabled=\"data.disabled\">禁用</checkbox>\r\n </view>\r\n <view style=\"margin-top: 10px\" class=\"checkbox cb3\">\r\n <checkbox value=\"cb3\" />\r\n <text>{{ data.wrapText }}</text>\r\n </view>\r\n </checkbox-group>\r\n </view>\r\n <view class=\"uni-title uni-common-mt\">\r\n <text class=\"uni-title-text\"> 不同颜色和尺寸的checkbox </text>\r\n </view>\r\n <view>\r\n <checkbox-group class=\"uni-row checkbox-group\">\r\n \r\n <view style=\"transform: scale(0.7); margin-right: 15px\" class=\"checkbox\">\r\n <checkbox value=\"cb1\" :checked=\"true\" color=\"#FFCC33\" />\r\n <text>选中</text>\r\n </view>\r\n <view style=\"transform: scale(0.7)\" class=\"checkbox\">\r\n <checkbox value=\"cb\" color=\"#FFCC33\" />\r\n <text>未选中</text>\r\n </view>\r\n \r\n\r\n \r\n <view style=\"transform: scale(0.7); margin-right: 15px\" class=\"checkbox\">\r\n <checkbox value=\"cb1\" :checked=\"true\" icon-class=\"custom-icon\" />\r\n <text>选中</text>\r\n </view>\r\n <view style=\"transform: scale(0.7)\" class=\"checkbox\">\r\n <checkbox value=\"cb\" icon-class=\"custom-icon\" />\r\n <text>未选中</text>\r\n </view>\r\n \r\n </checkbox-group>\r\n </view>\r\n <view class=\"uni-title uni-common-mt\">\r\n <text class=\"uni-title-text\"> 两端对齐样式测试 </text>\r\n </view>\r\n <view>\r\n <checkbox-group class=\"uni-row checkbox-group\">\r\n <view class=\"justify-test\">\r\n <checkbox />\r\n <text>justify-content样式测试</text>\r\n </view>\r\n </checkbox-group>\r\n </view>\r\n </view>\r\n\r\n \r\n <view class=\"uni-padding-wrap\">\r\n <view class=\"uni-title uni-common-mt\">\r\n <text class=\"uni-title-text\"> 自定义 checkbox </text>\r\n </view>\r\n <checkbox-group class=\"uni-row checkbox-group\">\r\n <checkbox checkbox-class=\"custom-checkbox\" id=\"checkbox-vapor\"> 自定义 checkbox </checkbox>\r\n </checkbox-group>\r\n </view>\r\n \r\n\r\n <view class=\"uni-padding-wrap\">\r\n <view class=\"uni-title uni-common-mt\">\r\n <text class=\"uni-title-text\"> 推荐展示样式 </text>\r\n </view>\r\n </view>\r\n <view class=\"uni-list uni-common-pl\">\r\n <checkbox-group @change=\"checkboxChange\" class=\"checkbox-group\" id=\"trigger-change\">\r\n <view class=\"uni-list-cell uni-list-cell-pd checkbox\" v-for=\"(item, index) in data.items\"\r\n :key=\"item.value\" :class=\"[\r\n index < data.items.length - 1 ? 'uni-list-cell-line' : '',\r\n ]\">\r\n <checkbox :class=\"'checkbox-item-' + index\" :value=\"item.value\" :checked=\"item.checked\" />\r\n <text>{{ item.name }}</text>\r\n </view>\r\n </checkbox-group>\r\n </view>\r\n </view>\r\n\r\n \r\n <view>\r\n <input-data defaultValue=\"#007aff\" title=\"checkbox的颜色\" type=\"text\" @confirm=\"confirm_color_input\"></input-data>\r\n <input-data defaultValue=\"#ffffff\" title=\"checkbox默认的背景颜色\" type=\"text\"\r\n @confirm=\"confirm_backgroundColor_input\"></input-data>\r\n <input-data defaultValue=\"#d1d1d1\" title=\"checkbox默认的边框颜色\" type=\"text\"\r\n @confirm=\"confirm_borderColor_input\"></input-data>\r\n <input-data defaultValue=\"#ffffff\" title=\"checkbox选中时的背景颜色\" type=\"text\"\r\n @confirm=\"confirm_activeBackgroundColor_input\"></input-data>\r\n <input-data defaultValue=\"#d1d1d1\" title=\"checkbox选中时的边框颜色\" type=\"text\"\r\n @confirm=\"confirm_activeBorderColor_input\"></input-data>\r\n <input-data defaultValue=\"#007aff\" title=\"iconColor: checkbox的图标颜色，优先级大于color属性\" type=\"text\"\r\n @confirm=\"confirm_iconColor_input\"></input-data>\r\n <input-data defaultValue=\"#ff0000\" title=\"foreColor: checkbox的图标颜色，优先级大于color属性\" type=\"text\"\r\n @confirm=\"confirm_foreColor_input\"></input-data>\r\n </view>\r\n \r\n\r\n \r\n <navigator class=\"uni-common-mb\" url=\"/pages/template/checkbox-200/checkbox-200\">\r\n <button class=\"uni-common-mt\">组件性能测试</button>\r\n </navigator>\r\n \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 .uni-list-cell {\r\n justify-content: flex-start;\r\n }\r\n\r\n .checkbox,\r\n .control-row {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n }\r\n\r\n .control-row-text {\r\n margin-left: 5px;\r\n }\r\n\r\n .justify-test {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n width: 100%;\r\n justify-content: space-between;\r\n }\r\n\r\n /* #ifdef VUE3-VAPOR && !MP */\r\n .custom-icon {\r\n color: #FFCC33;\r\n }\r\n\r\n .custom-checkbox {\r\n background-color: #e1e1e180;\r\n border-color: #ffffff;\r\n }\r\n /* #endif */\r\n</style>\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.checkbox.checkbox)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/checkbox.html#checkbox)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=checkbox&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=checkbox&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=checkbox&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=checkbox&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=checkbox)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=checkbox&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"form":{"name":"::: sourceCode\n## form\n\n> GitCode: https://gitcode.com/dcloud/uni-component/tree/alpha/uni_modules/uni-form\n\n\n> GitHub: https://github.com/dcloudio/uni-component/tree/alpha/uni_modules/uni-form\n\n:::","originName":"## form","description":"> 组件类型：UniFormElement \n\n 表单","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | 3.97 | 4.11 | 4.61 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| disabled | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.97\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否禁用 |\n| report-submit | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否返回 formId 用于发送模板消息 |\n| report-submit-timeout | number | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(number)*<br/>等待一段时间（毫秒数）以确认 formId 是否生效。如果未指定这个参数，formId 有很小的概率是无效的（如遇到网络失败的情况）。指定这个参数将可以检测 formId 是否有效，以这个参数的时间作为这项检测的超时时间。如果失败，将返回 requestFormId:fail 开头的 formId |\n| @submit | (event: [UniFormSubmitEvent](#uniformsubmitevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.97\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'}} |\n| @reset | (event: [UniFormResetEvent](#uniformresetevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.97\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 表单重置时会触发 reset 事件 |","event":"\n### 事件\n#### UniFormSubmitEvent\n\n```mermaid\ngraph LR\n \nUniFormSubmitEvent -- Extends --> UniCustomEvent&ltUniFormSubmitEventDetail&gt\n style UniCustomEvent&ltUniFormSubmitEventDetail&gt color:#42b983\n click UniCustomEvent&ltUniFormSubmitEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniFormSubmitEventDetail\n\n\n###### UniFormSubmitEventDetail 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| value | [UTSJSONObject](/uts/buildin-object-api/utsjsonobject.md) | 是 |\n\n\n#### UniFormResetEvent\n\n```mermaid\ngraph LR\n \nUniFormResetEvent -- Extends --> UniCustomEvent&ltUniFormResetEventDetail&gt\n style UniCustomEvent&ltUniFormResetEventDetail&gt color:#42b983\n click UniCustomEvent&ltUniFormResetEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/form/form.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/form/form.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/form/form\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/form/form\n\n>示例\n```vue\n<template>\r\n \r\n <scroll-view class=\"scroll-view uni-theme-root\">\r\n \r\n <view class=\"page uni-theme-root\">\r\n <form @submit=\"onFormSubmit\" @reset=\"onFormReset\">\r\n <view class=\"uni-form-item\">\r\n <text class=\"title\">姓名</text>\r\n <input class=\"uni-input form-input\" name=\"nickname\" :value=\"data.nickname\" placeholder=\"请输入姓名\" :maxlength=\"-1\" />\r\n </view>\r\n <view class=\"uni-form-item\">\r\n <text class=\"title\">性别</text>\r\n <radio-group name=\"gender\" class=\"flex-row\">\r\n <view class=\"group-item\">\r\n <radio value=\"0\" :checked=\"data.gender=='0'\" /><text class=\"form-text\">男</text>\r\n </view>\r\n <view class=\"group-item\">\r\n <radio value=\"1\" :checked=\"data.gender=='1'\" /><text class=\"form-text\">女</text>\r\n </view>\r\n </radio-group>\r\n </view>\r\n <view class=\"uni-form-item\">\r\n <text class=\"title\">爱好</text>\r\n <checkbox-group name=\"loves\" class=\"flex-row\">\r\n <view class=\"group-item\">\r\n <checkbox value=\"0\" :checked=\"data.loves.indexOf('0')>-1\" /><text class=\"form-text\">读书</text>\r\n </view>\r\n <view class=\"group-item\">\r\n <checkbox value=\"1\" :checked=\"data.loves.indexOf('1')>-1\" /><text class=\"form-text\">写字</text>\r\n </view>\r\n </checkbox-group>\r\n </view>\r\n <view class=\"uni-form-item\">\r\n <text class=\"title\">年龄</text>\r\n <slider name=\"age\" :value=\"data.age\" :show-value=\"true\"></slider>\r\n </view>\r\n <view class=\"uni-form-item\">\r\n <text class=\"title\">保留选项</text>\r\n <view style=\"display: flex;flex-direction: row;\">\r\n <switch name=\"switch\" :checked=\"data.switch\" />\r\n </view>\r\n </view>\r\n <view class=\"uni-form-item\">\r\n <text class=\"title\">备注</text>\r\n <textarea class=\"comment-textarea\" name=\"comment\" :value=\"data.comment\" placeholder=\"请输入备注\" />\r\n \r\n </view>\r\n \r\n <view class=\"uni-form-item flex-row\">\r\n <text class=\"picker-title\">时区</text>\r\n <picker class=\"picker\" name=\"timeZone\" @change=\"onTimeZoneChange\" :value=\"data.timeZoneIndex\" :range=\"data.timeZoneList\">\r\n <view class=\"uni-picker-select-value pickerValue\">{{data.timeZoneList[data.timeZoneIndex]}}</view>\r\n </picker>\r\n </view>\r\n \r\n <view class=\"uni-form-item flex-row\">\r\n <text class=\"picker-title\">多列选择器</text>\r\n <picker class=\"picker pickerMulti\" name=\"picker-mode-multiSelector\" mode=\"multiSelector\" @columnchange=\"onMultiPickerColumnChange\"\r\n :value=\"data.multiIndex\" :range=\"data.multiArray\">\r\n <view class=\"uni-picker-select-value pickerMultiValue\">\r\n {{data.multiArray[0][data.multiIndex[0]]}}，{{data.multiArray[1][data.multiIndex[1]]}}，{{data.multiArray[2][data.multiIndex[2]]}}\r\n </view>\r\n </picker>\r\n </view>\r\n \r\n <view class=\"uni-form-item flex-row\">\r\n <text class=\"picker-title\">时间选择器</text>\r\n <picker class=\"picker pickerTime\" name=\"picker-mode-time\" mode=\"time\" :value=\"data.timePickerValue\" start=\"09:01\" end=\"21:01\" @change=\"onTimeChange\">\r\n <view class=\"uni-picker-select-value\">{{data.timePickerValue}}</view>\r\n </picker>\r\n </view>\r\n <view class=\"uni-form-item flex-row\">\r\n <text class=\"picker-title\">日期选择器</text>\r\n <picker class=\"picker pickerDate\" name=\"picker-mode-date\" mode=\"date\" :value=\"data.datePickerValue\" :start=\"data.startDate\" :end=\"data.endDate\"\r\n @change=\"onDateChange\">\r\n <view class=\"uni-picker-select-value\">{{data.datePickerValue}}</view>\r\n </picker>\r\n </view>\r\n <view class=\"uni-form-item\">\r\n <text class=\"title\">时间</text>\r\n <picker-view class=\"picker-view\" name=\"time\" :value=\"data.time\" indicator-style=\"height:50px\">\r\n <picker-view-column>\r\n <view class=\"picker-view-item\" v-for=\"(item,index) in data.hours\" :key=\"index\">\r\n <text class=\"picker-view-text\">{{item}}时</text>\r\n </view>\r\n </picker-view-column>\r\n <picker-view-column>\r\n <view class=\"picker-view-item\" v-for=\"(item,index) in data.minutes\" :key=\"index\">\r\n <text class=\"picker-view-text\">{{item}}分</text>\r\n </view>\r\n </picker-view-column>\r\n </picker-view>\r\n </view>\r\n <view class=\"flex-row\">\r\n <button class=\"btn btn-submit\" form-type=\"submit\" type=\"primary\">Submit</button>\r\n <button class=\"btn btn-reset\" type=\"default\" form-type=\"reset\">Reset</button>\r\n </view>\r\n </form>\r\n <view class=\"result\">提交的表单数据</view>\r\n <textarea class=\"textarea\" :value=\"formDataText\" :maxlength=\"-1\" :auto-height=\"true\"></textarea>\r\n </view>\r\n \r\n </scroll-view>\r\n \r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n function getDate(type?: string): string {\r\n const date = new Date();\r\n\r\n let year = date.getFullYear();\r\n let month = date.getMonth() + 1;\r\n let day = date.getDate();\r\n\r\n if (type === 'start') {\r\n year = year - 10;\r\n } else if (type === 'end') {\r\n year = year + 10;\r\n }\r\n\r\n const monthString = month > 9 ? month.toString() : '0' + month;\r\n const dayString = day > 9 ? day.toString() : '0' + day;\r\n\r\n return `${year}-${monthString}-${dayString}`;\r\n }\r\n\r\n type DataType = {\r\n nickname: string;\r\n gender: string;\r\n age: number;\r\n loves: string[];\r\n switch: boolean;\r\n timeZoneIndex: number;\r\n timeZoneList: string[];\r\n multiArray: string[][];\r\n multiIndex: number[];\r\n datePickerValue: string;\r\n startDate: string;\r\n endDate: string;\r\n timePickerValue: string;\r\n time: number[];\r\n hours: string[];\r\n minutes: string[];\r\n comment: string;\r\n formData: UTSJSONObject;\r\n // 仅测试\r\n testVerifySubmit: boolean;\r\n testVerifyReset: boolean;\r\n }\r\n\r\n let hours = new Array<string>()\r\n let minutes = new Array<string>()\r\n for (let i = 1; i <= 24; i++) {\r\n hours.push(i.toString())\r\n }\r\n for (let i = 1; i <= 60; i++) {\r\n minutes.push(i.toString())\r\n }\r\n const date = new Date()\r\n // 使用reactive避免ref数据在自动化测试中无法访问\r\n const data = reactive({\r\n nickname: '',\r\n gender: '0',\r\n age: 18,\r\n loves: ['0'],\r\n switch: true,\r\n timeZoneIndex: 0,\r\n timeZoneList: ['中国', '美国', '巴西', '日本'],\r\n multiArray: [\r\n ['亚洲', '欧洲'],\r\n ['中国', '日本'],\r\n ['北京', '上海', '广州']\r\n ],\r\n multiIndex: [0, 0, 0],\r\n datePickerValue: getDate(null),\r\n startDate: getDate('start'),\r\n endDate: getDate('end'),\r\n timePickerValue: '12:01',\r\n time: [date.getHours() - 1, date.getMinutes() - 1],\r\n hours: hours,\r\n minutes: minutes,\r\n comment: '',\r\n formData: {},\r\n // 仅测试\r\n testVerifySubmit: false,\r\n testVerifyReset: false\r\n } as DataType)\r\n\r\n const formDataText = computed((): string => {\r\n return JSON.stringify(data.formData)\r\n })\r\n\r\n const onTimeZoneChange = (e: UniPickerChangeEvent) => {\r\n data.timeZoneIndex = e.detail.value as number\r\n console.log('时区选择改变，携带值为：' + e.detail.value)\r\n }\r\n\r\n const onMultiPickerColumnChange = (e: UniPickerColumnChangeEvent) => {\r\n console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)\r\n data.multiIndex[e.detail.column] = e.detail.value\r\n switch (e.detail.column) {\r\n case 0: //拖动第1列\r\n switch (data.multiIndex[0]) {\r\n case 0:\r\n data.multiArray[1] = ['中国', '日本']\r\n data.multiArray[2] = ['北京', '上海', '广州']\r\n break\r\n case 1:\r\n data.multiArray[1] = ['英国', '法国']\r\n data.multiArray[2] = ['伦敦', '曼彻斯特']\r\n break\r\n }\r\n data.multiIndex.splice(1, 1, 0)\r\n data.multiIndex.splice(2, 1, 0)\r\n break\r\n case 1: //拖动第2列\r\n switch (data.multiIndex[0]) { //判断第一列是什么\r\n case 0:\r\n switch (data.multiIndex[1]) {\r\n case 0:\r\n data.multiArray[2] = ['北京', '上海', '广州']\r\n break\r\n case 1:\r\n data.multiArray[2] = ['东京', '北海道']\r\n break\r\n }\r\n break\r\n case 1:\r\n switch (data.multiIndex[1]) {\r\n case 0:\r\n data.multiArray[2] = ['伦敦', '曼彻斯特']\r\n break\r\n case 1:\r\n data.multiArray[2] = ['巴黎', '马赛']\r\n break\r\n }\r\n break\r\n }\r\n data.multiIndex.splice(2, 1, 0)\r\n break\r\n }\r\n }\r\n\r\n const onDateChange = (e: UniPickerChangeEvent) => {\r\n data.datePickerValue = e.detail.value as string\r\n }\r\n\r\n const onTimeChange = (e: UniPickerChangeEvent) => {\r\n data.timePickerValue = e.detail.value as string\r\n }\r\n\r\n const onFormSubmit = (e: UniFormSubmitEvent) => {\r\n data.formData = e.detail.value\r\n\r\n // 仅测试\r\n data.testVerifySubmit = (e.type == 'submit' && (e.target?.tagName ?? '') == \"FORM\")\r\n }\r\n\r\n const onFormReset = (e: UniFormResetEvent) => {\r\n data.formData = {}\r\n data.timeZoneIndex = 0\r\n\r\n // 仅测试\r\n data.testVerifyReset = (e.type == 'reset' && (e.target?.tagName ?? '') == \"FORM\")\r\n }\r\n\r\n defineExpose({\r\n data\r\n })\r\n</script>\r\n\r\n<style>\r\n .scroll-view {\r\n flex: 1;\r\n }\r\n\r\n .page {\r\n padding: 15px;\r\n }\r\n\r\n .flex-row {\r\n flex-direction: row;\r\n align-items: center;\r\n }\r\n\r\n .uni-form-item {\r\n padding: 15px 0;\r\n }\r\n\r\n .title {\r\n margin-bottom: 10px;\r\n opacity: 0.8;\r\n color: var(--text-color, #333333);\r\n }\r\n\r\n .picker-title {\r\n opacity: 0.8;\r\n color: var(--text-color, #333333);\r\n }\r\n\r\n .picker {\r\n margin-left: 15px;\r\n }\r\n\r\n .group-item {\r\n flex-direction: row;\r\n margin-right: 20px;\r\n }\r\n\r\n .picker-view {\r\n width: 200px;\r\n height: 320px;\r\n margin-top: 10px;\r\n }\r\n\r\n .picker-view-item {\r\n height: 50px;\r\n }\r\n\r\n .picker-view-text {\r\n line-height: 50px;\r\n text-align: center;\r\n color: var(--text-color, #333333);\r\n }\r\n\r\n .btn {\r\n flex: 1;\r\n }\r\n\r\n .btn-submit {\r\n margin-right: 5px;\r\n }\r\n\r\n .btn-reset {\r\n margin-left: 5px;\r\n }\r\n\r\n .result {\r\n margin-top: 30px;\r\n color: var(--text-color, #333333);\r\n }\r\n\r\n .comment-textarea,\r\n .textarea {\r\n color: #333333;\r\n background-color: #ffffff;\r\n }\r\n\r\n .comment-textarea {\r\n padding: 10px;\r\n }\r\n\r\n .textarea {\r\n margin-top: 5px;\r\n padding: 5px;\r\n }\r\n\r\n .form-input {\r\n color: #333333;\r\n background-color: #ffffff;\r\n }\r\n\r\n .form-text {\r\n color: var(--text-color, #333333);\r\n }\r\n\r\n .uni-picker-select-value {\r\n height: 41px;\r\n padding: 0 13px;\r\n font-size: 14px;\r\n color: var(--text-color, #333333);\r\n background-color: var(--list-background-color,#ffffff);\r\n justify-content: center;\r\n }\r\n\r\n @media (prefers-color-scheme: dark) {\r\n .comment-textarea,\r\n .textarea,\r\n .form-input {\r\n color: #ffffff;\r\n background-color: #2d2d2d;\r\n }\r\n }\r\n</style>\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.form)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/form.html)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/form.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=form&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=form&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=form&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=form&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=form)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=form&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"input":{"name":"::: sourceCode\n## input\n\n> GitCode: https://gitcode.com/dcloud/uni-component/tree/alpha/uni_modules/uni-input\n\n\n> GitHub: https://github.com/dcloudio/uni-component/tree/alpha/uni_modules/uni-input\n\n:::","originName":"## input","description":"> 组件类型：[UniInputElement](/api/dom/uniinputelement.md) \n\n 输入框","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | 3.9 | 4.11 | 4.61 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | \"input\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| disabled | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 是否禁用 |\n| value | string \\| number | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 输入框的初始内容 |\n| type | string | \"text\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | input的类型 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"5.0\",\"x\",\"4.73\",\"4.73\",\"5.08\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 获取焦点时不显示软键盘 |\n@| email | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"5.0\",\"x\",\"4.73\",\"4.73\",\"4.73\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 为邮件地址输入优化的虚拟键盘 |\n@| url | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"5.0\",\"x\",\"4.73\",\"4.73\",\"4.73\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 为网址输入优化的虚拟键盘 |\n@| text | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 文本输入键盘 |\n@| number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 数字输入键盘 |\n@| idcard | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 身份证输入键盘 |\n@| digit | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 带小数点数字输入键盘 |\n@| tel | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 电话输入键盘 |\n@| safe-password | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 密码安全输入键盘 |\n@| nickname | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 昵称输入键盘 |\n| password | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 是否是密码类型 |\n| placeholder | string | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 输入框为空时占位符 |\n| placeholder-style | string | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 指定 placeholder 的样式 |\n| placeholder-class | string([string.ClassString](/uts/data-type.md#ide-string)) | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 指定 placeholder 的样式类 |\n| maxlength | string \\| number | -1 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 最大输入长度，0和正数为合法值，非法值的时候不限制最大长度 |\n| cursor-spacing | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"3.9\",\"4.11\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 |\n| cursor-color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.99\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 指定光标颜色 |\n| auto-focus | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 自动获取焦点，与`focus`属性对比，此属性只会首次生效。 |\n| focus | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 获取焦点 |\n| confirm-type | string | \"done\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 设置键盘右下角按钮的文字，仅在 type为text 时生效。 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| send | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 发送 |\n@| search | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 搜索 |\n@| next | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 下一个 |\n@| go | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 前往 |\n@| done | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 完成 |\n| confirm-hold | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 点击键盘右下角按钮时是否保持键盘不收起 |\n| cursor | number | -1 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 指定focus时的光标位置 |\n| selection-start | number | -1 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 光标起始位置，自动聚集时有效，需与selection-end搭配使用 |\n| selection-end | number | -1 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 光标结束位置，自动聚集时有效，需与selection-start搭配使用 |\n| adjust-position | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 键盘弹起时，是否自动上推页面 |\n| ~~inputmode~~ | none \\| text \\| decimal \\| numeric \\| tel \\| search \\| email \\| url | \"text\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。在符合条件的高版本webview里，uni-app的 web 和 app-vue 平台中可使用本属性。(自 5.0+ 废弃，推荐使用 type，同时配置以 inputmode 为准) |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用。 |\n@| text | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 使用用户本地区域设置的标准文本输入键盘。 |\n@| decimal | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 小数输入键盘，包含数字和分隔符（通常是“ . ”或者“ , ”），设备可能也可能不显示减号键。 |\n@| numeric | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 数字输入键盘，所需要的就是 0 到 9 的数字，设备可能也可能不显示减号键。 |\n@| tel | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 电话输入键盘，包含 0 到 9 的数字、星号（*）和井号（#）键。表单输入里面的电话输入通常应该使用 \\<input type=\"tel\"\\> 。 |\n@| search | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 为搜索输入优化的虚拟键盘，比如，返回键可能被重新标记为“搜索”，也可能还有其他的优化。 |\n@| email | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 为邮件地址输入优化的虚拟键盘，通常包含\"@\"符号和其他优化。表单里面的邮件地址输入应该使用 \\<input type=\"email\"\\> 。 |\n@| url | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 为网址输入优化的虚拟键盘，比如，“/”键会更加明显、历史记录访问等。表单里面的网址输入通常应该使用 \\<input type=\"url\"\\> 。 |\n| text-content-type | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"NOT_SUPPORTED\"}' /> | 文本区域的语义，根据类型自动填充 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| oneTimeCode | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 一次性验证码 |\n| hold-keyboard | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | focus时，点击页面的时候不收起键盘 |\n| safe-password-cert-path | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 安全键盘加密公钥的路径，只支持包内路径 |\n| safe-password-length | number | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 安全键盘输入密码长度 |\n| safe-password-time-stamp | number | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 安全键盘加密时间戳 |\n| safe-password-nonce | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 安全键盘加密盐值 |\n| safe-password-salt | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 安全键盘计算 hash 盐值，若指定custom-hash 则无效 |\n| safe-password-custom-hash | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 安全键盘计算 hash 的算法表达式 |\n| random-number | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"NOT_SUPPORTED\"}' /> | 当 type 为 number, digit, idcard 数字键盘是否随机排列 |\n| controlled | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"NOT_SUPPORTED\"}' /> | 是否为受控组件。为 true 时，value 内容会完全受 setData 控制 |\n| always-system | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"NOT_SUPPORTED\"}' /> | 是否强制使用系统键盘和 Web-view 创建的 input 元素。为 true 时，confirm-type、confirm-hold 可能失效 |\n| always-embed | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) |\n| @input | (event: [UniInputEvent](#uniinputevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 当键盘输入时，触发input事件，event.detail = {value, cursor}，处理函数可以直接 return 一个字符串，将替换输入框的内容。 |\n| @focus | (event: [UniInputFocusEvent](#uniinputfocusevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度 |\n| @blur | (event: [UniInputBlurEvent](#uniinputblurevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 输入框失去焦点时触发，event.detail = {value: value} |\n| @keyboardheightchange | (event: [UniInputKeyboardHeightChangeEvent](#uniinputkeyboardheightchangeevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration} |\n| @change | (event: [UniInputChangeEvent](#uniinputchangeevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.73\",\"4.73\",\"4.73\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 非聚焦状态内容改变时触发（仅组件失去焦点时且用户输入改变内容才触发），event.detail = {value: value} |\n| @confirm | (event: [UniInputConfirmEvent](#uniinputconfirmevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 点击完成按钮时触发，event.detail = {value: value} |\n| @nicknamereview | eventhandle | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandle)*<br/>用户昵称审核完毕后触发，仅在 type 为 \"nickname\" 时有效，event.detail = { pass, timeout } |\n| @update:value | Event | | | |","event":"\n### 事件\n#### UniInputEvent\n\n```mermaid\ngraph LR\n \nUniInputEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniInputEventDetail** | 是 |\n@| 名称 | 类型 | 必备 | 描述 |\n@| :- | :- | :- | :- |\n@| value | string | 是 | 输入框内容 |\n@| cursor | number | 是 | 光标的位置 |\n@| keyCode | number | 是 | 输入字符的Unicode值 |\n\n\n#### UniInputFocusEvent\n\n```mermaid\ngraph LR\n \nUniInputFocusEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputFocusEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniInputFocusEventDetail** | 是 |\n@| 名称 | 类型 | 必备 | 兼容性 | 描述 |\n@| :- | :- | :- | :-: | :- |\n@| height | number | 是 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 键盘高度 |\n@| value | string | 是 | | 输入框内容 |\n\n\n#### UniInputBlurEvent\n\n```mermaid\ngraph LR\n \nUniInputBlurEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputBlurEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniInputBlurEventDetail** | 是 |\n@| 名称 | 类型 | 必备 | 描述 |\n@| :- | :- | :- | :- |\n@| value | string | 是 | 输入框内容 |\n@| cursor | number | 是 | 选择区域的起始位置 |\n\n\n#### UniInputKeyboardHeightChangeEvent\n\n```mermaid\ngraph LR\n \nUniInputKeyboardHeightChangeEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputKeyboardHeightChangeEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniInputKeyboardHeightChangeEventDetail** | 是 |\n@| 名称 | 类型 | 必备 | 描述 |\n@| :- | :- | :- | :- |\n@| height | number | 是 | 键盘高度 |\n@| duration | number | 是 | 持续时间 |\n\n\n#### UniInputChangeEvent\n\n```mermaid\ngraph LR\n \nUniInputChangeEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputChangeEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniInputChangeEventDetail** | 是 |\n@| 名称 | 类型 | 必备 | 描述 |\n@| :- | :- | :- | :- |\n@| value | string | 是 | 输入框内容 |\n\n\n#### UniInputConfirmEvent\n\n```mermaid\ngraph LR\n \nUniInputConfirmEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputConfirmEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniInputConfirmEventDetail** | 是 |\n@| 名称 | 类型 | 必备 | 描述 |\n@| :- | :- | :- | :- |\n@| value | string | 是 | 输入框内容 |\n\n","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/input/input.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/input/input.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/input/input\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/input/input\n\n>示例\n```vue\n<template>\r\n \r\n <scroll-view class=\"uni-theme-root\" style=\"flex: 1\">\r\n \r\n <page-head :title=\"data.title\"></page-head>\r\n <view class=\"input-page uni-common-mt uni-padding-wrap uni-theme-root\" style=\"padding-bottom: 30px;\">\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">设置输入框的初始内容</text>\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input id=\"uni-input-default\" :focus=\"data.firstInputFocus\" class=\"uni-input\" value=\"hello uni-app x\" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">type取值（不同输入法表现可能不一致）</text>\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input id=\"uni-input-type-text\" class=\"uni-input\" type=\"text\" placeholder=\"文本输入键盘\" />\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input id=\"uni-input-type-number\" class=\"uni-input\" type=\"number\" placeholder=\"数字输入键盘\" />\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input id=\"uni-input-type-number-password-false\" class=\"uni-input\" type=\"number\" :password=\"false\"\r\n :focus=\"data.numberPasswordFalseFocus\" placeholder=\"type=number password=false\" />\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input id=\"uni-input-type-digit\" class=\"uni-input\" type=\"digit\" placeholder=\"带小数点的数字输入键盘\" />\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input id=\"uni-input-type-tel\" class=\"uni-input\" :type=\"data.inputTypeTel\" placeholder=\"电话输入键盘\" />\r\n </view>\r\n \r\n <view class=\"input-wrapper\">\r\n <input id=\"uni-input-type-search\" class=\"uni-input\" type=\"search\" placeholder=\"搜索输入键盘\" />\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input id=\"uni-input-type-email\" class=\"uni-input\" type=\"email\" placeholder=\"邮箱输入键盘\" />\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input id=\"uni-input-type-url\" class=\"uni-input\" type=\"url\" placeholder=\"url输入键盘\" />\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input id=\"uni-input-type-none\" class=\"uni-input\" type=\"none\" :focus=\"data.typeNoneFocus\" placeholder=\"聚焦但不弹出键盘\" />\r\n </view>\r\n \r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">密码输入框</text>\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input id=\"uni-input-password\" class=\"uni-input\" :password=\"data.inputPassword\" type=\"text\" :value=\"data.inputPasswordValue\" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">无value设置的密码输入框</text>\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input class=\"uni-input\" :password=\"true\" type=\"text\" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">占位符样式</text>\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input id=\"uni-input-placeholder1\" class=\"uni-input\" :placeholder-style=\"data.inputPlaceHolderStyle\"\r\n placeholder=\"占位符文字颜色为红色\" />\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input id=\"uni-input-placeholder-class-dynamic\" class=\"uni-input\" :placeholder-class=\"data.inputPlaceHolderClass\"\r\n :placeholder=\"`占位符字体大小为${data.inputPlaceHolderClass == '' ? '15px' : '10px'}`\" />\r\n </view>\r\n <button @click=\"togglePlaceholderClass\">切换 placeholder-class</button>\r\n <view class=\"input-wrapper\">\r\n <input class=\"uni-input\" placeholder=\"占位符字体大小为15px\" />\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input id=\"uni-input-placeholder3\" class=\"uni-input\" placeholder-class=\"\"\r\n placeholder=\"placeholder-class 传入空字符串\" />\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input class=\"uni-input\" :placeholder-style=\"data.inputPlaceHolderStyle\"\r\n value=\"不设置placeholder只设置placeholder-style\" />\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input id=\"uni-input-placeholder-align\" style=\"font-family: AlimamaDaoLiTiOTF;font-weight: bold;text-align: right;\" class=\"uni-input\" :placeholder-style=\"data.placeholderStyle\"\r\n placeholder=\"占位符以及内容右对齐\" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">设置禁用输入框</text>\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input id=\"uni-input-disable\" class=\"uni-input\" :disabled=\"true\" value=\"禁用状态 input\" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">设置最大输入长度</text>\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input id=\"uni-input-maxlength\" class=\"uni-input\" :maxlength=\"10\" placeholder=\"最大输入长度为10\"\r\n :value=\"data.inputMaxLengthValue\" @input=\"onMaxLengthInput\" :focus=\"data.inputMaxLengthFocus\" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">设置光标与键盘的距离</text>\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input class=\"uni-input\" :cursor-spacing=\"1000\" placeholder=\"光标与键盘的距离为1000px\" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">自动获取焦点</text>\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input id=\"uni-input-focus\" class=\"uni-input\" :focus=\"data.focus\" value=\"焦点应在文本末尾\"\r\n @keyboardheightchange=\"inputFocusKeyBoardChange\" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">confirm-type取值（不同输入法表现可能不一致）</text>\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input id=\"uni-input-confirm-send\" class=\"uni-input\" confirmType=\"send\" placeholder=\"键盘右下角按钮显示为发送\" />\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input id=\"uni-input-confirm-search\" class=\"uni-input\" confirmType=\"search\" placeholder=\"键盘右下角按钮显示为搜索\" />\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input id=\"uni-input-confirm-next\" class=\"uni-input\" confirmType=\"next\" placeholder=\"键盘右下角按钮显示为下一个\" />\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input id=\"uni-input-confirm-go\" class=\"uni-input\" confirmType=\"go\" placeholder=\"键盘右下角按钮显示为前往\" />\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input id=\"uni-input-confirm-done\" class=\"uni-input\" confirmType=\"done\" placeholder=\"键盘右下角按钮显示为完成\" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">点击键盘右下角按钮时保持键盘不收起</text>\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input class=\"uni-input\" :confirm-hold=\"true\" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\" @click=\"setCursor(4)\">\r\n <text class=\"uni-title-text\">设置输入框聚焦时光标的位置（点这里）</text>\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input ref=\"input\" class=\"uni-input\" value=\"0123456789\" :focus=\"data.cursorInputFocus\" :cursor=\"data.cursor\" @blur=\"onCursorBlurChange\" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\" @click=\"setSelection(0, 4)\">\r\n <text class=\"uni-title-text\">设置输入框聚焦时光标的起始位置和结束位置（点这里）</text>\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input ref=\"input2\" class=\"uni-input\" value=\"0123456789\" :selection-start=\"data.selectionStart\"\r\n :selection-end=\"data.selectionEnd\" :focus=\"data.selectionInputFocus\" @blur=\"onSelectionBlurChange\" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\" style=\"flex-direction: row; align-items: center\">\r\n <text class=\"uni-title-text\" style=\"flex-shrink: 1;\">设置光标颜色为红色（Android的微信小程序非skyline下仅支持黑和绿）</text>\r\n <switch style=\"margin-left: 10px\" @change=\"changeCursorColor\" :checked=\"data.cursor_color == '#FF0000'\"></switch>\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input id=\"uni-input-cursor-color\" class=\"uni-input\" :cursor-color=\"data.cursor_color\" :focus=\"data.cursorColorInputFocus\" @blur=\"cursorColorInputBlur\" value=\"光标颜色\" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">键盘弹起时，自动上推页面</text>\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input class=\"uni-input\" :adjust-position=\"true\" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\" style=\"flex-direction: row; align-items: center\">\r\n <text class=\"uni-title-text\" style=\"flex-shrink: 1;\">设置hold-keyboard</text>\r\n <switch style=\"margin-left: 10px\" @change=\"changeHoldKeyboard\" :checked=\"data.holdKeyboard\"></switch>\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input class=\"uni-input\" :hold-keyboard=\"data.holdKeyboard\" value=\"hold keyboard \" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">通过 style 设置 padding</text>\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input class=\"uni-input\" style=\"height: 60px;padding: 20px;\" value=\"style padding:20px\" placeholder=\"style padding:20px\"></input>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">input事件</text>\r\n <text class=\"uni-subtitle-text\" v-if=\"data.inputEventDetail\">{{\r\n data.inputEventDetail\r\n }}</text>\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input class=\"uni-input\" @input=\"onInput\" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\" @click=\"triggerFocusOrBlur\">点击触发focus事件或blur事件</text>\r\n <text class=\"uni-subtitle-text\" v-if=\"data.focusAndBlurEventDetail\">{{\r\n data.focusAndBlurEventDetail\r\n }}</text>\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input id=\"trigger-focus-blur-input\" class=\"uni-input\" @focus=\"onFocus\" @blur=\"onBlur\" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">confirm事件</text>\r\n <text class=\"uni-subtitle-text\" v-if=\"data.confirmEventDetail\">{{\r\n data.confirmEventDetail\r\n }}</text>\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input class=\"uni-input\" @confirm=\"onConfirm\" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">change事件</text>\r\n <text class=\"uni-subtitle-text\" v-if=\"data.changeEventDetail\">{{\r\n data.changeEventDetail\r\n }}</text>\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input class=\"uni-input\" @change=\"onChange\" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">带清除按钮的输入框</text>\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input class=\"uni-input\" placeholder=\"带清除按钮的输入框\" :value=\"data.inputClearValue\" @input=\"clearInput\" />\r\n <image class=\"uni-icon\" src=\"/static/icons/clear.png\" v-if=\"data.showClearIcon\" @click=\"clearIcon\">\r\n </image>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">可查看密码的输入框</text>\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input class=\"uni-input\" placeholder=\"请输入密码\" :password=\"data.showPassword\" />\r\n <image class=\"uni-icon\" :src=\"\r\n !data.showPassword\r\n ? '/static/icons/eye-active.png'\r\n : '/static/icons/eye.png'\r\n \" @click=\"changePassword\"></image>\r\n </view>\r\n </view>\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">同时存在 v-model 和 value</text>\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input id=\"both-model-value\" class=\"uni-input\" v-model=\"data.demoValue\" value=\"456\" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">同时存在 v-model 和 change事件</text>\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input class=\"uni-input\" v-model=\"data.demoValue2\" value=\"123\" @change=\"onChange\" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\" style=\"flex-direction: row; align-items: center\">\r\n <text class=\"uni-title-text\" style=\"flex-shrink: 1;\">设置adjust-position</text>\r\n <switch style=\"margin-left: 10px\" @change=\"changeAdjustPosition\" :checked=\"data.adjustPosition\"></switch>\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input class=\"uni-input\" :adjust-position=\"data.adjustPosition\" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">输入内容的同步更新UI</text>\r\n </view>\r\n <text>{{data.syncDisplayValue}}</text>\r\n <view class=\"input-wrapper\">\r\n <input class=\"uni-input\" v-model=\"data.syncDisplayValue\"/>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">maxlength初始化生效</text>\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input class=\"uni-input\" :maxlength=\"5\" value=\"123456789\"/>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">focus时type是none，键盘是否弹出</text>\r\n <boolean-data :defaultValue=\"false\" title=\"显示<input />示例\" @change=\"changeCheckedTypeNoneAndFocusCase\"></boolean-data>\r\n </view>\r\n <view v-if=\"data.showTypeNoneAndFocusCase\" class=\"input-wrapper\">\r\n <input class=\"uni-input\" focus=\"true\" type=\"none\"/>\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">style 设置 font-size:20px</text>\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input class=\"uni-input\" style=\"font-size:20px\" placeholder=\"placeholder\" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">style 设置 font-size:20px</text>\r\n <text class=\"uni-title-text\">placeholder-class 设置 30px</text>\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input class=\"uni-input\" style=\"font-size:20px\" placeholder-class=\"placeholder-class\" placeholder=\"placeholder\" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">style 设置 font-size:20px</text>\r\n <text class=\"uni-title-text\">placeholder-class 设置 30px</text>\r\n <text class=\"uni-title-text\">placeholder-style 设置 40px</text>\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input class=\"uni-input\" style=\"font-size:20px\" placeholder-class=\"placeholder-class\" placeholder-style=\"font-size:40px\" placeholder=\"placeholder\" />\r\n </view>\r\n </view>\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">style 设置 font-size:36rpx</text>\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input class=\"uni-input\" style=\"font-size:36rpx\" placeholder=\"placeholder 36rpx\" />\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input class=\"uni-input\" style=\"font-size:36rpx\" value=\"value 36rpx\" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">height:32px 时内容垂直居中</text>\r\n </view>\r\n <view class=\"input-vertical-center-wrapper\">\r\n <view class=\"input-vertical-center-line\"></view>\r\n <input id=\"uni-input-vertical-center-placeholder\" class=\"input-vertical-center\" placeholder=\"placeholder\" />\r\n </view>\r\n <view class=\"input-vertical-center-wrapper\">\r\n <view class=\"input-vertical-center-line\"></view>\r\n <input id=\"uni-input-vertical-center-value\" class=\"input-vertical-center\" value=\"value\" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">direction: rtl</text>\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input id=\"uni-input-direction-rtl\" class=\"uni-input\" style=\"direction: rtl\" placeholder=\"direction: rtl\" value=\"hello مرحبا\" />\r\n </view>\r\n </view>\r\n\r\n \r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">keyboardheightchange事件</text>\r\n <text class=\"uni-subtitle-text\"\r\n v-if=\"data.keyboardHeightChangeEventDetail\">{{ data.keyboardHeightChangeEventDetail }}</text>\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input id=\"keyboard-adjust-default-input\" class=\"uni-input\" @focus=\"onKeyboardAdjustDefaultFocus\"\r\n @blur=\"onKeyboardAdjustDefaultBlur\"\r\n @keyboardheightchange=\"onKeyboardHeightChange\"\r\n :focus=\"data.focusedForKeyboardHeightChangeTest\" />\r\n </view>\r\n <view v-if=\"data.showKeyboardAdjustTargetInput\" class=\"input-wrapper\">\r\n <input id=\"keyboard-adjust-target-input\" class=\"uni-input\"\r\n @focus=\"onKeyboardAdjustTargetFocus\"\r\n @blur=\"onKeyboardAdjustTargetBlur\"\r\n @keyboardheightchange=\"onKeyboardHeightChange\"\r\n :focus=\"data.keyboardAdjustTargetFocus\" />\r\n </view>\r\n </view>\r\n\r\n <text class=\"uni-title-text\">input样式大合集</text>\r\n <view class=\"input-wrap\">\r\n <input class=\"input-all-styles\" value=\"样式效果：文本颜色深蓝色、字号16px、字重400、文本居左对齐；外边距10px、内边距10px；圆角8px；浅蓝色渐变背景、蓝色边框、透明度70%、阴影效果。\" />\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">font-size:30px</text>\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input style=\"width: 100%;border: 1px solid #ccc;border-radius: 4px;font-size:30px\" placeholder=\"请输入...\" value=\"font-size 超出默认高度\" />\r\n </view>\r\n </view>\r\n\r\n <view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">color: green</text>\r\n </view>\r\n <view class=\"input-wrapper\">\r\n <input style=\"width: 100%;border: 1px solid #ccc;border-radius: 4px;color: green;\" placeholder=\"请输入...\" value=\"字体颜色为绿色\" />\r\n </view>\r\n </view>\r\n\r\n \r\n \r\n <navigator url=\"/pages/component/input/input-performance\" style=\"margin-top: 10px;\">\r\n <button type=\"primary\">\r\n input 性能测试\r\n </button>\r\n </navigator>\r\n \r\n </view>\r\n \r\n </scroll-view>\r\n \r\n</template>\r\n<script setup lang=\"uts\">\r\n type DataType = {\r\n title: string;\r\n firstInputFocus: boolean;\r\n showClearIcon: boolean;\r\n inputClearValue: string;\r\n showPassword: boolean;\r\n cursor: number;\r\n cursorInputFocus: boolean;\r\n cursor_color: string;\r\n cursorColorInputFocus: boolean;\r\n selectionStart: number;\r\n selectionEnd: number;\r\n selectionInputFocus: boolean;\r\n inputEventDetail: string;\r\n focusAndBlurEventDetail: string;\r\n confirmEventDetail: string;\r\n changeEventDetail: string;\r\n keyboardHeightChangeEventDetail: string;\r\n focus: boolean;\r\n inputPassword: boolean;\r\n inputTypeTel: string;\r\n inputPlaceHolderStyle: string;\r\n placeholderStyle: string;\r\n inputPlaceHolderClass: string.ClassString;\r\n inputMaxLengthValue: string;\r\n onMaxLengthInputValue: string;\r\n inputMaxLengthFocus: boolean;\r\n inputPasswordValue: string;\r\n holdKeyboard: boolean;\r\n keyboardHeight: number;\r\n keyboardHeightChangeCount: number;\r\n focusedForKeyboardHeightChangeTest: boolean;\r\n keyboardAdjustDefaultFocusCount: number;\r\n keyboardAdjustDefaultFocused: boolean;\r\n keyboardAdjustTargetFocus: boolean;\r\n keyboardAdjustTargetFocusCount: number;\r\n keyboardAdjustTargetFocused: boolean;\r\n showKeyboardAdjustTargetInput: boolean;\r\n demoValue: string;\r\n demoValue2: string;\r\n adjustPosition: boolean;\r\n syncDisplayValue: string;\r\n triggerFocus: boolean;\r\n triggerBlur: boolean;\r\n showTypeNoneAndFocusCase: boolean;\r\n typeNoneFocus: boolean;\r\n numberPasswordFalseFocus: boolean;\r\n }\r\n\r\n // 使用reactive避免ref数据在自动化测试中无法访问\r\n const data = reactive({\r\n title: 'input',\r\n firstInputFocus: false,\r\n showClearIcon: false,\r\n inputClearValue: '',\r\n showPassword: true,\r\n cursor: -1,\r\n cursorInputFocus: false,\r\n cursor_color: \"#3393E2\",\r\n cursorColorInputFocus: false,\r\n selectionStart: -1,\r\n selectionEnd: -1,\r\n selectionInputFocus: false,\r\n inputEventDetail: '',\r\n focusAndBlurEventDetail: '',\r\n confirmEventDetail: '',\r\n changeEventDetail: '',\r\n keyboardHeightChangeEventDetail: '',\r\n focus: true,\r\n inputPassword: true,\r\n inputTypeTel: \"tel\",\r\n inputPlaceHolderStyle: \"color:red\",\r\n placeholderStyle: \"font-family: AlimamaDaoLiTiOTF;font-weight: bold;text-align: right\",\r\n inputPlaceHolderClass: \"uni-input-placeholder-class\",\r\n inputMaxLengthValue: \"\",\r\n onMaxLengthInputValue: \"\",\r\n inputMaxLengthFocus: false,\r\n inputPasswordValue: \"cipher\",\r\n holdKeyboard: false,\r\n keyboardHeight: 0,\r\n keyboardHeightChangeCount: 0,\r\n focusedForKeyboardHeightChangeTest: false,\r\n keyboardAdjustDefaultFocusCount: 0,\r\n keyboardAdjustDefaultFocused: false,\r\n keyboardAdjustTargetFocus: false,\r\n keyboardAdjustTargetFocusCount: 0,\r\n keyboardAdjustTargetFocused: false,\r\n showKeyboardAdjustTargetInput: false,\r\n demoValue: '123',\r\n demoValue2: '123',\r\n adjustPosition: false,\r\n syncDisplayValue: '',\r\n triggerFocus: false,\r\n triggerBlur: false,\r\n showTypeNoneAndFocusCase: false,\r\n typeNoneFocus: false,\r\n numberPasswordFalseFocus: false\r\n } as DataType)\r\n\r\n const togglePlaceholderClass = () => {\r\n data.inputPlaceHolderClass = data.inputPlaceHolderClass == \"uni-input-placeholder-class\" ? \"\" : \"uni-input-placeholder-class\"\r\n }\r\n\r\n const inputFocusKeyBoardChange = (e : UniInputKeyboardHeightChangeEvent) => {\r\n data.keyboardHeight = e.detail.height\r\n data.keyboardHeightChangeCount++\r\n }\r\n\r\n const onMaxLengthInput = (event : UniInputEvent) => {\r\n data.onMaxLengthInputValue = event.detail.value\r\n }\r\n\r\n const setCursor = (cursor : number) => {\r\n data.cursorInputFocus = true\r\n data.cursor = cursor;\r\n }\r\n\r\n const onCursorBlurChange = () => {\r\n data.cursor = 0\r\n data.cursorInputFocus = false\r\n }\r\n\r\n const setSelection = (selectionStart : number, selectionEnd : number) => {\r\n data.selectionInputFocus = true\r\n data.selectionStart = selectionStart;\r\n data.selectionEnd = selectionEnd;\r\n }\r\n\r\n const onSelectionBlurChange = () => {\r\n data.selectionEnd = 0;\r\n data.selectionInputFocus = false\r\n }\r\n\r\n const clearInput = (event : UniInputEvent) => {\r\n data.inputClearValue = event.detail.value\r\n if (event.detail.value.length > 0) {\r\n data.showClearIcon = true\r\n } else {\r\n data.showClearIcon = false\r\n }\r\n }\r\n\r\n const clearIcon = () => {\r\n data.inputClearValue = ''\r\n data.showClearIcon = false\r\n }\r\n\r\n const changePassword = () => {\r\n data.showPassword = !data.showPassword\r\n }\r\n\r\n const onInput = (event : UniInputEvent) => {\r\n console.log(\"键盘输入\", JSON.stringify(event.detail));\r\n data.inputEventDetail = JSON.stringify(event.detail)\r\n }\r\n\r\n const onFocus = (event : UniInputFocusEvent) => {\r\n data.triggerFocus = true\r\n console.log(\"输入框聚焦\", JSON.stringify(event.detail));\r\n data.focusAndBlurEventDetail = JSON.stringify(event.detail);\r\n }\r\n\r\n const onBlur = (event : UniInputBlurEvent) => {\r\n data.triggerBlur = true\r\n console.log(\"输入框失去焦点\", JSON.stringify(event.detail));\r\n data.focusAndBlurEventDetail = JSON.stringify(event.detail);\r\n }\r\n\r\n const onConfirm = (event : UniInputConfirmEvent) => {\r\n console.log(\"点击完成按钮\", JSON.stringify(event.detail));\r\n data.confirmEventDetail = JSON.stringify(event.detail);\r\n }\r\n\r\n const onChange = (event : UniInputChangeEvent) => {\r\n console.log(\"输入内容变化\", JSON.stringify(event.detail));\r\n data.changeEventDetail = JSON.stringify(event.detail);\r\n }\r\n\r\n const onKeyboardHeightChange = (event : UniInputKeyboardHeightChangeEvent) => {\r\n console.log(\"键盘高度发生变化\", JSON.stringify(event.detail));\r\n data.keyboardHeightChangeEventDetail = JSON.stringify(event.detail);\r\n data.keyboardHeight = event.detail.height;\r\n data.keyboardHeightChangeCount++\r\n }\r\n\r\n const onKeyboardAdjustDefaultFocus = () => {\r\n data.keyboardAdjustDefaultFocusCount++\r\n data.keyboardAdjustDefaultFocused = true\r\n }\r\n\r\n const onKeyboardAdjustDefaultBlur = () => {\r\n data.keyboardAdjustDefaultFocused = false\r\n data.focusedForKeyboardHeightChangeTest = false\r\n }\r\n\r\n const onKeyboardAdjustTargetFocus = () => {\r\n data.keyboardAdjustTargetFocusCount++\r\n data.keyboardAdjustTargetFocused = true\r\n }\r\n\r\n const onKeyboardAdjustTargetBlur = () => {\r\n data.keyboardAdjustTargetFocused = false\r\n data.keyboardAdjustTargetFocus = false\r\n }\r\n\r\n const test_check_input_value = () : number => {\r\n return data.onMaxLengthInputValue.length\r\n }\r\n\r\n const changeCursorColor = (event : UniSwitchChangeEvent) => {\r\n const checked = event.detail.value;\r\n if (checked) {\r\n data.cursor_color = \"#FF0000\"\r\n } else {\r\n data.cursor_color = \"#3393E2\"\r\n }\r\n data.cursorColorInputFocus = true\r\n }\r\n\r\n const cursorColorInputBlur = (event : UniInputBlurEvent) => {\r\n data.cursorColorInputFocus = false\r\n }\r\n\r\n const changeHoldKeyboard = (event : UniSwitchChangeEvent) => {\r\n const checked = event.detail.value;\r\n data.holdKeyboard = checked\r\n }\r\n\r\n const changeAdjustPosition = (event : UniSwitchChangeEvent) => {\r\n const checked = event.detail.value;\r\n data.adjustPosition = checked\r\n }\r\n\r\n const triggerFocusOrBlur = () => {\r\n const input = uni.getElementById(\"trigger-focus-blur-input\")!\r\n if(data.triggerFocus){\r\n data.triggerFocus = false\r\n input.blur()\r\n } else {\r\n data.triggerBlur = false\r\n input.focus()\r\n }\r\n }\r\n\r\n const getKeyboardAdjustInputRect = () : DOMRect | null => {\r\n return uni.getElementById('keyboard-adjust-default-input')?.getBoundingClientRect() ?? null\r\n }\r\n\r\n const getKeyboardAdjustTargetInputRect = () : DOMRect | null => {\r\n return uni.getElementById('keyboard-adjust-target-input')?.getBoundingClientRect() ?? null\r\n }\r\n\r\n const blurKeyboardAdjustInputsForTest = () => {\r\n uni.getElementById('uni-input-focus')?.blur()\r\n uni.getElementById('keyboard-adjust-default-input')?.blur()\r\n uni.getElementById('keyboard-adjust-target-input')?.blur()\r\n }\r\n\r\n const hideKeyboardForTest = () => {\r\n uni.hideKeyboard()\r\n }\r\n\r\n\r\n const changeCheckedTypeNoneAndFocusCase = (checked : boolean) => {\r\n data.showTypeNoneAndFocusCase = checked\r\n }\r\n\r\n defineExpose({\r\n data,\r\n triggerFocusOrBlur,\r\n getKeyboardAdjustInputRect,\r\n getKeyboardAdjustTargetInputRect,\r\n blurKeyboardAdjustInputsForTest,\r\n hideKeyboardForTest\r\n })\r\n</script>\r\n\r\n<style scoped>\r\n .input-wrapper {\r\n display: flex;\r\n flex-direction: row;\r\n padding: 8px 13px;\r\n margin: 5px 0;\r\n background-color: var(--list-background-color, #ffffff);\r\n }\r\n\r\n .uni-input {\r\n height: 28px;\r\n font-size: 15px;\r\n padding: 0px;\r\n flex: 1;\r\n color: #333333;\r\n background-color: #ffffff;\r\n }\r\n\r\n .uni-icon {\r\n width: 24px;\r\n height: 24px;\r\n }\r\n\r\n .uni-input-placeholder-class {\r\n font-size: 10px;\r\n }\r\n\r\n .placeholder-class{\r\n font-size: 30px;\r\n }\r\n \r\n .input-vertical-center-wrapper {\r\n position: relative;\r\n height: 32px;\r\n margin: 5px 0;\r\n background-color: #ededed;\r\n }\r\n\r\n .input-vertical-center {\r\n width: 100%;\r\n height: 32px;\r\n padding: 0 5px;\r\n font-size: 16px;\r\n color: #333333;\r\n background-color: #ffffff;\r\n }\r\n\r\n .input-vertical-center-line {\r\n position: absolute;\r\n left: 0;\r\n right: 0;\r\n top: 50%;\r\n z-index: 2;\r\n height: 1px;\r\n background-color: #ff0000;\r\n }\r\n\r\n .input-wrap {\r\n flex-direction: row;\r\n justify-content: center;\r\n }\r\n\r\n .input-all-styles {\r\n color: #0008a7;\r\n font-family: Arial, sans-serif;\r\n font-size: 16px;\r\n font-weight: 400;\r\n text-align: left;\r\n width: 90%;\r\n height: 40px;\r\n min-width: 200px;\r\n margin: 10px;\r\n padding: 10px;\r\n border-radius: 8px;\r\n background-color: #e3f2fd;\r\n background-image: linear-gradient(to right, #e3f2fd, #a9d5fa);\r\n border: 1px solid #007aff;\r\n opacity: 0.7;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n }\r\n\r\n @font-face {\r\n font-family: AlimamaDaoLiTiOTF;\r\n src: url('/static/font/AlimamaDaoLiTi.otf');\r\n }\r\n\r\n @media (prefers-color-scheme: dark) {\r\n .uni-input,\r\n .input-vertical-center {\r\n color: #ffffff;\r\n background-color: #2d2d2d;\r\n border-color: rgba(255, 255, 255, 0.18);\r\n }\r\n\r\n .input-vertical-center-wrapper {\r\n background-color: #3b3b3b;\r\n }\r\n }\r\n</style>\r\n\n```\n\n:::","children":"### 子组件 @children-tags\n不可以嵌套组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.input)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/input.html)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/input.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=input&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=input&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=input&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=input&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=input)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=input&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"editor":{"name":"::: sourceCode\n## editor\n:::","originName":"## editor","description":"富文本编辑器，可以对图片、文字进行编辑。","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android 系统版本 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | 7.1.1 | 5.08 | 5.08 | 5.08 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| read-only | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"7.1.1\",\"5.08\",\"5.08\",\"5.08\"]],\"status\":\"SUPPORTED\"}' /> | 设置编辑器为只读 |\n| placeholder | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"7.1.1\",\"5.08\",\"5.08\",\"5.08\"]],\"status\":\"SUPPORTED\"}' /> | 提示信息 |\n| show-img-size | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"7.1.1\",\"5.08\",\"5.08\",\"5.08\"]],\"status\":\"SUPPORTED\"}' /> | 点击图片时显示图片大小控件 |\n| show-img-toolbar | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"7.1.1\",\"5.08\",\"5.08\",\"5.08\"]],\"status\":\"SUPPORTED\"}' /> | 点击图片时显示工具栏控件 |\n| show-img-resize | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"7.1.1\",\"5.08\",\"5.08\",\"5.08\"]],\"status\":\"SUPPORTED\"}' /> | 点击图片时显示修改尺寸控件 |\n| enable-formats | Array.<string> | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(Array.<string>)*<br/>编辑器允许的名单内的格式 |\n| type | \"none\" | \"null\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"8.0.0\",\"5.08\",\"5.08\",\"5.08\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 输入类型，暂只支持<br> \"none\": 聚焦时不弹出键盘 |\n@| 合法值 |\n@| :- |\n@| none |\n| name | string | | | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| @ready | (event: [UniEvent](/component/common.md#unievent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"5.08\",\"5.08\",\"5.08\"]],\"status\":\"SUPPORTED\"}' /> | 编辑器初始化完成时触发 |\n| @focus | (event: [UniEvent](/component/common.md#unievent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"5.08\",\"5.08\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 编辑器聚焦时触发 |\n| @blur | (event: [UniEvent](/component/common.md#unievent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"5.08\",\"5.08\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 编辑器失去焦点时触发 |\n| @input | (event: [UniEvent](/component/common.md#unievent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"5.08\",\"5.08\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 编辑器内容改变时触发 |\n| @statuschange | (event: [UniEvent](/component/common.md#unievent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"5.08\",\"5.08\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 通过 Context 方法改变编辑器内样式时触发，返回选区已设置的样式 |","event":"","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/editor/editor.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/editor/editor.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/editor/editor\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/editor/editor\n\n>示例\n```vue\n<template>\n <view class=\"page-root uni-theme-root\">\n <view class=\"preview-panel\">\n <view class=\"preview-header\">\n <text class=\"uni-title-text\">editor 属性示例</text>\n </view>\n\n <view class=\"preview-state-row\">\n <text class=\"preview-state-text\">read-only: {{ data.readOnly }}</text>\n \n <text class=\"preview-state-text\">type: {{ getTypeLabel() }}</text>\n \n </view>\n\n <view class=\"preview-state-row\">\n <view v-if=\"showLogs\">\n <text class=\"preview-state-text\">X: {{ data.editorX }}</text>\n <text class=\"preview-state-text\">Y: {{ data.editorY }}</text>\n <text class=\"preview-state-text\">width: {{ data.editorWidth }}</text>\n <text class=\"preview-state-text\">height: {{ data.editorHeight }}</text>\n </view>\n </view>\n\n <view class=\"preview-editor-box\">\n <editor\n v-if=\"data.showEditor\"\n id=\"editor-props-demo\"\n class=\"preview-editor\"\n :read-only=\"data.readOnly\"\n :placeholder=\"data.appliedPlaceholder\"\n :show-img-size=\"data.appliedShowImgSize\"\n :show-img-toolbar=\"data.appliedShowImgToolbar\"\n :show-img-resize=\"data.appliedShowImgResize\"\n :type=\"data.editorType\"\n @ready=\"onEditorReady\"\n @focus=\"onEditorFocus\"\n @blur=\"onEditorBlur\"\n @input=\"onEditorInput\"\n @statuschange=\"onStatusChange\"\n />\n </view>\n\n <view class=\"preview-toolbar\">\n <view class=\"preview-toolbar-item\" @tap=\"insertSampleText\">\n <text class=\"preview-toolbar-icon iconfont\">A</text>\n </view>\n <view class=\"preview-toolbar-item\" @tap=\"insertSampleImage\">\n <text class=\"preview-toolbar-icon iconfont\">{{\"\"}}</text>\n </view>\n <view :class=\"data.boldActive ? 'preview-toolbar-item preview-toolbar-item-active' : 'preview-toolbar-item'\" @tap=\"toggleBold\">\n <text :class=\"data.boldActive ? 'preview-toolbar-icon preview-toolbar-icon-active iconfont' : 'preview-toolbar-icon iconfont'\">{{\"\"}}</text>\n </view>\n <view :class=\"data.alignCenterActive ? 'preview-toolbar-item preview-toolbar-item-active' : 'preview-toolbar-item'\" @tap=\"setAlignCenter\">\n <text :class=\"data.alignCenterActive ? 'preview-toolbar-icon preview-toolbar-icon-active iconfont' : 'preview-toolbar-icon iconfont'\">{{\"\"}}</text>\n </view>\n <view class=\"preview-toolbar-item\" @tap=\"removeFormat\">\n <text class=\"preview-toolbar-icon iconfont\">{{\"\"}}</text>\n </view>\n <view class=\"preview-toolbar-item\" @tap=\"clearEditor\">\n <text class=\"preview-toolbar-icon iconfont\">{{\"\"}}</text>\n </view>\n <view class=\"preview-toolbar-item\" @tap=\"blurEditor\">\n <text class=\"preview-toolbar-icon iconfont\">{{\"\"}}</text>\n </view>\n \n <view class=\"preview-toolbar-item\" @tap=\"insertMention\">\n <text class=\"preview-toolbar-icon iconfont\">@</text>\n </view>\n \n </view>\n </view>\n\n <scroll-view class=\"props-scroll\" direction=\"vertical\">\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 <boolean-data :defaultValue=\"data.readOnly\" title=\"read-only：设置编辑器为只读，可动态修改\" @change=\"onReadOnlyChange\"></boolean-data>\n \n <enum-data :items=\"data.typeItems\" title=\"type：null | none，控制聚焦时是否弹出键盘\" @change=\"onTypeChange\"></enum-data>\n \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 <text class=\"uni-subtitle-text\">placeholder 与 show-img-* 调整后不会直接作用到当前 editor，请点击下方按钮重建后查看。</text>\n </view>\n <input-data :defaultValue=\"data.draftPlaceholder\" title=\"placeholder：提示信息，不可动态修改\" type=\"text\" @confirm=\"onPlaceholderChange\"></input-data>\n <boolean-data :defaultValue=\"data.draftShowImgSize\" title=\"show-img-size：点击图片时显示图片大小控件，不可动态修改\" @change=\"onDraftShowImgSizeChange\"></boolean-data>\n <boolean-data :defaultValue=\"data.draftShowImgToolbar\" title=\"show-img-toolbar：点击图片时显示工具栏控件，不可动态修改\" @change=\"onDraftShowImgToolbarChange\"></boolean-data>\n <boolean-data :defaultValue=\"data.draftShowImgResize\" title=\"show-img-resize：点击图片时显示修改尺寸控件，不可动态修改\" @change=\"onDraftShowImgResizeChange\"></boolean-data>\n\n <view class=\"uni-padding-wrap uni-common-mt\">\n <view class=\"uni-title\">\n <text class=\"uni-title-text\">当前应用中的 editor 配置</text>\n </view>\n <text class=\"uni-subtitle-text\">placeholder：{{ data.appliedPlaceholder }}</text>\n <text class=\"uni-subtitle-text\">show-img-size：{{ data.appliedShowImgSize }}</text>\n <text class=\"uni-subtitle-text\">show-img-toolbar：{{ data.appliedShowImgToolbar }}</text>\n <text class=\"uni-subtitle-text\">show-img-resize：{{ data.appliedShowImgResize }}</text>\n <button type=\"primary\" size=\"mini\" class=\"action-button apply-button\" @tap=\"rebuildEditor\">重建 editor 并应用初始化属性</button>\n </view>\n\n <view v-if=\"showLogs\" class=\"uni-padding-wrap uni-common-mt\">\n <view class=\"uni-title\">\n <text class=\"uni-title-text\">事件示例</text>\n </view>\n <text class=\"uni-subtitle-text\">@ready：{{ data.readyCount }}</text>\n <text class=\"uni-subtitle-text\">@focus：{{ data.focusCount }}</text>\n <text class=\"uni-subtitle-text\">@blur：{{ data.blurCount }}</text>\n <text class=\"uni-subtitle-text\">@input：{{ data.inputCount }}</text>\n <text class=\"uni-subtitle-text\">@statuschange：{{ data.statusChangeCount }}</text>\n <text class=\"uni-subtitle-text\">最近状态：{{ data.statusSummary }}</text>\n </view>\n\n <view v-if=\"showLogs\" class=\"uni-padding-wrap uni-common-mt uni-common-mb\">\n <view class=\"uni-title event-header-row\">\n <text class=\"uni-title-text\">事件日志</text>\n <button size=\"mini\" @tap=\"clearLogs\">清空日志</button>\n </view>\n <view class=\"log-box\" v-if=\"data.logs.length > 0\">\n <text v-for=\"(item, index) in data.logs\" :key=\"index\" class=\"log-text\">{{ item }}</text>\n </view>\n <text v-else class=\"uni-subtitle-text\">等待事件触发...</text>\n </view>\n </scroll-view>\n\n <navigator style=\"margin-top: 20px;\" url=\"./editor-edit\">\n <button>富文本编辑模板</button>\n </navigator>\n\n <bottom-safe-area />\n </view>\n</template>\n\n<script setup lang=\"uts\">\nimport { ItemType } from '@/components/enum-data/enum-data-types'\n\ntype EditorPropsPageData = {\n showEditor: boolean\n readOnly: boolean\n editorType: string | null\n draftPlaceholder: string\n appliedPlaceholder: string\n draftShowImgSize: boolean\n appliedShowImgSize: boolean\n draftShowImgToolbar: boolean\n appliedShowImgToolbar: boolean\n draftShowImgResize: boolean\n appliedShowImgResize: boolean\n editorCtx: EditorContext | null\n readyCount: number\n focusCount: number\n blurCount: number\n inputCount: number\n statusChangeCount: number\n boldActive: boolean\n alignCenterActive: boolean\n statusSummary: string\n logs: string[]\n typeItems: ItemType[]\n editorX: number\n editorY: number\n editorWidth: number\n editorHeight: number\n insertImageWidth: number\n insertImageHeight: number\n}\n\nconst SAMPLE_TEXT = '这是 editor 示例文本。你可以继续输入内容，也可以滚动下方属性区实时调整 editor 状态。'\nfunction createTypeItems(selectedValue: number): ItemType[] {\n return [\n { value: 0, name: 'null：聚焦弹出键盘', checked: selectedValue == 0 },\n { value: 1, name: 'none：聚焦不弹出键盘', checked: selectedValue == 1 }\n ]\n}\n\nconst showLogs = false\n\nconst initialData: EditorPropsPageData = {\n showEditor: true,\n readOnly: false,\n editorType: null,\n draftPlaceholder: '请输入内容，placeholder 仅初始化生效',\n appliedPlaceholder: '请输入内容，placeholder 仅初始化生效',\n draftShowImgSize: true,\n appliedShowImgSize: true,\n draftShowImgToolbar: true,\n appliedShowImgToolbar: true,\n draftShowImgResize: true,\n appliedShowImgResize: true,\n editorCtx: null,\n readyCount: 0,\n focusCount: 0,\n blurCount: 0,\n inputCount: 0,\n statusChangeCount: 0,\n boldActive: false,\n alignCenterActive: false,\n statusSummary: '等待 @statuschange',\n logs: [],\n typeItems: createTypeItems(0),\n editorX: 0,\n editorY: 0,\n editorWidth: 0,\n editorHeight: 0,\n insertImageWidth: 0,\n insertImageHeight: 0\n}\n\nconst data = reactive<EditorPropsPageData>(initialData)\n\nfunction appendLog(tag: string, detail: string) {\n const entry = `${new Date().toLocaleTimeString()} [${tag}] ${detail}`\n data.logs.unshift(entry)\n if (data.logs.length > 12) {\n data.logs.pop()\n }\n}\n\nfunction getTypeLabel(): string {\n return data.editorType == 'none' ? 'none（聚焦不弹键盘）' : 'null（聚焦弹键盘）'\n}\n\nfunction summarizeText(text: string): string {\n if (text.length <= 24) {\n return text\n }\n return `${text.substring(0, 24)}...`\n}\n\nfunction syncTypeItems() {\n const selectedValue = data.editorType == 'none' ? 1 : 0\n data.typeItems = createTypeItems(selectedValue)\n}\n\nfunction onReadOnlyChange(checked: boolean) {\n data.readOnly = checked\n appendLog('prop', `read-only => ${checked}`)\n}\n\nfunction onTypeChange(value: number) {\n data.editorType = value == 1 ? 'none' : null\n syncTypeItems()\n appendLog('prop', `type => ${data.editorType == null ? 'null' : data.editorType}`)\n}\n\nfunction onPlaceholderChange(value: string) {\n data.draftPlaceholder = value\n appendLog('draft', `placeholder 待应用 => ${data.draftPlaceholder}`)\n}\n\nfunction onDraftShowImgSizeChange(checked: boolean) {\n data.draftShowImgSize = checked\n appendLog('draft', `show-img-size 待应用 => ${checked}`)\n}\n\nfunction onDraftShowImgToolbarChange(checked: boolean) {\n data.draftShowImgToolbar = checked\n appendLog('draft', `show-img-toolbar 待应用 => ${checked}`)\n}\n\nfunction onDraftShowImgResizeChange(checked: boolean) {\n data.draftShowImgResize = checked\n appendLog('draft', `show-img-resize 待应用 => ${checked}`)\n}\n\nfunction rebuildEditor() {\n data.appliedPlaceholder = data.draftPlaceholder\n data.appliedShowImgSize = data.draftShowImgSize\n data.appliedShowImgToolbar = data.draftShowImgToolbar\n data.appliedShowImgResize = data.draftShowImgResize\n data.editorCtx = null\n data.boldActive = false\n data.alignCenterActive = false\n data.statusSummary = '等待 @statuschange'\n data.showEditor = false\n setTimeout(() => {\n data.showEditor = true\n }, 0)\n appendLog('rebuild', '已重建 editor，初始化属性已重新应用')\n}\n\nfunction updateEditorRect() {\n // #ifndef MP\n const editorElement = uni.getElementById('editor-props-demo')\n const editorRect = editorElement?.getBoundingClientRect()\n if (editorRect != null) {\n data.editorX = editorRect.x\n data.editorY = editorRect.y\n data.editorWidth = editorRect.width\n data.editorHeight = editorRect.height\n // #ifdef APP-IOS || APP-HARMONY || APP-ANDROID\n const systemInfo = uni.getSystemInfoSync()\n data.editorY += systemInfo.safeAreaInsets.top + 44\n // #endif\n }\n // #endif\n // #ifdef MP\n wx.createSelectorQuery().select('#editor-props-demo').boundingClientRect(function(editorRect){\n data.editorX = editorRect.top\n data.editorY = editorRect.left\n data.editorWidth = editorRect.width\n data.editorHeight = editorRect.height\n\n const windowInfo = uni.getWindowInfo()\n data.editorY += windowInfo.safeAreaInsets.top + 44\n }).exec()\n // #endif\n}\n\nfunction onEditorReady() {\n const options: CreateEditorContextAsyncOptions = {\n id: 'editor-props-demo',\n success: (context: EditorContext) => {\n data.editorCtx = context\n data.readyCount += 1\n updateEditorRect()\n appendLog('ready', '编辑器初始化完成')\n },\n fail: (error: UniError) => {\n appendLog('error', `createEditorContextAsync fail: ${error.errMsg}`)\n }\n }\n uni.createEditorContextAsync(options)\n}\n\nfunction onEditorFocus(event: UniEditorFocusEvent) {\n data.focusCount += 1\n appendLog('focus', `text=${summarizeText(event.detail.text)}`)\n}\n\nfunction onEditorBlur(event: UniEditorBlurEvent) {\n data.blurCount += 1\n appendLog('blur', `text=${summarizeText(event.detail.text)}`)\n}\n\nfunction onEditorInput(event: UniEditorInputEvent) {\n data.inputCount += 1\n appendLog('input', `text=${summarizeText(event.detail.text)}`)\n}\n\nfunction onStatusChange(event: UniEditorStatusChangeEvent) {\n data.statusChangeCount += 1\n data.boldActive = event.detail.bold == true\n data.alignCenterActive = event.detail.align == 'center'\n const align = event.detail.align != null ? event.detail.align : 'default'\n const fontSize = event.detail.fontSize != null ? event.detail.fontSize : 'default'\n data.statusSummary = `bold=${event.detail.bold == true}, align=${align}, fontSize=${fontSize}`\n appendLog('statuschange', data.statusSummary)\n}\n\nfunction insertSampleText() {\n data.editorCtx?.insertText({\n text: SAMPLE_TEXT,\n success: () => {\n appendLog('action', '已插入示例文本')\n }\n })\n}\n\nconst src = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app.png'\nfunction insertImage() {\n data.editorCtx?.insertImage({\n src,\n alt: '示例图片',\n success: () => {\n appendLog('action', '已插入示例图片，请点击图片验证 show-img-*')\n },\n fail: () => {\n appendLog('error', '插入示例图片失败')\n }\n })\n}\nfunction insertSampleImage() {\n uni.getImageInfo({\n src,\n success(res) {\n console.log('res: ',res);\n data.insertImageWidth = res.width\n data.insertImageHeight = res.height\n appendLog('network', `图片加载成功: ${summarizeText(src)}`)\n insertImage()\n },\n fail() {\n insertImage()\n }\n })\n}\n\nconst insertMention = () => {\n data.editorCtx?.insertMention({\n id: '000',\n name: 'uni-app x',\n success: (res: any) => {\n console.log('insert mention success')\n }\n })\n}\n\nfunction toggleBold() {\n data.editorCtx?.format('bold', null)\n appendLog('action', `请求切换加粗 => ${!data.boldActive}`)\n}\n\nfunction setAlignCenter() {\n data.editorCtx?.format('align', 'center')\n appendLog('action', '请求设置居中对齐')\n}\n\nfunction removeFormat() {\n data.editorCtx?.removeFormat({\n success: () => {\n appendLog('action', '已清除当前样式')\n },\n fail: () => {\n appendLog('error', '清除样式失败')\n }\n })\n}\n\nfunction clearEditor() {\n data.editorCtx?.clear({\n success: () => {\n appendLog('action', '已清空编辑器内容')\n },\n fail: () => {\n appendLog('error', '清空编辑器失败')\n }\n })\n}\n\nfunction blurEditor() {\n data.editorCtx?.blur({\n success: () => {\n appendLog('action', '已主动触发失焦')\n },\n fail: () => {\n appendLog('error', '主动失焦失败')\n }\n })\n}\n\nfunction hideKeyboardForTest() {\n uni.hideKeyboard()\n appendLog('keyboard', '已请求隐藏键盘')\n}\n\nfunction clearLogs() {\n data.logs.splice(0, data.logs.length)\n}\n\nfunction testSetContentsHtml() {\n data.editorCtx?.setContents({\n html: '<p style=\"text-align:center;\"><strong>Hello,uni-app x</strong></p><p>editor的setContents接口示例</p>',\n success: () => {\n appendLog('action', '成功设置富文本内容')\n },\n fail: (error: any) => {\n appendLog('error', `setContents fail: ${JSON.stringify(error)}`)\n }\n })\n}\n\ndefineExpose({\n data,\n getTypeLabel,\n onReadOnlyChange,\n onTypeChange,\n onPlaceholderChange,\n onDraftShowImgSizeChange,\n onDraftShowImgToolbarChange,\n onDraftShowImgResizeChange,\n rebuildEditor,\n insertSampleText,\n insertMention,\n insertSampleImage,\n toggleBold,\n setAlignCenter,\n removeFormat,\n clearEditor,\n blurEditor,\n hideKeyboardForTest,\n updateEditorRect,\n testSetContentsHtml\n})\n</script>\n\n<style>\n@import './editor-icon.css';\n\n.page-root {\n flex-direction: column;\n flex: 1;\n}\n\n.preview-panel {\n flex-direction: column;\n padding: 10px;\n background-color: var(--list-background-color, #ffffff);\n border-bottom-width: 1px;\n border-bottom-style: solid;\n border-bottom-color: var(--border-color, rgba(0, 0, 0, 0.06));\n}\n\n.preview-header {\n flex-direction: column;\n}\n\n.preview-state-row {\n flex-direction: row;\n flex-wrap: wrap;\n margin-top: 6px;\n}\n\n.preview-toolbar {\n flex-direction: row;\n flex-wrap: wrap;\n margin-top: 10px;\n padding-top: 8px;\n padding-right: 8px;\n padding-bottom: 8px;\n border-radius: 6px;\n background-color: var(--active-background-color, #f5f6f8);\n}\n\n.preview-toolbar-item {\n width: 36px;\n height: 36px;\n margin-top: 8px;\n margin-left: 8px;\n border-radius: 6px;\n justify-content: center;\n align-items: center;\n background-color: var(--list-background-color, #ffffff);\n}\n\n.preview-toolbar-item-active {\n background-color: var(--tips-background-color, #e6f0ff);\n}\n\n.preview-toolbar-icon {\n color: var(--text-color, #333333);\n font-size: 18px;\n}\n\n.preview-toolbar-icon-active {\n color: #007aff;\n}\n\n.preview-state-text {\n margin-right: 12px;\n color: var(--active-color, #666666);\n font-size: 13px;\n}\n\n.preview-editor-box {\n margin-top: 10px;\n height: 150px;\n border-width: 1px;\n border-style: solid;\n border-color: var(--border-color, rgba(0, 0, 0, 0.08));\n border-radius: 6px;\n background-color: var(--list-background-color, #ffffff);\n}\n\n.preview-editor {\n height: 150px;\n min-height: 0px;\n padding: 10px;\n color: var(--text-color, #333333);\n background-color: var(--list-background-color, #ffffff);\n}\n\n.props-scroll {\n flex: 1;\n}\n\n.button-list {\n flex-direction: column;\n margin-top: 10px;\n}\n\n.action-button {\n margin-top: 10px;\n}\n\n.apply-button {\n margin-bottom: 10px;\n}\n\n.event-header-row {\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n}\n\n.log-box {\n flex-direction: column;\n margin-top: 10px;\n padding: 10px;\n border-radius: 6px;\n background-color: var(--list-background-color, #ffffff);\n}\n\n.log-text {\n margin-top: 6px;\n color: var(--text-color, #333333);\n font-size: 12px;\n line-height: 18px;\n}\n</style>\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.editor)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/editor.html)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/editor.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=editor&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=editor&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=editor&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=editor&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=editor)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=editor&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"label":{"name":"::: sourceCode\n## label\n:::","originName":"## label","description":"用来改进表单组件的可用性，使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS |\n| :- | :- | :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 5.21 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 5.11 | 4.71 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| disabled | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"5.21\",\"x\",\"5.11\",\"4.71\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否禁用 |\n| for | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"5.21\",\"x\",\"5.11\",\"4.71\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 绑定控件的 id |","event":"","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/label/label.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/label/label.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/label/label\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/label/label\n\n>示例\n```vue\n<template>\r\n <view>\r\n <page-head :title=\"data.title\"></page-head>\r\n <view class=\"uni-common-mt\">\r\n <view class=\"uni-form-item uni-column\">\r\n <view class=\"title\">表单组件在label内</view>\r\n <checkbox-group class=\"uni-list\" @change=\"checkboxChange\">\r\n <label class=\"uni-list-cell uni-list-cell-pd checkboxItemsTest label\" v-for=\"item in data.checkboxItems\"\r\n :key=\"item.name\">\r\n <view>\r\n <checkbox :value=\"item.name\" :checked=\"item.checked\" />\r\n </view>\r\n <view>{{item.value}}</view>\r\n </label>\r\n </checkbox-group>\r\n </view>\r\n\r\n \r\n <view class=\"uni-form-item uni-column\">\r\n <view class=\"title\">label用for标识表单组件</view>\r\n <radio-group class=\"uni-list radio-group\" @change=\"radioChange\">\r\n <view class=\"uni-list-cell uni-list-cell-pd\" v-for=\"(item,index) in data.radioItems\" :key=\"index\">\r\n <view>\r\n <radio :id=\"item.name\" :value=\"item.name\" :checked=\"item.checked\" />\r\n </view>\r\n <label class=\"label-2-text\" :for=\"item.name\">\r\n <text>{{item.value}}</text>\r\n </label>\r\n </view>\r\n </radio-group>\r\n </view>\r\n \r\n\r\n <view class=\"uni-form-item uni-column\">\r\n <view class=\"title\">label内有多个时选中第一个</view>\r\n <checkbox-group class=\"uni-list\" @change=\"checkboxForChange\">\r\n <label class=\"label-3 label\">\r\n <view class=\"uni-list-cell uni-list-cell-pd\">\r\n <checkbox value=\"for1\" /><text>选项一</text>\r\n </view>\r\n <view class=\"uni-list-cell uni-list-cell-pd\">\r\n <checkbox value=\"for2\" /><text>选项二</text>\r\n </view>\r\n <view class=\"uni-center\" style=\"margin:10px 0;\">\r\n <text class=\"uni-link\">点击该label下的文字默认选中第一个checkbox</text>\r\n </view>\r\n </label>\r\n </checkbox-group>\r\n </view>\r\n </view>\r\n\r\n \n <navigator class=\"uni-common-mb\" url=\"/pages/template/label-100/label-100\">\n <button>组件性能测试</button>\n </navigator>\n \n </view>\n</template>\n<script setup lang=\"uts\">\r\n type controlItem = {\r\n name : string,\r\n value : string,\r\n checked ?: boolean\r\n }\r\n\r\n type DataType = {\r\n title: string;\r\n checkboxItems: controlItem[];\r\n radioItems: controlItem[];\r\n hidden: boolean;\r\n checkboxValue: string[];\r\n checkboxForValue: string[];\r\n radioValue: string;\r\n }\r\n\r\n // 使用reactive避免ref数据在自动化测试中无法访问\r\n const data = reactive({\r\n title: 'label',\r\n checkboxItems: [{\r\n name: 'USA',\r\n value: '美国'\r\n },\r\n {\r\n name: 'CHN',\r\n value: '中国',\r\n checked: true\r\n }\r\n ],\r\n radioItems: [{\r\n name: 'USA',\r\n value: '美国'\r\n },\r\n {\r\n name: 'CHN',\r\n value: '中国',\r\n checked: true\r\n }\r\n ],\r\n hidden: false,\r\n checkboxValue: [] as string[],\r\n checkboxForValue: [] as string[],\r\n radioValue: ''\r\n } as DataType)\r\n\r\n const checkboxChange = (e : UniCheckboxGroupChangeEvent) => {\r\n console.log(e.detail.value)\r\n data.checkboxValue = e.detail.value\r\n }\r\n const checkboxForChange = (e : UniCheckboxGroupChangeEvent) => {\r\n console.log(e.detail.value)\r\n data.checkboxForValue = e.detail.value\r\n }\r\n const radioChange = (e : UniRadioGroupChangeEvent) => {\r\n console.log(e.detail.value)\r\n data.radioValue = e.detail.value\r\n }\r\n\r\n defineExpose({\r\n data\r\n })\r\n</script>\r\n\r\n<style>\r\n .uni-list-cell {\r\n justify-content: flex-start\r\n }\r\n\r\n .label-3 {\r\n padding: 0;\r\n }\r\n\r\n .label-2-text {\r\n flex: 1;\r\n }\r\n\r\n .uni-form-item {\r\n display: flex;\r\n width: 100%;\r\n padding: 5px 0;\r\n }\r\n\r\n .title {\r\n padding: 5px 12px;\r\n }\r\n\r\n .radio-group {\r\n padding: 0 10px;\r\n }\r\n\r\n .label {\r\n margin: 0 10px;\r\n }\r\n</style>\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.label)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/label.html)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/label.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=label&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=label&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=label&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=label&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=label)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=label&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"picker":{"name":"::: sourceCode\n## picker\n\n> GitCode: https://gitcode.com/dcloud/uni-component/tree/alpha/uni_modules/uni-picker\n\n\n> GitHub: https://github.com/dcloudio/uni-component/tree/alpha/uni_modules/uni-picker\n\n:::","originName":"## picker","description":"从底部弹起的滚动选择器，现支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | 5.08 | 5.08 | 4.61 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| disabled | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"5.08\",\"5.08\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 是否禁用 |\n| mode | String as PropType\\<Mode> | \"selector\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"5.08\",\"5.08\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 选择器类型 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| selector | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"-\",\"4.41\",\"-\",\"5.08\",\"-\",\"5.08\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 普通选择器 |\n@| multiSelector | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"-\",\"4.41\",\"-\",\"5.08\",\"-\",\"5.08\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 多列选择器 |\n@| time | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"-\",\"4.41\",\"-\",\"5.08\",\"-\",\"5.08\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 时间选择器 |\n@| date | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"-\",\"4.41\",\"-\",\"5.08\",\"-\",\"5.08\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 日期选择器 |\n@| region | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"-\",\"4.41\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 省市选择器 |\n| range | string\\[\\] | \\[\\] | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"5.08\",\"5.08\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | mode为 selector 或 multiSelector 时，range 有效 |\n| range-key | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"5.08\",\"5.08\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 |\n| value | string \\| number \\| number\\[\\] | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"5.08\",\"5.08\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 表示选择了 range 中的第几个（下标从 0 开始） |\n| start | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"5.08\",\"5.08\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 表示有效时间范围的开始 |\n| end | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"5.08\",\"5.08\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 表示有效时间范围的结束 |\n| fields | String as PropType\\<Fields> | \"day\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"5.08\",\"5.08\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 有效值 year,month,day，表示选择器的粒度 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| year | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"-\",\"4.41\",\"-\",\"5.08\",\"-\",\"5.08\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 选择器粒度为年 |\n@| month | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"-\",\"4.41\",\"-\",\"5.08\",\"-\",\"5.08\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 选择器粒度为月份 |\n@| day | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"-\",\"4.41\",\"-\",\"5.08\",\"-\",\"5.08\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 选择器粒度为天 |\n| custom-item | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 可为每一列的顶部添加一个自定义的项 |\n| header-text | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"-\",\"4.41\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 选择器的标题，仅微信小程序安卓端可用 |\n| level | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"-\",\"4.41\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | mode=\"region\" 时有效，选择器层级 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| province | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"-\",\"4.41\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 省级选择器 |\n@| city | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"-\",\"4.41\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 市级选择器 |\n@| region | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"-\",\"4.41\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 区级选择器 |\n@| sub-district | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"-\",\"4.41\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 街道选择器 |\n| name | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"√\",\"x\",\"5.08\",\"5.08\",\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| @change | (event: [UniPickerChangeEvent](#unipickerchangeevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"5.08\",\"5.08\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | value 改变时触发 change 事件，event.detail = {value: value} |\n| @columnchange | (event: [UniPickerColumnChangeEvent](#unipickercolumnchangeevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"5.08\",\"5.08\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 某一列的值改变时触发 columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改变了第几列（下标从0开始），value 的值表示变更值的下标 |\n| @cancel | (event: [UniPickerCancelEvent](#unipickercancelevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"5.08\",\"5.08\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 取消选择时触发 |","event":"\n### 事件\n#### UniPickerChangeEvent\n\n```mermaid\ngraph LR\n \nUniPickerChangeEvent -- Extends --> UniCustomEvent&ltUniPickerChangeEventDetail&gt\n style UniCustomEvent&ltUniPickerChangeEventDetail&gt color:#42b983\n click UniCustomEvent&ltUniPickerChangeEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniPickerChangeEventDetail\n\n\n###### UniPickerChangeEventDetail 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| value | any | 是 |\n\n\n#### UniPickerColumnChangeEvent\n\n```mermaid\ngraph LR\n \nUniPickerColumnChangeEvent -- Extends --> UniCustomEvent&ltUniPickerColumnChangeEventDetail&gt\n style UniCustomEvent&ltUniPickerColumnChangeEventDetail&gt color:#42b983\n click UniCustomEvent&ltUniPickerColumnChangeEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniPickerColumnChangeEventDetail\n\n\n###### UniPickerColumnChangeEventDetail 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| value | number | 是 |\n| column | number | 是 |\n\n\n#### UniPickerCancelEvent\n取消事件触发\n```mermaid\ngraph LR\n \nUniPickerCancelEvent -- Extends --> UniCustomEvent&ltUniPickerCancelEventDetail&gt\n style UniCustomEvent&ltUniPickerCancelEventDetail&gt color:#42b983\n click UniCustomEvent&ltUniPickerCancelEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/picker/picker.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/picker/picker.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/picker/picker\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/picker/picker\n\n>示例\n```vue\n<template>\r\n \r\n <scroll-view style=\"flex: 1\">\r\n \r\n <page-head :title=\"data.title\"></page-head>\r\n <view class=\"uni-picker-section-header\">\r\n <text class=\"uni-title uni-picker-section-title\">普通选择器</text>\r\n </view>\r\n <view class=\"uni-list\">\r\n <view class=\"uni-list-cell\">\r\n <text class=\"uni-list-cell-left\">当前选择</text>\r\n <view class=\"uni-list-cell-db\">\r\n <picker class=\"picker-selector--test uni-picker-container-wrap\" @change=\"bindPickerChange\" :value=\"data.index\"\r\n :range=\"data.selectorArray\" range-key=\"name\">\r\n <view class=\"uni-input picker-selector--value uni-picker-text\">{{data.selectorArray[data.index].name}}</view>\r\n </picker>\r\n </view>\r\n </view>\r\n </view>\r\n\r\n \n <view class=\"uni-picker-section-header\">\n <text class=\"uni-title uni-picker-section-title\">多列选择器</text>\n </view>\n <view class=\"uni-list\">\r\n <view class=\"uni-list-cell\">\r\n <text class=\"uni-list-cell-left\">当前选择</text>\r\n <view class=\"uni-list-cell-db\">\r\n <picker class=\"picker-multi--test uni-picker-container-wrap\" mode=\"multiSelector\" @columnchange=\"bindMultiPickerColumnChange\"\r\n :value=\"data.multiIndex\" :range=\"data.multiArray\">\r\n <view class=\"uni-input picker-multi--value uni-picker-text\">\r\n {{data.multiArray[0][data.multiIndex[0]]}}，{{data.multiArray[1][data.multiIndex[1]]}}，{{data.multiArray[2][data.multiIndex[2]]}}\r\n </view>\r\n </picker>\r\n </view>\r\n </view>\r\n </view>\r\n \r\n\r\n <view class=\"uni-picker-section-header\">\r\n <text class=\"uni-title uni-picker-section-title\">time选择器</text>\r\n <text class=\"uni-picker-description\">选择 09:01 ~ 21:01 之间的时间，不在区间内不能选中</text>\r\n </view>\r\n <view class=\"uni-list\">\r\n <view class=\"uni-list-cell\">\r\n <text class=\"uni-list-cell-left\">当前选择</text>\r\n <view class=\"uni-list-cell-db\">\r\n <picker class=\"picker-time--test uni-picker-container-wrap\" mode=\"time\" :value=\"data.time\" start=\"09:01\" end=\"21:01\"\r\n @change=\"bindTimeChange\">\r\n <view class=\"uni-input uni-picker-text\">{{data.time}}</view>\r\n </picker>\r\n </view>\r\n </view>\r\n </view>\r\n\r\n <view class=\"uni-picker-section-header\">\r\n <text class=\"uni-title uni-picker-section-title\">date选择器 fields = day</text>\r\n <text class=\"uni-picker-description\">选择当前时间往前90年和往后10年之间的时间，不在区间内不能选中</text>\r\n </view>\r\n <view class=\"uni-list\">\r\n <view class=\"uni-list-cell\">\r\n <text class=\"uni-list-cell-left\">当前选择 </text>\r\n <view class=\"uni-list-cell-db\">\r\n <picker class=\"picker-date-day--test uni-picker-container-wrap\" mode=\"date\" :value=\"data.dayDate\" :start=\"data.startDate\"\r\n :end=\"data.endDate\" @change=\"bindDayDateChange\">\r\n <view class=\"uni-input uni-picker-text\">{{data.dayDate}}</view>\r\n </picker>\r\n </view>\r\n </view>\r\n </view>\r\n\r\n <view class=\"uni-picker-section-header\">\r\n <text class=\"uni-title uni-picker-section-title\">日期选择器 fields = month</text>\r\n <text class=\"uni-picker-description\">选择当前时间往前90年和往后10年之间的时间，不在区间内不能选中。且只能选年和月</text>\r\n </view>\r\n <view class=\"uni-list\">\r\n <view class=\"uni-list-cell\">\r\n <text class=\"uni-list-cell-left\">当前选择 </text>\r\n <view class=\"uni-list-cell-db\">\r\n <picker class=\"picker-date-month--test uni-picker-container-wrap\" mode=\"date\" fields=\"month\" :value=\"data.monthDate\"\r\n :start=\"data.startDate\" :end=\"data.endDate\" @change=\"bindMonthDateChange\">\r\n <view class=\"uni-input uni-picker-text\">{{data.monthDate}}</view>\r\n </picker>\r\n </view>\r\n </view>\r\n </view>\r\n\r\n <view class=\"uni-picker-section-header\">\r\n <text class=\"uni-title uni-picker-section-title\">日期选择器 fields = year</text>\r\n <text class=\"uni-picker-description\">选择当前时间往前90年和往后10年之间的时间，不在区间内不能选中</text>\r\n </view>\r\n <view class=\"uni-list\">\r\n <view class=\"uni-list-cell\">\r\n <text class=\"uni-list-cell-left\">当前选择 </text>\r\n <view class=\"uni-list-cell-db\">\r\n <picker class=\"picker-date-year--test uni-picker-container-wrap\" mode=\"date\" fields=\"year\" :value=\"data.yearDate\"\r\n :start=\"data.startDate\" :end=\"data.endDate\" @change=\"bindYearDateChange\">\r\n <view class=\"uni-input uni-picker-text\">{{data.yearDate}}</view>\r\n </picker>\r\n </view>\r\n </view>\r\n </view>\r\n\r\n \n <view class=\"uni-picker-section-header\">\n <text class=\"uni-title uni-picker-section-title\">省市地区选择器</text>\n <text class=\"uni-picker-description\">省市地区数据并没有内置到uni-app x框架中，仅微信下由微信内置了，其他平台需单独加载地区数据</text>\n </view>\n <view class=\"uni-list\">\n <view class=\"uni-list-cell\">\r\n <text class=\"uni-list-cell-left\">当前选择</text>\r\n <view class=\"uni-list-cell-db\">\r\n \r\n <picker class=\"picker-city--test uni-picker-container-wrap picker-city-wrap\" mode=\"multiSelector\" @change=\"bindCityPickerChange\"\r\n @cancel=\"resetCityPicker\" @columnchange=\"bindCityPickerColumnChange\" :value=\"data.cityIndex\" :range=\"data.cityArray\">\r\n <view class=\"uni-input picker-city--value uni-picker-text picker-city-text\">\r\n {{getCityDisplayText()}}\r\n </view>\r\n </picker>\r\n \r\n \r\n <picker class=\"picker-city--test uni-picker-container-wrap\" mode=\"region\" @change=\"bindRegionChange\" :value=\"data.region\">\r\n <view class=\"uni-input picker-city--value uni-picker-text\">\r\n {{data.region[0]}}{{data.region[1] ? '，' : ''}}{{data.region[1]}}{{data.region[2] ? '，' : ''}}{{data.region[2]}}\r\n </view>\r\n </picker>\r\n \r\n </view>\r\n </view>\r\n </view>\r\n \n\r\n <view class=\"uni-picker-section-header\">\r\n <text class=\"uni-title uni-picker-section-title\">已禁用的picker，点击无效</text>\r\n <text class=\"uni-picker-description\">值与普通选择器同步，但不可选择</text>\r\n </view>\r\n <view class=\"uni-list\">\r\n <view class=\"uni-list-cell\">\r\n <text class=\"uni-list-cell-left\">当前选择</text>\r\n <view class=\"uni-list-cell-db\">\r\n <picker class=\"picker-disabled--test uni-picker-container-wrap\" @change=\"bindPickerChange\" disabled :value=\"data.index\"\r\n :range=\"data.selectorArray\" range-key=\"name\">\r\n <view class=\"uni-input picker-disabled--value uni-picker-text\">{{data.selectorArray[data.index].name}}</view>\r\n </picker>\r\n </view>\r\n </view>\r\n </view>\r\n\r\n \r\n </scroll-view>\r\n \r\n</template>\r\n<script setup lang=\"uts\">\r\n // #ifndef MP-WEIXIN || MP-ALIPAY\r\n import { cityData } from './city.uts'\r\n // #endif\r\n\r\n type DataType = {\r\n name : string\r\n }\r\n\r\n type CityItemData = {\r\n title : string\r\n id : string\r\n disabled ?: boolean\r\n children : Array<CityItemData>\r\n }\r\n\r\n type PageDataType = {\r\n title : string;\r\n selectorArray : DataType[];\r\n index : number;\r\n multiArray : Array<string[]>;\r\n multiIndex : number[];\r\n cityArray : Array<string[]>;\r\n allCityData : CityItemData[];\r\n cityIndex : number[];\r\n selectedCityIndex : number[];\r\n isCitySelected : boolean;\r\n region : string[];\r\n dayDate : string;\r\n monthDate : string;\r\n yearDate : string;\r\n startDate : string;\r\n endDate : string;\r\n time : string;\r\n }\r\n\r\n function getDate(date_text : string = 'day', type ?: string) : string {\r\n const date = new Date();\r\n\r\n let year : string | number = date.getFullYear();\r\n let month : string | number = date.getMonth() + 1;\r\n let day : string | number = date.getDate();\r\n\r\n if (type == 'start') {\r\n year = year - 90;\r\n } else if (type == 'end') {\r\n year = year + 10;\r\n }\r\n month = month > 9 ? month : '0' + month;;\r\n day = day > 9 ? day : '0' + day;\r\n if (date_text == 'month') {\r\n return `${year}-${month}`;\r\n } else if (date_text == 'year') {\r\n return `${year}`;\r\n }\r\n return `${year}-${month}-${day}`;\r\n }\r\n\r\n // 使用reactive避免ref数据在自动化测试中无法访问\r\n const data = reactive({\r\n title: 'picker',\r\n selectorArray: [{ name: '中国' }, { name: '美国' }, { name: '巴西' }, { name: '日本' }],\r\n index: 0,\r\n multiArray: [\r\n ['亚洲', '欧洲'],\r\n ['中国', '日本'],\r\n ['北京', '上海', '广州']\r\n ],\r\n multiIndex: [0, 0, 0],\r\n cityArray: [[], [], []],\r\n allCityData: [],\r\n region: [],\r\n cityIndex: [0, 0, 0],\r\n selectedCityIndex: [0, 0, 0],\r\n isCitySelected: false,\r\n dayDate: getDate('day', ''),\r\n monthDate: getDate('month', ''),\r\n yearDate: getDate('year', ''),\r\n startDate: getDate('day', 'start'),\r\n endDate: getDate('day', 'end'),\r\n time: '12:01'\r\n } as PageDataType)\r\n\r\n // #ifndef MP-WEIXIN || MP-ALIPAY\r\n function getSafeCityValue(column : number, index : number) : string {\r\n if (column < 0 || column >= data.cityArray.length) {\r\n return ''\r\n }\r\n const columnData = data.cityArray[column]\r\n if (index < 0 || index >= columnData.length) {\r\n return ''\r\n }\r\n return columnData[index]\r\n }\r\n\r\n function getCityDisplayText() : string {\r\n if (!data.isCitySelected) {\r\n return ''\r\n }\r\n const provinceIndex = data.selectedCityIndex[0]\r\n if (provinceIndex < 0 || provinceIndex >= data.allCityData.length) {\r\n return ''\r\n }\r\n const province = data.allCityData[provinceIndex]\r\n let text = province.title\r\n const cityIndex = data.selectedCityIndex[1]\r\n if (cityIndex >= 0 && cityIndex < province.children.length) {\r\n const city = province.children[cityIndex]\r\n text += '，' + city.title\r\n const districtIndex = data.selectedCityIndex[2]\r\n if (districtIndex >= 0 && districtIndex < city.children.length) {\r\n text += '，' + city.children[districtIndex].title\r\n }\r\n }\r\n return text\r\n }\r\n\r\n function updateCityArray() {\r\n if (data.allCityData.length == 0) {\r\n return\r\n }\r\n data.cityArray[0] = data.allCityData.map(item => item.title)\r\n // 使用当前选择的省份索引来初始化城市数据\r\n const provinceIndex = data.cityIndex[0]\r\n if (data.allCityData[provinceIndex] && data.allCityData[provinceIndex].children) {\r\n data.cityArray[1] = data.allCityData[provinceIndex].children.map(item => item.title)\r\n const cityIndex = data.cityIndex[1]\r\n if (data.allCityData[provinceIndex].children[cityIndex] && data.allCityData[provinceIndex].children[cityIndex].children) {\r\n data.cityArray[2] = data.allCityData[provinceIndex].children[cityIndex].children.map(item => item.title)\r\n } else {\r\n data.cityArray[2] = []\r\n }\r\n } else {\r\n data.cityArray[1] = []\r\n data.cityArray[2] = []\r\n }\r\n }\r\n\r\n function resetCityPicker() {\r\n if (data.isCitySelected) {\r\n data.cityIndex = [data.selectedCityIndex[0], data.selectedCityIndex[1], data.selectedCityIndex[2]]\r\n } else {\r\n data.cityIndex = [0, 0, 0]\r\n }\r\n updateCityArray()\r\n }\r\n\r\n function initCityData() {\r\n const cityDataList = JSON.parse<CityItemData[]>(cityData)\r\n if (cityDataList == null) {\r\n return\r\n }\r\n data.allCityData = cityDataList\r\n resetCityPicker()\r\n }\r\n\r\n initCityData()\r\n // #endif\r\n\r\n // #ifdef MP-WEIXIN\r\n function bindRegionChange(e : UniPickerChangeEvent) {\r\n console.log('picker发送选择改变，携带值为', e.detail.value)\r\n data.region = e.detail.value\r\n }\r\n // #endif\r\n\r\n const bindPickerChange = (e : UniPickerChangeEvent) => {\r\n console.log('picker发送选择改变，携带值为：' + e.detail.value)\r\n data.index = e.detail.value as number\r\n }\r\n\r\n const bindMultiPickerColumnChange = (e : UniPickerColumnChangeEvent) => {\r\n console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)\r\n data.multiIndex[e.detail.column] = e.detail.value\r\n switch (e.detail.column) {\r\n case 0: //拖动第1列\r\n switch (data.multiIndex[0]) {\r\n case 0:\r\n data.multiArray[1] = ['中国', '日本']\r\n data.multiArray[2] = ['北京', '上海', '广州']\r\n break\r\n case 1:\r\n data.multiArray[1] = ['英国', '法国']\r\n data.multiArray[2] = ['伦敦', '曼彻斯特']\r\n break\r\n }\r\n data.multiIndex.splice(1, 1, 0)\r\n data.multiIndex.splice(2, 1, 0)\r\n break\r\n case 1: //拖动第2列\r\n switch (data.multiIndex[0]) { //判断第一列是什么\r\n case 0:\r\n switch (data.multiIndex[1]) {\r\n case 0:\r\n data.multiArray[2] = ['北京', '上海', '广州']\r\n break\r\n case 1:\r\n data.multiArray[2] = ['东京', '北海道']\r\n break\r\n }\r\n break\r\n case 1:\r\n switch (data.multiIndex[1]) {\r\n case 0:\r\n data.multiArray[2] = ['伦敦', '曼彻斯特']\r\n break\r\n case 1:\r\n data.multiArray[2] = ['巴黎', '马赛']\r\n break\r\n }\r\n break\r\n }\r\n data.multiIndex.splice(2, 1, 0)\r\n break\r\n }\r\n nextTick(() => {\r\n // 强制更新视图\r\n })\r\n }\r\n\r\n // #ifndef MP-WEIXIN || MP-ALIPAY\r\n const bindCityPickerChange = (e : UniPickerChangeEvent) => {\r\n console.log('picker发送选择改变，携带值为：' + e.detail.value)\r\n const cityIndex = e.detail.value as number[]\r\n data.selectedCityIndex = [cityIndex[0], cityIndex[1], cityIndex[2]]\r\n data.isCitySelected = true\r\n }\r\n\r\n const bindCityPickerColumnChange = (e : UniPickerColumnChangeEvent) => {\r\n console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)\r\n data.cityIndex[e.detail.column] = e.detail.value\r\n switch (e.detail.column) {\r\n case 0: //拖动第1列（省份）\r\n const provinceIndex = data.cityIndex[0]\r\n const cities = data.allCityData[provinceIndex].children\r\n data.cityArray[1] = cities.map(item => item.title)\r\n if (cities.length > 0) {\r\n data.cityArray[2] = cities[0].children.map(item => item.title)\r\n } else {\r\n data.cityArray[2] = []\r\n }\r\n data.cityIndex.splice(1, 1, 0)\r\n data.cityIndex.splice(2, 1, 0)\r\n break\r\n case 1: //拖动第2列（城市）\r\n const cityIndex = data.cityIndex[1]\r\n const province = data.allCityData[data.cityIndex[0]]\r\n if (province && province.children && province.children[cityIndex]) {\r\n const districts = province.children[cityIndex].children\r\n data.cityArray[2] = districts.map(item => item.title)\r\n } else {\r\n data.cityArray[2] = []\r\n }\r\n data.cityIndex.splice(2, 1, 0)\r\n break\r\n }\r\n }\r\n // #endif\r\n\r\n const bindDayDateChange = (e : UniPickerChangeEvent) => {\r\n data.dayDate = e.detail.value as string\r\n }\r\n\r\n const bindMonthDateChange = (e : UniPickerChangeEvent) => {\r\n data.monthDate = e.detail.value as string\r\n }\r\n\r\n const bindYearDateChange = (e : UniPickerChangeEvent) => {\r\n data.yearDate = e.detail.value as string\r\n }\r\n\r\n const bindTimeChange = (e : UniPickerChangeEvent) => {\r\n data.time = e.detail.value as string\r\n }\r\n\r\n // 自动化函数\r\n const setSelectorValue = () => {\r\n data.index = 2\r\n }\r\n\r\n defineExpose({\r\n data,\r\n setSelectorValue\r\n })\r\n</script>\r\n\r\n<style>\r\n .uni-title {\r\n font-size: 15px;\r\n }\r\n\r\n .uni-picker-section-header {\r\n display: flex;\r\n flex-direction: column;\r\n padding: 0 15px;\r\n margin-top: 15px;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .uni-picker-section-title {\r\n padding: 0;\r\n }\r\n\r\n .uni-picker-description {\r\n font-size: 12px;\r\n color: #BEBEBE;\r\n line-height: 18px;\r\n min-height: 18px;\r\n margin-top: 4px;\r\n width: 100%;\r\n }\r\n\r\n .uni-list {\r\n margin-bottom: 15px;\r\n }\r\n\r\n .uni-list-cell-left {\r\n font-size: 13px;\r\n color: #666;\r\n padding-left: 15px;\r\n }\r\n\r\n .uni-picker-container-wrap {\r\n height: 41px;\r\n /* #ifndef APP-ANDROID && !VUE3-VAPOR */\r\n line-height: 41px;\r\n /* #endif */\r\n }\r\n\r\n .uni-picker-text {\r\n line-height: 25px;\r\n height: 25px;\r\n padding: 8px 13px;\r\n font-size: 14px;\r\n flex: 1;\r\n box-sizing: content-box;\r\n }\r\n\r\n .picker-city-wrap {\r\n min-height: 41px;\r\n height: auto;\r\n /* #ifndef APP-ANDROID && !VUE3-VAPOR */\r\n line-height: 25px;\r\n /* #endif */\r\n }\r\n\r\n .picker-city-text {\r\n min-height: 25px;\r\n height: auto;\r\n }\r\n\r\n /* #ifdef WEB */\r\n @media (prefers-color-scheme: dark) {\r\n .uni-title,\r\n .uni-list-cell-left,\r\n .uni-input,\r\n .uni-picker-text {\r\n color: #ffffff;\r\n }\r\n\r\n .uni-input,\r\n .uni-picker-text,\r\n .uni-list {\r\n background-color: #2d2d2d;\r\n }\r\n\r\n .uni-list-cell-left {\r\n color: #b0b0b0;\r\n }\r\n }\r\n /* #endif */\r\n</style>\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.picker)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/picker.html)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/picker.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=picker&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=picker&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=picker&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=picker&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=picker)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=picker&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"picker-view-column":{"name":"::: sourceCode\n## picker-view-column\n:::","originName":"## picker-view-column","description":"仅可放置于 picker-view 中，其子节点未继承 picker-view 的选中框的高度，需要自己设置高度并居中","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | 3.9 | 4.11 | 4.61 |\n","attribute":"### 属性 \n| 名称 | 类型 | 兼容性 |\n| :- | :- | :-: |\n| value | number | <CompatibilityTable table='{\"headers\":[{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.picker-view.picker-view-column)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/picker-view.html#picker-view-column)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/picker-view-column.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=picker-view-column&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=picker-view-column&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=picker-view-column&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=picker-view-column&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=picker-view-column)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=picker-view-column&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"picker-view":{"name":"::: sourceCode\n## picker-view\n:::","originName":"## picker-view","description":"> 组件类型：UniPickerViewElement \n\n 嵌入页面的滚动选择器","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | 3.9 | 4.11 | 4.61 |\n","attribute":"### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- | :-: | :- |\n| name | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| value | number\\[\\] | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 表单的控件值，作为键值对的一部分与表单(form组件)一同提交 |\n| indicator-style | string([string.CSSString](/uts/data-type.md#ide-string)) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 指示器样式 |\n| indicator-class | string([string.ClassString](/uts/data-type.md#ide-string)) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 设置选择器中间选中框的类名 |\n| mask-style | string([string.CSSString](/uts/data-type.md#ide-string)) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 设置蒙层的样式 |\n| mask-top-style | string([string.CSSString](/uts/data-type.md#ide-string)) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 遮罩顶部类 |\n| mask-bottom-style | string([string.CSSString](/uts/data-type.md#ide-string)) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 遮罩底部类 |\n| mask-class | string([string.ClassString](/uts/data-type.md#ide-string)) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"5.21\",\"x\",\"5.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 遮罩类 |\n| @change | (event: [UniPickerViewChangeEvent](#unipickerviewchangeevent)) => void | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0<br/>\t\t开始） |\n| @pickstart | eventhandle | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandle)*<br/>当滚动选择开始时候触发事件 |\n| @pickend | eventhandle | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandle)*<br/>当滚动选择结束时候触发事件 |","event":"\n### 事件\n#### UniPickerViewChangeEvent\n\n```mermaid\ngraph LR\n \nUniPickerViewChangeEvent -- Extends --> UniCustomEvent&ltUniPickerViewChangeEventDetail&gt\n style UniCustomEvent&ltUniPickerViewChangeEventDetail&gt color:#42b983\n click UniCustomEvent&ltUniPickerViewChangeEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniPickerViewChangeEventDetail\n\n\n###### UniPickerViewChangeEventDetail 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| value | Array<number> | 是 |\n\n","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/picker-view/picker-view.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/picker-view/picker-view.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/picker-view/picker-view\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/picker-view/picker-view\n\n>示例\n```vue\n<template>\r\n <view>\r\n <page-head :title=\"data.title\"></page-head>\r\n <view class=\"uni-padding-wrap\">\r\n <view class=\"uni-title\">\r\n 日期：{{data.year}}年{{data.month}}月{{data.day}}日\r\n </view>\r\n </view>\r\n <picker-view class=\"picker-view\" :value=\"data.value\" @change=\"bindChange\" :indicator-style=\"data.indicatorStyle\"\r\n :indicator-class=\"data.indicatorClass\" :mask-style=\"data.maskStyle\" :mask-class=\"data.maskClass\" :mask-top-style=\"data.maskTopStyle\"\r\n :mask-bottom-style=\"data.maskBottomStyle\">\r\n <picker-view-column class=\"picker-view-column\">\r\n <view class=\"item\" v-for=\"(item,index) in data.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 data.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 data.days\" :key=\"index\"><text class=\"text\">{{item}}日</text></view>\r\n </picker-view-column>\r\n </picker-view>\r\n \r\n <boolean-data :defaultValue=\"false\" title=\"设置选择器中间选中框的样式\" @change=\"setIndicatorStyle\"></boolean-data>\r\n \r\n \r\n <boolean-data :defaultValue=\"false\" title=\"设置选择器中间选中框的类名\" @change=\"setIndicatorClass\"></boolean-data>\r\n <boolean-data :defaultValue=\"false\" title=\"设置蒙层的样式\" @change=\"setMaskStyle\"></boolean-data>\r\n <boolean-data :defaultValue=\"false\" title=\"设置蒙层的类名\" @change=\"setMaskClass\"></boolean-data>\r\n \r\n \r\n <boolean-data :defaultValue=\"false\" title=\"设置蒙层上半部分的样式\" @change=\"setMaskTopStyle\"></boolean-data>\r\n <boolean-data :defaultValue=\"false\" title=\"设置蒙层下半部分的样式\" @change=\"setMaskBottomStyle\"></boolean-data>\r\n \r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n import { state, setEventCallbackNum } from '@/store/index.uts'\r\n\r\n type DataType = {\r\n title: string;\r\n years: number[];\r\n year: number;\r\n months: number[];\r\n month: number;\r\n days: number[];\r\n day: number;\r\n value: number[];\r\n result: number[];\r\n indicatorStyle: string;\r\n indicatorClass: string;\r\n maskStyle: string;\r\n maskClass: string;\r\n maskTopStyle: string;\r\n maskBottomStyle: string;\r\n }\r\n\r\n // 初始化数据\r\n // 20180112 HBuilderX内测开始 :)\r\n const _years : number[] = []\r\n const _year = 2018\r\n const _months : number[] = []\r\n const _month : number = 1\r\n const _days : number[] = []\r\n const _day = 12\r\n for (let i = 2000; i <= _year; i++) {\r\n _years.push(i)\r\n }\r\n for (let i = 1; i <= 12; i++) {\r\n _months.push(i)\r\n }\r\n for (let i = 1; i <= 31; i++) {\r\n _days.push(i)\r\n }\r\n\r\n // 使用reactive避免ref数据在自动化测试中无法访问\r\n const data = reactive({\r\n title: 'picker-view',\r\n years: _years,\r\n year: _year,\r\n months: _months,\r\n month: _month,\r\n days: _days,\r\n day: _day,\r\n value: [_year - 2000, _month - 1, _day - 1],\r\n result: [],\r\n indicatorStyle: 'height: 50px;',\r\n indicatorClass: '',\r\n maskStyle: '',\r\n maskClass: '',\r\n maskTopStyle: '',\r\n maskBottomStyle: ''\r\n } as DataType)\r\n\r\n const setIndicatorStyle = (checked : boolean) => {\r\n const extraStyle = 'height: 50px;border:#ff5500 solid 1px;background:rgba(182, 179, 255, 0.4);';\r\n // #ifdef APP-HARMONY\r\n data.indicatorStyle = checked ? extraStyle : \"height: 50px;border:none;background:transparent;\";\r\n // #endif\r\n // #ifndef APP-HARMONY\r\n data.indicatorStyle = checked ? extraStyle : \"height: 50px;\";\r\n // #endif\r\n }\r\n\r\n const setIndicatorClass = (checked : boolean) => {\r\n data.indicatorClass = checked ? \"indicator-test\" : \"\"\r\n }\r\n\r\n const setMaskStyle = (checked : boolean) => {\r\n const extraMaskStyle = \"background-image: linear-gradient(to bottom, #d8e5ff, rgba(216, 229, 255, 0));\"\r\n data.maskStyle = checked ? extraMaskStyle : \"\"\r\n }\r\n\r\n const setMaskClass = (checked : boolean) => {\r\n data.maskClass = checked ? \"mask-test\" : \"\"\r\n }\r\n\r\n const setMaskTopStyle = (checked : boolean) => {\r\n const linearToTop = \"background-image: linear-gradient(to bottom, #f4ff73, rgba(216, 229, 255, 0));\"\r\n // #ifdef APP-HARMONY && !VUE3-VAPOR\r\n data.maskTopStyle = checked ? linearToTop : \"background-image: linear-gradient(to bottom, transparent, transparent);\"\r\n // #endif\r\n // #ifdef APP-HARMONY && VUE3-VAPOR\r\n data.maskTopStyle = checked ? linearToTop : \"\"\r\n // #endif\r\n // #ifndef APP-HARMONY\r\n data.maskTopStyle = checked ? linearToTop : \"\"\r\n // #endif\r\n }\r\n\r\n const setMaskBottomStyle = (checked : boolean) => {\r\n const linearToBottom = \"background-image: linear-gradient(to top, #f4ff73, rgba(216, 229, 255, 0));\"\r\n // #ifdef APP-HARMONY && !VUE3-VAPOR\r\n data.maskBottomStyle = checked ? linearToBottom : \"background-image: linear-gradient(to bottom, transparent, transparent);\"\r\n // #endif\r\n // #ifdef APP-HARMONY && VUE3-VAPOR\r\n data.maskBottomStyle = checked ? linearToBottom : \"\"\r\n // #endif\r\n // #ifndef APP-HARMONY\r\n data.maskBottomStyle = checked ? linearToBottom : \"\"\r\n // #endif\r\n }\r\n\r\n // 自动化测试\r\n const getEventCallbackNum = () : number => {\r\n return state.eventCallbackNum\r\n }\r\n\r\n // 自动化测试\r\n const setEventCallbackNumTest = (num : number) => {\r\n setEventCallbackNum(num)\r\n }\r\n\r\n const bindChange = (e : UniPickerViewChangeEvent) => {\r\n // 自动化测试触发事件元素、type 类型\r\n // console.log(e.target?.tagName, e.type);\r\n if ((e.target?.tagName ?? '').includes('PICKER-VIEW')) {\r\n setEventCallbackNumTest(state.eventCallbackNum + 1)\r\n }\r\n if (e.type === 'change') {\r\n setEventCallbackNumTest(state.eventCallbackNum + 2)\r\n }\r\n const val = e.detail.value\r\n data.result = val\r\n data.year = data.years[val[0]]\r\n data.month = data.months[val[1]]\r\n data.day = data.days[val[2]]\r\n }\r\n\r\n const setValue = () => {\r\n data.value = [0, 1, 30] as number[]\r\n }\r\n\r\n const setValue1 = () => {\r\n data.value = [10, 10, 10] as number[]\r\n }\r\n\r\n defineExpose({\r\n data,\r\n setIndicatorStyle,\r\n setIndicatorClass,\r\n setMaskStyle,\r\n setMaskClass,\r\n setMaskTopStyle,\r\n setMaskBottomStyle,\r\n getEventCallbackNum,\r\n setEventCallbackNumTest,\r\n setValue,\r\n setValue1\r\n })\r\n</script>\r\n\r\n<style>\r\n .picker-view {\r\n width: 100%;\r\n height: 320px;\r\n margin-top: 10px;\r\n margin-bottom: 20px;\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\r\n /* 自动化测试 */\r\n .indicator-test {\r\n height: 50px;\r\n border: #ff5500 solid 1px;\r\n background:rgba(182, 179, 255, 0.4);\r\n }\r\n\r\n .mask-test {\r\n background-image: linear-gradient(to bottom, #d8e5ff, rgba(216, 229, 255, 0));\r\n }\r\n</style>\r\n\n```\n\n:::","children":"### 子组件 @children-tags\n| 子组件 | 兼容性 |\n| :- | :- |\n| [picker-view-column](picker-view-column.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.picker-view.picker-view)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/picker-view.html)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/picker-view.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=picker-view&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=picker-view&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=picker-view&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=picker-view&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=picker-view)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=picker-view&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"radio-group":{"name":"::: sourceCode\n## radio-group\n:::","originName":"## radio-group","description":"> 组件类型：UniRadioGroupElement \n\n 单选框组","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | 3.9 | 4.11 | 4.61 |\n","attribute":"### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- | :-: | :- |\n| name | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| @change | (event: [UniRadioGroupChangeEvent](#uniradiogroupchangeevent)) => void | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | radio-group 中的选中项发生变化时触发 change 事件，event.detail = {value: 选中项radio的value} |","event":"\n### 事件\n#### UniRadioGroupChangeEvent\n\n```mermaid\ngraph LR\n \nUniRadioGroupChangeEvent -- Extends --> UniCustomEvent&ltUniRadioGroupChangeEventDetail&gt\n style UniCustomEvent&ltUniRadioGroupChangeEventDetail&gt color:#42b983\n click UniCustomEvent&ltUniRadioGroupChangeEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniRadioGroupChangeEventDetail\n\n\n###### UniRadioGroupChangeEventDetail 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| value | string | 是 |\n\n","example":"","children":"### 子组件 @children-tags\n| 子组件 | 兼容性 |\n| :- | :- |\n| [*](*.md) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.radio.radio-group)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/radio.html)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/radio-group.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=radio-group&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=radio-group&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=radio-group&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=radio-group&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=radio-group)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=radio-group&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"radio":{"name":"::: sourceCode\n## radio\n:::","originName":"## radio","description":"> 组件类型：UniRadioElement \n\n 单选项。在1组radio-group中只能选中1个","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | 3.9 | 4.11 | 4.61 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| disabled | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 是否禁用 |\n| value | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| checked | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 当前是否选中，可用来设置默认选中 |\n| ~~color~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007AFF\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | radio的颜色 (使用foreColor替代) |\n| backgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | radio默认的背景颜色 |\n| borderColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#d1d1d1\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | radio默认的边框颜色 |\n| activeBackgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007AFF\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | radio选中时的背景颜色，优先级大于color属性 |\n| activeBorderColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | radio选中时的边框颜色 |\n| ~~iconColor~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | radio的图标颜色 (使用foreColor替代) |\n| foreColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.18\",\"x\",\"4.18\",\"4.18\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | radio的图标颜色 |\n| icon-class | string([string.ClassString](/uts/data-type.md#ide-string)) | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"5.21\",\"5.11\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 单选框图标的类名 |\n| radio-class | string([string.ClassString](/uts/data-type.md#ide-string)) | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"5.21\",\"5.11\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 单选框的类名 |\n| radio-active-class | string([string.ClassString](/uts/data-type.md#ide-string)) | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"5.21\",\"5.11\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 单选框选中的类名 |","event":"","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/radio/radio.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/radio/radio.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/radio/radio\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/radio/radio\n\n>示例\n```vue\n<script setup lang=\"uts\">\r\n type ItemType = {\r\n value: string\r\n name: string\r\n }\r\n\r\n type DataType = {\r\n items: ItemType[];\r\n current: number;\r\n eventTest: boolean;\r\n value: string;\r\n text: string;\r\n wrapText: string;\r\n disabled: boolean;\r\n checked: boolean;\r\n color: string;\r\n checked_boolean: boolean;\r\n disabled_boolean: boolean;\r\n color_input: string;\r\n backgroundColor_input: string;\r\n borderColor_input: string;\r\n activeBackgroundColor_input: string;\r\n activeBorderColor_input: string;\r\n iconColor_input: string;\r\n }\r\n // 使用reactive避免ref数据在自动化测试中无法访问\r\n const data = reactive({\r\n items: [\r\n {\r\n value: 'CHN',\r\n name: '中国',\r\n },\r\n {\r\n value: 'USA',\r\n name: '美国',\r\n },\r\n\r\n {\r\n value: 'BRA',\r\n name: '巴西',\r\n },\r\n {\r\n value: 'JPN',\r\n name: '日本',\r\n },\r\n {\r\n value: 'ENG',\r\n name: '英国',\r\n },\r\n {\r\n value: 'FRA',\r\n name: '法国',\r\n },\r\n ],\r\n current: 0,\r\n eventTest: false,\r\n value: '',\r\n text: '未选中',\r\n wrapText: 'uni-app x，终极跨平台方案 uts，大一统语言',\r\n disabled: true,\r\n checked: true,\r\n color: '#007aff',\r\n // 组件属性 autotest\r\n checked_boolean: false,\r\n disabled_boolean: false,\r\n color_input: \"#007AFF\",\r\n backgroundColor_input: \"#ffffff\",\r\n borderColor_input: \"#d1d1d1\",\r\n activeBackgroundColor_input: \"#007AFF\",\r\n activeBorderColor_input: \"\",\r\n iconColor_input: \"#ffffff\"\r\n } as DataType)\r\n\r\n const radioChange = (e: UniRadioGroupChangeEvent) => {\r\n // 自动化测试\r\n console.log('test: radio event detail', e.target?.tagName, e.type)\r\n if ((e.target?.tagName ?? '') == 'RADIO-GROUP' && e.type == 'change') {\r\n data.eventTest = true\r\n }\r\n\r\n const selected = data.items.find((item): boolean => {\r\n return item.value == e.detail.value\r\n })\r\n uni.showToast({\r\n icon: 'none',\r\n title: '当前选中:' + selected?.name,\r\n })\r\n }\r\n\r\n const testChange = (e: UniRadioGroupChangeEvent) => {\r\n data.value = e.detail.value\r\n }\r\n\r\n const radio_click = () => {\r\n console.log(\"组件被点击时触发\")\r\n }\r\n\r\n const radio_touchstart = () => {\r\n console.log(\"手指触摸动作开始\")\r\n }\r\n\r\n const radio_touchmove = () => {\r\n console.log(\"手指触摸后移动\")\r\n }\r\n\r\n const radio_touchcancel = () => {\r\n console.log(\"手指触摸动作被打断，如来电提醒，弹窗\")\r\n }\r\n\r\n const radio_touchend = () => {\r\n console.log(\"手指触摸动作结束\")\r\n }\r\n\r\n const radio_tap = () => {\r\n console.log(\"手指触摸后马上离开\")\r\n }\r\n\r\n const radio_longpress = () => {\r\n console.log(\"如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。\")\r\n }\r\n\r\n const change_checked_boolean = (checked: boolean) => {\r\n data.checked_boolean = checked\r\n }\r\n\r\n const change_disabled_boolean = (checked: boolean) => {\r\n data.disabled_boolean = checked\r\n }\r\n\r\n const confirm_color_input = (value: string) => {\r\n data.color_input = value\r\n }\r\n\r\n const confirm_backgroundColor_input = (value: string) => {\r\n data.backgroundColor_input = value\r\n }\r\n\r\n const confirm_borderColor_input = (value: string) => {\r\n data.borderColor_input = value\r\n }\r\n\r\n const confirm_activeBackgroundColor_input = (value: string) => {\r\n data.activeBackgroundColor_input = value\r\n }\r\n\r\n const confirm_activeBorderColor_input = (value: string) => {\r\n data.activeBorderColor_input = value\r\n }\r\n\r\n const confirm_iconColor_input = (value: string) => {\r\n data.iconColor_input = value\r\n }\r\n\r\n defineExpose({\r\n data\r\n })\r\n</script>\r\n\r\n<template>\r\n <view class=\"main uni-theme-root\">\r\n <view class=\"control-row\">\r\n <radio :disabled=\"data.disabled_boolean\" :checked=\"data.checked_boolean\" :color=\"data.color_input\"\r\n :backgroundColor=\"data.backgroundColor_input\" :borderColor=\"data.borderColor_input\"\r\n :activeBackgroundColor=\"data.activeBackgroundColor_input\" :activeBorderColor=\"data.activeBorderColor_input\"\r\n :iconColor=\"data.iconColor_input\" @click=\"radio_click\" @touchstart=\"radio_touchstart\" @touchmove=\"radio_touchmove\"\r\n @touchcancel=\"radio_touchcancel\" @touchend=\"radio_touchend\" @tap=\"radio_tap\" @longpress=\"radio_longpress\" />\r\n <text class=\"control-row-text\">uni-app-x</text>\r\n </view>\r\n </view>\r\n\r\n <scroll-view class=\"uni-theme-root\" style=\"flex: 1\">\r\n <view class=\"content\">\r\n <page-head title=\"组件属性\"></page-head>\r\n <boolean-data :defaultValue=\"false\" title=\"<radio/> 当前是否选中\" @change=\"change_checked_boolean\"></boolean-data>\r\n <boolean-data :defaultValue=\"false\" title=\"是否禁用\" @change=\"change_disabled_boolean\"></boolean-data>\r\n </view>\r\n\r\n <view>\r\n <page-head title=\"默认及使用\"></page-head>\r\n <view class=\"uni-padding-wrap\">\r\n <view class=\"uni-title uni-common-mt\">\r\n <text class=\"uni-title-text\"> 默认样式 </text>\r\n </view>\r\n <radio-group class=\"uni-row radio-group\" @change=\"testChange\" style=\"flex-wrap: wrap\">\r\n <view style=\"margin-right: 15px\" class=\"radio\">\r\n <radio class=\"r\" id=\"trigger-change\" value=\"r\" :checked=\"data.checked\" :color=\"data.color\">选中</radio>\r\n </view>\r\n <view style=\"margin-right: 15px\" class=\"radio\">\r\n <radio class=\"r1\" value=\"r1\">{{ data.text }}</radio>\r\n </view>\r\n <view class=\"radio\"><radio class=\"r2\" value=\"r2\" :disabled=\"data.disabled\">禁用</radio></view>\r\n <view class=\"radio r3\" style=\"margin-top: 10px\">\r\n <radio value=\"r3\" />\r\n <text>{{ data.wrapText }}</text>\r\n </view>\r\n </radio-group>\r\n </view>\r\n\r\n <view class=\"uni-padding-wrap\">\r\n <view class=\"uni-title uni-common-mt\">\r\n <text class=\"uni-title-text\"> 不同颜色和尺寸的radio </text>\r\n </view>\r\n <radio-group class=\"uni-row radio-group\">\r\n \r\n <view style=\"transform: scale(0.7); margin-right: 15px\" class=\"radio\">\r\n <radio value=\"r1\" :checked=\"true\" color=\"#FFCC33\" />\r\n <text>选中</text>\r\n </view>\r\n <view style=\"transform: scale(0.7)\" class=\"radio\"><radio value=\"r2\" color=\"#FFCC33\" /><text>未选中</text></view>\r\n \r\n \r\n <view style=\"transform: scale(0.7); margin-right: 15px\" class=\"radio\">\r\n <radio value=\"r1\" :checked=\"true\" radio-active-class=\"radio-active\" />\r\n <text>选中</text>\r\n </view>\r\n <view style=\"transform: scale(0.7)\" class=\"radio\"><radio value=\"r2\" id=\"radio-vapor\" radio-active-class=\"radio-active\" /><text>未选中</text></view>\r\n \r\n </radio-group>\r\n </view>\r\n\r\n\r\n <view class=\"uni-padding-wrap\">\r\n <view class=\"uni-title uni-common-mt\">\r\n <text class=\"uni-title-text\"> 两端对齐样式测试 </text>\r\n </view>\r\n <radio-group class=\"uni-row radio-group\">\r\n <view class=\"justify-test\"><radio /><text>justify-content样式测试</text></view>\r\n </radio-group>\r\n </view>\r\n\r\n <view class=\"uni-padding-wrap\">\r\n <view class=\"uni-title uni-common-mt\">\r\n <text class=\"uni-title-text\"> 推荐展示样式 </text>\r\n </view>\r\n </view>\r\n <view class=\"uni-list uni-common-pl\">\r\n <radio-group @change=\"radioChange\" class=\"radio-group\">\r\n <view class=\"uni-list-cell uni-list-cell-pd radio\" v-for=\"(item, index) in data.items\" :key=\"item.value\"\r\n :class=\"index < data.items.length - 1 ? 'uni-list-cell-line' : ''\">\r\n <radio class=\"recommend\" :value=\"item.value\" :checked=\"index === data.current\" />\r\n <text>{{ item.name }}</text>\r\n </view>\r\n </radio-group>\r\n </view>\r\n </view>\r\n\r\n \r\n <view>\r\n <input-data defaultValue=\"#007AFF\" title=\"radio的颜色\" type=\"text\" @confirm=\"confirm_color_input\"></input-data>\r\n <input-data defaultValue=\"#ffffff\" title=\"radio默认的背景颜色\" type=\"text\"\r\n @confirm=\"confirm_backgroundColor_input\"></input-data>\r\n <input-data defaultValue=\"#d1d1d1\" title=\"radio默认的边框颜色\" type=\"text\"\r\n @confirm=\"confirm_borderColor_input\"></input-data>\r\n <input-data defaultValue=\"#007AFF\" title=\"radio选中时的背景颜色，优先级大于color属性\" type=\"text\"\r\n @confirm=\"confirm_activeBackgroundColor_input\"></input-data>\r\n <input-data defaultValue=\"\" title=\"radio选中时的边框颜色\" type=\"text\"\r\n @confirm=\"confirm_activeBorderColor_input\"></input-data>\r\n <input-data defaultValue=\"#ffffff\" title=\"radio的图标颜色\" type=\"text\" @confirm=\"confirm_iconColor_input\"></input-data>\r\n </view>\r\n \r\n\r\n \r\n <navigator class=\"uni-common-mb\" url=\"/pages/template/radio-200/radio-200\">\r\n <button class=\"uni-common-mt\">组件性能测试</button>\r\n </navigator>\r\n \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 var(--border-color, rgba(0, 0, 0, 0.06));\r\n flex-direction: row;\r\n justify-content: center;\r\n }\r\n\r\n .uni-list-cell {\r\n justify-content: flex-start;\r\n }\r\n\r\n .radio,\r\n .control-row {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n }\r\n\r\n .control-row-text {\r\n margin-left: 5px;\r\n }\r\n\r\n .justify-test {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n width: 100%;\r\n justify-content: space-between;\r\n }\r\n\r\n .radio {\r\n color: var(--text-color, #333333);\r\n }\r\n\r\n /* #ifdef VUE3-VAPOR && !MP */\r\n .radio-active {\r\n background-color: #FFCC33;\r\n border-color: #FFCC33;\r\n }\r\n /* #endif */\r\n</style>\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.radio.radio)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/radio.html#radio)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/radio.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=radio&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=radio&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=radio&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=radio&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=radio)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=radio&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"slider":{"name":"::: sourceCode\n## slider\n:::","originName":"## slider","description":"> 组件类型：UniSliderElement \n\n 滑动选择器","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | 3.9 | 4.11 | 4.61 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| disabled | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 是否禁用 |\n| min | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | slider 最小值 |\n| max | number | 100 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | slider 最大值 |\n| step | number | 1 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | slider 步长，取值必须大于 0，并且可被(max - min)整除 |\n| value | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | slider 当前取值 |\n| activeBackgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.18\",\"x\",\"4.18\",\"4.18\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | slider 滑块左侧已选择部分的线条颜色 (vapor 模式请使用 track-active-class) |\n| ~~activeColor~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#007aff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | slider 滑块左侧已选择部分的线条颜色 |\n| backgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#e9e9e9\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | slider 背景条的颜色 (vapor 模式请使用 track-class) |\n| block-size | number | 28 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | slider 滑块的大小，取值范围为 12 - 28 (vapor 模式请使用 thumb-class) |\n| ~~block-color~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | \"#ffffff\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 滑块颜色 (使用foreColor替代) |\n| foreColor | string([string.ColorString](/uts/data-type.md#ide-string)) | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.18\",\"x\",\"4.18\",\"4.18\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | slider 的滑块背景颜色 (vapor 模式请使用 thumb-class) |\n| show-value | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 是否显示当前 value |\n| color | color | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"-\",\"4.41\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(color)*<br/>背景条的颜色（请使用 backgroundColor） |\n| selected-color | color | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"-\",\"4.41\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(color)*<br/>已选择的颜色（请使用 activeColor） |\n| track-class | string([string.ClassString](/uts/data-type.md#ide-string)) | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"5.21\",\"x\",\"5.11\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | slider 背景条样式类名 |\n| track-active-class | string([string.ClassString](/uts/data-type.md#ide-string)) | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"5.21\",\"x\",\"5.11\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | slider 滑块左侧已选择部分的线条样式类名 |\n| thumb-class | string([string.ClassString](/uts/data-type.md#ide-string)) | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"5.21\",\"x\",\"5.11\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | slider 滑块样式类名 |\n| @change | (event: [UniSliderChangeEvent](#unisliderchangeevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 完成一次拖动后触发的事件，event.detail = {value: value} |\n| @changing | (event: [UniSliderChangeEvent](#unisliderchangeevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 拖动过程中触发的事件，event.detail = {value: value} |","event":"\n### 事件\n#### UniSliderChangeEvent\n\n```mermaid\ngraph LR\n \nUniSliderChangeEvent -- Extends --> UniCustomEvent&ltUniSliderChangeEventDetail&gt\n style UniCustomEvent&ltUniSliderChangeEventDetail&gt color:#42b983\n click UniCustomEvent&ltUniSliderChangeEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniSliderChangeEventDetail\n\n\n###### UniSliderChangeEventDetail 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| value | number | 是 |\n\n","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/slider/slider.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/slider/slider.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/slider/slider\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/slider/slider\n\n>示例\n```vue\n<script setup lang=\"uts\">\r\n type DataType = {\r\n sliderValue: number;\r\n sliderBlockSize: number;\r\n sliderBackgroundColor: string;\r\n sliderActiveColor: string;\r\n sliderBlockColor: string;\r\n // 组件属性 autotest\r\n show_value_boolean: boolean;\r\n disabled_boolean: boolean;\r\n min_input: number;\r\n max_input: number;\r\n step_input: number;\r\n value_input: number;\r\n activeColor_input: string;\r\n backgroundColor_input: string;\r\n block_size_input: number;\r\n block_color_input: string;\r\n valueColor: string;\r\n }\r\n // 使用reactive避免ref数据在自动化测试中无法访问\r\n const data = reactive({\r\n sliderValue: 50,\r\n sliderBlockSize: 20,\r\n sliderBackgroundColor: \"#000000\",\r\n sliderActiveColor: \"#FFCC33\",\r\n sliderBlockColor: \"#8A6DE9\",\r\n // 组件属性 autotest\r\n show_value_boolean: false,\r\n disabled_boolean: false,\r\n min_input: 0,\r\n max_input: 100,\r\n step_input: 1,\r\n value_input: 0,\r\n activeColor_input: \"#007aff\",\r\n backgroundColor_input: \"#e9e9e9\",\r\n block_size_input: 28,\r\n block_color_input: \"#ffffff\",\r\n valueColor: \"#888888\"\r\n } as DataType)\r\n\r\n const sliderChange = (e: UniSliderChangeEvent) => {\r\n console.log(\"value 发生变化：\" + e.detail.value);\r\n }\r\n\r\n const slider_click = () => {\r\n console.log(\"组件被点击时触发\");\r\n }\r\n\r\n const slider_touchstart = () => {\r\n console.log(\"手指触摸动作开始\");\r\n }\r\n\r\n const slider_touchmove = () => {\r\n console.log(\"手指触摸后移动\");\r\n }\r\n\r\n const slider_touchcancel = () => {\r\n console.log(\"手指触摸动作被打断，如来电提醒，弹窗\");\r\n }\r\n\r\n const slider_touchend = () => {\r\n console.log(\"手指触摸动作结束\");\r\n }\r\n\r\n const slider_tap = () => {\r\n console.log(\"手指触摸后马上离开\");\r\n }\r\n\r\n const slider_longpress = () => {\r\n console.log(\r\n \"如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。\"\r\n );\r\n }\r\n\r\n const slider_change = () => {\r\n console.log(\"完成一次拖动后触发的事件，event.detail = {value: value}\");\r\n }\r\n\r\n const slider_changing = () => {\r\n console.log(\"拖动过程中触发的事件，event.detail = {value: value}\");\r\n }\r\n\r\n const change_show_value_boolean = (checked: boolean) => {\r\n data.show_value_boolean = checked;\r\n }\r\n\r\n const change_disabled_boolean = (checked: boolean) => {\r\n data.disabled_boolean = checked;\r\n }\r\n\r\n const confirm_min_input = (value: number) => {\r\n data.min_input = value;\r\n }\r\n\r\n const confirm_max_input = (value: number) => {\r\n data.max_input = value;\r\n }\r\n\r\n const confirm_step_input = (value: number) => {\r\n data.step_input = value;\r\n }\r\n\r\n const confirm_value_input = (value: number) => {\r\n data.value_input = value;\r\n }\r\n\r\n const confirm_activeColor_input = (value: string) => {\r\n data.activeColor_input = value;\r\n }\r\n\r\n const confirm_backgroundColor_input = (value: string) => {\r\n data.backgroundColor_input = value;\r\n }\r\n\r\n const confirm_block_size_input = (value: number) => {\r\n data.block_size_input = value;\r\n }\r\n\r\n const confirm_block_color_input = (value: string) => {\r\n data.block_color_input = value;\r\n }\r\n\r\n const confirm_value_color_input = (value: string) => {\r\n data.valueColor = value;\r\n }\r\n\r\n defineExpose({\r\n data\r\n })\r\n</script>\r\n\r\n<template>\n <view class=\"main\">\r\n <slider :disabled=\"data.disabled_boolean\" :min=\"data.min_input\" :max=\"data.max_input\" :step=\"data.step_input\" :value=\"data.value_input\"\r\n :activeColor=\"data.activeColor_input\" :backgroundColor=\"data.backgroundColor_input\" :block-size=\"data.block_size_input\"\r\n :block-color=\"data.block_color_input\" :show-value=\"data.show_value_boolean\" :valueColor=\"data.valueColor\" @click=\"slider_click\"\r\n @touchstart=\"slider_touchstart\" @touchmove=\"slider_touchmove\" @touchcancel=\"slider_touchcancel\"\r\n @touchend=\"slider_touchend\" @tap=\"slider_tap\" @longpress=\"slider_longpress\" @change=\"slider_change\"\r\n @changing=\"slider_changing\" style=\"width: 90%;margin-left: 10px;\"></slider>\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=\"是否显示当前 value\" @change=\"change_show_value_boolean\"></boolean-data>\r\n <boolean-data :defaultValue=\"false\" title=\"是否禁用\" @change=\"change_disabled_boolean\"></boolean-data>\r\n <input-data defaultValue=\"0\" title=\"最小值(min)\" type=\"number\" @confirm=\"confirm_min_input\"></input-data>\r\n <input-data defaultValue=\"100\" title=\"最大值(max)\" type=\"number\" @confirm=\"confirm_max_input\"></input-data>\r\n <input-data defaultValue=\"1\" title=\"步长(step)，取值必须大于 0，并且可被(max - min)整除\" type=\"number\"\r\n @confirm=\"confirm_step_input\"></input-data>\r\n <input-data defaultValue=\"0\" title=\"当前取值(value)\" type=\"number\" @confirm=\"confirm_value_input\"></input-data>\r\n \r\n <input-data defaultValue=\"#007aff\" title=\"滑块左侧已选择部分的线条颜色(active-color)\" type=\"text\"\r\n @confirm=\"confirm_activeColor_input\"></input-data>\r\n <input-data defaultValue=\"#e9e9e9\" title=\"背景条的颜色(background-color)\" type=\"text\"\r\n @confirm=\"confirm_backgroundColor_input\"></input-data>\r\n <input-data defaultValue=\"28\" title=\"滑块的大小(block-size)，取值范围为 12 - 28\" type=\"number\"\r\n @confirm=\"confirm_block_size_input\"></input-data>\r\n <input-data defaultValue=\"#ffffff\" title=\"滑块颜色(block-color)\" type=\"text\"\r\n @confirm=\"confirm_block_color_input\"></input-data>\r\n <input-data defaultValue=\"#888888\" title=\"Value颜色(value-color)\" type=\"text\"\r\n @confirm=\"confirm_value_color_input\"></input-data>\r\n \r\n </view>\r\n\r\n <view class=\"uni-padding-wrap\">\r\n <page-head title=\"默认及使用\"></page-head>\r\n <view class=\"uni-title\">显示当前value</view>\r\n <view>\r\n <slider style=\"padding: 5px 0;margin-left: 10px;\" @change=\"sliderChange\" :value=\"50\" :show-value=\"true\" />\r\n </view>\r\n\r\n <view class=\"uni-title\">设置步进:step=10跳动</view>\r\n <view>\r\n <view class=\"uni-row\">\r\n <text>0</text>\r\n <text class=\"m-l-a\">100</text>\r\n </view>\r\n <slider style=\"padding: 5px 0;margin-left: 10px;\" @change=\"sliderChange\" :value=\"60\" :step=\"10\" />\r\n </view>\r\n\r\n <view class=\"uni-title\">浮点步进:step=0.01跳动</view>\r\n <view>\r\n <slider style=\"padding: 5px 0;margin-left: 10px\" :value=\"0.5\" :min=\"0\" :max=\"1\" :step=\"0.01\" :show-value=\"true\" />\r\n </view>\r\n\r\n <view class=\"uni-title\">设置最小/最大值</view>\r\n <view>\r\n <slider style=\"padding: 5px 0;margin-left: 10px\" @change=\"sliderChange\" :value=\"100\" :min=\"50\" :max=\"200\" :show-value=\"true\" />\r\n </view>\r\n\r\n <view class=\"uni-title\">不同颜色和大小的滑块</view>\r\n <view>\r\n \r\n <slider style=\"padding: 5px 0;margin-left: 10px\" id=\"slider-custom-color-and-size\" @change=\"sliderChange\" :value=\"data.sliderValue\"\r\n :backgroundColor=\"data.sliderBackgroundColor\" :activeColor=\"data.sliderActiveColor\"\r\n :activeBackgroundColor=\"data.sliderActiveColor\" :blockColor=\"data.sliderBlockColor\" :foreColor=\"data.sliderBlockColor\"\r\n :block-size=\"data.sliderBlockSize\"\r\n track-class=\"custom-track\" track-active-class=\"custom-track-active\" thumb-class=\"custom-thumb\"/>\r\n </view>\r\n <view class=\"uni-title\">暗黑模式</view>\r\n <view>\r\n <slider style=\"padding: 5px 0;margin-left: 10px\" :show-value=\"true\" backgroundColor=\"rgba(32,32,32,0.5)\" valueColor=\"#555\" track-class=\"dark-track\" thumb-class=\"dark-thumb\"/>\r\n </view>\r\n\r\n \n <navigator class=\"uni-common-mb\" url=\"/pages/template/slider-100/slider-100\">\n <button>组件性能测试</button>\n </navigator>\n \n\n <navigator class=\"uni-common-mb\" url=\"./slider-in-swiper\">\n <button>slider in swiper</button>\r\n </navigator>\r\n\r\n <navigator class=\"uni-common-mb\" url=\"./slider-maxValue\">\r\n <button>slider maxValue</button>\r\n </navigator>\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 .m-l-a {\r\n margin-left: auto;\r\n }\r\n\r\n /* 自定义样式示例 */\r\n .custom-track {\r\n background-color: #000000;\r\n }\r\n\r\n .custom-track-active {\r\n background-color: #FFCC33;\r\n }\r\n\r\n .custom-thumb {\r\n width: 20px;\r\n height: 20px;\r\n background-color: #8A6DE9;\r\n border-radius: 10px;\r\n }\r\n\r\n /* 暗黑模式样式 */\r\n .dark-track {\r\n background-color: rgba(32, 32, 32, 0.5);\r\n }\r\n\r\n .dark-thumb {\r\n background-color: #555;\r\n }\r\n</style>\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.slider)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/slider.html)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/slider.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=slider&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=slider&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=slider&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=slider&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=slider)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=slider&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"switch":{"name":"::: sourceCode\n## switch\n:::","originName":"## switch","description":"> 组件类型：UniSwitchElement \n\n 开关选择器","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | 3.9 | 4.11 | 4.61 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| checked | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 当前是否选中，可用来设置默认选中 |\n| type | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 样式，有效值：switch, checkbox |\n@| 合法值 | 兼容性 |\n@| :- | :-: |\n@| switch | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n@| checkbox | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| ~~color~~ | string([string.ColorString](/uts/data-type.md#ide-string)) | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | switch 的颜色，同 css 的 color (使用foreColor替代) |\n| backgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.18\",\"x\",\"4.18\",\"4.18\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | switch 的关闭状态背景颜色 |\n| activeBackgroundColor | string([string.ColorString](/uts/data-type.md#ide-string)) | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.18\",\"x\",\"4.18\",\"4.18\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | switch 的开启状态背景颜色 |\n| foreColor | string([string.ColorString](/uts/data-type.md#ide-string)) | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.18\",\"x\",\"4.18\",\"4.18\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | switch 的滑块背景颜色 |\n| activeForeColor | string([string.ColorString](/uts/data-type.md#ide-string)) | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.18\",\"x\",\"4.18\",\"4.18\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | switch 的开启状态下的滑块背景颜色 |\n| disabled | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 是否禁用 |\n| thumb-class | string([string.ClassString](/uts/data-type.md#ide-string)) | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"5.21\",\"5.11\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 开关选择器滑块的类名 |\n| thumb-active-class | string([string.ClassString](/uts/data-type.md#ide-string)) | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"5.21\",\"5.11\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 开关选择器滑块选中的类名 |\n| switch-active-class | string([string.ClassString](/uts/data-type.md#ide-string)) | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"5.21\",\"5.11\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 开关选择器选中的类名 |\n| @change | (event: [UniSwitchChangeEvent](#uniswitchchangeevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | checked 改变时触发 change 事件，event.detail={ value:checked} |","event":"\n### 事件\n#### UniSwitchChangeEvent\n\n```mermaid\ngraph LR\n \nUniSwitchChangeEvent -- Extends --> UniCustomEvent&ltUniSwitchChangeEventDetail&gt\n style UniCustomEvent&ltUniSwitchChangeEventDetail&gt color:#42b983\n click UniCustomEvent&ltUniSwitchChangeEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniSwitchChangeEventDetail\n\n\n###### UniSwitchChangeEventDetail 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| value | boolean | 是 |\n\n","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/switch/switch.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/switch/switch.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/switch/switch\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/switch/switch\n\n>示例\n```vue\n<template>\r\n <view>\r\n <view class=\"uni-padding-wrap uni-common-mt\">\r\n <view class=\"uni-title\">默认样式</view>\r\n <view class=\"flex-row\">\r\n <switch class=\"switch-checked\" :checked=\"data.checked\" @change=\"switch1Change\" />\r\n <switch @change=\"switch2Change\" />\r\n </view>\r\n <view class=\"uni-title\">暗黑样式</view>\r\n <view class=\"flex-row\">\r\n \r\n <switch id=\"darkChecked\" background-color=\"#1f1f1f\" activeBackgroundColor=\"#007aff\" foreColor=\"#f0f0f0\"\r\n activeForeColor=\"#ffffff\" :checked=\"data.checked\" />\r\n <switch id=\"dark\" background-color=\"#1f1f1f\" activeBackgroundColor=\"#007aff\" foreColor=\"#f0f0f0\"\r\n activeForeColor=\"#ffffff\" />\r\n \r\n \r\n <switch id=\"darkChecked\" :class=\"{ 'dark-class': !data.darkChecked1 }\" switch-active-class=\"custom-switch-active\" thumb-active-class=\"custom-thumb-active1\" thumb-class=\"custom-thumb1\" :checked=\"data.checked\" @change=\"switch3Change\" />\r\n <switch id=\"dark\" :class=\"{ 'dark-class': !data.darkChecked2 }\" switch-active-class=\"custom-switch-active\" thumb-active-class=\"custom-thumb-active1\" thumb-class=\"custom-thumb1\" @change=\"switch4Change\" />\r\n \r\n </view>\r\n <view class=\"uni-title\">禁用样式</view>\r\n <view class=\"flex-row\">\r\n <switch class=\"switch-checked\" :checked=\"data.checked\" :disabled=\"true\" />\r\n <switch :disabled=\"true\" />\r\n </view>\r\n <view class=\"uni-title\">不同颜色和尺寸的switch</view>\r\n <view class=\"flex-row\">\r\n \r\n <switch class=\"switch-color-checked\" :color=\"data.color\" style=\"transform:scale(0.7)\" :checked=\"true\" />\r\n <switch class=\"switch-color\" :color=\"data.color\" style=\"transform:scale(0.7)\" />\r\n \r\n \r\n <switch switch-active-class=\"custom-switch-active-color\" style=\"transform:scale(0.7)\" :checked=\"true\" />\r\n <switch switch-active-class=\"custom-switch-active-color\" style=\"transform:scale(0.7)\" />\r\n \r\n </view>\r\n <view class=\"uni-title\">推荐展示样式</view>\r\n </view>\r\n <view class=\"uni-list\">\r\n <view class=\"uni-list-cell uni-list-cell-padding\">\r\n <view class=\"uni-list-cell-db\">开启中</view>\r\n <switch :checked=\"true\" />\r\n </view>\r\n <view class=\"uni-list-cell uni-list-cell-padding\">\r\n <view class=\"uni-list-cell-db\">关闭</view>\r\n <switch />\r\n </view>\r\n\r\n \r\n <view class=\"uni-list-cell uni-list-cell-padding\">\r\n <view class=\"uni-list-cell-db\">自定义 thumb 样式</view>\r\n <switch thumb-class=\"custom-thumb\" thumb-active-class=\"custom-thumb-active\" />\r\n </view>\r\n \r\n </view>\r\n\r\n \n <navigator class=\"uni-common-mb\" url=\"/pages/template/switch-100/switch-100\">\n <button>组件性能测试</button>\n </navigator>\n \n </view>\n</template>\n\r\n<script setup lang=\"uts\">\r\n type DataType = {\r\n title: string;\r\n checked: boolean;\r\n // #ifdef VUE3-VAPOR && !MP\r\n darkChecked1: boolean;\r\n darkChecked2: boolean;\r\n // #endif\r\n color: string;\r\n clickCheckedValue: boolean;\r\n testVerifyEvent: boolean;\r\n }\r\n // 使用reactive避免ref数据在自动化测试中无法访问\r\n const data = reactive({\r\n title: 'switch 开关',\r\n checked: true,\r\n // #ifdef VUE3-VAPOR && !MP\r\n darkChecked1: true,\r\n darkChecked2: false,\r\n // #endif\r\n color: '#FFCC33',\r\n clickCheckedValue: true,\r\n testVerifyEvent: false\r\n } as DataType)\r\n\r\n const switch1Change = (e: UniSwitchChangeEvent) => {\r\n data.clickCheckedValue = e.detail.value\r\n console.log('switch1 发生 change 事件，携带值为', e.detail.value)\r\n // 仅测试\r\n data.testVerifyEvent = (e.type == 'change' && (e.target?.tagName ?? '') == \"SWITCH\")\r\n }\r\n\r\n const switch2Change = (e: UniSwitchChangeEvent) => {\r\n console.log('switch2 发生 change 事件，携带值为', e.detail.value)\r\n }\r\n\r\n // #ifdef VUE3-VAPOR && !MP\r\n const switch3Change = (e: UniSwitchChangeEvent) => {\r\n data.darkChecked1 = e.detail.value\r\n }\r\n\r\n const switch4Change = (e: UniSwitchChangeEvent) => {\r\n data.darkChecked2 = e.detail.value\r\n }\r\n // #endif\r\n\r\n defineExpose({\r\n data\r\n })\r\n</script>\r\n\r\n<style>\r\n .flex-row {\r\n flex-direction: row;\r\n }\r\n\r\n /* #ifdef VUE3-VAPOR && !MP */\r\n .dark-class {\r\n background-color: #1f1f1f;\r\n border-color: #1f1f1f;\r\n }\r\n\r\n .custom-switch-active {\r\n background-color: #007aff;\r\n border-color: #007aff;\r\n }\r\n\r\n .custom-switch-active-color {\r\n background-color: #FFCC33;\r\n border-color: #FFCC33;\r\n }\r\n\r\n .custom-thumb-active1 {\r\n background-color: #ffffff;\r\n }\r\n\r\n .custom-thumb1 {\r\n background-color: #f0f0f0;\r\n }\r\n\r\n .custom-thumb {\r\n background-color: #007aff;\r\n }\r\n\r\n .custom-thumb-active {\r\n background-color: #e64340;\r\n }\r\n /* #endif */\r\n</style>\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.switch)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/switch.html)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/switch.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=switch&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=switch&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=switch&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=switch&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=switch)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=switch&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"textarea":{"name":"::: sourceCode\n## textarea\n\n> GitCode: https://gitcode.com/dcloud/uni-component/tree/alpha/uni_modules/uni-textarea\n\n\n> GitHub: https://github.com/dcloudio/uni-component/tree/alpha/uni_modules/uni-textarea\n\n:::","originName":"## textarea","description":"> 组件类型：[UniTextareaElement](/api/dom/unitextareaelement.md) \n\n 多行输入框","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | 3.9 | 4.11 | 4.61 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | \"textarea\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 |\n| disabled | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 是否禁用 |\n| value | string | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 输入框的初始内容 |\n| placeholder | string | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 输入框为空时占位符 |\n| placeholder-style | string | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 指定 placeholder 的样式 |\n| placeholder-class | string([string.ClassString](/uts/data-type.md#ide-string)) | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 指定 placeholder 的样式类 |\n| maxlength | string \\| number | -1 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 最大输入长度，0和正数为合法值，非法值的时候不限制最大长度 |\n| auto-focus | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 自动获取焦点，与`focus`属性对比，此属性只会首次生效。 |\n| focus | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 获取焦点 |\n| confirm-type | string | \"return\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.15\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 设置键盘右下角按钮的文字 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| return | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.15\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 换行 |\n@| send | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.73\",\"4.15\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 发送 |\n@| search | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.73\",\"4.15\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 搜索 |\n@| next | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.73\",\"4.15\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 下一个 |\n@| go | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.73\",\"4.15\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 前往 |\n@| done | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.73\",\"4.15\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 完成 |\n| cursor | number | -1 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 指定focus时的光标位置 |\n| confirm-hold | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 点击键盘右下角按钮时是否保持键盘不收起 |\n| auto-height | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.65\"]],\"status\":\"SUPPORTED\"}' /> | 是否自动增高，设置auto-height时，style.height不生效 |\n| cursor-spacing | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"3.9\",\"4.11\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 指定光标与键盘的距离，单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 |\n| cursor-color | string([string.ColorString](/uts/data-type.md#ide-string)) | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.99\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 指定光标颜色 |\n| selection-start | number | -1 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 光标起始位置，自动聚集时有效，需与selection-end搭配使用 |\n| selection-end | number | -1 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 光标结束位置，自动聚集时有效，需与selection-start搭配使用 |\n| adjust-position | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 键盘弹起时，是否自动上推页面 |\n| hold-keyboard | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | focus时，点击页面的时候不收起键盘 |\n| inputmode | none \\| text \\| decimal \\| numeric \\| tel \\| search \\| email \\| url | \"text\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。在符合条件的高版本webview里，uni-app的 web 和 app-vue 平台中可使用本属性。 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用。 |\n@| text | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 使用用户本地区域设置的标准文本输入键盘。 |\n@| decimal | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 小数输入键盘，包含数字和分隔符（通常是“ . ”或者“ , ”），设备可能也可能不显示减号键。 |\n@| numeric | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 数字输入键盘，所需要的就是 0 到 9 的数字，设备可能也可能不显示减号键。 |\n@| tel | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 电话输入键盘，包含 0 到 9 的数字、星号（*）和井号（#）键。表单输入里面的电话输入通常应该使用 \\<input type=\"tel\"\\> 。 |\n@| search | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 为搜索输入优化的虚拟键盘，比如，返回键可能被重新标记为“搜索”，也可能还有其他的优化。 |\n@| email | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 为邮件地址输入优化的虚拟键盘，通常包含\"@\"符号和其他优化。表单里面的邮件地址输入应该使用 \\<input type=\"email\"\\> 。 |\n@| url | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 为网址输入优化的虚拟键盘，比如，“/”键会更加明显、历史记录访问等。表单里面的网址输入通常应该使用 \\<input type=\"url\"\\> 。 |\n| fixed | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true |\n| show-confirm-bar | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否显示键盘上方带有”完成“按钮那一栏 |\n| @confirm | (event: [UniInputConfirmEvent](#uniinputconfirmevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.73\",\"4.73\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 点击完成时，触发 confirm 事件，event.detail = {value: value} |\n| @input | (event: [UniInputEvent](#uniinputevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 当键盘输入时，触发 input 事件，event.detail = {value, cursor}， @input 处理函数的返回值并不会反映到 textarea 上 |\n| @linechange | (event: [UniTextareaLineChangeEvent](#unitextarealinechangeevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.65\"]],\"status\":\"SUPPORTED\"}' /> | 输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0} |\n| @blur | (event: [UniTextareaBlurEvent](#unitextareablurevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 输入框失去焦点时触发，event.detail = {value, cursor} |\n| @keyboardheightchange | (event: [UniInputKeyboardHeightChangeEvent](#uniinputkeyboardheightchangeevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration} |\n| @focus | (event: [UniTextareaFocusEvent](#unitextareafocusevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度，在基础库 1.9.90 起支持 |\n| @change | (event: [UniInputChangeEvent](#uniinputchangeevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.81\",\"4.41\",\"4.73\",\"4.73\",\"4.73\"]],\"status\":\"SUPPORTED\"}' /> | 非聚焦状态内容改变时触发（仅组件失去焦点时且用户输入改变内容才触发） |\n| @update:value | Event | | | |","event":"\n### 事件\n#### UniInputConfirmEvent\n\n```mermaid\ngraph LR\n \nUniInputConfirmEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputConfirmEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniInputConfirmEventDetail** | 是 |\n@| 名称 | 类型 | 必备 | 描述 |\n@| :- | :- | :- | :- |\n@| value | string | 是 | 输入框内容 |\n\n\n#### UniInputEvent\n\n```mermaid\ngraph LR\n \nUniInputEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniInputEventDetail** | 是 |\n@| 名称 | 类型 | 必备 | 描述 |\n@| :- | :- | :- | :- |\n@| value | string | 是 | 输入框内容 |\n@| cursor | number | 是 | 光标的位置 |\n@| keyCode | number | 是 | 输入字符的Unicode值 |\n\n\n#### UniTextareaLineChangeEvent\n\n```mermaid\ngraph LR\n \nUniTextareaLineChangeEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniTextareaLineChangeEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniTextareaLineChangeEventDetail** | 是 |\n@| 名称 | 类型 | 必备 | 描述 |\n@| :- | :- | :- | :- |\n@| lineCount | number | 是 | 行数 |\n@| heightRpx | number | 是 | textarea的高度 |\n@| height | number | 是 | textarea的高度 |\n\n\n#### UniTextareaBlurEvent\n\n```mermaid\ngraph LR\n \nUniTextareaBlurEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniTextareaBlurEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniTextareaBlurEventDetail** | 是 |\n@| 名称 | 类型 | 必备 | 描述 |\n@| :- | :- | :- | :- |\n@| value | string | 是 | 输入框内容 |\n@| cursor | number | 是 | 选择区域的起始位置 |\n\n\n#### UniInputKeyboardHeightChangeEvent\n\n```mermaid\ngraph LR\n \nUniInputKeyboardHeightChangeEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputKeyboardHeightChangeEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniInputKeyboardHeightChangeEventDetail** | 是 |\n@| 名称 | 类型 | 必备 | 描述 |\n@| :- | :- | :- | :- |\n@| height | number | 是 | 键盘高度 |\n@| duration | number | 是 | 持续时间 |\n\n\n#### UniTextareaFocusEvent\n\n```mermaid\ngraph LR\n \nUniTextareaFocusEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniTextareaFocusEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniTextareaFocusEventDetail** | 是 |\n@| 名称 | 类型 | 必备 | 兼容性 | 描述 |\n@| :- | :- | :- | :-: | :- |\n@| height | number | 是 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"3.9\",\"4.11\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 键盘高度 |\n@| value | string | 是 | | 输入框内容 |\n\n\n#### UniInputChangeEvent\n\n```mermaid\ngraph LR\n \nUniInputChangeEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniInputChangeEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniInputChangeEventDetail** | 是 |\n@| 名称 | 类型 | 必备 | 描述 |\n@| :- | :- | :- | :- |\n@| value | string | 是 | 输入框内容 |\n\n","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/textarea/textarea.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/textarea/textarea.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/textarea/textarea\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/textarea/textarea\n\n>示例\n```vue\n<script setup lang=\"uts\">\r\n import { ItemType } from '@/components/enum-data/enum-data-types'\r\n\r\n type DataType = {\r\n value2: string;\r\n adjust_position_boolean: boolean;\r\n show_confirm_bar_boolean: boolean;\r\n fixed_boolean: boolean;\r\n auto_height_boolean: boolean;\r\n confirm_hold_boolean: boolean;\r\n focus_boolean: boolean;\r\n auto_focus_boolean: boolean;\r\n default_value: string;\r\n inputmode_enum: ItemType[];\r\n confirm_type_list: ItemType[];\r\n cursor_color: string;\r\n cursor: number;\r\n inputmode_enum_current: number;\r\n confirm_type_current: number;\r\n placeholder_value: string;\r\n defaultModel: string;\r\n textareaMaxLengthValue: string;\r\n textareaPlaceholderClass: string.ClassString;\r\n isSelectionFocus: boolean;\r\n selectionStart: number;\r\n selectionEnd: number;\r\n hold_keyboard: boolean;\r\n adjust_position: boolean;\r\n disabled: boolean;\r\n jest_result: boolean;\r\n inputEventTriggered: boolean;\r\n isAutoTest: boolean;\r\n changeValue: string;\r\n textareaRect: DOMRect | null;\r\n customFontValue: string;\r\n }\r\n // 使用reactive避免ref数据在自动化测试中无法访问\r\n const data = reactive({\r\n value2: '第一行\\n第二行\\n第三行\\n第四行\\n第五行\\n第六行\\n第七行\\n第八行\\n第九行\\n第十行\\n十一行',\r\n adjust_position_boolean: false,\r\n show_confirm_bar_boolean: false,\r\n fixed_boolean: false,\r\n auto_height_boolean: false,\r\n confirm_hold_boolean: false,\r\n focus_boolean: true,\r\n auto_focus_boolean: false,\r\n default_value: \"1\\n2\\n3\\n4\\n5\\n6\",\r\n inputmode_enum: [{ \"value\": 1, \"name\": \"text\" }, { \"value\": 2, \"name\": \"decimal\" }, { \"value\": 3, \"name\": \"numeric\" }, { \"value\": 4, \"name\": \"tel\" }, { \"value\": 5, \"name\": \"search\" }, { \"value\": 6, \"name\": \"email\" }, { \"value\": 7, \"name\": \"url\" }, { \"value\": 0, \"name\": \"none\" }],\r\n confirm_type_list: [{ \"value\": 0, \"name\": \"return\" }, { \"value\": 1, \"name\": \"done\" }, { \"value\": 2, \"name\": \"send\" }, { \"value\": 3, \"name\": \"search\" }, { \"value\": 4, \"name\": \"next\" }, { \"value\": 5, \"name\": \"go\" }],\r\n cursor_color: \"#3393E2\",\r\n cursor: \"1\\n2\\n3\\n4\\n5\\n6\".length,\r\n inputmode_enum_current: 0,\r\n confirm_type_current: 0,\r\n placeholder_value: \"请输入\",\r\n defaultModel: '123',\r\n textareaMaxLengthValue: \"\",\r\n textareaPlaceholderClass: \"placeholder-class\",\r\n isSelectionFocus: false,\r\n selectionStart: -1,\r\n selectionEnd: -1,\r\n hold_keyboard: false,\r\n adjust_position: false,\r\n disabled: false,\r\n jest_result: false,\r\n inputEventTriggered: false,\r\n isAutoTest: false,\r\n changeValue: \"\",\r\n textareaRect: null,\r\n customFontValue: \"Textarea Font\"\r\n } as DataType)\r\n\r\n // #ifdef APP\r\n onReady(() => {\r\n const textarea = uni.getElementById(\"uni-textarea\")\r\n data.textareaRect = textarea?.getBoundingClientRect()\r\n // 加上导航栏及状态栏高度\r\n data.textareaRect!.y += uni.getSystemInfoSync().safeArea.top + 44\r\n })\r\n // #endif\r\n\r\n const togglePlaceholderClass = () => {\r\n data.textareaPlaceholderClass = data.textareaPlaceholderClass == \"placeholder-class\" ? \"\" : \"placeholder-class\"\r\n }\r\n\r\n const textarea_click = () => { console.log(\"组件被点击时触发\") }\r\n const textarea_touchstart = () => { console.log(\"手指触摸动作开始\") }\r\n const textarea_touchmove = () => { console.log(\"手指触摸后移动\") }\r\n const textarea_touchcancel = () => { console.log(\"手指触摸动作被打断，如来电提醒，弹窗\") }\r\n const textarea_touchend = () => { console.log(\"手指触摸动作结束\") }\r\n const textarea_tap = () => { console.log(\"手指触摸后马上离开\") }\r\n const textarea_longpress = () => { console.log(\"如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。\") }\r\n const textarea_confirm = () => { console.log(\"点击完成时，触发 confirm 事件，event.detail = {value: value}\") }\r\n\r\n const textarea_input = (_e: UniInputEvent) => {\r\n console.log(\"当键盘输入时，触发 input 事件，event.detail = {value, cursor}， @input 处理函数的返回值并不会反映到 textarea 上\")\r\n data.inputEventTriggered = true\r\n }\r\n\r\n const textarea_linechange = () => { console.log(\"输入框行数变化时调用，event.detail = {height: 0, height: 0, lineCount: 0}\") }\r\n const textarea_blur = () => { console.log(\"输入框失去焦点时触发，event.detail = {value, cursor}\") }\r\n const textarea_keyboardheightchange = () => { console.log(\"键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration}\") }\r\n\r\n const textarea_focus = (event: UniTextareaFocusEvent) => {\r\n data.jest_result = event.detail.height >= 0\r\n }\r\n\r\n const textarea_change = (event: UniInputChangeEvent) => {\r\n console.log(\"textarea_change\", event.detail.value);\r\n data.changeValue = event.detail.value\r\n }\r\n\r\n const change_adjust_position_boolean = (checked: boolean) => { data.adjust_position_boolean = checked }\r\n const change_show_confirm_bar_boolean = (checked: boolean) => { data.show_confirm_bar_boolean = checked }\r\n const change_fixed_boolean = (checked: boolean) => { data.fixed_boolean = checked }\r\n const change_auto_height_boolean = (checked: boolean) => { data.auto_height_boolean = checked }\r\n const change_confirm_hold_boolean = (checked: boolean) => { data.confirm_hold_boolean = checked }\r\n const change_focus_boolean = (checked: boolean) => { data.focus_boolean = checked }\r\n const change_auto_focus_boolean = (checked: boolean) => { data.auto_focus_boolean = checked }\r\n\r\n const change_cursor_color_boolean = (checked: boolean) => {\r\n if (checked) {\r\n data.cursor_color = \"transparent\"\r\n } else {\r\n data.cursor_color = \"#3393E2\"\r\n }\r\n }\r\n\r\n const radio_change_inputmode_enum = (checked: number) => { data.inputmode_enum_current = checked }\r\n const radio_change_confirm_type = (checked: number) => { data.confirm_type_current = checked }\r\n\r\n const setSelection = (selectionStart: number, selectionEnd: number) => {\r\n data.isSelectionFocus = true;\r\n data.selectionStart = selectionStart;\r\n data.selectionEnd = selectionEnd;\r\n }\r\n\r\n const onSelectionBlurChange = () => {\r\n data.isSelectionFocus = false;\r\n data.selectionEnd = 0;\r\n }\r\n\r\n const changeHoldKeyboard = (event: UniSwitchChangeEvent) => {\r\n const checked = event.detail.value;\r\n data.hold_keyboard = checked;\r\n }\r\n\r\n const changeAdjustPosition = (event: UniSwitchChangeEvent) => {\r\n const checked = event.detail.value;\r\n data.adjust_position = checked;\r\n }\r\n\r\n const change_disabled_boolean = (checked: boolean) => {\r\n data.disabled = checked\r\n }\r\n\r\n const getBoundingClientRectForTest = (): DOMRect | null => {\r\n return uni.getElementById('test-width')?.getBoundingClientRect();\r\n }\r\n\r\n defineExpose({\r\n data,\r\n radio_change_inputmode_enum,\r\n getBoundingClientRectForTest\r\n })\r\n</script>\r\n\r\n<template>\r\n \r\n <scroll-view class=\"uni-theme-root\" style=\"flex: 1\">\r\n \r\n <view class=\"main uni-theme-root\">\r\n <textarea :value=\"data.default_value\" id=\"uni-textarea\" class=\"uni-textarea themed-textarea\" :auto-focus=\"true\" :focus=\"data.focus_boolean\"\r\n :confirm-hold=\"data.confirm_hold_boolean\" :auto-height=\"data.auto_height_boolean\" :fixed=\"data.fixed_boolean\"\r\n :show-confirm-bar=\"data.show_confirm_bar_boolean\" :adjust-position=\"data.adjust_position_boolean\"\r\n :cursor-color=\"data.cursor_color\" :cursor=\"data.cursor\" :placeholder=\"data.placeholder_value\"\r\n :inputmode=\"data.inputmode_enum[data.inputmode_enum_current].name\"\r\n :confirm-type=\"data.confirm_type_list[data.confirm_type_current].name\" :disabled=\"data.disabled\" @click=\"textarea_click\"\r\n @touchstart=\"textarea_touchstart\" @touchmove=\"textarea_touchmove\" @touchcancel=\"textarea_touchcancel\"\r\n @touchend=\"textarea_touchend\" @tap=\"textarea_tap\" @longpress=\"textarea_longpress\" @confirm=\"textarea_confirm\"\r\n @input=\"textarea_input\" @linechange=\"textarea_linechange\" @blur=\"textarea_blur\"\r\n @keyboardheightchange=\"textarea_keyboardheightchange\" @focus=\"textarea_focus\" @change=\"textarea_change\"\r\n style=\"padding: 10px;height: 200px\" />\r\n </view>\r\n <view class=\"textarea-page uni-theme-root\">\r\n <boolean-data :defaultValue=\"false\" title=\"键盘弹起时，是否自动上推页面（限非 Web 平台）\"\r\n @change=\"change_adjust_position_boolean\"></boolean-data>\r\n <boolean-data :defaultValue=\"false\" title=\"是否自动增高，设置auto-height时，style.height不生效\"\r\n @change=\"change_auto_height_boolean\"></boolean-data>\r\n <boolean-data :defaultValue=\"data.focus_boolean\" title=\"获取焦点\" @change=\"change_focus_boolean\"></boolean-data>\r\n <boolean-data :defaultValue=\"true\" title=\"首次自动获取焦点\" @change=\"change_auto_focus_boolean\"></boolean-data>\r\n <boolean-data :defaultValue=\"false\" title=\"改变光标颜色为透明\" @change=\"change_cursor_color_boolean\"></boolean-data>\r\n <boolean-data :defaultValue=\"false\" title=\"设置禁用输入框\"\r\n @change=\"change_disabled_boolean\"></boolean-data>\r\n \r\n <enum-data :items=\"data.confirm_type_list\" title=\"confirm-type，设置键盘右下角按钮。\"\r\n @change=\"radio_change_confirm_type\"></enum-data>\r\n \r\n <boolean-data :defaultValue=\"false\" title=\"点击软键盘右下角按钮时是否保持键盘不收起(confirm-type为return时必然不收起)\"\r\n @change=\"change_confirm_hold_boolean\"></boolean-data>\r\n \r\n <enum-data :items=\"data.inputmode_enum\" title=\"input-mode，控制软键盘类型。（仅限 Web 平台符合条件的高版本浏览器或webview）。\"\r\n @change=\"radio_change_inputmode_enum\"></enum-data>\r\n \r\n <boolean-data :defaultValue=\"false\" title=\"是否显示键盘上方带有“完成”按钮那一栏（仅限小程序平台）\"\r\n @change=\"change_show_confirm_bar_boolean\"></boolean-data>\r\n <boolean-data :defaultValue=\"false\" title=\"如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true（仅限小程序平台）\"\r\n @change=\"change_fixed_boolean\"></boolean-data>\r\n\r\n\r\n <view class=\"title-wrap\">\r\n <view>maxlength 输入最大长度为10</view>\r\n </view>\r\n <view class=\"textarea-wrap\">\r\n <textarea id=\"textarea-instance-maxlength\" class=\"textarea-instance\" :value=\"data.textareaMaxLengthValue\"\r\n :maxlength=\"10\" />\r\n </view>\r\n\r\n <view class=\"title-wrap\">\r\n <view class=\"textarea-title-text\">cursor-spacing、placeholder-class、placeholder-style例子(harmony 不支持设置 placeholder backgroundColor)</view>\r\n </view>\r\n <view class=\"textarea-wrap\">\r\n <textarea id=\"textarea-height-exception\" class=\"textarea-instance\" placeholder=\"底部textarea测试键盘遮挡\"\r\n placeholder-class=\"placeholder\" placeholder-style=\"background-color:red\" :cursor-spacing=\"300\" />\r\n </view>\r\n <view class=\"title-wrap\">\r\n <view class=\"textarea-title-text\" @click=\"setSelection(2, 5)\">设置输入框聚焦时光标的起始位置和结束位置（点击生效）</view>\r\n </view>\r\n <view class=\"textarea-wrap\">\r\n <textarea id=\"textarea-instance-2\" class=\"textarea-instance\" value=\"Hello UniApp X Textarea TestCase\" :focus=\"data.isSelectionFocus\"\r\n :selection-start=\"data.selectionStart\" :selection-end=\"data.selectionEnd\" @blur=\"onSelectionBlurChange\" />\r\n </view>\r\n\r\n <view class=\"title-wrap\">\r\n <view>设置hold-keyboard</view>\r\n <switch style=\"margin-left: 10px;\" @change=\"changeHoldKeyboard\" :checked=\"data.hold_keyboard\"></switch>\r\n </view>\r\n <view class=\"textarea-wrap\">\r\n <textarea class=\"textarea-instance\" :hold-keyboard=\"data.hold_keyboard\" />\r\n </view>\r\n <view class=\"title-wrap\">\r\n <view>同时存在 v-model 和 value</view>\r\n </view>\r\n \r\n <view class=\"textarea-wrap\">\r\n <textarea id=\"both-model-value\" class=\"textarea-instance\" v-model='data.defaultModel' value='456'></textarea>\r\n </view>\r\n\r\n <view class=\"title-wrap\">\r\n <view>设置adjust-position</view>\r\n <switch style=\"margin-left: 10px;\" @change=\"changeAdjustPosition\" :checked=\"data.adjust_position\"></switch>\r\n </view>\r\n <view class=\"textarea-wrap\">\r\n <textarea class=\"textarea-instance\" :adjust-position=\"data.adjust_position\" />\r\n </view>\r\n <view v-if=\"data.isAutoTest\" class=\"textarea-wrap\">\r\n <textarea id=\"test-width\" class=\"test-width\" value=\"123456\" placeholder=\"\" />\r\n </view>\r\n <view class=\"title-wrap\">\r\n <view>设置line-height</view>\r\n </view>\r\n <view class=\"textarea-wrap\">\r\n <textarea class=\"textarea-instance\" style=\"line-height: 1.2em;\" value=\"设置line-height为1.2em\" ></textarea>\r\n </view>\r\n <view class=\"title-wrap\">\r\n <view>设置min-height</view>\r\n </view>\r\n <view class=\"textarea-wrap\">\r\n <textarea class=\"textarea-instance\" style=\"min-height: 100px;\" :value=\"data.default_value\"></textarea>\r\n </view>\r\n <view class=\"title-wrap\">\r\n <view>设置max-height</view>\r\n </view>\r\n <view class=\"textarea-wrap\">\r\n <textarea class=\"textarea-instance\" style=\"max-height: 50px;\" :value=\"data.default_value\"></textarea>\r\n </view>\r\n <view class=\"title-wrap\">\r\n <view>设置min-height与auto-height</view>\r\n </view>\r\n <view class=\"textarea-wrap\">\r\n <textarea class=\"textarea-instance\" style=\"min-height: 100px;\" auto-height=\"true\" :value=\"data.default_value\"></textarea>\r\n </view>\r\n <view class=\"title-wrap\">\r\n <view>设置max-height与auto-height</view>\r\n </view>\r\n <view class=\"textarea-wrap\">\r\n <textarea class=\"textarea-instance\" style=\"max-height: 50px;\" auto-height=\"true\" :value=\"data.default_value\"></textarea>\r\n </view>\r\n <view class=\"title-wrap\">\r\n <view>同时设置value与text-align</view>\r\n </view>\r\n <view class=\"textarea-wrap\">\r\n <textarea class=\"textarea-instance\" style=\"height: 50px;text-align: right;\" value=\"同时设置value与text-align\"></textarea>\r\n </view>\r\n <view class=\"title-wrap\">\r\n <view>scroll-view嵌套textarea滚动</view>\r\n </view>\r\n <scroll-view style=\"height: 150px;\" direction=\"vertical\">\r\n \t<textarea class=\"textarea-instance\" :adjust-position=\"false\" :auto-height=\"true\" :value=\"data.value2\" />\r\n </scroll-view>\r\n <view class=\"textarea-wrap\">\r\n <textarea class=\"textarea-instance\" style=\"height: 60px;padding: 20px;\" value=\"style padding:20px\"></textarea>\r\n </view>\r\n <view class=\"title-wrap\">\r\n <view>注册confirm事件，点击换行效果</view>\r\n </view>\r\n <view class=\"textarea-wrap\">\r\n <textarea class=\"textarea-instance\" @confirm=\"()=>{}\"></textarea>\r\n </view>\r\n\r\n <view class=\"textarea-wrap\">\r\n <textarea class=\"textarea-instance\" placeholder=\"占位符字体大小为15px\" />\r\n </view>\r\n <view class=\"textarea-wrap\">\r\n <textarea class=\"textarea-instance\" :placeholder=\"`占位符字体大小为${data.textareaPlaceholderClass == '' ? '15px' : '30px'}`\" :placeholder-class=\"data.textareaPlaceholderClass\" />\r\n </view>\r\n <view class=\"textarea-wrap\">\r\n <button @click=\"togglePlaceholderClass\">切换 placeholder-class</button>\r\n </view>\r\n <view class=\"uni-title-text\">\r\n <text>style 设置 font-size:20px</text>\r\n </view>\r\n <view class=\"textarea-wrap\">\r\n <textarea class=\"textarea-instance\" style=\"height: 60px;font-size:20px\" placeholder=\"placeholder\" />\r\n </view>\r\n <view style=\"padding-left: 10px;flex-direction: column;\">\r\n <text>style 设置 font-size:20px</text>\r\n <text>placeholder-class 设置 30px</text>\r\n </view>\r\n <view class=\"textarea-wrap\">\r\n <textarea id=\"textarea-placeholder-class-dynamic\" class=\"textarea-instance\" style=\"height: 60px;font-size:20px\"\r\n :placeholder-class=\"data.textareaPlaceholderClass\" placeholder=\"placeholder\" />\r\n </view>\r\n <view style=\"padding-left: 10px;flex-direction: column;\">\r\n <text>style 设置 font-size:20px</text>\r\n <text>placeholder-class 设置 30px</text>\r\n <text>placeholder-style 设置 40px</text>\r\n </view>\r\n <view class=\"textarea-wrap\">\r\n <textarea class=\"textarea-instance\" style=\"height: 60px;font-size:20px\" placeholder-class=\"placeholder-class\" placeholder-style=\"font-size:40px\" placeholder=\"placeholder\" />\r\n </view>\r\n <view class=\"textarea-wrap\">\r\n <textarea class=\"textarea-instance\" style=\"font-size: 20px;padding-top: 5px;\" :auto-height=\"true\" value=\"font-size: 20px;padding-top: 5px;\" />\r\n </view>\r\n <view class=\"textarea-wrap\">\r\n <textarea class=\"textarea-instance\" style=\"font-size: 20px;padding-bottom: 5px;\" :auto-height=\"true\" value=\"font-size: 20px;padding-bottom: 5px;\" />\r\n </view>\r\n <view class=\"textarea-wrap\">\r\n <textarea class=\"textarea-instance\" style=\"font-size: 20px;padding: 5px;\" :auto-height=\"true\" value=\"font-size: 20px;padding: 5px;\" />\r\n </view>\r\n\r\n <text class=\"uni-title-text\">textarea样式大合集</text>\r\n <view class=\"textarea-wrap\">\r\n <textarea class=\"textarea-all-styles\" value=\"样式效果：文本颜色深蓝色、字号16px、字重400、行高1.5、文本居左对齐；外边距10px、内边距10px；圆角8px；浅蓝色渐变背景、蓝色边框、透明度70%、阴影效果。\" />\r\n </view>\r\n\r\n \r\n <navigator url=\"/pages/component/textarea/textarea-performance\" style=\"margin: 10px;\">\r\n <button type=\"primary\">\r\n textarea 性能测试\r\n </button>\r\n </navigator>\r\n \r\n\r\n <view class=\"title-wrap\">\r\n <view>textarea 设置自定义字体</view>\r\n </view>\r\n <view class=\"textarea-wrap\">\r\n <textarea class=\"textarea-instance pacifico-font\" v-model=\"data.customFontValue\" :auto-height=\"true\"\r\n :adjust-position=\"true\" />\r\n </view>\r\n </view>\r\n \r\n </scroll-view>\r\n \r\n</template>\r\n\r\n<style>\r\n @font-face {\r\n font-family: Pacifico;\r\n src: url('/static/font/Pacifico-Regular.ttf');\r\n }\r\n\r\n .main {\r\n min-height: 100px;\r\n padding: 5px 0;\r\n border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.06));\r\n background-color: var(--background-color, #f8f8f8);\r\n flex-direction: row;\r\n justify-content: center;\r\n }\r\n\r\n .test-width {\r\n width: 100px;\r\n height: 100px;\r\n background-color: aqua;\r\n color: #1a1a1a;\r\n }\r\n\r\n .textarea-page {\r\n margin-bottom: 40px;\r\n }\r\n\r\n .textarea-wrap {\r\n flex-direction: row;\r\n justify-content: center;\r\n }\r\n\r\n .title-wrap {\r\n flex-direction: row;\r\n align-items: center;\r\n margin-left: 10px;\r\n color: var(--text-color, #333333);\r\n }\r\n\r\n .textarea-title-text {\r\n flex: 1;\r\n }\r\n\r\n .themed-textarea,\r\n .textarea-instance {\r\n color: #333333;\r\n background-color: #ffffff;\r\n border: 1px solid #666666;\r\n }\r\n\r\n .textarea-instance {\r\n flex: 1;\r\n margin: 10px;\r\n font-size: 15px;\r\n }\r\n\r\n .placeholder {\r\n background-color: yellow;\r\n }\r\n .placeholder-class{\r\n font-size: 30px;\r\n }\r\n\r\n .pacifico-font {\r\n font-family: Pacifico;\r\n font-size: 18px;\r\n }\r\n\r\n .textarea-all-styles {\r\n color: #0008a7;\r\n font-family: Arial, sans-serif;\r\n font-size: 16px;\r\n font-weight: 400;\r\n line-height: 1.5;\r\n text-align: left;\r\n width: 90%;\r\n height: 150px;\r\n min-width: 200px;\r\n min-height: 100px;\r\n max-height: 300px;\r\n margin: 10px;\r\n padding: 10px;\r\n border-radius: 8px;\r\n background-color: #e3f2fd;\r\n background-image: linear-gradient(to right, #e3f2fd, #a9d5fa);\r\n border: 1px solid #007aff;\r\n opacity: 0.7;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n }\r\n\r\n @media (prefers-color-scheme: dark) {\r\n .themed-textarea,\r\n .textarea-instance {\r\n color: #ffffff;\r\n background-color: #2d2d2d;\r\n border-color: rgba(255, 255, 255, 0.35);\r\n }\r\n }\r\n</style>\r\n\n```\n\n:::","children":"### 子组件 @children-tags\n不可以嵌套组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.form-component.textarea)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/textarea.html)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/textarea.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=textarea&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=textarea&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=textarea&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=textarea&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=textarea)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=textarea&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"navigator":{"name":"::: sourceCode\n## navigator\n\n> GitCode: https://gitcode.com/dcloud/uni-component/tree/alpha/uni_modules/uni-navigator\n\n\n> GitHub: https://github.com/dcloudio/uni-component/tree/alpha/uni_modules/uni-navigator\n\n:::","originName":"## navigator","description":"> 组件类型：UniNavigatorElement \n\n 页面链接","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | 3.9 | 4.11 | 4.61 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| target | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 在哪个目标上发生跳转，默认当前应用 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| self | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"-\",\"4.41\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 当前小程序 |\n@| miniProgram | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"-\",\"4.41\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 其它小程序 |\n| url | string([string.PageURIString](/uts/data-type.md#ide-string)) | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 当前应用内的跳转链接 |\n| open-type | string | \"navigate\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 跳转方式 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| navigate | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 对应 uni.navigateTo 或 navigateToMiniProgram 的功能 |\n@| redirect | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 对应 uni.redirectTo 的功能 |\n@| switchTab | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 对应 uni.switchTab 的功能 |\n@| reLaunch | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 对应 uni.reLaunch 的功能 |\n@| navigateBack | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 对应 uni.navigateBack 的功能 |\n@| exit | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"-\",\"4.41\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 退出小程序，`target=\"miniProgram\"`时生效 |\n| delta | number | 1 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 当 open-type 为 navigateBack 时有效，表示回退的层数 |\n| app-id | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 当target=\"miniProgram\"时有效，要打开的小程序 appId |\n| path | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 当target=\"miniProgram\"时有效，打开的页面路径，如果为空则打开首页 |\n| extra-data | object | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 当target=\"miniProgram\"时有效，需要传递给目标应用的数据，目标应用可在 App.onLaunch()，App.onShow() 中获取到这份数据 |\n| version | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 当target=\"miniProgram\"时有效，要打开的小程序版本，有效值 develop（开发版），trial（体验版），release（正式版），仅在当前小程序为开发版或体验版时此参数有效；如果当前小程序是体验版或正式版，则打开的小程序必定是正式版 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| develop | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 开发版 |\n@| trial | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 体验版 |\n@| release | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 正式版，仅在当前小程序为开发版或体验版时此参数有效；如果当前小程序是正式版，则打开的小程序必定是正式版。 |\n| animation-type | string | \"pop-in/out\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.18\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 当 open-type=\"navigateTo\" 或 open-type=\"navigateBack\" 时有效，窗口的显示/关闭的动画类型。 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| auto | <CompatibilityTable table='{\"headers\":[{\"title\":\"HarmonyOS\"}],\"rows\":[[\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 自动选择动画效果 |\n@| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 无动画效果 |\n@| slide-in-right | <CompatibilityTable table='{\"headers\":[{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 从右侧横向滑动效果 |\n@| slide-in-left | <CompatibilityTable table='{\"headers\":[{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 左侧横向滑动效果 |\n@| slide-in-top | <CompatibilityTable table='{\"headers\":[{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 从上侧竖向滑动效果 |\n@| slide-in-bottom | <CompatibilityTable table='{\"headers\":[{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 从下侧竖向滑动效果 |\n@| fade-in | <CompatibilityTable table='{\"headers\":[{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 从透明到不透明逐渐显示效果 |\n@| zoom-out | <CompatibilityTable table='{\"headers\":[{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 从小到大逐渐放大显示效果 |\n@| zoom-fade-out | <CompatibilityTable table='{\"headers\":[{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 从小到大逐渐放大并且从透明到不透明逐渐显示效果 |\n@| pop-in | <CompatibilityTable table='{\"headers\":[{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 从右侧平移入栈动画效果 |\n@| slide-out-right | <CompatibilityTable table='{\"headers\":[{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 横向向右侧滑出屏幕动画 |\n@| slide-out-left | <CompatibilityTable table='{\"headers\":[{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 横向向左侧滑出屏幕动画 |\n@| slide-out-top | <CompatibilityTable table='{\"headers\":[{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 竖向向上侧滑出屏幕动画 |\n@| slide-out-bottom | <CompatibilityTable table='{\"headers\":[{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 竖向向下侧滑出屏幕动画 |\n@| fade-out | <CompatibilityTable table='{\"headers\":[{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 从不透明到透明逐渐隐藏动画 |\n@| zoom-in | <CompatibilityTable table='{\"headers\":[{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 从大逐渐缩小关闭动画 |\n@| zoom-fade-in | <CompatibilityTable table='{\"headers\":[{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 从大逐渐缩小并且从不透明到透明逐渐隐藏关闭动画 |\n@| pop-out | <CompatibilityTable table='{\"headers\":[{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 从右侧平移出栈动画效果 |\n| animation-duration | number | 300 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\",\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 当 open-type=\"navigateTo\" 或 open-type=\"navigateBack\" 时有效，窗口的显示/关闭动画的持续时间。 |\n| hover-class | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.41\",\"4.41\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 指定按下去的样式类。当 hover-class=\"none\" 时，没有点击态效果 |\n| hover-stop-propagation | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.41\",\"4.41\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 指定是否阻止本节点的祖先节点出现点击态 |\n| hover-start-time | number | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.41\",\"4.41\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 按住后多久出现点击态，单位毫秒 |\n| hover-stay-time | number | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.41\",\"4.41\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 手指松开后点击态保留时间，单位毫秒 |\n| render-link | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否给 navigator 组件加一层 a 标签控制 ssr 渲染 |\n| short-link | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>当`target=\"miniProgram\"`时有效，当传递该参数后，可以不传 app-id 和 path。链接可以通过【小程序菜单】->【复制链接】获取。 |\n| @success | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.41\",\"4.41\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>当`target=\"miniProgram\"`且`open-type=\"navigate/navigateBack\"`时有效，跳转小程序成功 |\n| @fail | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.41\",\"4.41\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>当`target=\"miniProgram\"`且`open-type=\"navigate/navigateBack\"`时有效，跳转小程序失败 |\n| @complete | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.41\",\"4.41\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>当`target=\"miniProgram\"`且`open-type=\"navigate/navigateBack\"`时有效，跳转小程序完成 |","event":"","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/navigator/navigator.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/navigator/navigator.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/navigator/navigator\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/navigator/navigator\n\n>示例\n```vue\n<template>\r\n <page-head :title=\"title\"></page-head>\r\n <view class=\"uni-padding-wrap uni-common-mt\">\r\n <navigator id=\"navigate\" class=\"navigator\" url=\"navigate?title=navigate\">\r\n <button type=\"default\">跳转到新页面</button>\r\n </navigator>\r\n <navigator id=\"redirect\" class=\"navigator\" url=\"redirect?title=redirect\" open-type=\"redirect\">\r\n <button type=\"default\">在当前页打开redirect</button>\r\n </navigator>\r\n <navigator id=\"switchTab\" class=\"navigator\" url=\"/pages/tabBar/template\" open-type=\"switchTab\">\r\n <button type=\"default\">切换到模板选项卡switchTab</button>\r\n </navigator>\r\n <navigator id=\"reLaunch\" class=\"navigator\" url=\"/pages/tabBar/component\" open-type=\"reLaunch\">\r\n <button type=\"default\">关闭所有页面回首页reLaunch</button>\r\n </navigator>\r\n <navigator id=\"reLaunch\" class=\"navigator\" open-type=\"navigateBack\">\r\n <button type=\"default\">返回上一页navigateBack</button>\r\n </navigator>\r\n \r\n <navigator id=\"navigateToErrorPage\" class=\"navigator\" url=\"/pages/error-page/error-page\">\r\n <button type=\"default\"> 打开不存在的页面 </button>\r\n </navigator>\r\n <navigator id=\"navigateToErrorPage\" class=\"navigator\">\r\n <button type=\"default\"> 未指定URL的跳转 </button>\r\n </navigator>\r\n <navigator style=\"flex-direction: row;justify-content: space-between;\">\r\n <text>两端对齐样式测试</text>\r\n <view style=\"width: 20px;height: 20px; background-color: aqua;\"></view>\r\n </navigator>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n const title = ref('navigator')\r\n</script>\r\n\r\n<style>\r\n .navigator {\r\n margin-bottom: 15px;\r\n }\r\n</style>\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.navigation.navigator)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/navigator.html)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=navigator&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=navigator&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=navigator&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=navigator&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=navigator)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=navigator&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"image":{"name":"::: sourceCode\n## image\n:::","originName":"## image","description":"> 组件类型：[UniImageElement](/api/dom/uniimageelement.md) \n\n 图片","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | 3.9 | 4.11 | 4.61 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| src | string([string.ImageURIString](/uts/data-type.md#ide-string)) | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 图片资源地址 |\n| mode | string | \"scaleToFill\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 图片裁剪、缩放的模式 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| scaleToFill | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 |\n@| aspectFit | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 |\n@| aspectFill | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取 |\n@| widthFix | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 宽度不变，高度自动变化，保持原图宽高比不变 |\n@| heightFix | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 高度不变，宽度自动变化，保持原图宽高比不变 |\n@| top | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 不缩放图片，只显示图片的顶部区域 |\n@| bottom | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 不缩放图片，只显示图片的底部区域 |\n@| center | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 不缩放图片，只显示图片的中间区域 |\n@| left | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 不缩放图片，只显示图片的左边区域 |\n@| right | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 不缩放图片，只显示图片的右边区域 |\n@| top left | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 不缩放图片，只显示图片的左上边区域 |\n@| top right | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 不缩放图片，只显示图片的右上边区域 |\n@| bottom left | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 不缩放图片，只显示图片的左下边区域 |\n@| bottom right | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 不缩放图片，只显示图片的右下边区域 |\n| lazy-load | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"4.11\",\"-\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 图片懒加载。只针对page与scroll-view下的image有效。安卓默认懒加载不支持修改 |\n| fade-show | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"3.9\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 图片显示动画效果 |\n| webp | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"-\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否支持 WebP 格式，web、app平台默认支持 WebP 格式，不支持本属性，无法关闭对 WebP 格式的解析。 |\n| show-menu-by-longpress | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 开启长按图片显示识别小程序码菜单 |\n| draggable | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 鼠标长按是否能拖动图片(仅H5平台) |\n| flatten | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\",\"5.21\",\"x\",\"5.11\",\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否拍平组件 |\n| @error | (event: [UniImageErrorEvent](#uniimageerrorevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 图片加载错误时触发，event.detail = { errMsg } |\n| @load | (event: [UniImageLoadEvent](#uniimageloadevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 图片加载完成时触发，event.detail = { width: '图片宽度px', height: '图片高度px' } |","event":"\n### 事件\n#### UniImageErrorEvent\n\n```mermaid\ngraph LR\n \nUniImageErrorEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniImageErrorEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniImageErrorEventDetail** | 是 |\n@| 名称 | 类型 | 必备 | 描述 |\n@| :- | :- | :- | :- |\n@| errMsg | string | 是 | 错误信息 |\n\n\n#### UniImageLoadEvent\n\n```mermaid\ngraph LR\n \nUniImageLoadEvent -- Extends --> UniEvent\n style UniEvent color:#42b983\n click UniEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unievent\"\n```\n##### UniImageLoadEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniImageLoadEventDetail** | 是 |\n@| 名称 | 类型 | 必备 | 描述 |\n@| :- | :- | :- | :- |\n@| width | number | 是 | 图片宽度 |\n@| height | number | 是 | 图片高度 |\n\n","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/image/image.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/image/image.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/image/image\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/image/image\n\n>示例\n```vue\n<template>\r\n <view class=\"image-page uni-theme-root\">\n <page-head :title=\"data.title\"></page-head>\r\n <scroll-view class=\"uni-theme-root\" style=\"flex: 1\">\n <view class=\"uni-padding-wrap\">\r\n \r\n <text class=\"uni-title-text\">image样式大合集</text>\r\n <text class=\"uni-subtitle-text uni-common-mb\">右边为拍平</text>\r\n <view class=\"styled-image-row\">\r\n <image class=\"styled-image\" mode=\"aspectFill\" :src=\"data.imageSrc\"></image>\r\n <image class=\"styled-image\" mode=\"aspectFill\" :src=\"data.imageSrc\" flatten></image>\r\n </view>\r\n\r\n <text class=\"uni-title-text\">自定义组件：右边拍平</text>\r\n <view class=\"styled-image-row\">\r\n <child></child>\r\n <child flatten></child>\r\n </view>\r\n\r\n \r\n <text class=\"uni-title-text uni-common-mt\">基础（右边为拍平）</text>\r\n <view class=\"uni-center image-bg\">\r\n \n <image class=\"image\" :fade-show=\"true\" mode=\"widthFix\" :src=\"data.imageSrc\" @error=\"error\" @load=\"load\"></image>\n <image class=\"image\" :fade-show=\"true\" mode=\"widthFix\" :src=\"data.imageSrc\" @error=\"error\" @load=\"load\" flatten></image>\n \r\n \n <image class=\"image\" mode=\"widthFix\" :src=\"data.imageSrc\" @error=\"error\" @load=\"load\"></image>\n <image class=\"image\" mode=\"widthFix\" :src=\"data.imageSrc\" @error=\"error\" @load=\"load\" flatten></image>\n \r\n </view>\r\n\r\n <button class=\"uni-btn\" @tap=\"imageFormat\">图片格式示例</button>\r\n <button class=\"uni-btn\" @tap=\"imageMode\">图片缩放模式示例</button>\r\n <button class=\"uni-btn\" @tap=\"imagePath\">图片路径示例</button>\r\n <button class=\"uni-btn\" @tap=\"imageLarge\">大图示例</button>\r\n <button class=\"uni-btn\" @tap=\"imageLong\">长图示例</button>\r\n <button class=\"uni-btn\" @tap=\"imageOrientation\">图片方向修正示例</button>\r\n\r\n \n <navigator url=\"/pages/template/2000-image/2000-image\">\n <button class=\"uni-btn\">组件性能测试</button>\n </navigator>\n <navigator url=\"/pages/template/2000-image/2000-image-svg\">\r\n <button class=\"uni-btn\">组件性能测试(SVG)</button>\r\n </navigator>\r\n \r\n </view>\r\n </scroll-view>\r\n\r\n <view v-if=\"data.autoTest\">\r\n <image :src=\"data.setCookieImage\"></image>\r\n <image :src=\"data.verifyCookieImage\" @error=\"error\"></image>\r\n </view>\r\n </view>\r\n</template>\r\n<script setup lang=\"uts\">\r\n import Child from './child.uvue'\r\n type DataType = {\r\n title: string;\r\n imageSrc: string.ImageURIString;\r\n loadError: boolean;\r\n autoTest: boolean;\r\n setCookieImage: string;\r\n verifyCookieImage: string;\r\n eventLoad: UTSJSONObject | null;\r\n eventError: UTSJSONObject | null;\r\n }\r\n // 使用reactive避免ref数据在自动化测试中无法访问\r\n const data = reactive({\r\n title: 'image',\r\n imageSrc: \"/static/test-image/logo.png\",\r\n loadError: false,\r\n // 自动化测试\r\n autoTest: false,\r\n setCookieImage: \"\",\r\n verifyCookieImage: \"\",\r\n eventLoad: null,\r\n eventError: null\r\n } as DataType)\r\n\r\n const error = (event: ImageErrorEvent) => {\r\n data.loadError = true\r\n console.log(event.type, event.detail);\r\n if (data.autoTest) {\r\n data.eventError = {\r\n \"tagName\": event.target?.tagName,\r\n \"type\": event.type,\r\n // \"errMsg\": event.detail.errMsg\r\n };\r\n }\r\n }\r\n\r\n const load = (event: ImageLoadEvent) => {\r\n console.log(event.type, event.detail);\r\n if (data.autoTest) {\r\n data.eventLoad = {\r\n \"tagName\": event.target?.tagName,\r\n \"type\": event.type,\r\n \"width\": event.detail.width,\r\n \"height\": event.detail.height\r\n };\r\n }\r\n }\r\n\r\n const imageFormat = () => {\r\n uni.navigateTo({\r\n url: '/pages/component/image/image-format'\r\n });\r\n }\r\n\r\n const imageMode = () => {\r\n uni.navigateTo({\r\n url: '/pages/component/image/image-mode'\r\n });\r\n }\r\n\r\n const imagePath = () => {\r\n uni.navigateTo({\r\n url: '/pages/component/image/image-path'\r\n });\r\n }\r\n\r\n const imageLarge = () => {\r\n uni.navigateTo({\r\n url: '/pages/component/image/image-large'\r\n });\r\n }\r\n\r\n const imageLong = () => {\r\n uni.navigateTo({\r\n url: '/pages/component/image/image-long'\r\n });\r\n }\r\n\r\n const imageOrientation = () => {\r\n uni.navigateTo({\r\n url: '/pages/component/image/image-orientation'\r\n });\r\n }\r\n\r\n defineExpose({\r\n data,\r\n error,\r\n load,\r\n imageFormat,\r\n imageMode,\r\n imagePath,\r\n imageLarge,\r\n imageLong\r\n })\r\n</script>\r\n<style>\n .image-page {\n flex: 1;\n }\n\n .styled-image-row {\n flex-direction: row;\n background-color: var(--list-background-color, #ffffff);\n justify-content: space-around;\r\n height: 120px;\r\n align-items: center;\r\n }\r\n\r\n /* image样式大合集 */\r\n .styled-image {\r\n width: 80px;\r\n height: 80px;\r\n margin: 5px;\r\n padding: 5px;\r\n border: 2px solid #ff6b6b;\r\n border-radius: 10px;\r\n background-color: #ffe0e0;\r\n /* === 阴影 === */\r\n box-shadow: 0 3px 6px rgba(255, 107, 107, 0.3);\r\n /* === 可见性 === */\r\n opacity: 0.98;\r\n /* === 变换 === */\r\n transform: rotate(45deg);\r\n }\r\n\r\n .image {\r\n margin: 20px auto;\r\n width: 100px;\r\n }\r\n\r\n .image-bg {\n background-color: var(--list-background-color, #ffffff);\n }\r\n</style>\r\n\n```\n\n:::","children":"### 子组件 @children-tags\n不可以嵌套组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.media.image)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/image.html)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/image.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=image&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=image&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=image&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=image&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=image)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=image&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"video":{"name":"::: sourceCode\n## video\n\n> GitCode: https://gitcode.com/dcloud/uni-component/tree/alpha/uni_modules/uni-video\n\n\n> GitHub: https://github.com/dcloudio/uni-component/tree/alpha/uni_modules/uni-video\n\n:::","originName":"## video","description":"> 组件类型：[UniVideoElement](/api/dom/univideoelement.md) \n\n 视频","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | 3.9 | 4.11 | 4.61 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| loop | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 是否循环播放 |\n| src | string([string.VideoURIString](/uts/data-type.md#ide-string)) | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 视频资源地址 |\n| initial-time | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 指定视频初始播放位置 |\n| duration | number | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 指定视频长度 |\n| controls | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 是否显示默认播放控件（播放/暂停按钮、播放进度、时间） |\n| danmu-list | Danmu\\[\\] | \\[\\] | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 弹幕列表 |\n| danmu-btn | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否显示弹幕按钮，只在初始化时有效，不能动态变更 |\n| enable-danmu | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否展示弹幕，只在初始化时有效，不能动态变更 |\n| autoplay | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 是否自动播放 |\n| muted | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 是否静音播放 |\n| page-gesture | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 在非全屏模式下，是否开启亮度与音量调节手势 |\n| direction | number | 90 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 设置全屏时视频的方向，不指定则根据宽高比自动判断。有效值为 0（正常竖向）, 90（屏幕逆时针90度）, -90（屏幕顺时针90度） |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"}],\"rows\":[[\"x\",\"4.41\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 正常竖向 |\n@| 90 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"}],\"rows\":[[\"x\",\"4.41\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 屏幕逆时针90度 |\n@| -90 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"}],\"rows\":[[\"x\",\"4.41\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 屏幕顺时针90度 |\n| show-progress | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否显示进度条 |\n| show-fullscreen-btn | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否显示全屏按钮 |\n| show-play-btn | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否显示视频底部控制栏的播放按钮 |\n| show-center-play-btn | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否显示视频中间的播放按钮 |\n| show-loading | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"3.9\",\"4.11\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否显示loading控件 |\n| enable-progress-gesture | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否开启播放手势，即双击切换播放、暂停 |\n| object-fit | string | \"contain\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 当视频大小与 video 容器大小不一致时，视频的表现形式。 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| contain | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 包含 |\n@| fill | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 填充 |\n@| cover | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 覆盖 |\n| poster | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效 |\n| show-mute-btn | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"4.41\",\"3.9\",\"4.11\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否显示静音按钮 |\n| title | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 视频的标题，全屏时在顶部展示 |\n| play-btn-position | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 播放按钮的位置 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| bottom | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | controls bar上 |\n@| center | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 视频中间 |\n| enable-play-gesture | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"4.41\",\"3.9\",\"4.11\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否开启播放手势，即双击切换播放、暂停 |\n| auto-pause-if-navigate | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 当跳转到其它页面时，是否自动暂停本页面的视频 |\n| auto-pause-if-open-native | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 当跳转到其它小程序宿主原生页面时，是否自动暂停本页面的视频 |\n| vslide-gesture | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"x\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 在非全屏模式下，是否开启亮度与音量调节手势（同 page-gesture） |\n| vslide-gesture-in-fullscreen | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 在全屏模式下，是否开启亮度与音量调节手势 |\n| ad-unit-id | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 视频前贴广告单元ID |\n| poster-for-crawler | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 用于给搜索等场景作为视频封面展示，建议使用无播放 icon 的视频封面图，只支持网络地址 |\n| codec | string | \"hardware\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 解码器选择 |\n| http-cache | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"3.9\",\"4.11\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否对 http、https 视频源开启本地缓存 |\n| play-strategy | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"NOT_SUPPORTED\"}' /> | 播放策略 |\n| is-live | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否为直播源 |\n| show-bottom-progress | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(boolean)*<br/>是否展示底部进度条 |\n| show-casting-button | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(boolean)*<br/>显示投屏按钮。安卓在同层渲染下生效，支持 DLNA 协议；iOS 支持 AirPlay 和 DLNA 协议。可以通过[VideoContext](../api/create-video-context)的相关方法进行操作。 |\n| picture-in-picture-mode | string/Array | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string/Array)*<br/>设置小窗模式： push, pop，空字符串或通过数组形式设置多种模式（如： \\[\"push\", \"pop\"]） |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| [] | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 取消小窗 |\n@| push | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 路由 push 时触发小窗 |\n@| pop | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 路由 pop 时触发小窗 |\n| picture-in-picture-show-progress | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(boolean)*<br/>是否在小窗模式下显示播放进度 |\n| picture-in-picture-init-position | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>小窗模式下小窗的初始显示位置，格式为 (alignment, y)，其中 alignment 表示小窗吸附屏幕左侧还是右侧，可选值为 left、right，y 代表小窗最顶部所在的屏幕高度百分比 |\n| enable-auto-rotation | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(boolean)*<br/>是否开启手机横屏时自动全屏，当系统设置开启自动旋转时生效 |\n| show-screen-lock-button | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(boolean)*<br/>是否显示锁屏按钮，仅在全屏时显示，锁屏后控制栏的操作 |\n| show-snapshot-button | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(boolean)*<br/>是否显示截屏按钮，仅在全屏时显示 |\n| show-background-playback-button | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(boolean)*<br/>是否展示后台音频播放按钮 |\n| background-poster | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>进入后台音频播放后的通知栏图标（Android 独有） |\n| referrer-policy | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>格式固定为 `https://servicewechat.com/{appid}/{version}/page-frame.html`，其中 {appid} 为小程序的 appid，{version} 为小程序的版本号，版本号为 0 表示为开发版、体验版以及审核版本，版本号为 devtools 表示为开发者工具，其余为正式版本； |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| origin | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 发送完整的referrer |\n@| no-referrer | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 不发送 |\n| is-drm | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(boolean)*<br/>是否为 DRM 视频源 |\n| provision-url | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>DRM 设备身份认证 url，仅 is-drm 为 true 时生效 (Android) |\n| certificate-url | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>DRM 设备身份认证 url，仅 is-drm 为 true 时生效 (iOS) |\n| license-url | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>DRM 获取加密信息 url，仅 is-drm 为 true 时生效 |\n| preferred-peak-bit-rate | number | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(number)*<br/>指定码率上界，单位为比特每秒 |\n| header | UTSJSONObject | | <CompatibilityTable table='{\"headers\":[{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 自定义 header |\n| @loadedmetadata | (event: [UniVideoLoadedMetadataEvent](#univideoloadedmetadataevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 视频元数据加载完成时触发 |\n| @play | (event: [UniEvent](/component/common.md#unievent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 当开始/继续播放时触发 |\n| @pause | (event: [UniEvent](/component/common.md#unievent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 当暂停播放时触发 |\n| @ended | (event: [UniEvent](/component/common.md#unievent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 当播放到视频末尾时触发 |\n| @timeupdate | (event: [UniVideoTimeUpdateEvent](#univideotimeupdateevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 播放进度变化时触发，event.detail = { currentTime, duration }。触发频率 250ms 一次 |\n| @fullscreenchange | (event: [UniVideoFullScreenChangeEvent](#univideofullscreenchangeevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 当视频进入和退出全屏时触发，event.detail = { fullScreen, direction }，direction取为 vertical 或 horizontal |\n| @waiting | (event: [UniEvent](/component/common.md#unievent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 视频出现缓冲时触发 |\n| @error | (event: [UniVideoErrorEvent](#univideoerrorevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 播放出错时触发 |\n| @progress | (event: [UniVideoProgressEvent](#univideoprogressevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 加载进度变化时触发，只支持一段加载。event.detail = { buffered }，百分比 |\n| @fullscreenclick | (event: [UniVideoFullScreenClickEvent](#univideofullscreenclickevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 视频全屏播放时点击屏幕触发。event.detail = { screenX, screenY, screenWidth, screenHeight } |\n| @controlstoggle | (event: [UniVideoControlsToggleEvent](#univideocontrolstoggleevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 切换 controls 显示隐藏时触发。event.detail = { show } |\n| @recycle | (event: [UniVideoRecycleEvent](#univideorecycleevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 组件回收时的生命周期钩子 |\n| @reuse | (event: [UniVideoReuseEvent](#univideoreuseevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 组件复用时的生命周期钩子 |\n| @enterpictureinpicture | eventhandler | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandler)*<br/>播放器进入小窗 |\n| @leavepictureinpicture | eventhandler | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandler)*<br/>播放器退出小窗 |\n| @seekcomplete | eventhandler | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandler)*<br/>seek 完成时触发 |\n| @castinguserselect | eventhandler | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandler)*<br/>用户选择投屏设备时触发 detail = { state: \"success\"/\"fail\" } |\n| @castingstatechange | eventhandler | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandler)*<br/>投屏成功/失败时触发 detail = { type, state: \"success\"/\"fail\" } |\n| @castinginterrupt | eventhandler | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandler)*<br/>投屏被中断时触发 |","event":"\n### 事件\n#### UniVideoTimeUpdateEvent\ntimeupdate 事件<br/>播放进度变化时触发\n```mermaid\ngraph LR\n \nUniVideoTimeUpdateEvent -- Extends --> UniVideoEvent\n style UniVideoEvent color:#42b983\n click UniVideoEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#univideoevent\"\n```\n##### UniVideoTimeUpdateEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniVideoTimeUpdateEventDetail** | 是 |\n@| 名称 | 类型 | 必备 | 描述 |\n@| :- | :- | :- | :- |\n@| currentTime | number | 是 | 当前进度 |\n@| duration | number | 是 | 总进度 |\n\n\n#### UniVideoFullScreenChangeEvent\nfullscreenchange 事件<br/>当视频进入和退出全屏是触发\n```mermaid\ngraph LR\n \nUniVideoFullScreenChangeEvent -- Extends --> UniVideoEvent\n style UniVideoEvent color:#42b983\n click UniVideoEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#univideoevent\"\n```\n##### UniVideoFullScreenChangeEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniVideoFullScreenChangeEventDetail** | 是 |\n@| 名称 | 类型 | 必备 | 描述 |\n@| :- | :- | :- | :- |\n@| fullScreen | boolean | 是 | 是否全屏 |\n@| direction | string | 是 | 横竖屏 |\n@@| 合法值 | 描述 |\n@@| :- | :- |\n@@| vertical | 竖屏 |\n@@| horizontal | 横屏 |\n\n\n#### UniVideoErrorEvent\nerror 事件<br/>视频播放出错时触发\n```mermaid\ngraph LR\n \nUniVideoErrorEvent -- Extends --> UniVideoEvent\n style UniVideoEvent color:#42b983\n click UniVideoEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#univideoevent\"\n```\n##### UniVideoErrorEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **VideoError** | 是 |\n@| 名称 | 类型 | 必备 | 描述 |\n@| :- | :- | :- | :- |\n@| errCode | number | 是 | 统一错误码 |\n@@| 合法值 | 描述 |\n@@| :- | :- |\n@@| 100001 | 网络错误 |\n@@| 200001 | 内部错误 |\n@@| 300001 | SDK错误 |\n@| errSubject | string | 是 | 统一错误主题（模块）名称 |\n@| data | any | 否 | 错误信息中包含的数据 |\n@| cause | [Error](/err-spec.md#unierror) | 否 | 源错误信息，可以包含多个错误，详见SourceError |\n@| errMsg | string | 是 | |\n\n\n#### UniVideoProgressEvent\nprogress 事件<br/>加载进度变化时触发\n```mermaid\ngraph LR\n \nUniVideoProgressEvent -- Extends --> UniVideoEvent\n style UniVideoEvent color:#42b983\n click UniVideoEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#univideoevent\"\n```\n##### UniVideoProgressEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniVideoProgressEventDetail** | 是 |\n@| 名称 | 类型 | 必备 | 描述 |\n@| :- | :- | :- | :- |\n@| buffered | number | 是 | 加载进度百分比 |\n\n\n#### UniVideoFullScreenClickEvent\nfullscreenclick 事件<br/>视频播放全屏播放时点击事件\n```mermaid\ngraph LR\n \nUniVideoFullScreenClickEvent -- Extends --> UniVideoEvent\n style UniVideoEvent color:#42b983\n click UniVideoEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#univideoevent\"\n```\n##### UniVideoFullScreenClickEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniVideoFullScreenClickEventDetail** | 是 |\n@| 名称 | 类型 | 必备 | 描述 |\n@| :- | :- | :- | :- |\n@| screenX | number | 是 | 点击点相对于屏幕左侧边缘的 X 轴坐标 |\n@| screenY | number | 是 | 点击点相对于屏幕顶部边缘的 Y 轴坐标 |\n@| screenWidth | number | 是 | 屏幕总宽度 |\n@| screenHeight | number | 是 | 屏幕总高度 |\n\n\n#### UniVideoControlsToggleEvent\ncontrolstoggle 事件<br/>切换播放控件显示隐藏时触发\n```mermaid\ngraph LR\n \nUniVideoControlsToggleEvent -- Extends --> UniVideoEvent\n style UniVideoEvent color:#42b983\n click UniVideoEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#univideoevent\"\n```\n##### UniVideoControlsToggleEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniVideoControlsToggleEventDetail** | 是 |\n@| 名称 | 类型 | 必备 | 描述 |\n@| :- | :- | :- | :- |\n@| show | boolean | 是 | 是否显示 |\n\n\n#### UniVideoRecycleEvent\nvideo组件回收事件\n```mermaid\ngraph LR\n \nUniVideoRecycleEvent -- Extends --> UniCustomEvent&ltUniVideoRecycleEventDetail&gt\n style UniCustomEvent&ltUniVideoRecycleEventDetail&gt color:#42b983\n click UniCustomEvent&ltUniVideoRecycleEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniVideoRecycleEventDetail\nvideo组件回收时的状态信息\n\n###### UniVideoRecycleEventDetail 的属性值\n| 名称 | 类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| isPlaying | boolean | 是 | 回收时是否处于播放状态。回收时暂停状态此值为false |\n| currentTime | number | 是 | 回收时播放视频的进度 |\n| duration | number | 是 | 回收时播放视频的总时长 |\n\n\n#### UniVideoReuseEvent\nvideo组件复用事件\n```mermaid\ngraph LR\n \nUniVideoReuseEvent -- Extends --> UniCustomEvent&ltUniVideoReuseEventDetail&gt\n style UniCustomEvent&ltUniVideoReuseEventDetail&gt color:#42b983\n click UniCustomEvent&ltUniVideoReuseEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniVideoReuseEventDetail\n\n\n###### UniVideoReuseEventDetail 的属性值\n| 名称 | 类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| isPlaying | boolean | 是 | 复用时是否处于播放状态。复用时暂停状态此值为false |\n| currentTime | number | 是 | 复用时播放视频的进度 |\n| duration | number | 是 | 复用时播放视频的总时长 |\n\n","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/video/video.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/video/video.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/video/video\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/video/video\n\n>示例\n```vue\n<template>\n <view id=\"video-parent\" class=\"video-page uni-flex-item uni-theme-root\" @touchstart=\"onVideoParentTouchStart\" @touchmove=\"onVideoParentTouchMove\"\n @touchend=\"onVideoParentTouchEnd\">\n <video class=\"video\" ref=\"video\" id=\"video\" :header=\"data.header\" :src=\"data.src\" :autoplay=\"data.autoplay\" :loop=\"data.loop\"\n :muted=\"data.muted\" :initial-time=\"data.initialTime\" :duration=\"data.duration\" :controls=\"data.controls\" :danmu-btn=\"data.danmuBtn && fullscreenShowDanmuBtn\"\n :enable-danmu=\"data.enableDanmu\" :page-gesture=\"data.pageGesture\" :direction=\"data.direction\" :show-progress=\"data.showProgress\"\n :show-fullscreen-btn=\"data.showFullscreenBtn && fullscreenShowFullscreenBtn\" :show-play-btn=\"data.showPlayBtn && fullscreenShowPlayBtn\" :show-center-play-btn=\"data.showCenterPlayBtn\"\n :show-loading=\"data.showLoading\" :enable-progress-gesture=\"data.enableProgressGesture\" :object-fit=\"data.objectFit\"\n :poster=\"data.poster\" :show-mute-btn=\"data.showMuteBtn && fullscreenShowMuteBtn\" :title=\"data.title\" :enable-play-gesture=\"data.enablePlayGesture\"\n :vslide-gesture=\"data.vslideGesture\" :vslide-gesture-in-fullscreen=\"data.vslideGestureInFullscreen\"\n :http-cache=\"data.httpCache\" :danmu-list=\"data.danmuList\" @play=\"onPlay\" @pause=\"onPause\"\n @ended=\"onEnded\" @timeupdate=\"onTimeUpdate\" @waiting=\"onWaiting\" @error=\"onError\" @progress=\"onProgress\"\n @fullscreenclick=\"onFullScreenClick\" @controlstoggle=\"onControlsToggle\" @fullscreenchange=\"onFullScreenChange\">\n\n <image v-if=\"data.subCompEnable && data.subCompShow\" class=\"img-fast-backward\"\n src=\"../../../static/test-video/fast-backward.png\" @tap.stop=\"fastBackward\"></image>\n <image v-if=\"data.subCompEnable && data.subCompShow\" class=\"img-fast-forward\"\n src=\"../../../static/test-video/fast-forward.png\" @tap.stop=\"fastForward\"></image>\n \n <input v-if=\"data.subCompEnable && data.subCompShow\" id=\"input-send-danmu\" class=\"input-send-danmu\" placeholder=\"请输入弹幕内容\"\n placeholder-style=\"color: white;\" confirm-type=\"send\" @confirm=\"onSendDanmuConfirm\"\n @keyboardheightchange=\"onSendDanmuKeyboardHeightChange\" @blur=\"onSendDanmuBlur\"></input>\n \n\n <template #controls>\n <view v-if=\"data.subCompControlsShow\" class=\"video-fullscreen_controls\">\n <view style=\"flex-direction: row;justify-content: center;align-items: center;\">\n <view class=\"control-btn\" @click=\"togglePlay\">\n <text class=\"control-icon\">{{ data.isPlaying ? ICON_PAUSH : ICON_PLAY }}</text>\n </view>\n <view class=\"control-btn\" @click=\"toggleDanmu\">\n <text class=\"control-icon\">{{ data.enableDanmu ? ICON_DANMU_ACTIVE : ICON_DANMU }}</text>\n </view>\n <view class=\"control-btn\" @click=\"toggleMute\">\n <text class=\"control-icon\">{{ data.muted ? ICON_VOLUME_MUTE : ICON_VOLUME }}</text>\n </view>\n </view>\n\n <view>\n <view class=\"control-btn\" @click=\"toggleFullscreen\">\n <text class=\"control-icon\">{{ data.isFullscreen ? ICON_FULLSCREEN_CLOSE : ICON_FULLSCREEN }}</text>\n </view>\n </view>\n </view>\n </template>\n </video>\n <scroll-view class=\"uni-padding-wrap uni-common-mt uni-flex-item uni-theme-root\">\n <view class=\"uni-btn-v\">\n <navigator url=\"/pages/component/video/video-format\">\n <button type=\"primary\" @click=\"pause\">视频格式示例</button>\n </navigator>\n </view>\n \n <view class=\"uni-btn-v\">\n <navigator url=\"/pages/component/list-view/list-view-multiplex-video\">\n <button type=\"primary\" @click=\"pause\">list-view嵌套视频复用示例</button>\n </navigator>\n </view>\n \n \n <view class=\"uni-btn-v\">\n <button type=\"primary\" @click=\"openDialogPageVideo\">dialogPage 视频格式示例</button>\n </view>\n \n <view class=\"uni-row uni-btn-v\" style=\"justify-content: space-between;align-items: center;\">\n <text class=\"uni-title\" style=\"width: 80%;\">全屏后自定义 controls</text>\n <switch :checked=\"data.subCompControlsEnable\" @change=\"onSubCompControlsEnable\" />\n </view>\n <view class=\"uni-row uni-btn-v\" style=\"justify-content: space-between;align-items: center;\">\n \n <text class=\"uni-title\" style=\"width: 80%;\">子组件实现快进、快退、发送弹幕功能（全屏后显示）</text>\n \n \n <text class=\"uni-title\" style=\"width: 80%;\">子组件实现快进、快退功能（全屏后显示）</text>\n \n <switch :checked=\"data.subCompEnable\" @change=\"onSubCompEnableChange\" />\n </view>\n <view class=\"uni-title\">\n <text class=\"uni-title-text\">API示例</text>\n </View>\n <view class=\"uni-btn-v\">\n <button type=\"primary\" @click=\"play\">播放</button>\n </view>\n <view class=\"uni-btn-v\">\n <button type=\"primary\" @click=\"pause\">暂停</button>\n </view>\n <view class=\"uni-btn-v\">\n <input class=\"input\" placeholder=\"输入要跳转的位置,单位s\" type=\"number\" @input=\"onSeekInput\"></input>\n <button type=\"primary\" @click=\"seek(data.pos)\">跳转到指定位置</button>\n </view>\n <view class=\"uni-btn-v\">\n <enum-data title=\"选择进入全屏时的视频方向\" :items=\"data.directionItemTypes\"\n @change=\"onRequestFullScreenDirectionChange\"></enum-data>\n <button type=\"primary\" @click=\"requestFullScreen\">进入全屏</button>\n </view>\n <view class=\"uni-btn-v\">\n <button type=\"primary\" @click=\"exitFullScreen\">退出全屏</button>\n </view>\n <view class=\"uni-btn-v\">\n <button type=\"primary\" @click=\"stop\">停止</button>\n </view>\n \n <view class=\"uni-btn-v\">\n <input class=\"input\" placeholder=\"输入弹幕\" value=\"{ 'text': '要显示的文本', 'color': '#FF0000' }\" type=\"string\"\n @input=\"onSendDanmuInput\"></input>\n <button type=\"primary\" :disabled=\"!data.enableDanmu\" @click=\"sendDanmu\">发送弹幕</button>\n </view>\n \n <view class=\"uni-btn-v\">\n <enum-data title=\"选择倍速\" :items=\"data.rateItemTypes\" @change=\"onPlaybackRateChange\"></enum-data>\n <button type=\"primary\" @click=\"playbackRate\">设置倍速</button>\n </view>\n <view class=\"uni-title\">\n <text class=\"uni-title-text\">属性示例</text>\n </view>\n\n \n <view class=\"uni-btn-v\">\n <input class=\"input margin-10\" type=\"string\" placeholder=\"设置播放资源\" @confirm=\"onSrcComfirm\"></input>\n <input class=\"input margin-10\" type=\"number\" placeholder=\"设置初始播放位置（播放前设置有效）\"\n @confirm=\"onInitialTimeComfirm\"></input>\n <input class=\"input margin-10\" type=\"number\" placeholder=\"设置视频时长（播放前设置有效）\" @confirm=\"onDurationComfirm\"></input>\n <input class=\"input margin-10\" type=\"string\" placeholder=\"设置视频封面\" @confirm=\"onPosterComfirm\"></input>\n <input class=\"input margin-10\" type=\"string\" placeholder=\"设置视频标题（仅限非 Web 平台）\" @confirm=\"onTitleComfirm\"></input>\n <input class=\"input margin-10\" type=\"string\" placeholder=\"设置header(json格式)\" @confirm=\"onHeaderComfirm\"></input>\n </view>\n\n \n <boolean-data title=\"设置是否展示弹幕（播放前设置有效）\" :defaultValue=\"data.enableDanmu\" @change=\"onEnableDanmuChange\"></boolean-data>\n \n <boolean-data title=\"设置是否自动播放（播放前设置有效）\" :defaultValue=\"data.autoplay\" @change=\"onAutoplayChange\"></boolean-data>\n <boolean-data title=\"设置是否循环播放（播放完成后生效）\" :defaultValue=\"data.loop\" @change=\"onLoopChange\"></boolean-data>\n <boolean-data title=\"设置是否静音播放\" :defaultValue=\"data.muted\" @change=\"onMutedChange\"></boolean-data>\n <boolean-data title=\"设置是否显示默认播放控件\" :defaultValue=\"data.controls\" @change=\"onControlsChange\"></boolean-data>\n \n <boolean-data title=\"设置是否显示弹幕按钮\" :defaultValue=\"data.danmuBtn\" @change=\"onDanmuBtnChange\"></boolean-data>\n \n <boolean-data title=\"设置是否显示进度条\" :defaultValue=\"data.showProgress\" @change=\"onShowProgressChange\"></boolean-data>\n <boolean-data title=\"设置是否显示全屏按钮\" :defaultValue=\"data.showFullscreenBtn\"\n @change=\"onShowFullscreenBtnChange\"></boolean-data>\n <boolean-data title=\"设置是否显示视频底部控制栏的播放按钮\" :defaultValue=\"data.showPlayBtn\" @change=\"onShowPlayBtnChange\"></boolean-data>\n <boolean-data title=\"设置是否显示静音按钮（仅限非 Web 平台）\" :defaultValue=\"data.showMuteBtn\"\n @change=\"onShowMuteBtnChange\"></boolean-data>\n <boolean-data title=\"设置是否显示视频中间的播放按钮\" :defaultValue=\"data.showCenterPlayBtn\"\n @change=\"onShowCenterPlayBtnChange\"></boolean-data>\n <boolean-data title=\"设置是否显示loading控件\" :defaultValue=\"data.showLoading\" @change=\"onShowLoadingChange\"></boolean-data>\n <boolean-data title=\"设置是否开启控制进度的手势\" :defaultValue=\"data.enableProgressGesture\"\n @change=\"onEnableProgressGestureChange\"></boolean-data>\n <boolean-data title=\"设置是否开启播放手势,双击播放暂停（仅限非 Web 平台）\" :defaultValue=\"data.enablePlayGesture\"\n @change=\"onEnablePlayGestureChange\"></boolean-data>\n \n <boolean-data title=\"非全屏模式下，设置是否开启亮度与音量调节手势 page-gesture\" :defaultValue=\"data.pageGesture\"\n @change=\"onPageGestureChange\"></boolean-data>\n \n <boolean-data title=\"非全屏模式下，设置是否开启亮度与音量调节手势 vslide-gesture（仅限非 Web 平台）\" :defaultValue=\"data.vslideGesture\"\n @change=\"onVslideGestureChange\"></boolean-data>\n <boolean-data title=\"全屏模式下，设置是否开启亮度与音量调节手势（仅限非 Web 平台）\" :defaultValue=\"data.vslideGestureInFullscreen\"\n @change=\"onVslideGestureInFullscreenChange\"></boolean-data>\n <enum-data title=\"视频与video容器大小不一致时的表现\" :items=\"data.objectFitItemTypes\"\n @change=\"onObjectFitChange\"></enum-data>\n \n <boolean-data title=\"设置是否对http、https视频源开启本地缓存（仅 Android、iOS 平台，播放前设置有效）\" :defaultValue=\"data.httpCache\"\n @change=\"onHttpCacheChange\"></boolean-data>\n \n </scroll-view>\n </view>\n</template>\n\n<script setup lang=\"uts\">\n import { ItemType } from '@/components/enum-data/enum-data-types';\n\n type RectType = {\n x: number;\n y: number;\n width: number;\n height: number;\n }\n\n type DataType = {\n videoContext: VideoContext | null;\n // 属性\n src: string;\n autoplay: boolean;\n loop: boolean;\n muted: boolean;\n initialTime: number;\n duration: number;\n controls: boolean;\n danmuList: Array<Danmu>;\n danmuBtn: boolean;\n enableDanmu: boolean;\n pageGesture: boolean;\n direction: number;\n directionItemTypes: ItemType[];\n directionItems: number[];\n showProgress: boolean;\n showFullscreenBtn: boolean;\n showPlayBtn: boolean;\n showCenterPlayBtn: boolean;\n showLoading: boolean;\n enableProgressGesture: boolean;\n objectFit: string;\n objectFitItemTypes: ItemType[];\n objectFitItems: string[];\n poster: string;\n showMuteBtn: boolean;\n title: string;\n enablePlayGesture: boolean;\n vslideGesture: boolean;\n vslideGestureInFullscreen: boolean;\n httpCache: boolean;\n header: UTSJSONObject;\n // API\n pos: number;\n requestFullScreenOptions: RequestFullScreenOptions | null;\n danmu: Danmu;\n rate: number;\n rateItemTypes: ItemType[];\n rateItems: number[];\n subCompEnable: boolean;\n subCompControlsEnable: boolean;\n subCompShow: boolean;\n subCompControlsShow: boolean;\n isFullscreen: boolean;\n curPos: number;\n endPos: number;\n // 自动化测试\n autoTest: boolean;\n isPlaying: boolean;\n isPause: boolean;\n isError: boolean;\n eventPlay: UTSJSONObject | null;\n eventPause: UTSJSONObject | null;\n eventEnded: UTSJSONObject | null;\n eventTimeupdate: UTSJSONObject | null;\n eventFullscreenchange: UTSJSONObject | null;\n eventWaiting: UTSJSONObject | null;\n eventError: UTSJSONObject | null;\n eventProgress: UTSJSONObject | null;\n eventFullscreenclick: UTSJSONObject | null;\n eventControlstoggle: UTSJSONObject | null;\n eventParentTouchstart: UTSJSONObject | null;\n eventParentTouchmove: UTSJSONObject | null;\n eventParentTouchend: UTSJSONObject | null;\n dialogPageVideo: UniPage | null;\n }\n\n const ICON_PLAY = '\\uea24';\n const ICON_PAUSH = '\\uea25';\n const ICON_DANMU = '\\uea26';\n const ICON_DANMU_ACTIVE = '\\uea27';\n const ICON_VOLUME = '\\uea30';\n const ICON_VOLUME_MUTE = '\\uea31';\n const ICON_FULLSCREEN_CLOSE = '\\uea28';\n const ICON_FULLSCREEN = '\\uea29';\n\n // 使用reactive避免ref数据在自动化测试中无法访问\n const data = reactive({\n videoContext: null,\n // 属性\n src: \"https://web-ext-storage.dcloud.net.cn/video/sample/2minute-demo.mp4\",\n autoplay: false,\n loop: false,\n muted: false,\n initialTime: 0,\n duration: 0,\n controls: true,\n danmuList: [{\n text: '要显示的文本',\n color: '#FF0000',\n time: 3\n }, {\n text: '要显示的文本2',\n color: '#31ff23',\n time: 5\n }, {\n text: '要显示的文本3',\n color: '#f13ef8',\n time: 7\n }, {\n text: '要显示的文本4',\n color: '#4972f8',\n time: 9\n }, {\n text: '要显示的文本5',\n color: '#000000',\n time: 11\n }],\n danmuBtn: false,\n enableDanmu: true,\n pageGesture: false,\n direction: -1,\n directionItemTypes: [{ \"value\": 0, \"name\": \"0(正常竖向)\" }, { \"value\": 1, \"name\": \"90(屏幕逆时针90度)\" }, { \"value\": 2, \"name\": \"-90(屏幕顺时针90度)\" }],\n directionItems: [0, 90, -90],\n showProgress: true,\n showFullscreenBtn: true,\n showPlayBtn: true,\n showCenterPlayBtn: true,\n showLoading: true,\n enableProgressGesture: true,\n objectFit: \"contain\",\n objectFitItemTypes: [{ \"value\": 0, \"name\": \"contain(包含)\" }, { \"value\": 1, \"name\": \"fill(填充)\" }, { \"value\": 2, \"name\": \"cover(覆盖)\" }],\n objectFitItems: [\"contain\", \"fill\", \"cover\"],\n poster: \"https://web-ext-storage.dcloud.net.cn/hello-uni-app-x/video/video-poster.jpg\",\n showMuteBtn: false,\n title: \"video-component\",\n enablePlayGesture: false,\n vslideGesture: false,\n vslideGestureInFullscreen: true,\n httpCache: true,\n header: {\n 'User-Agent': 'User-Agent test',\n 'header': 'header test',\n 'cookie': 'cookie test'\n },\n // API\n pos: 0,\n requestFullScreenOptions: null,\n danmu: {\n text: '要显示的文本',\n color: '#FF0000'\n },\n rate: 1,\n rateItemTypes: [{ \"value\": 0, \"name\": \"0.5\" }, { \"value\": 1, \"name\": \"0.8\" }, { \"value\": 2, \"name\": \"1.0\" }, { \"value\": 3, \"name\": \"1.25\" }, { \"value\": 4, \"name\": \"1.5\" }],\n rateItems: [0.5, 0.8, 1.0, 1.25, 1.5],\n subCompEnable: false,\n subCompControlsEnable: false,\n subCompShow: false,\n subCompControlsShow: false,\n isFullscreen: false,\n curPos: 0,\n endPos: 0,\n // 自动化测试\n autoTest: false,\n isPlaying: false,\n isPause: false,\n isError: false,\n eventPlay: null,\n eventPause: null,\n eventEnded: null,\n eventTimeupdate: null,\n eventFullscreenchange: null,\n eventWaiting: null,\n eventError: null,\n eventProgress: null,\n eventFullscreenclick: null,\n eventControlstoggle: null,\n eventParentTouchstart: null,\n eventParentTouchmove: null,\n eventParentTouchend: null,\n dialogPageVideo: null\n } as DataType)\n\n onReady(() => {\n data.videoContext = uni.createVideoContext('video');\n // data.videoContext = uni.createVideoContext('video', this);\n })\n\n const pause = () => {\n console.log(\"pause\");\n // #ifdef MP || WEB\n data.videoContext?.pause();\n // #endif\n // #ifdef APP\n data.videoContext?.pause()\n // (uni.getElementById(\"video\") as UniVideoElement).pause(); //as写法测试。注意id不对时as会崩溃\n // #endif\n }\n\n const openDialogPageVideo = () => {\n // #ifndef MP-ALIPAY\n pause()\n data.dialogPageVideo = uni.openDialogPage({\n url: '/pages/component/video/video-dialog-page'\n })\n // #endif\n }\n\n const closeDialogPageVideo = () => {\n // #ifndef MP-ALIPAY\n uni.closeDialogPage({\n dialogPage: data.dialogPageVideo\n })\n // #endif\n }\n\n const getDialogPageVideoFullscreenBtnRect = (): DOMRect | null => {\n return data.dialogPageVideo?.getElementById('fullscreen-btn')?.getBoundingClientRect() ?? null;\n }\n\n // API\n const play = () => {\n console.log(\"play\");\n data.videoContext?.play();\n }\n\n const seek = (pos : number) => {\n console.log(\"seek -> \" + pos);\n data.videoContext?.seek(pos);\n }\n\n const onSeekInput = (event : UniInputEvent) => {\n data.pos = parseInt(event.detail.value);\n }\n\n const requestFullScreen = () => {\n console.log(\"requestFullScreen -> \" + data.requestFullScreenOptions);\n data.videoContext?.requestFullScreen(data.requestFullScreenOptions);\n }\n\n const exitFullScreen = () => {\n console.log(\"exitFullScreen\");\n data.videoContext?.exitFullScreen();\n }\n\n const stop = () => {\n console.log(\"stop\");\n // #ifdef MP\n data.videoContext?.stop();\n // #endif\n // #ifndef MP\n data.videoContext?.stop();\n // uni.getElementById<UniVideoElement>(\"video\")?.stop(); //泛型写法测试\n // #endif\n }\n\n const sendDanmu = () => {\n // #ifndef MP-ALIPAY\n console.log(\"sendDanmu -> \" + data.danmu);\n data.videoContext?.sendDanmu(data.danmu);\n // #endif\n }\n\n const continuousSendDanmu = () => {\n // #ifndef MP-ALIPAY\n const colors = ['#FF0000', '#31ff23', '#f13ef8', '#4972f8', '#FF9800', '#9C27B0']\n for (let i = 0; i < colors.length; i++) {\n const color = colors[i]\n const text = '弹幕' + (i + 1)\n setTimeout(() => {\n data.videoContext?.sendDanmu({\n text,\n color\n });\n }, i * 500);\n }\n // #endif\n }\n\n const onSendDanmuInput = (event : UniInputEvent) => {\n let json = JSON.parse<Danmu>(event.detail.value)\n if (json == null) return;\n data.danmu = json as Danmu;\n }\n\n const playbackRate = () => {\n console.log(\"playbackRate -> \" + data.rate);\n data.videoContext?.playbackRate(data.rate);\n }\n\n const onPlaybackRateChange = (value : number) => {\n data.rate = data.rateItems[value];\n }\n\n const togglePlay = () => {\n if (data.isPlaying) {\n pause();\n } else {\n play();\n }\n }\n\n const toggleDanmu = () => {\n data.enableDanmu = !data.enableDanmu;\n }\n\n const toggleMute = () => {\n data.muted = !data.muted;\n }\n\n const toggleFullscreen = () => {\n if (data.isFullscreen) {\n exitFullScreen()\n } else {\n requestFullScreen();\n }\n }\n\n const fastBackward = () => {\n let posValue = data.curPos - 15;\n if (posValue < 0) posValue = 0;\n seek(posValue);\n }\n\n const fastForward = () => {\n let posValue = data.curPos + 15;\n if (posValue > data.endPos) posValue = data.endPos;\n seek(posValue);\n }\n\n const onSendDanmuConfirm = (event : UniInputConfirmEvent) => {\n // #ifndef MP-ALIPAY\n data.videoContext?.sendDanmu({\n text: event.detail.value,\n color: '#ff0000'\n } as Danmu);\n // #endif\n }\n\n const onSendDanmuKeyboardHeightChange = (event : UniInputKeyboardHeightChangeEvent) => {\n const element = uni.getElementById('input-send-danmu') as UniElement;\n if (event.detail.height.toInt() == 0) {\n element.style.setProperty('bottom', '50px');\n } else {\n element.style.setProperty('bottom', event.detail.height + element.getBoundingClientRect().height);\n }\n }\n\n const onSendDanmuBlur = (_ : UniInputBlurEvent) => {\n (uni.getElementById('input-send-danmu') as UniElement).style.setProperty('bottom', '50px');\n }\n\n // 属性\n const onSrcComfirm = (event : UniInputConfirmEvent) => {\n let value = event.detail.value;\n if (value == '') return;\n data.src = value;\n console.log(\"src -> \" + data.src)\n }\n\n const onAutoplayChange = (value : boolean) => {\n data.autoplay = value;\n console.log(\"autoplay -> \" + data.autoplay)\n }\n\n const onLoopChange = (value : boolean) => {\n data.loop = value;\n console.log(\"loop -> \" + data.loop)\n }\n\n const onMutedChange = (value : boolean) => {\n data.muted = value;\n console.log(\"muted -> \" + data.muted)\n }\n\n const onInitialTimeComfirm = (event : UniInputConfirmEvent) => {\n let value = parseInt(event.detail.value)\n if (isNaN(value)) value = 0;\n data.initialTime = value;\n console.log(\"initialTime -> \" + data.initialTime)\n }\n\n const onDurationComfirm = (event : UniInputConfirmEvent) => {\n let value = parseInt(event.detail.value)\n if (isNaN(value)) value = 0;\n data.duration = value;\n console.log(\"duration -> \" + data.duration)\n }\n\n const onControlsChange = (value : boolean) => {\n data.controls = value;\n console.log(\"controls -> \" + data.controls)\n }\n\n const onEnableDanmuChange = (value : boolean) => {\n data.enableDanmu = value;\n console.log(\"enableDanmu -> \" + data.enableDanmu)\n }\n\n const onDanmuBtnChange = (value : boolean) => {\n data.danmuBtn = value;\n console.log(\"danmuBtn -> \" + data.danmuBtn)\n }\n\n const onPageGestureChange = (value : boolean) => {\n data.pageGesture = value;\n console.log(\"pageGesture -> \" + data.pageGesture)\n }\n\n const onRequestFullScreenDirectionChange = (value : number) => {\n let directionValue = data.directionItems[value];\n data.requestFullScreenOptions = {\n direction: directionValue\n } as RequestFullScreenOptions;\n }\n\n const onShowProgressChange = (value : boolean) => {\n data.showProgress = value;\n console.log(\"showProgress -> \" + data.showProgress)\n }\n\n const onShowFullscreenBtnChange = (value : boolean) => {\n data.showFullscreenBtn = value;\n console.log(\"showFullscreenBtn -> \" + data.showFullscreenBtn)\n }\n\n const onShowPlayBtnChange = (value : boolean) => {\n data.showPlayBtn = value;\n console.log(\"showPlayBtn -> \" + data.showPlayBtn)\n }\n\n const onShowCenterPlayBtnChange = (value : boolean) => {\n data.showCenterPlayBtn = value;\n console.log(\"showCenterPlayBtn -> \" + data.showCenterPlayBtn)\n }\n\n const onShowLoadingChange = (value : boolean) => {\n data.showLoading = value;\n console.log(\"showLoading -> \" + data.showLoading)\n }\n\n const onEnableProgressGestureChange = (value : boolean) => {\n data.enableProgressGesture = value;\n console.log(\"enableProgressGesture -> \" + data.enableProgressGesture)\n }\n\n const onObjectFitChange = (value : number) => {\n data.objectFit = data.objectFitItems[value];\n console.log(\"objectFit -> \" + data.objectFit)\n }\n\n const onPosterComfirm = (event : UniInputConfirmEvent) => {\n let value = event.detail.value;\n if (value == '') return;\n data.poster = value;\n console.log(\"poster -> \" + data.poster)\n }\n\n const onShowMuteBtnChange = (value : boolean) => {\n data.showMuteBtn = value;\n console.log(\"showMuteBtn -> \" + data.showMuteBtn)\n }\n\n const onTitleComfirm = (event : UniInputConfirmEvent) => {\n let value = event.detail.value;\n if (value == '') return;\n data.title = value;\n console.log(\"title -> \" + data.title)\n }\n\n const onEnablePlayGestureChange = (value : boolean) => {\n data.enablePlayGesture = value;\n console.log(\"enablePlayGesture -> \" + data.enablePlayGesture)\n }\n\n const onVslideGestureChange = (value : boolean) => {\n data.vslideGesture = value;\n console.log(\"vslideGesture -> \" + data.vslideGesture)\n }\n\n const onVslideGestureInFullscreenChange = (value : boolean) => {\n data.vslideGestureInFullscreen = value;\n console.log(\"vslideGestureInFullscreen -> \" + data.vslideGestureInFullscreen)\n }\n\n const onHttpCacheChange = (value : boolean) => {\n data.httpCache = value;\n console.log(\"httpCache -> \" + data.httpCache)\n }\n\n const onHeaderComfirm = (event : UniInputConfirmEvent) => {\n let json = JSON.parse(event.detail.value)\n if (json == null) return;\n data.header = json as UTSJSONObject;\n console.log(\"header -> \" + JSON.stringify(data.header))\n }\n\n const onSubCompEnableChange = (event : UniSwitchChangeEvent) => {\n data.subCompEnable = event.detail.value;\n }\n\n function onSubCompControlsEnable(event: UniSwitchChangeEvent) {\n data.subCompControlsEnable = event.detail.value;\n }\n\n const isHorizontalFullscreen = ref(false)\n const fullscreenShowPlayBtn = ref(data.showPlayBtn)\n const fullscreenShowMuteBtn = ref(data.showMuteBtn)\n const fullscreenShowFullscreenBtn = ref(data.showFullscreenBtn)\n const fullscreenShowDanmuBtn = ref(data.danmuBtn)\n watchEffect(() => {\n data.subCompControlsShow = isHorizontalFullscreen.value && data.subCompControlsEnable\n // 当全屏显示自定义 controls 时，不显示 video 组件原本 controls 按钮\n fullscreenShowPlayBtn.value = !data.subCompControlsShow\n fullscreenShowMuteBtn.value = !data.subCompControlsShow\n fullscreenShowFullscreenBtn.value = !data.subCompControlsShow // 不显示全屏按钮，返回手势或者右上角退出全屏\n fullscreenShowDanmuBtn.value = !data.subCompControlsShow\n })\n\n // 事件\n const onPlay = (res : UniEvent) => {\n console.log(res.type);\n data.isPlaying = true;\n data.isPause = false;\n if (data.autoTest) {\n data.eventPlay = {\n \"tagName\": res.target?.tagName,\n \"type\": res.type\n };\n }\n }\n\n const onPause = (res : UniEvent) => {\n console.log(res.type);\n data.isPlaying = false;\n data.isPause = true;\n if (data.autoTest) {\n data.eventPause = {\n \"tagName\": res.target?.tagName,\n \"type\": res.type\n };\n }\n }\n\n const onEnded = (res : UniEvent) => {\n console.log(res.type);\n if (data.autoTest) {\n data.eventEnded = {\n \"tagName\": res.target?.tagName,\n \"type\": res.type\n };\n }\n }\n\n const onTimeUpdate = (res : UniVideoTimeUpdateEvent) => {\n console.log(res.type + \" -> \" + JSON.stringify(res.detail));\n data.curPos = res.detail.currentTime;\n data.endPos = res.detail.duration;\n if (data.autoTest) {\n data.eventTimeupdate = {\n \"tagName\": res.target?.tagName,\n \"type\": res.type,\n \"currentTime\": Math.trunc(res.detail.currentTime),\n \"duration\": Math.trunc(res.detail.duration)\n };\n }\n }\n\n const onFullScreenChange = (res : UniVideoFullScreenChangeEvent) => {\n const detail = res.detail\n console.log(res.type + \" -> \" + JSON.stringify(detail));\n data.subCompShow = detail.fullScreen;\n data.isFullscreen = detail.fullScreen;\n isHorizontalFullscreen.value = detail.fullScreen && detail.direction === 'horizontal'\n if (data.autoTest) {\n data.eventFullscreenchange = {\n \"tagName\": res.target?.tagName,\n \"type\": res.type,\n \"fullScreen\": res.detail.fullScreen,\n \"direction\": res.detail.direction\n };\n }\n }\n\n const onWaiting = (res : UniEvent) => {\n console.log(res.type);\n if (data.autoTest) {\n data.eventWaiting = {\n \"tagName\": res.target?.tagName,\n \"type\": res.type\n };\n }\n }\n\n const onError = (res : UniVideoErrorEvent) => {\n console.log(res.type + \" -> \" + JSON.stringify(res.detail));\n data.isError = true;\n if (data.autoTest) {\n data.eventError = {\n \"tagName\": res.target?.tagName,\n \"type\": res.type,\n \"errCode\": res.detail.errCode\n };\n }\n }\n\n const onProgress = (res : UniVideoProgressEvent) => {\n console.log(res.type + \" -> \" + JSON.stringify(res.detail));\n if (data.autoTest) {\n data.eventProgress = {\n \"tagName\": res.target?.tagName,\n \"type\": res.type,\n \"isBufferedValid\": res.detail.buffered >= 0\n };\n }\n }\n\n const onFullScreenClick = (res : UniVideoFullScreenClickEvent) => {\n console.log(res.type + \" -> \" + JSON.stringify(res.detail));\n if (data.autoTest) {\n data.eventFullscreenclick = {\n \"tagName\": res.target?.tagName,\n \"type\": res.type,\n \"screenX\": Math.trunc(res.detail.screenX),\n \"screenY\": Math.trunc(res.detail.screenY),\n \"screenWidth\": Math.trunc(res.detail.screenWidth),\n \"screenHeight\": Math.trunc(res.detail.screenHeight)\n };\n }\n }\n\n const onControlsToggle = (res : UniVideoControlsToggleEvent) => {\n console.log(res.type + \" -> \" + JSON.stringify(res.detail));\n if (data.autoTest) {\n data.eventControlstoggle = {\n \"tagName\": res.target?.tagName,\n \"type\": res.type,\n \"show\": res.detail.show\n };\n }\n }\n\n const onVideoParentTouchStart = (res : TouchEvent) => {\n if (data.autoTest) {\n data.eventParentTouchstart = {\n \"tagName\": res.target?.tagName,\n \"currentTargetTagName\": res.currentTarget?.tagName,\n \"type\": res.type\n };\n }\n }\n\n const onVideoParentTouchMove = (res : TouchEvent) => {\n if (data.autoTest) {\n data.eventParentTouchmove = {\n \"tagName\": res.target?.tagName,\n \"currentTargetTagName\": res.currentTarget?.tagName,\n \"type\": res.type\n };\n }\n }\n\n const onVideoParentTouchEnd = (res : TouchEvent) => {\n if (data.autoTest) {\n data.eventParentTouchend = {\n \"tagName\": res.target?.tagName,\n \"currentTargetTagName\": res.currentTarget?.tagName,\n \"type\": res.type\n };\n }\n }\n\n // 自动化测试\n const downloadSource = () => {\n uni.downloadFile({\n url: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.mp4',\n success: (res) => {\n data.src = res.tempFilePath;\n },\n fail: (_) => {\n data.isError = true;\n }\n })\n }\n\n const getWindowInfo = () : GetWindowInfoResult => {\n return uni.getWindowInfo();\n }\n\n const getVideoRect = () : RectType | null => {\n const element = uni.getElementById('video');\n if (element == null) return null;\n const rect = element.getBoundingClientRect();\n return {\n x: rect.x,\n y: rect.y,\n width: rect.width,\n height: rect.height\n };\n }\n\n // #ifdef APP-ANDROID\n const hasSubComponent = () : boolean => {\n const element = uni.getElementById('video')?.querySelector('.uni-video-slots');\n if (element == null) return false;\n return element.children.length > 0;\n }\n // #endif\n\n const requestVerticalFullScreen = () => {\n data.videoContext?.requestFullScreen({\n direction: 0\n } as RequestFullScreenOptions);\n }\n\n defineExpose({\n data,\n play,\n pause,\n downloadSource,\n seek,\n requestFullScreen,\n exitFullScreen,\n // #ifdef APP-ANDROID\n hasSubComponent,\n // #endif\n requestVerticalFullScreen,\n openDialogPageVideo,\n closeDialogPageVideo,\n getWindowInfo,\n getVideoRect,\n continuousSendDanmu,\n getDialogPageVideoFullscreenBtnRect\n })\n</script>\n\n<style>\n .video {\n width: 100%;\n height: 200px;\n }\n\n .input {\n height: 40px;\n color: #333333;\n background-color: #ffffff;\n padding: 8px 13px;\n }\n\n .img-fast-backward {\n width: 40px;\n height: 40px;\n top: 50%;\n left: 12%;\n transform: translate(-50%, -50%);\n position: absolute;\n }\n\n .img-fast-forward {\n width: 40px;\n height: 40px;\n top: 50%;\n right: 12%;\n transform: translate(50%, -50%);\n position: absolute;\n }\n\n .input-send-danmu {\n height: 40px;\n padding: 8px 13px;\n margin: 0 var(--status-bar-height);\n bottom: 100px;\n position: absolute;\n background-color: rgba(0, 0, 0, 0.5);\n color: #FFF;\n }\n\n .video-fullscreen_controls {\n padding-left: var(--uni-safe-area-inset-left);\n padding-right: var(--uni-safe-area-inset-right);\n padding-bottom: 10px;\n height: 50px;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n }\n\n .control-btn {\n width: 50px;\n height: 100%;\n justify-content: center;\n align-items: center;\n margin: 0 15px;\n }\n\n .control-icon {\n font-family: 'uni-video-icon';\n font-size: 24px;\n color: rgba(255, 255, 255, 0.8);\n text-align: center;\n }\n\n @media (prefers-color-scheme: dark) {\n .input {\n color: #ffffff;\n background-color: #2d2d2d;\n }\n }\n</style>\n\n```\n\n:::","children":"### 子组件 @children-tags\n支持所有组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.media.video)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/video.html)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/video.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=video&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=video&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=video&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=video&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=video)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=video&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"animation-view":{"name":"::: sourceCode\n## animation-view\n\n> GitCode: https://gitcode.com/dcloud/uni-component/tree/alpha/uni_modules/uni-animation-view\n\n\n> GitHub: https://github.com/dcloudio/uni-component/tree/alpha/uni_modules/uni-animation-view\n\n:::","originName":"## animation-view","description":"Lottie 动画\n\n> 本 Component 是 uni ext component，需下载插件：[animation-view](https://ext.dcloud.net.cn/plugin?id=28623)\n","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| √ | √ | 3.9 | 4.11 | 5.0 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| path | string | \"\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"√\",\"√\",\"3.9\",\"4.11\",\"5.0\"]],\"status\":\"SUPPORTED\"}' /> | 动画资源地址，目前只支持绝对路径 |\n| loop | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"√\",\"√\",\"3.9\",\"4.11\",\"5.0\"]],\"status\":\"SUPPORTED\"}' /> | 动画是否循环播放 |\n| autoplay | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"√\",\"√\",\"3.9\",\"4.11\",\"5.0\"]],\"status\":\"SUPPORTED\"}' /> | 动画是否自动播放 |\n| action | string | \"stop\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"√\",\"√\",\"3.9\",\"4.11\",\"5.0\"]],\"status\":\"SUPPORTED\"}' /> | 动画操作，可取值 play、pause、stop |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| play | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"√\",\"√\",\"3.9\",\"4.11\",\"5.0\"]],\"status\":\"SUPPORTED\"}' /> | 播放 |\n@| pause | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"√\",\"√\",\"3.9\",\"4.11\",\"5.0\"]],\"status\":\"SUPPORTED\"}' /> | 暂停 |\n@| stop | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"√\",\"√\",\"3.9\",\"4.11\",\"5.0\"]],\"status\":\"SUPPORTED\"}' /> | 停止 |\n| hidden | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"√\",\"√\",\"3.9\",\"4.11\",\"5.0\"]],\"status\":\"SUPPORTED\"}' /> | 是否隐藏动画 |\n| @ended | (event: [UniEvent](/component/common.md#unievent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"√\",\"x\",\"3.9\",\"4.11\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | |","event":"","example":"","children":"### 子组件 @children-tags\n不可以嵌套组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.media.animation-view)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/animation-view.html)\n- [插件市场](https://ext.dcloud.net.cn/plugin?id=28623)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=animation-view&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=animation-view&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=animation-view&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=animation-view&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=animation-view&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=animation-view)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=animation-view&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"camera":{"name":"::: sourceCode\n## camera\n\n> GitCode: https://gitcode.com/dcloud/uni-component/tree/alpha/uni_modules/uni-camera\n\n\n> GitHub: https://github.com/dcloudio/uni-component/tree/alpha/uni_modules/uni-camera\n\n:::","originName":"## camera","description":"相机组件","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.41 | 4.61 | 4.61 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| flash | auto \\| on \\| off \\| torch | \"auto\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.61\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 闪光灯，值为auto, on, off, torch |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| auto | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.61\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 自动 |\n@| on | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.61\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 开 |\n@| off | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.61\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 关 |\n@| torch | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.61\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 常亮 |\n| device-position | back \\| front | \"back\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.61\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 前置或后置，值为front, back |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| back | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.61\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 后置 |\n@| front | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.61\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 前置 |\n| mode | normal \\| scanCode | \"normal\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.71\",\"4.71\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>应用模式，只在初始化时有效，不能动态变更 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| normal | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.71\",\"4.71\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 相机模式 |\n@| scanCode | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.71\",\"4.71\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 扫码模式 |\n| resolution | low \\| medium \\| high | \"medium\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.61\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>分辨率，不支持动态修改 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| low | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.61\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 低 |\n@| medium | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.61\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 中 |\n@| high | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.61\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 高 |\n| frame-size | small \\| medium \\| large | \"medium\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.61\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>指定期望的相机帧数据尺寸 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| small | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.61\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 小尺寸帧数据 |\n@| medium | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.61\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 中尺寸帧数据 |\n@| large | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.61\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 大尺寸帧数据 |\n| photo-resolution | low \\| medium \\| high \\| original | \"medium\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.81\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>指定期望的拍照图片分辨率，不支持动态修改 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| low | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.81\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 低分辨率 |\n@| medium | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.81\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 中分辨率 |\n@| high | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.81\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 高分辨率 |\n@| original | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.81\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 原始分辨率，相机的原始分辨率拍照质量最高，但是保存速度可能会较慢 |\n| @stop | (event: [UniCameraStopEvent](#unicamerastopevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.61\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 摄像头在非正常终止时触发，如退出后台等情况 |\n| @error | (event: [UniCameraErrorEvent](#unicameraerrorevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.61\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 用户不允许使用摄像头时触发 |\n| @initdone | (event: [UniCameraInitDoneEvent](#unicamerainitdoneevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.61\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandle)*<br/>相机初始化完成时触发，`e.detail = {maxZoom}` |\n| @scancode | (event: [UniCameraScanCodeEvent](#unicamerascancodeevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.71\",\"4.71\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandle)*<br/>在扫码识别成功时触发，仅在 mode=\"scanCode\" 时生效 |","event":"\n### 事件\n#### UniCameraStopEvent\n\n```mermaid\ngraph LR\n \nUniCameraStopEvent -- Extends --> UniCustomEvent&ltUniCameraStopEventDetail&gt\n style UniCustomEvent&ltUniCameraStopEventDetail&gt color:#42b983\n click UniCustomEvent&ltUniCameraStopEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniCameraStopEventDetail\n\n\n###### UniCameraStopEventDetail 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| errorCause | string | 否 |\n| errSubject | string | 否 |\n| errCode | number | 否 |\n| errMsg | string | 否 |\n| data | Object | 否 |\n| cause | Object | 否 |\n\n\n#### UniCameraErrorEvent\n\n```mermaid\ngraph LR\n \nUniCameraErrorEvent -- Extends --> UniCustomEvent&ltUniCameraErrorEventDetail&gt\n style UniCustomEvent&ltUniCameraErrorEventDetail&gt color:#42b983\n click UniCustomEvent&ltUniCameraErrorEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniCameraErrorEventDetail\n\n\n###### UniCameraErrorEventDetail 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| msg | string | 否 |\n| errSubject | string | 否 |\n| errCode | number | 否 |\n| errMsg | string | 否 |\n| data | Object | 否 |\n| cause | Object | 否 |\n\n\n#### UniCameraInitDoneEvent\n\n```mermaid\ngraph LR\n \nUniCameraInitDoneEvent -- Extends --> UniCustomEvent&ltUniCameraInitDoneEventDetail&gt\n style UniCustomEvent&ltUniCameraInitDoneEventDetail&gt color:#42b983\n click UniCustomEvent&ltUniCameraInitDoneEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniCameraInitDoneEventDetail\n\n\n###### UniCameraInitDoneEventDetail 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| maxZoom | number | 否 |\n\n\n#### UniCameraScanCodeEvent\n\n```mermaid\ngraph LR\n \nUniCameraScanCodeEvent -- Extends --> UniCustomEvent&ltUniCameraScanCodeEventDetail&gt\n style UniCustomEvent&ltUniCameraScanCodeEventDetail&gt color:#42b983\n click UniCustomEvent&ltUniCameraScanCodeEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniCameraScanCodeEventDetail\n\n\n###### UniCameraScanCodeEventDetail 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| type | string | 否 |\n| result | string | 否 |\n| rawData | string | 否 |\n| charSet | string | 否 |\n| scanArea | Array<number> | 否 |\n\n","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/camera/camera.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/camera/camera.uvue) \n>\n> 该 API 不支持 Web，请运行 hello uni-app x 到 App 平台体验 \n\n::: preview\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/camera/camera\n```uvue\n<template>\r\n\t<view style=\"flex: 1;\">\r\n\t\t<camera style=\"width: 100%; height: 300px;\" :resolution=\"'medium'\" :device-position=\"devicePosition\" photo-resolution=\"high\"\r\n\t\t\t:flash=\"flash\" :frame-size=\"frameSize\" @stop=\"handleStop\" @error=\"handleError\" @initdone=\"handleInitDone\">\r\n\t\t</camera>\r\n\r\n\t\t<scroll-view style=\"flex: 1;\">\r\n\t\t\t<view>\r\n \t\t<button type=\"default\" @click=\"handleScanCode\">扫码</button>\r\n\t\t\t\t<button type=\"default\" @click=\"switchDevicePosition\">切换前后摄像头</button>\r\n\t\t\t\t<button type=\"default\" @click=\"switchFlash\">闪光灯</button>\r\n\r\n\t\t\t\t<button type=\"default\" @click=\"setOnFrameListener\">设置帧数据监听</button>\r\n\t\t\t\t<button type=\"default\" @click=\"startFrameListener\">开始捕捉帧数据</button>\r\n\t\t\t\t<button type=\"default\" @click=\"stopFrameListener\">停止捕捉帧数据</button>\r\n\t\t\t\t<view>\r\n\t\t\t\t\t<view class=\"uni-title\">\r\n\t\t\t\t\t\t<text class=\"uni-title-text\">设置预览缩放</text>\r\n\t\t\t\t\t</view>\r\n\t\t\t\t\t<view class=\"uni-camera-wrapper\">\r\n\t\t\t\t\t\t<slider class=\"uni-camera-test-host\" :disabled=\"maxZoom == 0\" :show-value=\"true\" :min=\"1\"\r\n\t\t\t\t\t\t\t:max=\"maxZoom\" :value=\"1\" @changing=\"zoomSliderChange\" />\r\n\t\t\t\t\t</view>\r\n\t\t\t\t</view>\r\n\r\n\t\t\t\t<view>\r\n\t\t\t\t\t<view class=\"uni-title\">\r\n\t\t\t\t\t\t<text class=\"uni-title-text\">拍摄照片示例</text>\r\n\t\t\t\t\t\t<button type=\"default\" @click=\"handleTakePhoto\">拍摄照片</button>\r\n\t\t\t\t\t\t<radio-group style=\"flex-direction: row;\" name=\"成像质量\" @change=\"takePhotoQualityChange\">\r\n\t\t\t\t\t\t\t<view><radio value=\"normal\" :checked=\"true\" /><text>普通质量</text></view>\r\n\t\t\t\t\t\t\t<view><radio value=\"low\" /><text>低质量</text></view>\r\n\t\t\t\t\t\t\t<view><radio value=\"high\" /><text>高质量</text></view>\r\n\t\t\t\t\t\t\t<view><radio value=\"original\" /><text>原图</text></view>\r\n\t\t\t\t\t\t</radio-group>\r\n\t\t\t\t\t</view>\r\n\t\t\t\t\t<view class=\"uni-camera-wrapper\">\r\n\t\t\t\t\t\t<image class=\"uni-camera-test-host-without-flex\" style=\"width: 150px;height: 150px;\"\r\n\t\t\t\t\t\t\tv-if=\"imageSrc != ''\" :src=\"imageSrc\"></image>\r\n\t\t\t\t\t</view>\r\n\t\t\t\t</view>\r\n\r\n\t\t\t\t<view>\r\n\t\t\t\t\t<view class=\"uni-title\">\r\n\t\t\t\t\t\t<text class=\"uni-title-text\">录制视频示例</text>\r\n\t\t\t\t\t\t<view style=\"flex-direction: row;margin-top: 8px;\">\r\n\t\t\t\t\t\t\t<text class=\"uni-title-size\">录制时长：</text>\r\n\t\t\t\t\t\t\t<input class=\"uni-title-size\"\r\n\t\t\t\t\t\t\t\tstyle=\"width: 50px; margin-left: 10px;border: 0.5px solid grey;text-align: right;\"\r\n\t\t\t\t\t\t\t\ttype=\"number\" @input=\"timeoutInput\" :value=\"timeout\" />\r\n\t\t\t\t\t\t\t<text class=\"uni-title-size\" style=\"margin-left: 8px;\">秒</text>\r\n\t\t\t\t\t\t</view>\r\n\t\t\t\t\t\t<button type=\"default\" style=\"font-family: monospace;margin-top: 8px;\" @click=\"startRecord\"\r\n\t\t\t\t\t\t\t:disabled=\"startRecordStatus\">{{ startRecordStatus ? `${remain}秒` : \"录制视频\" }}</button>\r\n\t\t\t\t\t\t<button type=\"default\" @click=\"stopRecord\">停止录制</button>\r\n\t\t\t\t\t\t<radio-group style=\"flex-direction: row;margin-top: 8px;\" name=\"是否压缩\"\r\n\t\t\t\t\t\t\t@change=\"startRecordCompressChange\">\r\n\t\t\t\t\t\t\t<view><radio value=\"0\" :checked=\"true\" /><text>未启动视频压缩</text></view>\r\n\t\t\t\t\t\t\t<view><radio value=\"1\" /><text>启动视频压缩</text></view>\r\n\t\t\t\t\t\t</radio-group>\r\n\t\t\t\t\t</view>\r\n\t\t\t\t\t<view class=\"uni-camera-wrapper\">\r\n\t\t\t\t\t\t<video class=\"uni-camera-test-host-without-flex\" style=\"width: 300px;height: 300px;\"\r\n\t\t\t\t\t\t\tv-if=\"videoSrc != ''\" :src=\"videoSrc\" :controls=\"true\"></video>\r\n\t\t\t\t\t</view>\r\n\t\t\t\t</view>\r\n\t\t\t</view>\r\n\t\t</scroll-view>\r\n\t</view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n\tconst devicePosition = ref(\"back\")\r\n\tconst flash = ref(\"off\")\r\n\tconst frameSize = ref(\"medium\")\r\n\tlet listener: CameraContextCameraFrameListener | null = null\r\n\tconst maxZoom = ref(0)\r\n\tconst imageSrc = ref(\"\")\r\n\tlet quality = \"normal\"\r\n\tconst timeout = ref(30)\r\n\tlet compressed = false\r\n\tconst videoSrc = ref(\"\")\r\n\tconst startRecordStatus = ref(false)\r\n\tconst remain = ref(0)\r\n\tlet intervalId = -1\r\n\tlet timeoutStr = '30'\r\n\r\n\tconst handleScanCode = () => {\r\n\t\tuni.navigateTo({\r\n\t\t\turl:\"/pages/component/camera/camera-scan-code\"\r\n\t\t})\r\n\t}\r\n\r\n\tconst switchDevicePosition = () => {\r\n\t\tdevicePosition.value = devicePosition.value == \"back\" ? \"front\" : \"back\"\r\n\t}\r\n\r\n\tconst switchFlash = () => {\r\n\t\tflash.value = flash.value == \"torch\" ? \"off\" : \"torch\"\r\n\t}\r\n\r\n\tconst handleStop = (e : UniCameraStopEvent) => {\r\n\t\tconsole.log(\"stop\", e.detail);\r\n\t}\r\n\r\n\tconst handleError = (e : UniCameraErrorEvent) => {\r\n\t\tconsole.log(\"error\", e.detail);\r\n\t}\r\n\r\n\tconst handleInitDone = (e : UniCameraInitDoneEvent) => {\r\n\t\tconsole.log(\"initdone\", e.detail);\r\n\t\tmaxZoom.value = e.detail.maxZoom ?? 0\r\n\t}\r\n\r\n\tconst zoomSliderChange = (event : UniSliderChangeEvent) => {\r\n\t\tconst value = event.detail.value\r\n\t\tconst context = uni.createCameraContext();\r\n\t\tcontext?.setZoom({\r\n\t\t\tzoom: value,\r\n\t\t\tsuccess: (e : any) => {\r\n\t\t\t\tconsole.log(e);\r\n\t\t\t}\r\n\t\t} as CameraContextSetZoomOptions)\r\n\t}\r\n\r\n\tconst handleTakePhoto = () => {\r\n\t\tconst context = uni.createCameraContext();\r\n\t\tcontext?.takePhoto({\r\n\t\t\tquality: quality,\r\n\t\t\tselfieMirror: false,\r\n\t\t\tsuccess: (res : CameraContextTakePhotoResult) => {\r\n\t\t\t\tconsole.log(\"res.tempImagePath\", res.tempImagePath);\r\n\t\t\t\timageSrc.value = res.tempImagePath ?? ''\r\n\t\t\t},\r\n\t\t\tfail: (e : any) => {\r\n\t\t\t\tconsole.log(\"take photo\", e);\r\n\t\t\t}\r\n\t\t} as CameraContextTakePhotoOptions)\r\n\t}\r\n\r\n\tconst takePhotoQualityChange = (event : UniRadioGroupChangeEvent) => {\r\n\t\tquality = event.detail.value\r\n\t\tconsole.log(\"quality\", quality);\r\n\t}\r\n\r\n\tconst setOnFrameListener = () => {\r\n\t\tconst context = uni.createCameraContext();\r\n\t\tlistener = context?.onCameraFrame((frame : CameraContextOnCameraFrame) => {\r\n\t\t\tconsole.log(\"OnFrame :\", frame);\r\n\t\t})\r\n\t}\r\n\r\n\tconst startFrameListener = () => {\r\n\t\tlistener?.start({\r\n\t\t\tsuccess: (res : any) => {\r\n\t\t\t\tconsole.log(\"startFrameListener success\", res);\r\n\t\t\t}\r\n\t\t} as CameraContextCameraFrameListenerStartOptions)\r\n\t}\r\n\r\n\tconst stopFrameListener = () => {\r\n\t\tlistener?.stop({\r\n\t\t\tsuccess: (res : any) => {\r\n\t\t\t\tconsole.log(\"stopFrameListener success\", res);\r\n\t\t\t}\r\n\t\t} as CameraContextCameraFrameListenerStopOptions)\r\n\t}\r\n\r\n const getTimeout = () : number => {\r\n \tlet value = parseInt(timeoutStr)\r\n \tif (Number.isNaN(value)) {\r\n \t\treturn 30\r\n \t} else {\r\n \t\tif (value < 1) {\r\n \t\t\treturn 1\r\n \t\t} else if (value > 60 * 5) {\r\n \t\t\treturn 60 * 5\r\n \t\t} else {\r\n \t\t\treturn value\r\n \t\t}\r\n \t}\r\n }\r\n\r\n\tconst startRecord = () => {\r\n\t\tconst context = uni.createCameraContext();\r\n\t\tlet timeoutValue = getTimeout()\r\n\t\ttimeout.value = timeoutValue\r\n\t\tcontext?.startRecord({\r\n\t\t\ttimeout: timeoutValue,\r\n\t\t\tselfieMirror: false,\r\n\t\t\ttimeoutCallback: (res : any) => {\r\n\t\t\t\tconsole.log(\"timeoutCallback\", res);\r\n\t\t\t\tstartRecordStatus.value = false\r\n\t\t\t\tif (typeof res != \"string\") {\r\n\t\t\t\t\tconst result = res as CameraContextStartRecordTimeoutResult\r\n\t\t\t\t\tvideoSrc.value = result.tempVideoPath ?? ''\r\n\t\t\t\t}\r\n\t\t\t\tclearInterval(intervalId)\r\n\t\t\t},\r\n\t\t\tsuccess: (res : any) => {\r\n\t\t\t\tstartRecordStatus.value = true\r\n\t\t\t\tconsole.log(\"start record success\", res);\r\n\t\t\t\tremain.value = timeoutValue\r\n\t\t\t\tintervalId = setInterval(() => {\r\n\t\t\t\t\tif (remain.value <= 0) {\r\n\t\t\t\t\t\tclearInterval(intervalId)\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\tremain.value--\r\n\t\t\t\t\t}\r\n\t\t\t\t}, 1000)\r\n\t\t\t},\r\n\t\t\tfail: (res : any) => {\r\n\t\t\t\tconsole.log(\"start record fail\", res);\r\n\t\t\t\tstartRecordStatus.value = false\r\n\t\t\t\tremain.value = 0\r\n\t\t\t\tclearInterval(intervalId)\r\n\t\t\t}\r\n\t\t} as CameraContextStartRecordOptions)\r\n\t}\r\n\r\n\tconst stopRecord = () => {\r\n\t\tstartRecordStatus.value = false\r\n\t\tconst context = uni.createCameraContext();\r\n\t\tcontext?.stopRecord({\r\n\t\t\tcompressed: compressed,\r\n\t\t\tsuccess: (res : CameraContextStopRecordResult) => {\r\n\t\t\t\tconsole.log(\"stop record success\", res);\r\n\t\t\t\tvideoSrc.value = res.tempVideoPath ?? ''\r\n\t\t\t},\r\n\t\t\tfail: (res : any) => {\r\n\t\t\t\tconsole.log(\"stop record fail\", res);\r\n\t\t\t}\r\n\t\t} as CameraContextStopRecordOptions)\r\n\t\tclearInterval(intervalId)\r\n\t\tremain.value = 0\r\n\t}\r\n\r\n\tconst startRecordCompressChange = (event : UniRadioGroupChangeEvent) => {\r\n\t\tcompressed = parseInt(event.detail.value) == 1\r\n\t}\r\n\r\n\tconst timeoutInput = (event : UniInputEvent) => {\r\n\t\ttimeoutStr = event.detail.value\r\n\t}\r\n\r\n</script>\r\n\r\n<style>\r\n\t.uni-title {\r\n\t\tpadding: 10px 0;\r\n\t}\r\n\r\n\t.uni-title-text {\r\n\t\tfont-size: 15px;\r\n\t\tfont-weight: bold;\r\n\t}\r\n\r\n\t.uni-camera-wrapper {\r\n\t\tdisplay: flex;\r\n\t\tpadding: 8px 13px;\r\n\t\tmargin: 5px 0;\r\n\t\tflex-direction: row;\r\n\t\tflex-wrap: nowrap;\r\n\t\tbackground-color: #ffffff;\r\n\t}\r\n\r\n\t.uni-camera-test-host {\r\n\t\theight: 28px;\r\n\t\tpadding: 0px;\r\n\t\tflex: 1;\r\n\t\tbackground-color: #ffffff;\r\n\t}\r\n\r\n\t.uni-camera-test-host-without-flex {\r\n\t\theight: 28px;\r\n\t\tpadding: 0px;\r\n\t\tbackground-color: #ffffff;\r\n\t}\r\n\r\n\t.uni-title-size {\r\n\t\tfont-size: 22px;\r\n\t}\r\n</style>\r\n\n```\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.media.camera)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/camera.html)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/camera.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=camera&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=camera&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=camera&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=camera&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=camera)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=camera&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"live-player":{"name":"::: sourceCode\n## live-player\n:::","originName":"## live-player","description":"实时音视频播放","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.41 | 4.81 | 4.81 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| src | string([string.VideoURIString](/uts/data-type.md#ide-string)) | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 音视频地址。微信小程序支持 flv, rtmp 格式，app平台支持 rtmp, hls 协议 |\n| mode | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | live（直播），RTC（实时通话） |\n@| 合法值 | 兼容性 |\n@| :- | :-: |\n@| RTC | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n@| live | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| autoplay | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 自动播放 |\n| muted | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否静音 |\n| orientation | string | \"vertical\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 画面方向，可选值有 vertical，horizontal |\n@| 合法值 | 兼容性 |\n@| :- | :-: |\n@| vertical | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n@| horizontal | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| object-fit | string | \"contain\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 填充模式，可选值有 contain，fillCrop |\n@| 合法值 | 兼容性 |\n@| :- | :-: |\n@| contain | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n@| fillCrop | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| background-mute | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 进入后台时是否静音 |\n| min-cache | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 最小缓冲区，单位s |\n| max-cache | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 最大缓冲区，单位s |\n| sound-mode | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>声音输出方式 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| speaker | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 扬声器 |\n@| ear | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 听筒 |\n| auto-pause-if-navigate | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(boolean)*<br/>当跳转到本小程序的其他页面时，是否自动暂停本页面的实时音视频播放 |\n| auto-pause-if-open-native | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(boolean)*<br/>当跳转到其它微信原生页面时，是否自动暂停本页面的实时音视频播放 |\n| picture-in-picture-mode | string/Array | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string/Array)*<br/>设置小窗模式： push, pop，空字符串或通过数组形式设置多种模式（如： \\[\"push\", \"pop\"]） |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| [] | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 取消小窗 |\n@| push | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 路由 push 时触发小窗 |\n@| pop | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 路由 pop 时触发小窗 |\n| picture-in-picture-init-position | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>小窗模式下小窗的初始显示位置，格式为 (alignment, y)，其中 alignment 表示小窗吸附屏幕左侧还是右侧，可选值为 left、right，y 代表小窗最顶部所在的屏幕高度百分比 |\n| enable-auto-rotation | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(boolean)*<br/>是否开启手机横屏时自动全屏，当系统设置开启自动旋转时生效 |\n| referrer-policy | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>格式固定为 `https://servicewechat.com/{appid}/{version}/page-frame.html`，其中 {appid} 为小程序的 appid，{version} 为小程序的版本号，版本号为 0 表示为开发版、体验版以及审核版本，版本号为 devtools 表示为开发者工具，其余为正式版本； |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| origin | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 发送完整的referrer |\n@| no-referrer | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 不发送 |\n| enable-casting | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(boolean)*<br/>是否支持投屏。开启后，可以通过 [LivePlayerContext]((LivePlayerContext)) 上相关方法进行操作。 |\n| duration | number | 0 | | |\n| initial-time | number | 0 | | |\n| loop | boolean | false | | |\n| codec | string | \"auto\" | | |\n| show-play-btn | boolean | true | | |\n| show-mute-btn | boolean | true | | |\n| show-fullscreen-btn | boolean | true | | |\n| show-progress | boolean | false | | |\n| enable-progress-gesture | boolean | true | | |\n| poster | string | \"\" | | |\n| controls | boolean | true | | |\n| show-center-play-btn | boolean | true | | |\n| show-loading | boolean | true | | |\n| @statechange | (event: [UniLivePlayerStatechangeEvent](#uniliveplayerstatechangeevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 播放状态变化事件，event.detail = {code} |\n| @fullscreenchange | (event: [UniLivePlayerFullscreenchangeEvent](#uniliveplayerfullscreenchangeevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 全屏变化事件，event.detail = {direction, fullScreen} |\n| @error | (event: [UniLivePlayerErrorEvent](#uniliveplayererrorevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"4.81\",\"4.81\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 错误事件，event.detail = {errCode, errMsg} |\n| @netstatus | (event: [UniEvent](/component/common.md#unievent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 网络状态通知，detail = {info} |\n| @audiovolumenotify | eventhandler | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandler)*<br/>播放音量大小通知，detail = {} |\n| @enterpictureinpicture | eventhandler | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandler)*<br/>播放器进入小窗 |\n| @leavepictureinpicture | eventhandler | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandler)*<br/>播放器退出小窗 |\n| @castinguserselect | eventhandler | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandler)*<br/>用户选择投屏设备时触发 detail = { state: \"success\"/\"fail\" } |\n| @castingstatechange | eventhandler | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandler)*<br/>投屏成功/失败时触发 detail = { type, state: \"success\"/\"fail\" } |\n| @castinginterrupt | eventhandler | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandler)*<br/>投屏被中断时触发 |","event":"\n### 事件\n#### UniLivePlayerStatechangeEvent\n播放状态变化事件\n\n##### UniLivePlayerStatechangeEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniLivePlayerStatechangeEventDetail** | 是 |\n@| 名称 | 类型 | 必备 | 兼容性 | 描述 |\n@| :- | :- | :- | :-: | :- |\n@| code | number | 是 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.81\",\"4.81\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 状态码 |\n@@| 合法值 | 描述 |\n@@| :- | :- |\n@@| 10000 | |\n@@| 10001 | 初始化 |\n@@| 10002 | 准备播放 |\n@@| 10004 | 播放中 |\n@@| 10006 | 停止渲染 |\n@@| 10007 | 播放完成 |\n@@| 10008 | 播放进度跳转中 |\n@@| 10009 | 播放停止 |\n@@| 10010 | 播放错误 |\n@@| 10011 | 播放结束 |\n@@| 10012 | |\n@@| 10013 | 资源释放 |\n| bubbles | boolean | 是 |\n| cancelable | boolean | 是 |\n| type | string | 是 |\n| target | [UniElement](/api/dom/unielement.md) | 否 |\n| currentTarget | [UniElement](/api/dom/unielement.md) | 否 |\n| timeStamp | Long | 是 |\n\n\n##### UniLivePlayerStatechangeEvent 的方法\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| stopPropagation | () => void | 是 |\n| preventDefault | () => void | 是 |\n\n#### UniLivePlayerFullscreenchangeEvent\n全屏事件\n\n##### UniLivePlayerFullscreenchangeEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniLivePlayerFullscreenchangeEventDetail** | 是 |\n@| 名称 | 类型 | 必备 | 兼容性 | 描述 |\n@| :- | :- | :- | :-: | :- |\n@| direction | string | 是 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.81\",\"4.81\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 屏幕方向 |\n@| fullScreen | boolean | 是 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.81\",\"4.81\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否全屏 |\n| bubbles | boolean | 是 |\n| cancelable | boolean | 是 |\n| type | string | 是 |\n| target | [UniElement](/api/dom/unielement.md) | 否 |\n| currentTarget | [UniElement](/api/dom/unielement.md) | 否 |\n| timeStamp | Long | 是 |\n\n\n##### UniLivePlayerFullscreenchangeEvent 的方法\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| stopPropagation | () => void | 是 |\n| preventDefault | () => void | 是 |\n\n#### UniLivePlayerErrorEvent\n错误事件\n\n##### UniLivePlayerErrorEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniLivePlayerError** | 是 |\n@| 名称 | 类型 | 必备 | 描述 |\n@| :- | :- | :- | :- |\n@| errCode | number | 是 | |\n@@| 合法值 | 描述 |\n@@| :- | :- |\n@@| 3001 | 当前视频格式不支持，视频无法播放 |\n@@| 3002 | 视频解码失败 |\n@@| 3003 | 不支持的解码格式 |\n@@| 3004 | 重连失败，请检查网络情况 |\n@@| 3005 | 视频播放失败，请检查网络或视频资源 |\n@| errSubject | string | 是 | 统一错误主题（模块）名称 |\n@| data | any | 否 | 错误信息中包含的数据 |\n@| cause | [Error](/err-spec.md#unierror) | 否 | 源错误信息，可以包含多个错误，详见SourceError |\n@| errMsg | string | 是 | |\n| bubbles | boolean | 是 |\n| cancelable | boolean | 是 |\n| type | string | 是 |\n| target | [UniElement](/api/dom/unielement.md) | 否 |\n| currentTarget | [UniElement](/api/dom/unielement.md) | 否 |\n| timeStamp | Long | 是 |\n\n\n##### UniLivePlayerErrorEvent 的方法\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| stopPropagation | () => void | 是 |\n| preventDefault | () => void | 是 |\n","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/live-player/live-player.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/live-player/live-player.uvue) \n>\n> 该 API 不支持 Web，请运行 hello uni-app x 到 App 平台体验 \n\n::: preview\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/live-player/live-player\n```uvue\n<template>\n <view class=\"uni-flex-item\">\n <live-player id=\"live-player\" class=\"live-player\" :src=\"src\" :autoplay=\"autoplay\" :muted=\"muted\"\n :object-fit=\"objectFit\" :background-mute=\"backgroundMute\" :sound-mode=\"soundMode\" :orientation=\"orientation\"\n @statechange=\"statechange\" @fullscreenchange=\"fullscreenchange\" @error=\"error\">\n </live-player>\n <scroll-view id=\"live-player-scroll-view\" class=\"uni-padding-wrap uni-common-mt uni-flex-item\">\n <view class=\"uni-title\">\n <text class=\"uni-title-text\">API示例</text>\n </View>\n <view class=\"uni-btn-v\">\n <button type=\"primary\" @click=\"play\" :disabled=\"playState\">播放</button>\n </view>\n <view class=\"uni-btn-v\">\n <button type=\"primary\" @click=\"pause\" :disabled=\"!playState\">暂停</button>\n </view>\n <view class=\"uni-btn-v\">\n <button type=\"primary\" @click=\"resume\" :disabled=\"initState || playState || stopState\">恢复</button>\n </view>\n <view class=\"uni-btn-v\">\n <button type=\"primary\" @click=\"stop\" :disabled=\"!playState\">停止</button>\n </view>\n <view class=\"uni-btn-v\">\n <button type=\"primary\" @click=\"mute\" :disabled=\"!playState\">静音</button>\n </view>\n <view class=\"uni-btn-v\">\n <button type=\"primary\" @click=\"requestFullScreen\" :disabled=\"!playState\">进入全屏</button>\n </view>\n <view class=\"uni-btn-v\">\n <button type=\"primary\" @click=\"exitFullScreen\" :disabled=\"!playState\">退出全屏</button>\n </view>\n <view class=\"uni-title\">\n <text class=\"uni-title-text\">属性示例</text>\n </view>\n <input class=\"input margin-10\" type=\"string\" placeholder=\"设置播放地址\" @confirm=\"onSrcComfirm\"></input>\n <boolean-data title=\"设置是否自动播放\" :defaultValue=\"autoplay\" @change=\"onAutoplayChange\"></boolean-data>\n <boolean-data title=\"设置是否静音\" :defaultValue=\"muted\" @change=\"onMutedChange\"></boolean-data>\n <boolean-data title=\"设置进入后台时是否静音\" :defaultValue=\"backgroundMute\" @change=\"onBackgroundMuteChange\"></boolean-data>\n <enum-data title=\"设置填充模式\" :items=\"objectFitItemTypes\" @change=\"onObjectFitChange\"></enum-data>\n <enum-data title=\"设置声音输出方式\" :items=\"soundModeItemTypes\" @change=\"onSoundModeChange\"></enum-data>\n <enum-data title=\"设置画面方向\" :items=\"orientationItemTypes\" @change=\"onOrientationChange\"></enum-data>\n </scroll-view>\n </view>\n</template>\n\n<script setup>\n import { ItemType } from '@/components/enum-data/enum-data-types';\n\n const context = ref(null as LivePlayerContext | null);\n const src = ref(\"\");\n const autoplay = ref(false);\n const muted = ref(false);\n const objectFit = ref(\"contain\");\n const backgroundMute = ref(false);\n const soundMode = ref(\"speaker\");\n const orientation = ref(\"vertical\");\n const initState = ref(true);\n const playState = ref(false);\n const stopState = ref(false);\n\n onReady(() => {\n context.value = uni.createLivePlayerContext(\"live-player\", getCurrentInstance()!.proxy);\n });\n\n const statechange = (e : UniLivePlayerStatechangeEvent) => {\n console.log(\"statechange\", e);\n switch (e.detail.code) {\n case 10004:\n initState.value = false;\n playState.value = true;\n stopState.value = false;\n break;\n case 10009:\n stopState.value = true;\n case 10006:\n case 10007:\n case 10010:\n case 10011:\n playState.value = false;\n break;\n }\n };\n const fullscreenchange = (e : UniLivePlayerFullscreenchangeEvent) => {\n console.log(\"fullscreenchange\", e);\n };\n const error = (e : UniLivePlayerErrorEvent) => {\n console.log(\"error\", e);\n };\n const isSrcValid = () : boolean => {\n const length = src.value.length;\n if (length <= 0) {\n uni.showToast({\n title: \"请输入播放地址\",\n icon: \"none\"\n });\n }\n return length > 0;\n };\n const play = () => {\n if (!isSrcValid()) return;\n context.value?.play({\n success: (res) => {\n console.log(\"play\", JSON.stringify(res));\n },\n fail: (err) => {\n console.log(\"play\", JSON.stringify(err));\n },\n complete: (res) => {\n console.log(\"play\", JSON.stringify(res));\n }\n });\n };\n const pause = () => {\n if (!isSrcValid()) return;\n context.value?.pause({\n success: (res) => {\n console.log(\"pause\", JSON.stringify(res));\n },\n fail: (err) => {\n console.log(\"pause\", JSON.stringify(err));\n },\n complete: (res) => {\n console.log(\"pause\", JSON.stringify(res));\n }\n });\n };\n const resume = () => {\n if (!isSrcValid()) return;\n context.value?.resume({\n success: (res) => {\n console.log(\"resume\", JSON.stringify(res));\n },\n fail: (err) => {\n console.log(\"resume\", JSON.stringify(err));\n },\n complete: (res) => {\n console.log(\"resume\", JSON.stringify(res));\n }\n });\n };\n const stop = () => {\n if (!isSrcValid()) return;\n context.value?.stop({\n success: (res) => {\n console.log(\"stop\", JSON.stringify(res));\n },\n fail: (err) => {\n console.log(\"stop\", JSON.stringify(err));\n },\n complete: (res) => {\n console.log(\"stop\", JSON.stringify(res));\n }\n });\n };\n const mute = () => {\n if (!isSrcValid()) return;\n context.value?.mute({\n success: (res) => {\n console.log(\"mute\", JSON.stringify(res));\n },\n fail: (err) => {\n console.log(\"mute\", JSON.stringify(err));\n },\n complete: (res) => {\n console.log(\"mute\", JSON.stringify(res));\n }\n });\n };\n const requestFullScreen = () => {\n if (!isSrcValid()) return;\n context.value?.requestFullScreen({\n success: (res) => {\n console.log(\"requestFullScreen\", JSON.stringify(res));\n },\n fail: (err) => {\n console.log(\"requestFullScreen\", JSON.stringify(err));\n },\n complete: (res) => {\n console.log(\"requestFullScreen\", JSON.stringify(res));\n }\n });\n };\n const exitFullScreen = () => {\n if (!isSrcValid()) return;\n context.value?.exitFullScreen({\n success: (res) => {\n console.log(\"exitFullScreen\", JSON.stringify(res));\n },\n fail: (err) => {\n console.log(\"exitFullScreen\", JSON.stringify(err));\n },\n complete: (res) => {\n console.log(\"exitFullScreen\", JSON.stringify(res));\n }\n });\n };\n\n const objectFitItemTypes = [{ \"value\": 0, \"name\": \"contain\" }, { \"value\": 1, \"name\": \"fillCrop\" }] as ItemType[];\n const objectFitItems = [\"contain\", \"fillCrop\"];\n const soundModeItemTypes = [{ \"value\": 0, \"name\": \"speaker\" }, { \"value\": 1, \"name\": \"ear\" }] as ItemType[];\n const soundModeItems = [\"speaker\", \"ear\"];\n const orientationItemTypes = [{ \"value\": 0, \"name\": \"vertical\" }, { \"value\": 1, \"name\": \"horizontal\" }] as ItemType[];\n const orientationItems = [\"vertical\", \"horizontal\"];\n const onSrcComfirm = (event : UniInputConfirmEvent) => {\n let value = event.detail.value;\n if (value == '') return;\n src.value = value;\n console.log(\"src ->\", value);\n };\n const onAutoplayChange = (value : boolean) => {\n autoplay.value = value;\n console.log(\"autoplay ->\", autoplay.value);\n };\n const onMutedChange = (value : boolean) => {\n muted.value = value;\n console.log(\"muted ->\", muted.value);\n };\n const onBackgroundMuteChange = (value : boolean) => {\n backgroundMute.value = value;\n console.log(\"background-mute ->\", backgroundMute.value);\n };\n const onObjectFitChange = (value : number) => {\n objectFit.value = objectFitItems[value];\n console.log(\"object-fit ->\", objectFit.value);\n };\n const onSoundModeChange = (value : number) => {\n soundMode.value = soundModeItems[value];\n console.log(\"sound-mode ->\", soundMode.value);\n };\n const onOrientationChange = (value : number) => {\n orientation.value = orientationItems[value];\n console.log(\"orientation ->\", orientation.value);\n };\n\n const getScrollViewRectForTest = () : DOMRect | null => {\n return uni.getElementById('live-player-scroll-view')?.getBoundingClientRect() ?? null;\n };\n\n defineExpose({\n getScrollViewRectForTest\n });\n</script>\n\n<style>\n .live-player {\n width: 100%;\n height: 40%;\n }\n\n .input {\n height: 40px;\n background: #FFF;\n padding: 8px 13px;\n }\n</style>\n\n```\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.media.live-player)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/live-player.html)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/live-player.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=live-player&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=live-player&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=live-player&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=live-player&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=live-player)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=live-player&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"live-pusher":{"name":"::: sourceCode\n## live-pusher\n:::","originName":"## live-pusher","description":"实时音视频录制","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.41 | 4.81 | 4.81 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| url | string([string.VideoURIString](/uts/data-type.md#ide-string)) | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 推流地址，支持 rtmp 协议 |\n| mode | string | \"SD\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | SD（标清）, HD（高清）, FHD（超清）, RTC（实时通话） |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| RTC | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | |\n@| SD | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | |\n@| HD | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | |\n@| FHD | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | |\n@| QVGA | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | Quarter VGA |\n@| HVGA | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | Half-size VGA |\n| autopush | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 自动推流 |\n| muted | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否静音 |\n| enable-camera | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 开启摄像头 |\n| auto-focus | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 自动获取焦点 |\n| orientation | string | \"vertical\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 画面方向，可选值有 vertical，horizontal |\n@| 合法值 | 兼容性 |\n@| :- | :-: |\n@| vertical | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n@| horizontal | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| beauty | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 美颜，取值范围 0-9（iOS取值范围为1），0 表示关闭 |\n| aspect | string | \"3:4\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 视频宽高比例 |\n| min-bitrate | number | 200 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 最小码率 |\n| max-bitrate | number | 1000 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 最大码率 |\n| waiting-image | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 进入后台时推流的等待画面 |\n| waiting-image-md5 | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 等待画面资源的MD5值 |\n| background-mute | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 进入后台时是否静音 |\n| enableVideoCustomRender | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(boolean)*<br/>自定义渲染，允许开发者自行处理所采集的视频帧，详见[LivePusherContext]((LivePusherContext)) |\n| whiteness | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(number)*<br/>美白，取值范围 0-9（iOS取值范围为1），0 表示关闭 |\n| audio-quality | string | \"high\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>高音质(48KHz)或低音质(16KHz)，值为`high`, `low` |\n| waiting-image-hash | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>等待画面资源的MD5值 |\n| zoom | number | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(boolean)*<br/>调整焦距 |\n| zoom | number | 1 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.81\",\"4.81\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 调整焦距 |\n| device-position | string | \"front\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>前置或后置，值为`front`, `back` |\n| mirror | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(boolean)*<br/>设置推流画面是否镜像，产生的效果在 live-player 反应到 |\n| remote-mirror | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(boolean)*<br/>同 mirror 属性，后续 mirror 将废弃 |\n| local-mirror | string | \"auto\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>控制本地预览画面是否镜像 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| auto | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 前置摄像头镜像，后置摄像头不镜像 |\n@| enable | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 前后置摄像头均镜像 |\n@| disable | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 前后置摄像头均不镜像 |\n| audio-reverb-type | number | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(number)*<br/>音频混响类型 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 关闭 |\n@| 1 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | KTV |\n@| 2 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 小房间 |\n@| 3 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 大会堂 |\n@| 4 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 低沉 |\n@| 5 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 洪亮 |\n@| 6 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 金属声 |\n@| 7 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 磁性 |\n| enable-mic | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(boolean)*<br/>开启或关闭麦克风 |\n| enable-agc | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(boolean)*<br/>是否开启音频自动增益 |\n| enable-ans | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(boolean)*<br/>是否开启音频噪声抑制 |\n| audio-volume-type | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>音量类型 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| auto | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 自动 |\n@| media | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 媒体音量 |\n@| voicecall | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 通话音量 |\n| video-width | number | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(number)*<br/>上推的视频流的分辨率宽度 |\n| video-height | number | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(number)*<br/>上推的视频流的分辨率高度 |\n| beauty-style | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>设置美颜类型 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| smooth | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 光滑美颜 |\n@| nature | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 自然美颜 |\n| filter | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>设置色彩滤镜 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| standard | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 标准 |\n@| pink | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 粉嫩 |\n@| nostalgia | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 怀旧 |\n@| blues | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 蓝调 |\n@| romantic | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 浪漫 |\n@| cool | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 清凉 |\n@| fresher | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 清新 |\n@| solor | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 日系 |\n@| aestheticism | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 唯美 |\n@| whitening | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 美白 |\n@| cerisered | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 樱红 |\n| picture-in-picture-mode | string/Array | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string/Array)*<br/>设置小窗模式： push, pop，空字符串或通过数组形式设置多种模式（如： \\[\"push\", \"pop\"]） |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| [] | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 取消小窗 |\n@| push | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 路由 push 时触发小窗 |\n@| pop | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 路由 pop 时触发小窗 |\n| voice-changer-type | number | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(number)*<br/>0：关闭变声；1：熊孩子；2：萝莉；3：大叔；4：重金属；6：外国人；7：困兽；8：死肥仔；9：强电流；10：重机械；11：空灵 |\n| custom-effect | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(boolean)*<br/>是否启动自定义特效，设定后不能更改 |\n| skin-whiteness | number | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(number)*<br/>自定义特效美白效果，取值 0~1。需要开启 `custom-effect` |\n| skin-smoothness | number | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(number)*<br/>自定义特效磨皮效果，取值 0~1。需要开启 `custom-effect` |\n| face-thinness | number | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(number)*<br/>自定义特效瘦脸效果，取值 0~1。需要开启 `custom-effect` |\n| eye-bigness | number | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(number)*<br/>自定义特效大眼效果，取值 0~1。需要开启 `custom-effect` |\n| fps | number | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(number)*<br/>帧率，有效值为 1~30 |\n| @statechange | (event: [UniLivePusherStatechangeEvent](#unilivepusherstatechangeevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 播放状态变化事件，event.detail = {code, message} |\n| @error | (event: [UniLivePusherErrorEvent](#unilivepushererrorevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 错误事件，event.detail = {errCode, errMsg} |\n| @netstatus | (event: [UniLivePusherNetstatusEvent](#unilivepushernetstatusevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.81\",\"4.81\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 网络状态通知，event.detail = {videoBitrate, audioBitrate, videoFPS, videoGOP, netSpeed, videoWidth, videoHeight} |\n| @bgmstart | eventhandle | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandle)*<br/>背景音开始播放时触发 |\n| @bgmprogress | eventhandle | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandle)*<br/>背景音进度变化时触发，detail = {progress, duration} |\n| @bgmcomplete | eventhandle | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandle)*<br/>背景音播放完成时触发 |\n| @audiovolumenotify | eventhandle | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandle)*<br/>返回麦克风采集的音量大小 |\n| @enterpictureinpicture | eventhandler | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandler)*<br/>进入小窗 |\n| @leavepictureinpicture | eventhandler | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandler)*<br/>退出小窗 |","event":"\n### 事件\n#### UniLivePusherStatechangeEvent\n推流状态变化事件\n\n##### UniLivePusherStatechangeEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniLivePusherStatechangeEventDetail** | 是 |\n@| 名称 | 类型 | 必备 | 兼容性 | 描述 |\n@| :- | :- | :- | :-: | :- |\n@| code | number | 是 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.81\",\"4.81\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 状态码 |\n@@| 合法值 | 描述 |\n@@| :- | :- |\n@@| 1001 | 连接中 |\n@@| 1002 | 已连接 |\n@@| 3004 | 连接断开 |\n@| message | string | 是 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.81\",\"4.81\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 状态信息 |\n| bubbles | boolean | 是 |\n| cancelable | boolean | 是 |\n| type | string | 是 |\n| target | [UniElement](/api/dom/unielement.md) | 否 |\n| currentTarget | [UniElement](/api/dom/unielement.md) | 否 |\n| timeStamp | Long | 是 |\n\n\n##### UniLivePusherStatechangeEvent 的方法\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| stopPropagation | () => void | 是 |\n| preventDefault | () => void | 是 |\n\n#### UniLivePusherErrorEvent\n错误事件\n\n##### UniLivePusherErrorEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniLivePusherError** | 是 |\n@| 名称 | 类型 | 必备 | 描述 |\n@| :- | :- | :- | :- |\n@| errCode | number | 是 | |\n@@| 合法值 | 描述 |\n@@| :- | :- |\n@@| 3005 | 网络问题 |\n@@| 3006 | 推流地址错误 |\n@@| 3007 | 推流地址未授权 |\n@@| 3008 | 包未授权 |\n@@| 4001 | 音频录制错误（android） |\n@@| 4002 | 打开摄像头错误（android） |\n@@| 4003 | 没有 nv21 预览格式（android） |\n@@| 4004 | 开启视频编码错误（android） |\n@@| 4005 | 视频编码错误（android） |\n@@| 4006 | 开启音频编码错误（android） |\n@@| 4007 | 音频编码错误（android） |\n@@| 5001 | 编码器编码错误（iOS） |\n@@| 5002 | TLS 连接失败（iOS） |\n@@| 5003 | 没有 SSL 或者 TLS（iOS） |\n@@| 5004 | DNS 解析失败（iOS） |\n@@| 5005 | rtmp 发布失败（iOS） |\n@@| -1 | |\n@| errSubject | string | 是 | 统一错误主题（模块）名称 |\n@| data | any | 否 | 错误信息中包含的数据 |\n@| cause | [Error](/err-spec.md#unierror) | 否 | 源错误信息，可以包含多个错误，详见SourceError |\n@| errMsg | string | 是 | |\n| bubbles | boolean | 是 |\n| cancelable | boolean | 是 |\n| type | string | 是 |\n| target | [UniElement](/api/dom/unielement.md) | 否 |\n| currentTarget | [UniElement](/api/dom/unielement.md) | 否 |\n| timeStamp | Long | 是 |\n\n\n##### UniLivePusherErrorEvent 的方法\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| stopPropagation | () => void | 是 |\n| preventDefault | () => void | 是 |\n\n#### UniLivePusherNetstatusEvent\n推流网络状态事件\n\n##### UniLivePusherNetstatusEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniLivePusherNetstatusEventDetail** | 是 |\n@| 名称 | 类型 | 必备 | 兼容性 | 描述 |\n@| :- | :- | :- | :-: | :- |\n@| videoBitrate | number | 是 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.81\",\"4.81\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 当前视频编/码器输出的比特率，单位 kbps |\n@| audioBitrate | number | 是 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.81\",\"4.81\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 当前音频编/码器输出的比特率，单位 kbps |\n@| videoFPS | number | 是 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.81\",\"4.81\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 当前视频帧率 |\n@| videoGOP | number | 是 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.81\",\"4.81\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 当前视频 GOP,也就是每两个关键帧(I帧)间隔时长，单位 s |\n@| netSpeed | number | 是 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.81\",\"4.81\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 当前的发送/接收速度 |\n@| videoWidth | number | 是 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.81\",\"4.81\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 视频画面的宽度 |\n@| videoHeight | number | 是 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.81\",\"4.81\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 视频画面的高度 |\n| bubbles | boolean | 是 |\n| cancelable | boolean | 是 |\n| type | string | 是 |\n| target | [UniElement](/api/dom/unielement.md) | 否 |\n| currentTarget | [UniElement](/api/dom/unielement.md) | 否 |\n| timeStamp | Long | 是 |\n\n\n##### UniLivePusherNetstatusEvent 的方法\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| stopPropagation | () => void | 是 |\n| preventDefault | () => void | 是 |\n","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/live-pusher/live-pusher.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/live-pusher/live-pusher.uvue) \n>\n> 该 API 不支持 Web，请运行 hello uni-app x 到 App 平台体验 \n\n::: preview\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/live-pusher/live-pusher\n```uvue\n<template>\n <view class=\"uni-flex-item\">\n <live-pusher v-if=\"isUrlSet\" id=\"live-pusher\" class=\"live-pusher\" :url=\"url\" :beauty=\"beauty\"\n :whiteness=\"whiteness\" :remote-mirror=\"remoteMirror\" :local-mirror=\"localMirror\" :device-position=\"devicePosition\"\n :mode=\"mode\" :auto-focus=\"autoFocus\" :muted=\"muted\" :orientation=\"orientation\" :enable-camera=\"enableCamera\"\n :enable-mic=\"enableMic\" :audio-quality=\"audioQuality\" :min-bitrate=\"minBitrate\" :max-bitrate=\"maxBitrate\"\n :audio-volume-type=\"audioVolumeType\" :aspect=\"aspect\" :background-mute=\"backgroundMute\"\n :waiting-image=\"waitingImage\" :zoom=\"zoom\" @statechange=\"statechange\" @netstatus=\"netstatus\" @error=\"error\">\n </live-pusher>\n <scroll-view class=\"uni-padding-wrap uni-common-mt uni-flex-item\">\n <view class=\"uni-title\">\n <text class=\"uni-title-text\">API示例</text>\n </View>\n <view class=\"uni-btn-v\">\n <button type=\"primary\" @click=\"start\" :disabled=\"connectedState || !previewState\">开始推流</button>\n </view>\n <view class=\"uni-btn-v\">\n <button type=\"primary\" @click=\"pause\" :disabled=\"!connectedState || !previewState\">暂停推流</button>\n </view>\n <view class=\"uni-btn-v\">\n <button type=\"primary\" @click=\"resume\"\n :disabled=\"initState || connectedState || stopState || !previewState\">恢复推流</button>\n </view>\n <view class=\"uni-btn-v\">\n <button type=\"primary\" @click=\"stop\" :disabled=\"!connectedState || !previewState\">停止推流</button>\n </view>\n <view class=\"uni-btn-v\">\n <button type=\"primary\" @click=\"switchCamera\" :disabled=\"stopState || !previewState\">切换前后摄像头</button>\n </view>\n <view class=\"uni-btn-v\">\n <button type=\"primary\" @click=\"snapshot\" :disabled=\"stopState || !previewState\">快照</button>\n </view>\n <view class=\"uni-btn-v\">\n <button type=\"primary\" @click=\"startPreview\" :disabled=\"stopState || previewState\">开启摄像头预览</button>\n </view>\n <view class=\"uni-btn-v\">\n <button type=\"primary\" @click=\"stopPreview\" :disabled=\"stopState || !previewState\">关闭摄像头预览</button>\n </view>\n <view class=\"uni-title\">\n <text class=\"uni-title-text\">属性示例</text>\n </view>\n <input class=\"input margin-10\" type=\"string\" placeholder=\"设置推流地址\" @confirm=\"onUrlComfirm\"></input>\n <input class=\"input margin-10\" type=\"string\" placeholder=\"设置最小码率\" @confirm=\"onMinBitrateComfirm\"></input>\n <input class=\"input margin-10\" type=\"string\" placeholder=\"设置最大码率\" @confirm=\"onMaxBitrateComfirm\"></input>\n <input class=\"input margin-10\" type=\"string\" placeholder=\"设置进入后台时推流的等待画面\"\n @confirm=\"onWaitingImageComfirm\"></input>\n <input class=\"input margin-10\" type=\"string\" placeholder=\"设置焦距\" @confirm=\"onZoomComfirm\"></input>\n <view class=\"margin-10\">\n <text>美颜, 取值范围0-9(iOS取值范围为1), 0表示关闭</text>\n <slider :min=\"0\" :max=\"9\" @change=\"onBeautyChange\" />\n </view>\n <view class=\"margin-10\">\n <text>美白, 取值范围0-9(iOS取值范围为1), 0表示关闭</text>\n <slider :min=\"0\" :max=\"9\" @change=\"onWhitenessChange\" />\n </view>\n <boolean-data title=\"设置是否静音\" :defaultValue=\"muted\" @change=\"onMutedChange\"></boolean-data>\n \n \n <boolean-data title=\"设置是否自动聚焦\" :defaultValue=\"autoFocus\" @change=\"onAutoFocusChange\"></boolean-data>\n <boolean-data title=\"设置进入后台时是否静音\" :defaultValue=\"backgroundMute\" @change=\"onBackgroundMuteChange\"></boolean-data>\n <boolean-data title=\"设置推流画面是否镜像\" :defaultValue=\"remoteMirror\" @change=\"onRemoteMirrorChange\"></boolean-data>\n <enum-data title=\"设置本地预览画面是否镜像\" :items=\"localMirrorItemTypes\" @change=\"onLocalMirrorChange\"></enum-data>\n <enum-data title=\"设置使用前置或后置摄像头\" :items=\"devicePositionItemTypes\" @change=\"onDevicePositionChange\"></enum-data>\n <enum-data title=\"设置推流视频模式\" :items=\"modeItemTypes\" @change=\"onModeChange\"></enum-data>\n <enum-data title=\"设置视频宽高比例\" :items=\"aspectItemTypes\" @change=\"onAspectChange\"></enum-data>\n <enum-data title=\"设置画面方向\" :items=\"orientationItemTypes\" @change=\"onOrientationChange\"></enum-data>\n <enum-data title=\"设置音质\" :items=\"audioQualityItemTypes\" @change=\"onAudioQualityChange\"></enum-data>\n </scroll-view>\n </view>\n</template>\n\n<script setup>\n import { ItemType } from '@/components/enum-data/enum-data-types';\n\n const context = ref(null as LivePusherContext | null);\n const instance = ref(null as ComponentPublicInstance | null);\n const url = ref(\"rtmp://test\");\n const beauty = ref(0);\n const whiteness = ref(0);\n const remoteMirror = ref(false);\n const localMirror = ref(\"auto\");\n const devicePosition = ref(\"front\");\n const mode = ref(\"SD\");\n const autoFocus = ref(true);\n const muted = ref(false);\n const orientation = ref(\"orientation\");\n const enableCamera = ref(true);\n const enableMic = ref(true);\n const audioQuality = ref(\"high\");\n const minBitrate = ref(200);\n const maxBitrate = ref(1000);\n const audioVolumeType = ref(\"media\");\n const aspect = ref(\"3:4\");\n const backgroundMute = ref(false);\n const waitingImage = ref(\"\");\n const zoom = ref(1);\n const videoWidth = ref(0);\n const videoHeight = ref(0);\n const fps = ref(0);\n const isUrlSet = ref(true);\n const initState = ref(true);\n const connectedState = ref(false);\n const stopState = ref(false);\n const previewState = ref(true);\n\n onReady(() => {\n instance.value = getCurrentInstance()?.proxy;\n });\n\n const statechange = (e : UniLivePusherStatechangeEvent) => {\n console.log(\"statechange\", e);\n switch (e.detail.code) {\n case 1002:\n initState.value = false;\n connectedState.value = true;\n stopState.value = false;\n break;\n case 3004:\n connectedState.value = false;\n break;\n }\n };\n const netstatus = (e : UniLivePusherNetstatusEvent) => {\n console.log(\"netstatus\", e);\n };\n const error = (e : UniLivePusherErrorEvent) => {\n console.log(\"error\", e);\n };\n const isUrlValid = () : boolean => {\n const valid = url.value != \"rtmp://test\";\n if (!valid) {\n uni.showToast({\n title: \"请输入推流地址\",\n icon: \"none\"\n });\n }\n return valid;\n };\n const start = () => {\n if (!isUrlValid()) return;\n if (context.value == null) {\n context.value = uni.createLivePusherContext(\"live-pusher\", instance.value);\n }\n context.value?.start({\n success: (res) => {\n console.log(\"start\", JSON.stringify(res));\n },\n fail: (err) => {\n console.log(\"start\", JSON.stringify(err));\n },\n complete: (res) => {\n console.log(\"start\", JSON.stringify(res));\n }\n });\n };\n const pause = () => {\n if (!isUrlValid()) return;\n if (context.value == null) {\n context.value = uni.createLivePusherContext(\"live-pusher\", instance.value);\n }\n context.value?.pause({\n success: (res) => {\n console.log(\"pause\", JSON.stringify(res));\n },\n fail: (err) => {\n console.log(\"pause\", JSON.stringify(err));\n },\n complete: (res) => {\n console.log(\"pause\", JSON.stringify(res));\n }\n });\n };\n const resume = () => {\n if (!isUrlValid()) return;\n if (context.value == null) {\n context.value = uni.createLivePusherContext(\"live-pusher\", instance.value);\n }\n context.value?.resume({\n success: (res) => {\n console.log(\"resume\", JSON.stringify(res));\n },\n fail: (err) => {\n console.log(\"resume\", JSON.stringify(err));\n },\n complete: (res) => {\n console.log(\"resume\", JSON.stringify(res));\n }\n });\n };\n const stop = () => {\n if (!isUrlValid()) return;\n stopState.value = true;\n if (context.value == null) {\n context.value = uni.createLivePusherContext(\"live-pusher\", instance.value);\n }\n context.value?.stop({\n success: (res) => {\n console.log(\"stop\", JSON.stringify(res));\n },\n fail: (err) => {\n console.log(\"stop\", JSON.stringify(err));\n },\n complete: (res) => {\n console.log(\"stop\", JSON.stringify(res));\n }\n });\n };\n const switchCamera = () => {\n if (context.value == null) {\n context.value = uni.createLivePusherContext(\"live-pusher\", instance.value);\n }\n context.value?.switchCamera({\n success: (res) => {\n console.log(\"switchCamera\", JSON.stringify(res));\n },\n fail: (err) => {\n console.log(\"switchCamera\", JSON.stringify(err));\n },\n complete: (res) => {\n console.log(\"switchCamera\", JSON.stringify(res));\n }\n });\n };\n const snapshot = () => {\n if (context.value == null) {\n context.value = uni.createLivePusherContext(\"live-pusher\", instance.value);\n }\n context.value?.snapshot({\n success: (res) => {\n console.log(\"snapshot\", JSON.stringify(res));\n },\n fail: (err) => {\n console.log(\"snapshot\", JSON.stringify(err));\n },\n complete: (res) => {\n console.log(\"snapshot\", JSON.stringify(res));\n }\n });\n };\n const startPreview = () => {\n if (context.value == null) {\n context.value = uni.createLivePusherContext(\"live-pusher\", instance.value);\n }\n previewState.value = true;\n context.value?.startPreview({\n success: (res) => {\n console.log(\"startPreview\", JSON.stringify(res));\n },\n fail: (err) => {\n console.log(\"startPreview\", JSON.stringify(err));\n },\n complete: (res) => {\n console.log(\"startPreview\", JSON.stringify(res));\n }\n });\n };\n const stopPreview = () => {\n if (context.value == null) {\n context.value = uni.createLivePusherContext(\"live-pusher\", instance.value);\n }\n previewState.value = false;\n context.value?.stopPreview({\n success: (res) => {\n console.log(\"stopPreview\", JSON.stringify(res));\n },\n fail: (err) => {\n console.log(\"stopPreview\", JSON.stringify(err));\n },\n complete: (res) => {\n console.log(\"stopPreview\", JSON.stringify(res));\n }\n });\n };\n\n const localMirrorItemTypes = [{ \"value\": 0, \"name\": \"auto(前置摄像头镜像，后置摄像头不镜像)\" }, { \"value\": 1, \"name\": \"enable(前后置摄像头均镜像)\" }, { \"value\": 2, \"name\": \"disable(前后置摄像头均不镜像)\" }] as ItemType[];\n const localMirrorItems = [\"auto\", \"enable\", \"disable\"];\n const modeItemTypes = [{ \"value\": 0, \"name\": \"SD(标清)\" }, { \"value\": 1, \"name\": \"HD(高清)\" }, { \"value\": 2, \"name\": \"FHD(超清)\" }] as ItemType[];\n const modeItems = [\"SD\", \"HD\", \"FHD\"];\n const orientationItemTypes = [{ \"value\": 0, \"name\": \"vertical\" }, { \"value\": 1, \"name\": \"horizontal\" }] as ItemType[];\n const orientationItems = [\"vertical\", \"horizontal\"];\n const aspectItemTypes = [{ \"value\": 0, \"name\": \"3:4\" }, { \"value\": 1, \"name\": \"9:16\" }] as ItemType[];\n const aspectItems = [\"3:4\", \"9:16\"];\n const audioQualityItemTypes = [{ \"value\": 0, \"name\": \"high(高音质(48KHz))\" }, { \"value\": 1, \"name\": \"low(低音质(16KHz))\" }] as ItemType[];\n const audioQualityItems = [\"high\", \"low\"];\n const devicePositionItemTypes = [{ \"value\": 0, \"name\": \"front\" }, { \"value\": 1, \"name\": \"back\" }] as ItemType[];\n const devicePositionItems = [\"front\", \"back\"];\n const onUrlComfirm = (event : UniInputConfirmEvent) => {\n let value = event.detail.value;\n if (value == '') return;\n context.value = null;\n isUrlSet.value = false;\n setTimeout(() => {\n url.value = value;\n isUrlSet.value = true;\n }, 200);\n console.log(\"url ->\", value);\n };\n const onMinBitrateComfirm = (event : UniInputConfirmEvent) => {\n let value = event.detail.value;\n if (value == '') return;\n minBitrate.value = parseInt(value);\n console.log(\"min-bitrate ->\", value);\n };\n const onMaxBitrateComfirm = (event : UniInputConfirmEvent) => {\n let value = event.detail.value;\n if (value == '') return;\n maxBitrate.value = parseInt(value);\n console.log(\"max-bitrate ->\", value);\n };\n const onWaitingImageComfirm = (event : UniInputConfirmEvent) => {\n let value = event.detail.value;\n if (value == '') return;\n waitingImage.value = value;\n console.log(\"waiting-image ->\", value);\n };\n const onZoomComfirm = (event : UniInputConfirmEvent) => {\n let value = event.detail.value;\n if (value == '') return;\n zoom.value = parseInt(value);\n console.log(\"zoom ->\", value);\n };\n const onBeautyChange = (event : UniSliderChangeEvent) => {\n beauty.value = event.detail.value;\n console.log(\"beauty ->\", beauty.value);\n };\n const onWhitenessChange = (event : UniSliderChangeEvent) => {\n whiteness.value = event.detail.value;\n console.log(\"whiteness ->\", whiteness.value);\n };\n const onEnableCameraChange = (value : boolean) => {\n enableCamera.value = value;\n console.log(\"enable-camera ->\", enableCamera.value);\n };\n const onEnableMicChange = (value : boolean) => {\n enableMic.value = value;\n console.log(\"enable-mic ->\", enableMic.value);\n };\n const onMutedChange = (value : boolean) => {\n muted.value = value;\n console.log(\"muted ->\", muted.value);\n };\n const onBackgroundMuteChange = (value : boolean) => {\n backgroundMute.value = value;\n console.log(\"background-mute ->\", backgroundMute.value);\n };\n const onAutoFocusChange = (value : boolean) => {\n autoFocus.value = value;\n console.log(\"auto-focus ->\", backgroundMute.value);\n };\n const onRemoteMirrorChange = (value : boolean) => {\n remoteMirror.value = value;\n console.log(\"remote-mirror ->\", remoteMirror.value);\n };\n const onLocalMirrorChange = (value : number) => {\n localMirror.value = localMirrorItems[value];\n console.log(\"local-mirror ->\", localMirrorItems[value]);\n };\n const onDevicePositionChange = (value : number) => {\n devicePosition.value = devicePositionItems[value];\n console.log(\"device-position ->\", devicePosition.value);\n };\n const onModeChange = (value : number) => {\n mode.value = modeItems[value];\n console.log(\"mode ->\", modeItems[value]);\n };\n const onAspectChange = (value : number) => {\n aspect.value = aspectItems[value];\n console.log(\"aspect ->\", aspectItems[value]);\n };\n const onOrientationChange = (value : number) => {\n orientation.value = orientationItems[value];\n console.log(\"orientation ->\", orientation.value);\n };\n const onAudioQualityChange = (value : number) => {\n audioQuality.value = audioQualityItems[value];\n console.log(\"audio-quality ->\", audioQuality.value);\n };\n</script>\n\n<style>\n .live-pusher {\n width: 100%;\n height: 50%;\n }\n\n .input {\n height: 40px;\n background: #FFF;\n padding: 8px 13px;\n }\n</style>\n\n```\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.media.live-pusher)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/live-pusher.html)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/live-pusher.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=live-pusher&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=live-pusher&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=live-pusher&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=live-pusher&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=live-pusher)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=live-pusher&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"map":{"name":"::: sourceCode\n## map\n:::","originName":"## map","description":"地图","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | 4.31 | 4.31 | 4.61 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| longitude | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.31\",\"4.31\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 中心经度 |\n| latitude | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.31\",\"4.31\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 中心纬度 |\n| scale | number | 16 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.31\",\"4.31\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 缩放级别，web端取值范围为5-18 , app端取值范围为3-20 |\n| ~~theme~~ | string | \"normal\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.31\",\"4.31\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 主题（satellite 或 normal） |\n| min-scale | number | 3 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.31\",\"4.31\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 最小缩放级别 |\n| max-scale | number | 20 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.31\",\"4.31\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 最大缩放级别 |\n| layer-style | string | \"1\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.31\",\"4.31\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 个性化地图（如实现地图暗黑模式） |\n| markers | Marker\\[] \\| null | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.31\",\"4.31\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 标记点 |\n| covers | array | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 即将移除，请使用 markers |\n| polyline | Polyline\\[] \\| null | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.31\",\"4.31\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 路线 |\n| polygons | Polygon\\[] \\| null | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.31\",\"4.31\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 多边形 |\n| circles | Circle\\[] \\| null | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.31\",\"4.31\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 圆 |\n| controls | Control\\[] \\| null | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.31\",\"4.31\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 控件 |\n| include-points | LocationObject\\[] \\| null | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.31\",\"4.31\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 缩放视野以包含所有给定的坐标点 |\n| show-location | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.31\",\"4.31\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 显示带有方向的当前定位点 |\n| enable-3D | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.31\",\"4.31\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否显示3D楼块 |\n| show-compass | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.31\",\"4.31\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否显示指南针 |\n| enable-zoom | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.31\",\"4.31\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否支持缩放 |\n| enable-scroll | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.31\",\"4.31\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否支持拖动 |\n| enable-rotate | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.31\",\"4.31\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否支持旋转 |\n| rotate | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.31\",\"4.31\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 旋转角度(范围0-360)地图正北和设备 y 轴角度的夹角 |\n| skew | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.31\",\"4.31\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 倾斜角度，范围 0 ~ 40 , 关于 z 轴的倾角 |\n| enable-overlooking | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.31\",\"4.31\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否开启俯视（是否开启手势修改倾斜角度） |\n| enable-satellite | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.31\",\"4.31\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否开启卫星图 |\n| enable-traffic | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.31\",\"4.31\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否开启实时路况 |\n| enable-poi | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.31\",\"4.31\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否展示 POI 点 |\n| enable-building | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.31\",\"4.31\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否展示建筑物 |\n| enable-indoorMap | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.31\",\"4.31\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否展示室内地图 |\n| subkey | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>地图能力【个性化地图】使用的key，不支持动态修改 |\n| show-scale | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(boolean)*<br/>显示比例尺，工具暂不支持 |\n| enable-auto-max-overlooking | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(boolean)*<br/>开启最大俯视角，俯视角度从 45 度拓展到 75 度 |\n| setting | object | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(object)*<br/>配置项 |\n| enable3-d | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.31\",\"4.31\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否显示3D楼块 |\n| enable-indoor-map | boolean | false | | |\n| @markertap | (event: [UniMapMarkerTapEvent](#unimapmarkertapevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.31\",\"4.31\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 点击标记点时触发 |\n| @callouttap | (event: [UniEvent](/component/common.md#unievent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 点击标记点对应的气泡时触发 |\n| @controltap | (event: [UniMapControlTapEvent](#unimapcontroltapevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.31\",\"4.31\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 点击控件时触发 |\n| @regionchange | (event: [UniMapRegionChangeEvent](#unimapregionchangeevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.31\",\"4.31\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 视野发生变化时触发 |\n| @updated | (event: [UniMapUpdatedEvent](#unimapupdatedevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.31\",\"4.31\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 在地图渲染更新完成时触发 |\n| @tap | (event: [UniMapTapEvent](#unimaptapevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.31\",\"4.31\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 点击地图时触发 |\n| @anchorpointtap | (event: [UniMapAnchorPointTapEvent](#unimapanchorpointtapevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.31\",\"4.31\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 点击定位标时触发 |\n| @poitap | (event: [UniMapPoiTapEvent](#unimappoitapevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.31\",\"4.31\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 点击地图poi点时触发 |\n| @labeltap | eventhandle | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandle)*<br/>点击label时触发，`e.detail = {markerId}` |\n| @polylinetap | eventhandle | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandle)*<br/>点击地图路线时触发，`e.detail = {longitude, latitude}` |\n| @abilitysuccess | eventhandle | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandle)*<br/>地图能力生效时触发，`e.detail = {ability, errCode, errMsg}` |\n| @abilityfail | eventhandle | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandle)*<br/>地图能力失败时触发，`e.detail = {ability, errCode, errMsg}` |\n| @authsuccess | eventhandle | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandle)*<br/>地图鉴权结果成功时触发，`e.detail = {errCode, errMsg}` |\n| @interpolatepoint | eventhandle | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandle)*<br/>MapContext.moveAlong 插值动画时触发。`e.detail = {markerId, longitude, latitude, animationStatus: \"interpolating\"}` |\n| @error | eventhandle | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandle)*<br/>组件错误时触发，例如创建或鉴权失败，`e.detail = {longitude, latitude}` |","event":"\n### 事件\n#### UniMapMarkerTapEvent\n\n```mermaid\ngraph LR\n \nUniMapMarkerTapEvent -- Extends --> UniPointerEvent\n style UniPointerEvent color:#42b983\n click UniPointerEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unipointerevent\"\n```\n##### UniMapMarkerTapEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniMapMarkerTapEventDetail** | 否 |\n@| 名称 | 类型 | 必备 |\n@| :- | :- | :- |\n@| markerId | number | 否 |\n\n\n#### UniMapControlTapEvent\n\n```mermaid\ngraph LR\n \nUniMapControlTapEvent -- Extends --> UniCustomEvent&ltUniMapControlTapEventDetail&gt\n style UniCustomEvent&ltUniMapControlTapEventDetail&gt color:#42b983\n click UniCustomEvent&ltUniMapControlTapEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniMapControlTapEventDetail\n\n\n###### UniMapControlTapEventDetail 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| controlId | number | 否 |\n\n\n#### UniMapRegionChangeEvent\n\n```mermaid\ngraph LR\n \nUniMapRegionChangeEvent -- Extends --> UniCustomEvent&lt&gt\n style UniCustomEvent&lt&gt color:#42b983\n click UniCustomEvent&lt&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniMapRegionChangeEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| causedBy | string | 否 |\n\n\n#### UniMapUpdatedEvent\n\n```mermaid\ngraph LR\n \nUniMapUpdatedEvent -- Extends --> UniCustomEvent&ltUniMapUpdatedEventDetail&gt\n style UniCustomEvent&ltUniMapUpdatedEventDetail&gt color:#42b983\n click UniCustomEvent&ltUniMapUpdatedEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n#### UniMapTapEvent\n\n```mermaid\ngraph LR\n \nUniMapTapEvent -- Extends --> UniPointerEvent\n style UniPointerEvent color:#42b983\n click UniPointerEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unipointerevent\"\n```\n##### UniMapTapEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniMapTapEventDetail** | 否 |\n@| 名称 | 类型 | 必备 |\n@| :- | :- | :- |\n@| latitude | number | 否 |\n@| longitude | number | 否 |\n\n\n#### UniMapAnchorPointTapEvent\n\n```mermaid\ngraph LR\n \nUniMapAnchorPointTapEvent -- Extends --> UniPointerEvent\n style UniPointerEvent color:#42b983\n click UniPointerEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unipointerevent\"\n```\n##### UniMapAnchorPointTapEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniMapAnchorPointTapEventDetail** | 否 |\n@| 名称 | 类型 | 必备 |\n@| :- | :- | :- |\n@| latitude | number | 否 |\n@| longitude | number | 否 |\n\n\n#### UniMapPoiTapEvent\n\n```mermaid\ngraph LR\n \nUniMapPoiTapEvent -- Extends --> UniPointerEvent\n style UniPointerEvent color:#42b983\n click UniPointerEvent \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unipointerevent\"\n```\n##### UniMapPoiTapEvent 的属性值\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| detail | **UniMapPoiTapEventDetail** | 否 |\n@| 名称 | 类型 | 必备 |\n@| :- | :- | :- |\n@| latitude | number | 否 |\n@| longitude | number | 否 |\n@| name | string | 否 |\n\n","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/map/map.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/map/map.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/map/map\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/map/map\n\n>示例\n```vue\n<template>\r\n <view class=\"content\">\r\n <map class=\"map\" id=\"map1\" ref=\"map1\" :longitude=\"location.longitude\" :latitude=\"location.latitude\" :scale=\"scale\"\r\n :markers=\"markers\" :include-points=\"includePoints\" :polyline=\"polyline\" :polygons=\"polygons\" :circles=\"circles\"\r\n :controls=\"controls\" :show-location=\"showLocation\" :enable-3D=\"enable3D\" :rotate=\"rotate\" :skew=\"skew\"\r\n :show-compass=\"showCompass\" :enable-overlooking=\"enableOverlooking\" :enable-zoom=\"enableZoom\"\r\n :enable-scroll=\"enableScroll\" :enable-rotate=\"enableRotate\" :enable-satellite=\"enableSatellite\"\r\n :enable-traffic=\"enableTraffic\" @markertap=\"onmarkertap\" @callouttap=\"oncallouttap\" @controltap=\"oncontroltap\"\r\n @regionchange=\"onregionchange\" @tap=\"maptap\" @updated=\"onupdated\" @poitap=\"onpoitap\"></map>\r\n <scroll-view class=\"scrollview\">\r\n <view class=\"tips\">注意：App和Web需要正确配置地图服务商的Key才能显示地图组件</view>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">属性示例</text>\r\n </View>\r\n <input-data defaultValue=\"13\" title=\"scale: 缩放级别，取值范围为5-18\" type=\"number\"\r\n @confirm=\"confirm_scale_input\"></input-data>\r\n <boolean-data :defaultValue=\"showLocation\" title=\"开启显示带有方向的当前定位点\" @change=\"change_show_location\"></boolean-data>\r\n <boolean-data :default-value=\"enable3D\" :disabled=\"enableSatellite\" title=\"3D效果(放大缩放级别才能看到建筑物3D效果)\" @change=\"change_enable_3d\"></boolean-data>\r\n <boolean-data :default-value=\"showCompass\" title=\"显示指南针\" @change=\"change_show_campass\"></boolean-data>\r\n <boolean-data :default-value=\"enableOverlooking\" title=\"俯视支持\" @change=\"change_enable_overlooking\"></boolean-data>\r\n <boolean-data :default-value=\"enableRotate\" title=\"旋转支持\" @change=\"change_enable_rotate\"></boolean-data>\r\n <boolean-data :default-value=\"enableZoom\" title=\"缩放支持\" @change=\"change_enable_zoom\"></boolean-data>\r\n <boolean-data :default-value=\"enableScroll\" title=\"拖动支持\" @change=\"change_enable_scroll\"></boolean-data>\r\n <boolean-data :default-value=\"enableSatellite\" title=\"卫星图\" @change=\"change_enable_satellite\"></boolean-data>\r\n <boolean-data :default-value=\"enableTraffic\" title=\"实时路况\" @change=\"change_enable_traffic\"></boolean-data>\r\n\r\n <button class=\"button\" @click=\"addControls\">控件</button>\r\n <button class=\"button\" @click=\"addMarkers\">添加标记点</button>\r\n \r\n <button class=\"button\" @click=\"addMarkersLabel\">为标记点旁边增加标签</button>\r\n \r\n <button class=\"button\" @click=\"removeMarker\">移除ID为4的标记点和标签</button>\r\n <button class=\"button\" @click=\"addPolyline\">添加路线</button>\r\n <button class=\"button\" @click=\"removePolyline\">移除一条路线</button>\r\n <button class=\"button\" @click=\"addPolygons\">添加多边形</button>\r\n <button class=\"button\" @click=\"removePolygon\">移除一个多边形</button>\r\n <button class=\"button\" @click=\"addCircles\">添加圆</button>\r\n <button class=\"button\" @click=\"removeCircle\">移除一个圆</button>\r\n <button class=\"button\" @click=\"includePoint\">缩放视野以包含所有给定的坐标点</button>\r\n <view class=\"uni-title\">\r\n <text class=\"uni-title-text\">方法示例</text>\r\n </View>\r\n <button class=\"button\" @click=\"handleGetCenterLocation\">获取当前地图中心的经纬度</button>\r\n <button class=\"button\" @click=\"handleGetRegion\">获取当前地图的视野范围</button>\r\n <button class=\"button\" @click=\"handleTranslateMarker\">平移marker</button>\r\n <button class=\"button\" @click=\"handleMoveToLocation(true)\">将地图中心移动到指定坐标</button>\r\n <button class=\"button\" @click=\"handleMoveToMyLocation\">将地图中心移动到当前位置</button>\r\n <button class=\"button\" @click=\"handleGetScale\">获取当前地图的缩放级别</button>\r\n </scroll-view>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n type TypeJestResult = {\n translateMarkerMsg : string,\n animationEnd : boolean,\n centerPoints : LocationObject,\n southwest : LocationObject,\n northeast : LocationObject,\n moveToLocationMsg : string,\n scale : number,\n eventDetailJsonStringify: string,\n regionChangeType: string,\n }\n\r\n const testMarkers :Marker[]= [{\r\n id: 0,\r\n latitude: 39.989631,\r\n longitude: 116.481018,\r\n title: '方恒国际阜通东大街6号',\r\n iconPath: '../../../static/location.png',\r\n rotate: 0,\r\n width: 20,\r\n height: 20,\r\n anchor: {\r\n x: 0.5,\r\n y: 1\r\n } ,\r\n callout: {\r\n content: '方恒国际阜通东大街6号',\r\n color: '#00BFFF',\r\n fontSize: 10,\r\n borderRadius: 4,\r\n borderWidth: 1,\r\n borderColor: '#333300',\r\n bgColor: '#CCFF99',\r\n padding: 5,\r\n display: 'ALWAYS'\r\n } as MapMarkerCallout\r\n },\r\n {\r\n id: 1,\r\n latitude: 39.9086920000,\r\n longitude: 116.3974770000,\r\n title: '天安门',\r\n // zIndex: '1',\r\n iconPath: '../../../static/location.png',\r\n width: 40,\r\n height: 40,\r\n anchor: {\r\n x: 0.5,\r\n y: 1\r\n },\r\n callout: {\r\n content: '首都北京\\n天安门',\r\n color: '#00BFFF',\r\n fontSize: 12,\r\n borderRadius: 10,\r\n borderWidth: 2,\r\n borderColor: '#333300',\r\n bgColor: '#CCFF11',\r\n padding: 5,\r\n display: 'ALWAYS'\r\n } as MapMarkerCallout\r\n },\r\n {\r\n id: 2,\r\n latitude: 39.894793,\r\n longitude: 116.321592,\r\n title: '北京西站',\r\n iconPath: '../../../static/location.png',\r\n width: 40,\r\n height: 40,\r\n anchor: {\r\n x: 0.5,\r\n y: 1\r\n },\r\n callout: {\r\n content: '北京西站',\r\n color: '#ffffff',\r\n fontSize: 12,\r\n borderRadius: 10,\r\n borderWidth: 2,\r\n borderColor: '#333300',\r\n bgColor: '#ff5500',\r\n padding: 5,\r\n display: 'ALWAYS'\r\n } as MapMarkerCallout\r\n },\r\n {\r\n id: 3,\r\n latitude: 39.902344,\r\n longitude: 116.484822,\r\n title: '北京东站',\r\n iconPath: '../../../static/location.png',\r\n width: 20,\r\n height: 20,\r\n anchor: {\r\n x: 0.5,\r\n y: 1\r\n },\r\n callout: {\r\n content: '北京东站',\r\n color: '#ffffff',\r\n fontSize: 12,\r\n borderRadius: 10,\r\n borderWidth: 2,\r\n borderColor: '#333300',\r\n bgColor: '#ff5500',\r\n padding: 5,\r\n display: 'ALWAYS'\r\n } as MapMarkerCallout\r\n },\r\n {\r\n id: 4,\r\n latitude: 39.865011,\r\n longitude: 116.379007,\r\n title: '北京南站',\r\n iconPath: '../../../static/location.png',\r\n width: 40,\r\n height: 40,\r\n anchor: {\r\n x: 0.5,\r\n y: 1\r\n },\r\n callout: {\r\n content: '北京南站',\r\n color: '#ffffff',\r\n fontSize: 12,\r\n borderRadius: 10,\r\n borderWidth: 2,\r\n borderColor: '#333300',\r\n bgColor: '#00aa00',\r\n padding: 5,\r\n display: 'ALWAYS'\r\n } as MapMarkerCallout\r\n },\r\n ];\r\n\r\n\r\n const testPolyline: Polyline[] = [{\r\n points: [{\r\n latitude: 39.925539,\r\n longitude: 116.279037\r\n },\r\n {\r\n latitude: 39.925539,\r\n longitude: 116.520285\r\n }],\r\n color: '#FFCCFF',\r\n width: 7,\r\n dottedLine: true,\r\n arrowLine: true,\r\n borderColor: '#000000',\r\n borderWidth: 2\r\n },\r\n {\r\n points: [{\r\n latitude: 39.938698,\r\n longitude: 116.275177\r\n },\r\n {\r\n latitude: 39.966069,\r\n longitude: 116.289253\r\n },\r\n {\r\n latitude: 39.944226,\r\n longitude: 116.306076\r\n },\r\n {\r\n latitude: 39.966069,\r\n longitude: 116.322899\r\n },\r\n {\r\n latitude: 39.938698,\r\n longitude: 116.336975\r\n }],\r\n color: '#CCFFFF',\r\n width: 5,\r\n dottedLine: false,\r\n arrowLine: true,\r\n borderColor: '#CC0000',\r\n borderWidth: 3\r\n }\r\n ];\r\n\r\n const testPolygons : Polygon[] = [{\r\n points: [{\r\n latitude: 39.781892,\r\n longitude: 116.293413\r\n },\r\n {\r\n latitude: 39.787600,\r\n longitude: 116.391842\r\n },\r\n {\r\n latitude: 39.733187,\r\n longitude: 116.417932\r\n },\r\n {\r\n latitude: 39.704653,\r\n longitude: 116.338255\r\n }],\r\n fillColor: '#FFCCFF',\r\n strokeWidth: 3,\r\n strokeColor: '#CC99CC',\r\n zIndex: 11\r\n },\r\n {\r\n points: [{\r\n latitude: 39.887600,\r\n longitude: 116.518932\r\n },\r\n {\r\n latitude: 39.781892,\r\n longitude: 116.518932\r\n },\r\n {\r\n latitude: 39.781892,\r\n longitude: 116.428932\r\n },\r\n {\r\n latitude: 39.887600,\r\n longitude: 116.428932\r\n }\r\n ],\r\n fillColor: '#CCFFFF',\r\n strokeWidth: 5,\r\n strokeColor: '#CC0000',\r\n zIndex: 3\r\n }\r\n ];\r\n\r\n const testCircles: Circle[] = [{\r\n latitude: 39.996441,\r\n longitude: 116.411146,\r\n radius: 15000,\r\n strokeWidth: 5,\r\n color: '#CCFFFF',\r\n fillColor: '#CC0000'\r\n },\r\n {\r\n latitude: 40.096441,\r\n longitude: 116.511146,\r\n radius: 12000,\r\n strokeWidth: 3,\r\n color: '#CCFFFF',\r\n fillColor: '#FFCCFF'\r\n },\r\n {\r\n latitude: 39.896441,\r\n longitude: 116.311146,\r\n radius: 9000,\r\n strokeWidth: 1,\r\n color: '#CCFFFF',\r\n fillColor: '#CC0000'\r\n }\r\n ];\r\n\r\n const testIncludePoints :LocationObject[] = [{\r\n latitude: 39.989631,\r\n longitude: 116.481018,\r\n },\r\n {\r\n latitude: 39.9086920000,\r\n longitude: 116.3974770000,\r\n }\r\n ];\r\n\r\n\r\n const mapContext = ref(null as MapContext | null);\r\n const location = ref({ longitude: 116.39742, latitude: 39.909 } as LocationObject);\r\n const rotate = ref(0);\r\n const skew = ref(0);\r\n // 自动化测试\r\n const autoTest = ref(false);\r\n const updateAutoTest = (value : boolean) => {\r\n autoTest.value = value\r\n }\r\n\r\n\r\n const jestResult = reactive({\n translateMarkerMsg: \"\",\n animationEnd: false,\n centerPoints: {\r\n latitude: 0,\r\n longitude: 0\r\n },\r\n southwest: {\r\n latitude: 0,\r\n longitude: 0\r\n },\r\n northeast: {\r\n latitude: 0,\r\n longitude: 0\r\n },\n moveToLocationMsg: \"\",\n scale: 0,\n eventDetailJsonStringify: \"{}\",\n regionChangeType: \"\"\n } as TypeJestResult);\n\r\n\r\n onReady(() => {\r\n mapContext.value = uni.createMapContext(\"map1\", getCurrentInstance()!.proxy!)\r\n });\r\n\r\n const scale = ref(13);\r\n const confirm_scale_input = (value : number) => {\r\n scale.value = value\r\n };\r\n\r\n const controls = ref([] as Control[]);\r\n const addControls = () => {\r\n controls.value = [{\r\n id: 1,\r\n position: {\r\n left: 5,\r\n top: 180,\r\n width: 30,\r\n height: 30\r\n } as ControlPosition,\r\n iconPath: '../../../static/test-image/logo.png',\r\n clickable: true\r\n } as Control]\r\n }\r\n\r\n const showLocation = ref(false);\r\n const enable3D = ref(false);\r\n const showCompass = ref(false);\r\n const enableOverlooking = ref(false);\r\n const enableRotate = ref(false);\r\n const enableZoom = ref(true);\r\n const enableScroll = ref(true);\r\n const enableSatellite = ref(false);\r\n const enableTraffic = ref(false);\r\n const change_show_location = (checked : boolean) => {\r\n showLocation.value = checked\r\n }\r\n\r\n const change_enable_3d = (checked : boolean) => {\r\n enable3D.value = checked\r\n }\r\n\r\n const change_show_campass = (checked : boolean) => {\r\n showCompass.value = checked\r\n }\r\n\r\n const change_enable_overlooking = (checked : boolean) => {\r\n enableOverlooking.value = checked\r\n }\r\n\r\n const change_enable_rotate = (checked : boolean) => {\r\n enableRotate.value = checked\r\n }\r\n\r\n const change_enable_zoom = (checked : boolean) => {\r\n enableZoom.value = checked\r\n }\r\n\r\n const change_enable_scroll = (checked : boolean) => {\r\n enableScroll.value = checked\r\n }\r\n\r\n const change_enable_satellite = (checked : boolean) => {\r\n enableSatellite.value = checked\r\n }\r\n\r\n const change_enable_traffic = (checked : boolean) => {\r\n enableTraffic.value = checked\r\n }\r\n\r\n const includePoints = ref([] as LocationObject[]);\r\n const includePoint = () => {\r\n includePoints.value = testIncludePoints;\r\n };\r\n\r\n\r\n let markers = ref([] as Marker[]);\r\n const addMarkers = () => {\r\n scale.value = 11\r\n const temp = JSON.parse<Marker[]>(JSON.stringify(testMarkers))!\r\n markers.value = temp\r\n };\r\n\r\n const removeMarker = () => {\r\n // #ifdef APP\r\n mapContext.value?.removeMarkers({markerIds:[4]})\r\n // #endif\r\n // #ifdef WEB || MP\r\n const index = markers.value.findIndex((marker: Marker):boolean=>{\r\n return marker.id == 4\r\n });\r\n if (index != -1) {\r\n delete markers.value[index].label;\r\n markers.value.splice(index, 1);\r\n } else {\r\n uni.showToast({\r\n title: '未找到该标记点',\r\n icon: 'none'\r\n });\r\n }\r\n // #endif\r\n };\r\n\r\n // #ifdef WEB || MP\r\n const addMarkersLabel = () => {\r\n markers.value.forEach((marker, index) => {\r\n marker.label = {\r\n content: 'Hello Label' + (index + 1),\r\n color: '#aa00ff',\r\n fontSize: 12,\r\n x: 5,\r\n y: 0,\r\n borderColor: '#333300',\r\n borderWidth: 2,\r\n borderRadius: 20,\r\n bgColor: '#aaffff',\r\n padding: 10\r\n };\r\n });\r\n };\r\n // #endif\r\n\r\n\r\n const polyline = ref([] as Polyline[]);\r\n const addPolyline = () => {\r\n scale.value = 11;\r\n polyline.value = JSON.parse<Polyline[]>(JSON.stringify(testPolyline))!;\r\n };\r\n const removePolyline = () => {\r\n if (polyline.value.length > 1) {\r\n polyline.value = JSON.parse<Polyline[]>(JSON.stringify(testPolyline))!.splice(0, 1);\r\n }\r\n };\r\n\r\n\r\n const polygons = ref([] as Polygon[]);\r\n const addPolygons = () => {\r\n scale.value = 10;\r\n polygons.value = JSON.parse<Polygon[]>(JSON.stringify(testPolygons))!;\r\n };\r\n const removePolygon = () => {\r\n if (polygons.value.length > 1) {\r\n polygons.value = JSON.parse<Polygon[]>(JSON.stringify(testPolygons))!.splice(0, 1);\r\n }\r\n };\r\n\r\n\r\n const circles = ref([] as Circle[]);\r\n const addCircles = () => {\r\n scale.value = 10;\r\n circles.value = JSON.parse<Circle[]>(JSON.stringify(testCircles))!;\r\n };\r\n const removeCircle = () => {\r\n if (circles.value.length > 1) {\r\n circles.value = JSON.parse<Circle[]>(JSON.stringify(testCircles))!.slice(1);\r\n }\r\n };\r\n\r\n const handleGetCenterLocation = () => {\r\n mapContext.value?.getCenterLocation({\r\n success: ret => {\r\n // console.log('getCenterLocation',ret);\r\n jestResult.centerPoints = ret;\r\n if (!autoTest.value) {\r\n uni.showModal({\r\n content: JSON.stringify(ret)\r\n });\r\n }\r\n }\r\n });\r\n };\r\n\r\n const handleGetRegion = () => {\r\n mapContext.value?.getRegion({\r\n success: ret => {\r\n // console.log('getRegion',JSON.stringify(ret));\r\n jestResult.southwest = ret.southwest;\r\n jestResult.northeast = ret.northeast\r\n if (!autoTest.value) {\r\n uni.showModal({\r\n content: JSON.stringify(ret)\r\n });\r\n }\r\n }\r\n });\r\n };\r\n\r\n\r\n const handleTranslateMarker = () => {\r\n mapContext.value?.translateMarker({\r\n markerId: 1,\r\n destination: {\r\n latitude: 39.989631,\r\n longitude: 116.481018\r\n },\r\n autoRotate: true,\r\n rotate: 10,\r\n duration: 2000,\r\n moveWithRotate: true,\r\n // #ifdef WEB || MP\r\n animationEnd: () => {\r\n console.log('动画结束');\r\n jestResult.animationEnd = true;\r\n },\r\n // #endif\r\n success: ret => {\r\n console.log('handleTranslateMarker',JSON.stringify(ret));\r\n const result = ret as UTSJSONObject\r\n jestResult.translateMarkerMsg = result[\"errMsg\"] as string;\r\n },\r\n fail: error => {\r\n console.log(error)\r\n }\r\n });\r\n mapContext.value?.translateMarker({\r\n markerId: 2,\r\n destination: {\r\n latitude: 39.902344,\r\n longitude: 116.484822,\r\n },\r\n autoRotate: true,\r\n rotate: 0,\r\n duration: 2000,\r\n success: ret => {\r\n console.log('handleTranslateMarker', JSON.stringify(ret));\r\n },\r\n fail: error => {\r\n console.log(error)\r\n }\r\n });\r\n };\r\n\r\n\r\n const handleGetScale = () => {\r\n mapContext.value?.getScale({\r\n success: res => {\r\n // console.log('getScale',res);\r\n scale.value = res.scale\r\n jestResult.scale = res.scale\r\n if (!autoTest.value) {\r\n uni.showModal({\r\n content: '当前地图的缩放级别为：' + res.scale\r\n });\r\n }\r\n },\r\n fail: error => {\r\n console.log(error)\r\n },\r\n });\r\n };\r\n\r\n // showModal - 操作结束后是否显示 Modal 弹框，默认为 true。在自动化或内部调用时可设为 false。\r\n function handleMoveToLocation(showModal: boolean = true) {\r\n mapContext.value?.moveToLocation({\r\n latitude: 39.909,\r\n longitude: 116.39742,\r\n success: res => {\r\n // console.log('moveToLocation',res);\r\n const result = res as UTSJSONObject\r\n jestResult.moveToLocationMsg = result[\"errMsg\"] as string;\r\n\r\n if (!autoTest.value && showModal) {\r\n uni.showModal({\r\n content: JSON.stringify(res)\r\n });\r\n }\r\n },\r\n fail: error => {\r\n console.log(error)\r\n }\r\n });\r\n }\r\n\r\n const handleMoveToMyLocation = () => {\r\n mapContext.value?.moveToLocation({\r\n success: res => {\r\n uni.showModal({\r\n content: '地图中心已经移动到当前位置'\r\n })\r\n },\r\n fail: error => {\r\n console.log(error);\r\n }\r\n })\r\n }\r\n\r\n const maptap = (e : UniMapTapEvent) => {\r\n // #ifdef WEB || MP\r\n uni.showModal({\r\n content: 'web端map组件tap事件不支持返回经纬度'\r\n });\r\n // #endif\r\n // #ifndef WEB || MP\r\n // console.log('点击地图时触发',e)\r\n //js运行环境删除多余的信息\r\n // #ifndef APP-ANDROID\r\n Reflect.deleteProperty(e, \"target\")\r\n Reflect.deleteProperty(e, \"currentTarget\")\r\n Reflect.deleteProperty(e, \"_bubbles\")\r\n Reflect.deleteProperty(e, \"_cancelable\")\r\n Reflect.deleteProperty(e, \"timeStamp\")\r\n // #endif\r\n uni.showModal({\r\n content: JSON.stringify(e)\r\n });\r\n // #endif\r\n };\r\n\r\n const onmarkertap = (e : UniMapMarkerTapEvent) => {\r\n // console.log('点击标记点时触发',e)\r\n //js运行环境删除多余的信息\r\n // #ifndef APP-ANDROID\r\n Reflect.deleteProperty(e, \"target\")\r\n Reflect.deleteProperty(e, \"currentTarget\")\r\n Reflect.deleteProperty(e, \"_bubbles\")\r\n Reflect.deleteProperty(e, \"_cancelable\")\r\n Reflect.deleteProperty(e, \"timeStamp\")\r\n // #endif\r\n uni.showModal({\r\n content: JSON.stringify(e)\r\n });\r\n };\r\n\r\n const oncontroltap = (e : UniMapControlTapEvent) => {\r\n // console.log('点击控件时触发',e)\r\n uni.showModal({\r\n content: JSON.stringify(e.detail)\r\n });\r\n };\r\n\r\n const oncallouttap = (e : UniMapCalloutTapEvent) => {\r\n // console.log('点击标记点对应的气泡时触发',e)\r\n uni.showModal({\r\n content: JSON.stringify(e.detail)\r\n });\r\n };\r\n\r\n const onupdated = (e : UniMapUpdatedEvent) => {\r\n // console.log('在地图渲染更新完成时触发', e)\r\n // 检查地图位置，如果经纬度为0则调用moveToLocation将地图中心移动到当前定位点\r\n // #ifdef MP\r\n if (mapContext.value) {\r\n mapContext.value.getCenterLocation({\r\n success: ret => {\r\n // console.log('地图更新后获取中心位置:', ret)\r\n if (ret.latitude === 0 && ret.longitude === 0) {\r\n // console.log('检测到无效经纬度')\r\n handleMoveToLocation(false); // 不显示弹框\r\n }\r\n }\r\n })\r\n }\r\n // #endif\r\n };\r\n\r\n const onregionchange = (e : UniMapRegionChangeEvent) => {\n // console.log('视野发生变化时触发', e.detail)\n jestResult.regionChangeType = e.type\n jestResult.eventDetailJsonStringify = JSON.stringify(e.detail)\n };\n\r\n const onpoitap = (e : UniMapPoiTapEvent) => {\r\n // console.log('点击地图poi点时触发',e)\r\n //js运行环境删除多余的信息\r\n // #ifndef APP-ANDROID\r\n Reflect.deleteProperty(e, \"target\")\r\n Reflect.deleteProperty(e, \"currentTarget\")\r\n Reflect.deleteProperty(e, \"_bubbles\")\r\n Reflect.deleteProperty(e, \"_cancelable\")\r\n Reflect.deleteProperty(e, \"timeStamp\")\r\n // #endif\r\n uni.showModal({\r\n content: JSON.stringify(e)\r\n });\r\n };\r\n\r\n defineExpose({\r\n jestResult,\r\n autoTest,\r\n updateAutoTest,\r\n addControls,\r\n addMarkers,\r\n // #ifdef WEB || MP\r\n addMarkersLabel,\r\n // #endif\r\n removeMarker,\r\n addPolyline,\r\n removePolyline,\r\n addPolygons,\r\n removePolygon,\r\n addCircles,\r\n removeCircle,\r\n includePoint,\r\n handleGetCenterLocation,\r\n handleGetRegion,\r\n handleTranslateMarker,\r\n handleMoveToLocation,\r\n handleGetScale\r\n })\r\n</script>\r\n\r\n<style>\r\n .content {\r\n flex: 1;\r\n }\r\n\r\n .map {\r\n width: 100%;\r\n height: 300px;\r\n background-color: #f0f0f0;\r\n }\r\n\r\n .scrollview {\r\n flex: 1;\r\n padding: 10px;\r\n }\r\n\r\n .button {\r\n margin-top: 5px;\r\n margin-bottom: 5px;\r\n }\r\n\r\n .tips {\r\n font-size: 12px;\r\n margin-top: 15px;\r\n opacity: .8;\r\n }\r\n</style>\r\n\n```\n\n:::","children":"### 子组件 @children-tags\n不可以嵌套组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.map.map)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/map.html)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/map.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=map&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=map&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=map&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=map&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=map)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=map&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"canvas":{"name":"::: sourceCode\n## canvas\n\n> GitCode: https://gitcode.com/dcloud/uni-component/tree/alpha/uni_modules/uni-canvas\n\n\n> GitHub: https://github.com/dcloudio/uni-component/tree/alpha/uni_modules/uni-canvas\n\n:::","originName":"## canvas","description":"> 组件类型：[UniCanvasElement](/api/dom/unicanvaselement.md) \n\n 画布","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.21 | 4.41 | 4.25 | 4.25 | 4.61 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| type | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"-\",\"4.41\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>指定 canvas 类型，支持 2d (2.9.0) 和 webgl (2.7.0) |\n| canvas-id | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"-\",\"4.41\",\"-\",\"-\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>canvas 组件的唯一标识符，若指定了 type 则无需再指定该属性 |\n| disable-scroll | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(boolean)*<br/>当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新 |\n| width | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | |\n| height | number | 0 | <CompatibilityTable table='{\"headers\":[{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | |\n| @touchstart | eventhandle | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.21\",\"4.41\",\"4.25\",\"4.25\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | *(eventhandle)*<br/>手指触摸动作开始 |\n| @touchmove | eventhandle | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.21\",\"4.41\",\"4.25\",\"4.25\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | *(eventhandle)*<br/>手指触摸后移动 |\n| @touchend | eventhandle | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.21\",\"4.41\",\"4.25\",\"4.25\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | *(eventhandle)*<br/>手指触摸动作结束 |\n| @touchcancel | eventhandle | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.21\",\"4.41\",\"4.25\",\"4.25\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | *(eventhandle)*<br/>手指触摸动作被打断，如来电提醒，弹窗 |\n| @longtap | eventhandle | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.21\",\"4.41\",\"4.25\",\"4.25\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | *(eventhandle)*<br/>手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动 |\n| @error | eventhandle | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandle)*<br/>当发生错误时触发 error 事件，detail = {errMsg} |","event":"","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/canvas/canvas.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/canvas/canvas.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/canvas/canvas\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/canvas/canvas\n\n>示例\n```vue\n<template>\r\n <view class=\"page\" id=\"page-canvas\">\r\n <page-intro content=\"本页演示 canvas 画布组件：toDataURL、createImage、createPath2D、requestAnimationFrame 等；可跳转 CanvasContext API 子页，展示绘图与异步上下文。\"></page-intro>\r\n <canvas id=\"canvas\" class=\"canvas-element\"></canvas>\r\n <scroll-view class=\"scroll-view\">\r\n \r\n <button class=\"canvas-drawing-button\" @click=\"canvasToBlob\">canvasToBlob</button>\r\n <view>\r\n <text>testToBlobResult: {{data.testToBlobResult}}</text>\r\n </view>\r\n \r\n <button class=\"canvas-drawing-button\" id=\"toDataURL\" @click=\"canvasToDataURL\">canvasToDataURL</button>\r\n <view class=\"text-group\" v-if=\"data.dataBase64.length>0\">\r\n <text>canvasToDataURL:</text>\r\n <text>{{data.dataBase64.slice(0,22)}}...</text>\r\n </view>\r\n <button @click=\"onCreateImage\">createImage</button>\r\n <button @click=\"onCreatePath2D\">createPath2D</button>\r\n <button @click=\"startAnimationFrame\">requestAnimationFrame</button>\r\n <button @click=\"stopAnimationFrame\">cancelAnimationFrame</button>\r\n <view style=\"padding: 8px 10px;\">CanvasContext API 演示</view>\r\n <navigator url=\"./canvas-context\">\r\n <button>CanvasContext API</button>\r\n </navigator>\r\n\r\n <view class=\"text-group\">\r\n <text>获取 CanvasContext 结果：</text>\r\n <text id=\"testCanvasContext\">{{data.testCanvasContext}}</text>\r\n </view>\r\n <view class=\"text-group\">\r\n <text>测试 ToDataURL 结果：</text>\r\n <text id=\"testToDataURLResult\">{{data.testToDataURLResult}}</text>\r\n </view>\r\n\r\n <view class=\"text-group\">\r\n <text>测试 createImage 结果：</text>\r\n <text id=\"testCreateImage\">{{data.testCreateImage}}</text>\r\n </view>\r\n\r\n <view class=\"text-group\">\r\n <text>测试 createPath2D 结果：</text>\r\n <text id=\"testCreatePath2D\">{{data.testCreatePath2D}}</text>\r\n </view>\r\n\r\n <view class=\"text-group\">\r\n <text>测试 createCanvasContextAsync 结果：</text>\r\n <text @click=\"testCreateContextAsync\" id=\"createCanvasContextAsync\">{{testCanvasCtx}}</text>\r\n </view>\r\n <canvas-child ref=\"canvasChildRef\"></canvas-child>\r\n </scroll-view>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n import CanvasChild from './canvas-child.uvue'\r\n\r\n const instance = getCurrentInstance()!.proxy\r\n\r\n type DataType = {\r\n title: string;\r\n canvas: UniCanvasElement | null;\r\n canvasContext: CanvasContext | null;\r\n renderingContext: CanvasRenderingContext2D | null;\r\n canvasWidth: number;\r\n canvasHeight: number;\r\n dataBase64: string;\r\n taskId: number;\r\n lastTime: number;\r\n frameCount: number;\r\n testCanvasContext: boolean;\r\n testToBlobResult: boolean;\r\n testToDataURLResult: boolean;\r\n testCreateImage: boolean;\r\n testCreatePath2D: boolean;\r\n testFrameCount: number;\r\n testCanvasCtx1: boolean;\r\n testCanvasCtx2: boolean;\r\n testCounter: number;\r\n }\r\n\r\n const data = reactive({\r\n title: 'Context2D',\r\n canvas: null,\r\n canvasContext: null,\r\n renderingContext: null,\r\n canvasWidth: 0,\r\n canvasHeight: 0,\r\n dataBase64: '',\r\n taskId: 0,\r\n lastTime: 0,\r\n frameCount: 0,\r\n testCanvasContext: false,\r\n testToBlobResult: false,\r\n testToDataURLResult: false,\r\n testCreateImage: false,\r\n testCreatePath2D: false,\r\n testFrameCount: 0,\r\n testCanvasCtx1: false,\r\n testCanvasCtx2: false,\r\n testCounter: 0\r\n } as DataType)\r\n\r\n const canvasChildRef = ref<ComponentPublicInstance | null>(null)\r\n\r\n const testCanvasCtx = computed(() => {\r\n return data.testCanvasCtx1 && data.testCanvasCtx2\r\n })\r\n\r\n // #ifdef MP\n const testImageSrc = \"../../../static/test-image/logo.png\"\n // #endif\n // #ifndef MP\n const testImageSrc = \"/static/test-image/logo.png\"\n // #endif\n\n function hidpi(canvas : UniCanvasElement) {\r\n const context = canvas.getContext(\"2d\")!;\r\n const dpr = uni.getWindowInfo().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 // #ifdef WEB\r\n const canvasToBlob = () => {\r\n data.canvasContext!.toBlob((blob : Blob) => {\r\n data.testToBlobResult = (blob.size > 0 && blob.type == 'image/jpeg')\r\n }, 'image/jpeg', 0.95)\r\n }\r\n // #endif\r\n\r\n const canvasToDataURL = () => {\r\n data.dataBase64 = data.canvasContext!.toDataURL()\r\n }\r\n\r\n const onCreateImage = () => {\r\n data.renderingContext!.clearRect(0, 0, data.canvasWidth, data.canvasHeight)\r\n let image = data.canvasContext!.createImage();\r\n image.src = testImageSrc\n image.onload = () => {\r\n data.testCreateImage = true\r\n data.renderingContext?.drawImage(image, 0, 0, 100, 100);\r\n }\r\n }\r\n\r\n const onCreatePath2D = () => {\r\n data.renderingContext!.clearRect(0, 0, data.canvasWidth, data.canvasHeight)\r\n const context = data.renderingContext!\r\n let path2D = data.canvasContext!.createPath2D()\r\n data.testCreatePath2D = true\r\n const amplitude = 64;\r\n const wavelength = 64;\r\n for (let i = 0; i < 5; i++) {\r\n const x1 = 0 + (i * wavelength);\r\n const y1 = 128;\r\n const x2 = x1 + wavelength / 4;\r\n const y2 = y1 - amplitude;\r\n const x3 = x1 + 3 * wavelength / 4;\r\n const y3 = y1 + amplitude;\r\n const x4 = x1 + wavelength;\r\n const y4 = y1;\r\n context.moveTo(x1, y1);\r\n path2D.bezierCurveTo(x2, y2, x3, y3, x4, y4);\r\n }\r\n context.stroke(path2D);\r\n }\r\n\r\n const updateFPS = (timestamp : number) => {\r\n data.frameCount++\r\n if (timestamp - data.lastTime >= 1000) {\r\n const timeOfFrame = (1000 / data.frameCount)\r\n data.renderingContext!.clearRect(0, 0, data.canvasWidth, data.canvasHeight)\r\n data.renderingContext!.fillText(`${data.frameCount} / ${timeOfFrame.toFixed(3)}ms`, 10, 18)\r\n data.frameCount = 0\r\n data.lastTime = timestamp\r\n }\r\n }\r\n\r\n type StartAnimationFrameType = () => void\r\n let startAnimationFrame: StartAnimationFrameType = () => {}\r\n startAnimationFrame = () => {\r\n data.taskId = data.canvasContext!.requestAnimationFrame((timestamp : number) => {\r\n data.testFrameCount++\r\n updateFPS(timestamp)\r\n startAnimationFrame()\r\n })\r\n }\r\n\r\n const stopAnimationFrame = () => {\r\n data.canvasContext!.cancelAnimationFrame(data.taskId)\r\n data.taskId = 0\r\n }\r\n\r\n const testCreateContextAsync = () => {\r\n uni.createCanvasContextAsync({\r\n id: 'canvas',\r\n component: instance!,\r\n success: () => {\r\n data.testCanvasCtx1 = true\r\n }\r\n })\r\n\r\n uni.createCanvasContextAsync({\r\n id: 'canvas',\r\n success: () => {\r\n data.testCanvasCtx2 = true\r\n }\r\n })\r\n }\r\n\r\n const onChildReady = (count: number) => {\r\n // 通过事件传递数据\r\n data.testCounter = count\r\n }\r\n\r\n // TODO 暂时使用 onReady NativeView生命周期存在问题\r\n onReady(() => {\r\n uni.createCanvasContextAsync({\r\n id: 'canvas',\r\n component: instance!,\r\n success: (context : CanvasContext) => {\r\n data.canvasContext = context;\r\n data.renderingContext = context.getContext('2d')!;\r\n data.canvas = data.renderingContext!.canvas;\r\n\r\n hidpi(data.canvas!);\r\n data.canvasWidth = data.canvas!.width;\r\n data.canvasHeight = data.canvas!.height;\r\n\r\n // #ifdef WEB\r\n context.toBlob((blob : Blob) => {\r\n data.testToBlobResult = (blob.size > 0 && blob.type == 'image/jpeg')\r\n }, 'image/jpeg', 0.95);\r\n // #endif\r\n // #ifdef APP || WEB || MP\r\n setTimeout(() => {\r\n data.testToDataURLResult = data.canvasContext!.toDataURL().startsWith('data:image/png;base64')\r\n }, 50)\r\n // #endif\r\n data.testCanvasContext = true\r\n }\r\n })\r\n })\r\n\r\n onReady(() => {\r\n // 同步调用方式，仅支持 app/web\r\n // let canvas = uni.getElementById(\"canvas\") as UniCanvasElement\r\n // data.renderingContext = canvas.getContext(\"2d\")\r\n // hidpi(canvas);\r\n // data.canvas = canvas;\r\n // data.canvasWidth = canvas.width;\r\n // data.canvasHeight = canvas.height;\r\n })\r\n\r\n onLoad(() => {\r\n //监听canvasChildReady从onReady调整到onLoad，避免监听时机过晚导致无法收到此事件\r\n uni.$on('canvasChildReady', onChildReady)\r\n })\r\n\r\n onUnload(() => {\r\n uni.$off('canvasChildReady', onChildReady)\r\n if (data.taskId > 0) {\r\n stopAnimationFrame()\r\n }\r\n })\r\n\r\n defineExpose({\r\n data,\r\n canvasToDataURL,\r\n onCreateImage,\r\n onCreatePath2D\r\n })\r\n</script>\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 }\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 .btn-to-image {\r\n margin: 10px;\r\n }\r\n\r\n .text-group {\r\n display: flex;\r\n flex-flow: row nowrap;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 8px 10px;\r\n }\r\n</style>\r\n\n```\n\n:::","children":"### 子组件 @children-tags\n不可以嵌套组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.canvas.canvas)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/canvas.html)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=canvas&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=canvas&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=canvas&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=canvas&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=canvas)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=canvas&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"ad":{"name":"::: sourceCode\n## ad\n:::","originName":"## ad","description":"广告","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.41 | 4.31 | 4.31 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- | :-: | :- |\n| adpid | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.31\",\"4.31\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 广告位id，在uniAD官网申请广告位 |\n| unit-id | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>广告单元id，可在[小程序管理后台](https://mp.weixin.qq.com)的流量主模块新建 |\n| ad-intervals | number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(number)*<br/>广告自动刷新的间隔时间，单位为秒，参数值必须大于等于30（该参数不传入时 Banner 广告不会自动刷新） |\n| ad-type | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>广告类型，默认为展示banner，可通过设置该属性为`video`展示视频广告, `grid`为格子广告 |\n| ad-theme | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/> |\n| @load | (event: [UniEvent](/component/common.md#unievent)) => void | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.31\",\"4.31\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 广告加载成功的回调 |\n| @close | (event: [UniEvent](/component/common.md#unievent)) => void | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.31\",\"4.31\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 广告关闭的回调 |\n| @error | (e:[UniAdErrorEvent](#uniaderrorevent)) => void | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"4.31\",\"4.31\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 广告加载失败的回调 |\n| @clicked | Event | | |","event":"\n### 事件\n#### UniAdErrorEvent\n\n\n##### UniAdErrorEvent 的属性值\n| 名称 | 类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| detail | **IUniAdError** | 是 | |\n@| 名称 | 类型 | 必备 | 描述 |\n@| :- | :- | :- | :- |\n@| errCode | number | 是 | 错误码<br/>- -5001 广告位标识adpid为空，请传入有效的adpid<br/>- -5002 无效的广告位标识adpid，请使用正确的adpid<br/>- -5003 广告位未开通广告，请在广告平台申请并确保已审核通过<br/>- -5004 无广告模块，打包时请配置要使用的广告模块<br/>- -5005 广告加载失败，请稍后重试<br/>- -5006 广告已经展示过了，请重新加载<br/>- -5007 广告不可用或已过期，请重新请求<br/>- -5008 广告不可用或已过期，请重新请求<br/>- -5009 广告类型不符，请检查后再试<br/>- -5011 打包或开通的渠道，不支持此类型广告<br/>- -5013 广告播放失败，请重新加载 |\n@| errSubject | string | 是 | 统一错误主题（模块）名称 |\n@| data | any | 否 | 错误信息中包含的数据 |\n@| cause | [Error](/err-spec.md#unierror) | 否 | 源错误信息，可以包含多个错误，详见SourceError |\n@| errMsg | string | 是 | |\n| bubbles | boolean | 是 | 是否冒泡 |\n| cancelable | boolean | 是 | 是否可以取消 |\n| type | string | 是 | 事件类型 |\n| target | [UniElement](/api/dom/unielement.md) | 否 | 触发事件的组件 |\n| currentTarget | [UniElement](/api/dom/unielement.md) | 否 | 当前组件 |\n| timeStamp | Long | 是 | 事件发生时的时间戳 |\n\n\n##### UniAdErrorEvent 的方法\n| 名称 | 类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| stopPropagation | () => void | 是 | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | 阻止当前事件的默认行为 |\n","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/ad/ad.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/ad/ad.uvue) \n>\n> 该 API 不支持 Web，请运行 hello uni-app x 到 App 平台体验 \n\n::: preview\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/ad/ad\n```uvue\n<template>\r\n <view>\r\n <page-head title=\"信息流广告\"></page-head>\r\n \r\n <ad adpid=\"1111111111\" style=\"width: 100%;\" @load=\"loadFun\" @error=\"errorFun\"></ad>\r\n \r\n \r\n <view class=\"uni-center\">微信小程序平台暂不支持测试广告位，需要开通uni-ad后可测试</view>\r\n \r\n <view v-if=\"tips\" class=\"uni-center\">信息流广告加载失败，请退出当前页面重试。</view>\r\n \r\n <button @click=\"pushList\">列表-信息流</button>\r\n \r\n <button @click=\"pushVideoAd\">视频贴片-非全屏</button>\r\n <button @click=\"pushVideoAdL\">视频贴片-横向全屏</button>\r\n <button @click=\"pushVideoAdP\">视频贴片-竖向全屏</button>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n const tips = ref(false)\r\n\r\n // #ifndef MP-ALIPAY\r\n const pushList = () => {\r\n uni.navigateTo({\r\n url: '/pages/component/ad/list-view-ad',\r\n })\r\n }\r\n // #endif\r\n\r\n const pushVideoAd = () => {\r\n uni.navigateTo({\r\n url: '/pages/component/ad/video-ad',\r\n })\r\n }\r\n\r\n const pushVideoAdL = () => {\r\n uni.navigateTo({\r\n url: '/pages/component/ad/landscape-video-ad',\r\n })\r\n }\r\n\r\n const pushVideoAdP = () => {\r\n uni.navigateTo({\r\n url: '/pages/component/ad/portrait-video-ad',\r\n })\r\n }\r\n\r\n const loadFun = () => {\r\n uni.showToast({\r\n position: \"bottom\",\r\n title: \"信息流广告加载成功\"\r\n })\r\n }\r\n\r\n const errorFun = () => {\r\n tips.value = true;\r\n }\r\n\r\n</script>\r\n\n```\n:::","children":"### 子组件 @children-tags\n不可以嵌套组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.ad.ad)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/ad.html)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/ad.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=ad&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=ad&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=ad&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=ad&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=ad)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=ad&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"web-view":{"name":"::: sourceCode\n## web-view\n\n> GitCode: https://gitcode.com/dcloud/uni-component/tree/alpha/uni_modules/uni-web-view\n\n\n> GitHub: https://github.com/dcloudio/uni-component/tree/alpha/uni_modules/uni-web-view\n\n:::","originName":"## web-view","description":"> 组件类型：[UniWebViewElement](/api/dom/uniwebviewelement.md) \n\n 承载网页的容器","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | 3.9 | 4.11 | 4.61 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| src | string \\| null | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | webview 指向网页的链接 |\n| allow | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 用于为 [iframe](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe) 指定其[特征策略](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/策略特征) |\n| sandbox | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 该属性对呈现在 [iframe](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe) 框架中的内容启用一些额外的限制条件。 |\n| fullscreen | boolean | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否铺满整个页面，默认值：`true`。 |\n| webview-styles | **WebViewStyles** | {\"progress\":{\"color\":\"#00FF00\"}} | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"3.9\",\"4.11\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | webview 网络地址页面加载进度条样式 |\n@| 名称 | 类型 | 必备 | 默认值 | 描述 |\n@| :- | :- | :- | :- | :- |\n@| progress | **WebViewProgressStyles** \\| boolean | 是 | {\"color\": \"#00FF00\"} | 网络地址页面加载进度条样式，设置为 false 时表示不显示加载进度条。 |\n@@| 名称 | 类型 | 必备 | 描述 |\n@@| :- | :- | :- | :- |\n@@| color | [string.ColorString](/uts/data-type.md#ide-string) | 是 | 网页加载进度条颜色，默认值为 #00FF00 。 |\n@\n| horizontal-scroll-bar-access | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.11\",\"4.13\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 设置是否显示横向滚动条 |\n| vertical-scroll-bar-access | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.11\",\"4.13\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 设置是否显示纵向滚动条 |\n| bounces | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.61\",\"4.61\",\"4.63\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 设置是否开启回弹效果 |\n| android-nested-scroll | string | \"all\" | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.61\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 设置嵌套滚动方向 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| all | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.61\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 横向竖向均可嵌套滚动 |\n@| vertical | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.61\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 竖向可嵌套滚动 |\n@| horizontal | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.61\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 横向均可嵌套滚动 |\n@| none | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.61\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 横向竖向均不可嵌套滚动 |\n| associative-container | string | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"5.25\",\"5.25\",\"5.25\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 关联的滚动容器 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| nested-scroll-view | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"5.25\",\"5.25\",\"5.25\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 关联 scroll-view 滚动容器。在所有方向上优先滚动 scroll-view |\n| disable-user-select-menu | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"4.81\",\"4.84\",\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 设置是否禁用文本选择时弹出的系统菜单 |\n| ios-allows-inline-media-playback | boolean | false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"5.08\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 设置是否允许内联播放(禁止使用系统播放器全屏播放) |\n| dark-mode | boolean | true | <CompatibilityTable table='{\"headers\":[{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | |\n| @message | (event: [UniWebViewMessageEvent](#uniwebviewmessageevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 网页向应用 postMessage 时触发。e.detail = { data } |\n| @error | (event: [UniWebViewErrorEvent](#uniwebviewerrorevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 网页加载错误时触发。e.detail = { errSubject, errCode, errMsg, url, fullUrl, src } |\n| @load | (event: [UniWebViewLoadEvent](#uniwebviewloadevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.72\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 网页加载完成后触发。e.detail = { url, src } |\n| ~~@loaded~~ | (event: [UniWebViewLoadEvent](#uniwebviewloadevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 网页加载完成后触发。e.detail = { url, src }。已废弃，请改用load |\n| @loading | (event: [UniWebViewLoadingEvent](#uniwebviewloadingevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 网页开始加载时触发。e.detail = { url, src } |\n| @download | (event: [UniWebViewDownloadEvent](#uniwebviewdownloadevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 点击网页中可下载链接时触发。e.detail = { url, userAgent, contentDisposition, mimetype, contentLength } |\n| @contentheightchange | (event: [UniWebViewContentHeightChangeEvent](#uniwebviewcontentheightchangeevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"4.63\",\"4.63\",\"4.63\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 网页内容高度变化时触发。e.detail = { height } |\n| @didterminate | (event: [UniWebViewDidTerminateEvent](#uniwebviewdidterminateevent)) => void | | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"5.0\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 检测到web-view压后台再回来出现白屏时触发 |\n| @onWebViewServiceMessage | Event | | <CompatibilityTable table='{\"headers\":[{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | |","event":"\n### 事件\n#### UniWebViewMessageEvent\n\n```mermaid\ngraph LR\n \nUniWebViewMessageEvent -- Extends --> UniCustomEvent&ltUniWebViewMessageEventDetail&gt\n style UniCustomEvent&ltUniWebViewMessageEventDetail&gt color:#42b983\n click UniCustomEvent&ltUniWebViewMessageEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniWebViewMessageEvent 的属性值\n| 名称 | 类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| type | string | 是 | 事件类型，固定值message |\n\n\n##### UniWebViewMessageEventDetail\n\n\n###### UniWebViewMessageEventDetail 的属性值\n| 名称 | 类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| data | Array<[UTSJSONObject](/uts/buildin-object-api/utsjsonobject.md)> | 是 | 消息包含的数据，4.13版本之前类型为Map\\<string, any \\| null> \\| null，4.13版本（含）之后类型为Array\\<UTSJSONObject> |\n\n\n#### UniWebViewErrorEvent\n\n```mermaid\ngraph LR\n \nUniWebViewErrorEvent -- Extends --> UniCustomEvent&ltUniWebViewErrorEventDetail&gt\n style UniCustomEvent&ltUniWebViewErrorEventDetail&gt color:#42b983\n click UniCustomEvent&ltUniWebViewErrorEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniWebViewErrorEvent 的属性值\n| 名称 | 类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| type | string | 是 | 事件类型，固定值error |\n\n\n##### UniWebViewErrorEventDetail\n\n\n###### UniWebViewErrorEventDetail 的属性值\n| 名称 | 类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| errSubject | string | 是 | 统一错误主题（模块）名称，固定值uni-web-view |\n| errCode | number | 是 | 统一错误码<br/>100001 ssl error<br/>100002 page error<br/>100003 http error |\n| errMsg | string | 是 | 统一错误描述信息 |\n| url | string | 是 | 加载错误的网页链接，非完整链接，仅包含scheme://authority部分，4.13版本起支持 |\n| fullUrl | string | 是 | 加载错误的网页链接，完整链接，4.13版本起支持 |\n| src | string | 是 | 加载错误的网页链接，完整链接，4.13版本起支持 |\n\n###### 的属性值 @errcode-values\n| 合法值 |\n| :- |\n| 100001 |\n| 100002 |\n| 100003 |\n#### UniWebViewLoadEvent\n\n```mermaid\ngraph LR\n \nUniWebViewLoadEvent -- Extends --> UniCustomEvent&ltUniWebViewLoadEventDetail&gt\n style UniCustomEvent&ltUniWebViewLoadEventDetail&gt color:#42b983\n click UniCustomEvent&ltUniWebViewLoadEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniWebViewLoadEvent 的属性值\n| 名称 | 类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| type | string | 是 | 事件类型，固定值load |\n\n\n##### UniWebViewLoadEventDetail\n\n\n###### UniWebViewLoadEventDetail 的属性值\n| 名称 | 类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| ~~url~~ | string | 是 | 加载完成的网页链接 |\n| src | string | 是 | 加载完成的网页链接，4.13版本起支持 |\n\n\n#### UniWebViewLoadingEvent\n\n```mermaid\ngraph LR\n \nUniWebViewLoadingEvent -- Extends --> UniCustomEvent&ltUniWebViewLoadingEventDetail&gt\n style UniCustomEvent&ltUniWebViewLoadingEventDetail&gt color:#42b983\n click UniCustomEvent&ltUniWebViewLoadingEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniWebViewLoadingEvent 的属性值\n| 名称 | 类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| type | string | 是 | 事件类型，固定值loading |\n\n\n##### UniWebViewLoadingEventDetail\n\n\n###### UniWebViewLoadingEventDetail 的属性值\n| 名称 | 类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| ~~url~~ | string | 是 | 加载中的网页链接 |\n| src | string | 是 | 加载中的网页链接，4.13版本起支持 |\n\n\n#### UniWebViewDownloadEvent\n\n```mermaid\ngraph LR\n \nUniWebViewDownloadEvent -- Extends --> UniCustomEvent&ltUniWebViewDownloadEventDetail&gt\n style UniCustomEvent&ltUniWebViewDownloadEventDetail&gt color:#42b983\n click UniCustomEvent&ltUniWebViewDownloadEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniWebViewDownloadEvent 的属性值\n| 名称 | 类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| type | string | 是 | 事件类型，固定值download |\n\n\n##### UniWebViewDownloadEventDetail\n\n\n###### UniWebViewDownloadEventDetail 的属性值\n| 名称 | 类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| url | string | 是 | 下载链接 |\n| userAgent | string | 是 | 用户代理 |\n| contentDisposition | string | 是 | 指示回复的内容该以何种形式展示，是以内联的形式（即网页或者页面的一部分），还是以附件的形式下载并保存到本地 |\n| mimetype | string | 是 | 媒体类型 |\n| contentLength | number | 是 | 文件大小 |\n\n\n#### UniWebViewContentHeightChangeEvent\n\n```mermaid\ngraph LR\n \nUniWebViewContentHeightChangeEvent -- Extends --> UniCustomEvent&ltUniWebViewContentHeightChangeEventDetail&gt\n style UniCustomEvent&ltUniWebViewContentHeightChangeEventDetail&gt color:#42b983\n click UniCustomEvent&ltUniWebViewContentHeightChangeEventDetail&gt \"https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent\"\n```\n##### UniWebViewContentHeightChangeEvent 的属性值\n| 名称 | 类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| type | string | 是 | 事件类型，固定值contentheightchange |\n\n\n##### UniWebViewContentHeightChangeEventDetail\n\n\n###### UniWebViewContentHeightChangeEventDetail 的属性值\n| 名称 | 类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| height | number | 是 | 内容高度 |\n\n","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/web-view/web-view.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/web-view/web-view.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/web-view/web-view\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/web-view/web-view\n\n>示例\n```vue\n<template>\r\n <view class=\"uni-flex-item\">\r\n <web-view id=\"web-view\" class=\"uni-flex-item\" :style=\"webViewStyle\" :src=\"data.src\"\r\n :webview-styles=\"{ progress: {color:data.webview_progress_color} }\" :horizontalScrollBarAccess=\"data.horizontalScrollBarAccess\" :verticalScrollBarAccess=\"data.verticalScrollBarAccess\"\r\n :bounces=\"data.bounces\" :disable-user-select-menu=\"data.disableUserSelectMenu\" @message=\"message\" @error=\"error\" @loading=\"loading\"\r\n @load=\"load\" @download=\"download\" @contentheightchange=\"contentheightchange\" @touchstart=\"touchstart\" @tap=\"tap\">\r\n </web-view>\r\n \r\n <view class=\"uni-padding-wrap uni-common-mt\">\r\n <view class=\"uni-btn-v\">\r\n <input class=\"uni-input\" confirmType=\"go\" placeholder=\"输入网址跳转\" @confirm=\"confirm\" :maxlength=\"-1\" />\r\n </view>\r\n <view class=\"uni-row uni-btn-v\">\r\n <button class=\"uni-flex-item\" type=\"primary\" :disabled=\"!data.canGoBack\" @click=\"back\">后退</button>\r\n <button class=\"margin-left-5 uni-flex-item\" type=\"primary\" :disabled=\"!data.canGoForward\"\r\n @click=\"forward\">前进</button>\r\n </view>\r\n <view class=\"uni-row uni-btn-v\">\r\n <button class=\"uni-flex-item\" type=\"primary\" @click=\"reload\">重新加载</button>\r\n <button class=\"margin-left-5 uni-flex-item\" type=\"primary\" @click=\"stop\">停止加载</button>\r\n </view>\r\n <view class=\"uni-row uni-btn-v\">\r\n <button class=\"uni-flex-item\" type=\"primary\" @click=\"nativeToWeb\">原生和Web通信</button>\r\n \r\n <button class=\"margin-left-5 uni-flex-item\" type=\"primary\" @click=\"getContentHeight\">获取内容高度</button>\r\n \r\n </view>\r\n <view class=\"uni-row uni-btn-v\">\r\n <button class=\"uni-flex-item\" type=\"primary\" @click=\"loadData\">加载页面内容</button>\r\n \r\n <button id=\"half-screen-toggle\" class=\"margin-left-5 uni-flex-item\" type=\"primary\" @click=\"setHalfScreen\">宽窄屏切换</button>\r\n </view>\r\n <view class=\"uni-btn-v\">\r\n <navigator url=\"/pages/component/web-view/web-view-scroll\">\r\n <button type=\"primary\">scroll-view嵌套web-view</button>\r\n </navigator>\r\n </view>\r\n \r\n <view class=\"uni-btn-v\">\r\n <navigator url=\"/pages/component/web-view/web-view-associative-container\">\r\n <button type=\"primary\">associative-container嵌套滚动</button>\r\n </navigator>\r\n </view>\r\n \r\n \r\n <view class=\"uni-row uni-btn-v\">\r\n <view class=\"uni-row uni-flex-item align-items-center\">\r\n <text>显示横向滚动条</text>\r\n <switch :checked=\"true\" @change=\"changeHorizontalScrollBarAccess\"></switch>\r\n </view>\r\n <view class=\"uni-row uni-flex-item align-items-center\">\r\n <text>显示竖向滚动条</text>\r\n <switch :checked=\"true\" @change=\"changeVerticalScrollBarAccess\"></switch>\r\n </view>\r\n </view>\r\n <view class=\"uni-row uni-btn-v\">\r\n <view class=\"uni-row uni-flex-item align-items-center\">\r\n <text>开启bounces</text>\r\n <switch :checked=\"true\" @change=\"changeBounces\"></switch>\r\n \r\n <text>禁用选择菜单</text>\r\n <switch :checked=\"false\" @change=\"changeDisableUserSelectMenu\"></switch>\r\n \r\n </view>\r\n </view>\r\n \r\n \r\n <view class=\"uni-row uni-btn-v\" v-if=\"isProd() === false\">\r\n <view class=\"uni-row uni-flex-item align-items-center\">\r\n <text>前进、后退功能在Windows端需要打自定义基座，MAC端需要配置Xcode环境后进行真机运行或者打自定义基座</text>\r\n </view>\r\n </view>\r\n \r\n </view>\r\n \n\n <bottom-safe-area />\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n // #ifdef APP\r\n import { canWebViewGoBack, canWebViewGoForward, hasNativeView } from '@/uni_modules/uts-get-native-view';\r\n // #endif\r\n\r\n type DataType = {\r\n src: string;\r\n webview_progress_color: string;\r\n halfWindowMode: boolean;\r\n webviewContext: WebviewContext | null;\r\n loadError: boolean;\r\n horizontalScrollBarAccess: boolean;\r\n verticalScrollBarAccess: boolean;\r\n bounces: boolean;\r\n disableUserSelectMenu: boolean;\r\n canGoBack: boolean;\r\n canGoForward: boolean;\r\n autoTest: boolean;\r\n eventLoading: UTSJSONObject | null;\r\n eventLoad: UTSJSONObject | null;\r\n eventError: UTSJSONObject | null;\r\n eventContentHeightChange: UTSJSONObject | null;\r\n pointerEvents: string;\r\n isTouchEnable: boolean;\r\n loadingCount: number;\r\n }\r\n // 使用reactive避免ref数据在自动化测试中无法访问\r\n const data = reactive({\r\n src: 'https://www.dcloud.io',\r\n webview_progress_color:'#FF3333',\r\n halfWindowMode: false,\r\n webviewContext: null as WebviewContext | null,\r\n loadError: false,\r\n horizontalScrollBarAccess: true,\r\n verticalScrollBarAccess: true,\r\n bounces: true,\r\n disableUserSelectMenu: false,\r\n canGoBack: false,\r\n canGoForward: false,\r\n autoTest: false,\r\n eventLoading: null as UTSJSONObject | null,\r\n eventLoad: null as UTSJSONObject | null,\r\n eventError: null as UTSJSONObject | null,\r\n eventContentHeightChange: null as UTSJSONObject | null,\r\n pointerEvents: 'auto',\r\n isTouchEnable: false,\r\n loadingCount: 0\r\n } as DataType)\r\n\r\n let webviewElement = null as UniWebViewElement | null\r\n let webviewContext = null as WebViewContext | null\r\n const fullScreen = computed(() => {\r\n return !data.halfWindowMode\r\n })\r\n\r\n const webViewStyle = computed(() => {\r\n return {\r\n width: data.halfWindowMode ? '50%' : '100%',\r\n 'pointer-events': data.pointerEvents\r\n }\r\n })\r\n\r\n const getPackageName = (): string => {\r\n let packageName: string = \"\"\r\n\r\n // #ifdef APP-IOS\r\n const res = uni.getAppBaseInfo();\r\n packageName = res.bundleId\r\n // #endif\r\n\r\n return packageName\r\n }\r\n\r\n const isProd = (): boolean => {\r\n if (getPackageName() == 'io.dcloud.hellouniappx') {\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n const setHalfScreen = () => {\r\n data.halfWindowMode = !data.halfWindowMode\r\n }\r\n\r\n const back = () => {\r\n webviewContext?.back();\r\n }\r\n\r\n const forward = () => {\r\n webviewContext?.forward();\r\n }\r\n\r\n const reload = () => {\r\n data.loadingCount = 0\r\n webviewContext?.reload();\r\n }\r\n\r\n const stop = () => {\r\n webviewContext?.stop();\r\n }\r\n\r\n const nativeToWeb = () => {\r\n webviewContext?.evalJS(\"alert('hello uni-app x')\");\r\n }\r\n\r\n // #ifdef APP-ANDROID || APP-IOS || APP-HARMONY\r\n const getContentHeight = (): number => {\r\n const height = webviewContext?.getContentHeight() ?? 0;\r\n console.log('contentHeight', height);\r\n if (!data.autoTest) {\r\n uni.showModal({\r\n content: ' 当前内容高度: ' + height,\r\n showCancel: false\r\n });\r\n }\r\n return height;\r\n }\r\n\r\n const loadData = () => {\r\n // webviewElement\r\n\r\n const options: UniWebviewContextLoadDataOptions = {\r\n data: '<p><a href=\"https://www.dcloud.io/hbuilderx.html\">HBuilderX</a><br/><img src=\"/unidoc/zh/uni@2x.png\"></img><h1>HBuilderX，轻巧、极速，极客编辑器</h1><p style=\"color:red;\"><small>HBuilderX，轻巧、极速，极客编辑器 </small><big>HBuilderX，轻巧、极速，极客编辑器</big><strong>HBuilderX，轻巧、极速，极客编辑器</strong><i>HBuilderX，轻巧、极速，极客编辑器 </i><u>HBuilderX，轻巧、极速，极客编辑器</u><del>HBuilderX，轻巧、极速，极客编辑器</del></p><h2>uni-app x，终极跨平台方案</h2>、<p style=\"background-color: yellow;\"><small>uni-app x，终极跨平台方案 </small><big>uni-app x，终极跨平台方案</big><strong>uni-appx，终极跨平台方案 </strong><i>uni-app x，终极跨平台方案 </i><u>uni-app x，终极跨平台方案 </u><del>uni-appx，终极跨平台方案</del></p><h3>uniCloud，js serverless云服务</h3><p style=\"text-decoration: line-through;\"><small>uniCloud，js serverless云服务 </small><big>uniCloud，jsserverless云服务</big><strong>uniCloud，js serverless云服务 </strong><i>uniCloud，js serverless云服务 </i><u>uniCloud，jsserverless云服务</u><del>uniCloud，js serverless云服务</del></p><h4>uts，大一统语言</h4><p style=\"text-align: center;\"><small>uts，大一统语言 </small><big>uts，大一统语言 </big><strong>uts，大一统语言</strong><i>uts，大一统语言</i><u>uts，大一统语言 </u><del>uts，大一统语言</del></p><h5>uniMPSdk，让你的App具备小程序能力</h5><h6>uni-admin，开源、现成的全端管理后台</h6><ul><li style=\"color: red; text-align: left;\">uni-app x，终极跨平台方案</li><li style=\"color: green; text-align: center;\">uni-app x，终极跨平台方案</li><li style=\"color: blue; text-align: right;\">uni-app x，终极跨平台方案</li></ul><a href=\"https://uniapp.dcloud.net.cn\">uni-app</a><br/><img src=\"/unidoc/zh/uni@2x.png\"></img></p>',\r\n baseURL: 'https://qiniu-web-assets.dcloud.net.cn'\r\n }\r\n webviewContext?.loadData(options)\r\n // webviewElement?.loadData(options)\r\n }\r\n // #endif\r\n\r\n const message = (event: UniWebViewMessageEvent) => {\r\n console.log(JSON.stringify(event.detail));\r\n }\r\n\r\n const error = (event: UniWebViewErrorEvent) => {\r\n data.loadError = true\r\n console.log(JSON.stringify(event.detail));\r\n if (data.autoTest) {\r\n data.eventError = {\r\n \"tagName\": event.target?.tagName,\r\n \"type\": event.type,\r\n \"errCode\": event.detail.errCode,\r\n \"errMsg\": event.detail.errMsg,\r\n \"url\": event.detail.url,\r\n \"fullUrl\": event.detail.fullUrl,\r\n \"src\": event.detail.src\r\n };\r\n }\r\n }\r\n\r\n const loading = (event: UniWebViewLoadingEvent) => {\r\n data.loadingCount++\r\n // console.log(JSON.stringify(event.detail));\r\n // #ifndef APP-HARMONY\r\n // 鸿蒙平台在页面加载完成后，重复调用 reload 不会触发 loading 事件\r\n if (data.autoTest) {\r\n // #endif\r\n data.eventLoading = {\r\n \"tagName\": event.target?.tagName,\r\n \"type\": event.type,\r\n \"src\": event.detail.src\r\n };\r\n // #ifndef APP-HARMONY\r\n }\r\n // #endif\r\n }\r\n\r\n const load = (event: UniWebViewLoadEvent) => {\r\n console.log(JSON.stringify(event.detail));\r\n // #ifdef APP\r\n data.canGoBack = canWebViewGoBack('web-view');\r\n data.canGoForward = canWebViewGoForward('web-view');\r\n // #endif\r\n // #ifndef APP-HARMONY\r\n // 鸿蒙平台在页面加载完成后，重复调用 reload 不会触发 loading 事件\r\n if (data.autoTest) {\r\n // #endif\r\n data.eventLoad = {\r\n \"tagName\": event.target?.tagName,\r\n \"type\": event.type,\r\n \"src\": event.detail.src,\r\n \"url\": event.detail.url,\r\n };\r\n // #ifndef APP-HARMONY\r\n }\r\n // #endif\r\n }\r\n\r\n const download = (event: UniWebViewDownloadEvent) => {\r\n console.log(JSON.stringify(event.detail));\r\n uni.showModal({\r\n content: \"下载链接: \" + event.detail.url + \"\\n文件大小: \" + event.detail.contentLength / 1024 + \"KB\",\r\n showCancel: false\r\n });\r\n }\r\n\r\n const contentheightchange = (event: UniWebViewContentHeightChangeEvent) => {\r\n console.log(JSON.stringify(event.detail));\r\n data.eventContentHeightChange = {\r\n \"tagName\": event.target?.tagName,\r\n \"type\": event.type,\r\n \"isValidHeight\": event.detail.height > 0\r\n };\r\n }\r\n\r\n const confirm = (event: UniInputConfirmEvent) => {\r\n let url = event.detail.value;\r\n if (!url.startsWith('https://') && !url.startsWith('http://')) {\r\n url = 'https://' + url;\r\n }\r\n data.src = url;\r\n }\r\n\r\n const changeHorizontalScrollBarAccess = (event: UniSwitchChangeEvent) => {\r\n data.horizontalScrollBarAccess = event.detail.value;\r\n }\r\n\r\n const changeVerticalScrollBarAccess = (event: UniSwitchChangeEvent) => {\r\n data.verticalScrollBarAccess = event.detail.value;\r\n }\r\n\r\n const changeBounces = (event: UniSwitchChangeEvent) => {\r\n data.bounces = event.detail.value;\r\n }\r\n\r\n const changeDisableUserSelectMenu = (event: UniSwitchChangeEvent) => {\r\n data.disableUserSelectMenu = event.detail.value;\r\n }\r\n\r\n const touchstart = (event: UniTouchEvent) => {\r\n if (data.autoTest) {\r\n data.isTouchEnable = event.touches[0].clientX > 0 && event.touches[0].clientY > 0;\r\n }\r\n }\r\n\r\n const tap = (event: UniPointerEvent) => {\r\n if (data.autoTest) {\r\n data.isTouchEnable = event.clientX > 0 && event.clientY > 0;\r\n }\r\n }\r\n\r\n const checkNativeWebView = (): boolean => {\r\n // #ifdef APP\r\n return hasNativeView('web-view')\r\n // #endif\r\n // #ifdef WEB\r\n return true\r\n // #endif\r\n }\r\n\r\n const checkLoadingCount = () => {\r\n // #ifndef APP-HARMONY\r\n // 鸿蒙平台在页面加载完成后，重复调用 reload 不会触发 loading 事件\r\n data.loadingCount = 0\r\n // #endif\r\n // webviewContext?.reload();\r\n webviewContext?.reload();\r\n }\r\n\r\n const currentInstance = getCurrentInstance()\r\n\r\n onReady(() => {\r\n // TODO web 实现createWebviewContext\r\n // #ifdef APP\r\n webviewContext = uni.createWebViewContext('web-view', currentInstance?.proxy)\r\n console.log(\"webviewContext:\",webviewContext)\r\n // NOTE 绑定到 this 上会被代理导致无法调用方法\r\n webviewElement = uni.getElementById('web-view') as UniWebViewElement //推荐使用element，功能更丰富\r\n console.log(\"webviewElement:\",webviewElement)\r\n // console.log('url: ',this.webviewContext?.getAttribute(\"src\"));\r\n // this.webviewContext?.setAttribute(\"src\",\"https://ext.dcloud.net.cn/\")\r\n // #endif\r\n })\r\n\r\n onUnload(() => {\r\n webviewElement = null;\n webviewContext = null;\r\n })\r\n\r\n defineExpose({\r\n data,\r\n reload,\r\n checkNativeWebView,\r\n checkLoadingCount,\r\n // #ifdef APP-ANDROID || APP-IOS || APP-HARMONY\r\n getContentHeight,\r\n loadData\r\n // #endif\r\n })\r\n</script>\r\n\r\n<style>\r\n .margin-left-5 {\r\n margin-left: 5px;\r\n }\r\n\r\n .align-items-center {\r\n align-items: center;\r\n }\r\n</style>\r\n\n```\n\n:::","children":"### 子组件 @children-tags\n不可以嵌套组件","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.web-view.web-view)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/web-view.html)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=web-view&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=web-view&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=web-view&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=web-view&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=web-view)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=web-view&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"page-meta":{"name":"::: sourceCode\n## page-meta\n:::","originName":"## page-meta","description":"页面元数据，用于设置页面的一些属性，如背景色、下拉刷新等","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.41 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- | :-: | :- |\n| background-text-style | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 下拉背景字体、loading 图的样式，仅支持 dark 和 light |\n| background-color | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 窗口的背景色，必须为十六进制颜色值 |\n| background-color-top | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 顶部窗口的背景色，必须为十六进制颜色值，仅 iOS(uni-app) 支持 |\n| background-color-bottom | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 底部窗口的背景色，必须为十六进制颜色值，仅 iOS(uni-app) 支持 |\n| scroll-top | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 滚动位置，可以使用 px 或者 rpx 为单位，在被设置时，页面会滚动到对应位置（WebView 特有属性） |\n| scroll-duration | number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 滚动动画时长（WebView 特有属性） |\n| page-style | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 页面根节点样式，页面根节点是所有页面节点的祖先节点，相当于 HTML 中的 body 节点 |\n| root-font-size | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 页面的根字体大小，页面中的所有 rem 单位，将使用这个字体大小作为参考值，即 1rem 等于这个字体大小 |\n| root-background-color | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>页面内容的背景色，用于页面中的空白部分和页面大小变化 resize 动画期间的临时空闲区域 |\n| page-font-size | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>页面 page 的字体大小，可以设置为 `system` ，表示使用当前用户设置的微信字体大小 |\n| page-orientation | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>页面的方向，可为 `auto` `portrait` 或 `landscape` |\n| @resize | (event: [UniEvent](/component/common.md#unievent)) => void | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 页面尺寸变化时会触发 resize 事件， event.detail = { size: { windowWidth, windowHeight } } |\n| @scroll | (event: [UniEvent](/component/common.md#unievent)) => void | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 页面滚动时会触发 scroll 事件， event.detail = { scrollTop }（WebView 特有属性） |\n| @scrolldone | (event: [UniEvent](/component/common.md#unievent)) => void | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 如果通过改变 scroll-top 属性来使页面滚动，页面滚动结束后会触发 scrolldone 事件（WebView 特有属性） |","event":"","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/page-meta/page-meta.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/page-meta/page-meta.uvue) \n>\n> 该 API 不支持 Web，请运行 hello uni-app x 到 App 平台体验 \n```uvue\n<template>\n <page-meta\n :background-text-style=\"data.bgTextStyle\"\n :background-color=\"data.bgColor\"\n :background-color-top=\"data.bgColorTop\"\n :background-color-bottom=\"data.bgColorBottom\"\n :scroll-top=\"data.scrollTop\"\n :scroll-duration=\"2000\"\n @scroll=\"scroll\"\n @scrolldone=\"scrolldone\"\n page-style=\"color: green\"\n root-font-size=\"30px\"\n >\n <navigation-bar\n :title=\"data.nbTitle\"\n :loading=\"data.nbLoading\"\n :front-color=\"data.nbFrontColor\"\n :background-color=\"data.nbBackgroundColor\"\n />\n </page-meta>\n <view class=\"content\">\n <page-intro content=\"本页演示 page-meta 与 navigation-bar：配置页面背景色、滚动、导航栏标题与样式，通过按钮触发滚动到指定位置并监听 scroll 与 scrolldone。\"></page-intro>\n <text class=\"title\">页面内容</text>\n <button @click=\"scrollTo\">点击跳到 300px 处</button>\n <view class=\"uni-list\" v-for=\"(_, index) in 30\" :key=\"index\">\n <view class=\"uni-list-cell\">{{ index }}</view>\n </view>\n </view>\n</template>\n\n<script setup lang=\"uts\">\n type DataType = {\n bgTextStyle: string,\n scrollTop: string,\n bgColor: string,\n bgColorTop: string,\n bgColorBottom: string,\n nbTitle: string,\n nbLoading: boolean,\n nbFrontColor: string,\n nbBackgroundColor: string,\n scrollType: string | null,\n scrolldoneType: string | null,\n }\n\n // 使用reactive避免ref数据在自动化测试中无法访问\n const data = reactive({\n bgTextStyle: 'dark',\n scrollTop: '0px',\n bgColor: '#ff0000',\n bgColorTop: '#00ff00',\n bgColorBottom: '#0000ff',\n nbTitle: '标题',\n nbLoading: false,\n nbFrontColor: '#ffffff',\n nbBackgroundColor: '#00aaff',\n scrollType: null as string | null,\n scrolldoneType: null as string | null,\n } as DataType)\n\n // Methods\n function scrollTo() {\n data.scrollTop = '300px'\n }\n\n function scroll(e : any) {\n data.scrollType = e.type\n }\n\n function scrolldone(e : any) {\n data.scrolldoneType = e.type\n }\n\n // Lifecycle\n onLoad(() => {\n setTimeout(() => {\n data.nbLoading = true\n }, 2000)\n })\n\n defineExpose({\n data\n })\n</script>\n\n```","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.page-meta.page-meta)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/page-meta.html)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=page-meta&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=page-meta&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=page-meta&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=page-meta&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=page-meta)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=page-meta&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"navigation-bar":{"name":"::: sourceCode\n## navigation-bar\n:::","originName":"## navigation-bar","description":"页面导航条配置节点","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| √ | 4.41 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- | :-: | :- |\n| title | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 导航条标题 |\n| title-icon | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 标题icon |\n| titleIcon-radius | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 标题icon圆角 |\n| subtitle-text | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 副标题文字内容，显示在主标题下方 |\n| subtitle-size | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 副标题文字字体大小，如 14px |\n| subtitle-color | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 副标题文字颜色，支持 #RRGGBB 或 rgba 格式 |\n| subtitle-overflow | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 副标题超出显示区域时的处理方式，支持 clip 和 ellipsis |\n| title-align | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 标题对齐方式，支持 center、left 和 auto |\n| background-image | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 导航条背景图片路径或线性渐变 |\n| background-repeat | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 背景图片重复方式，支持 repeat、repeat-x、repeat-y 和 no-repeat |\n| blur-effect | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 标题栏背景高斯模糊效果，支持 dark、extralight、light 和 none |\n| loading | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否在导航条显示 loading 加载提示 |\n| front-color | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 导航条前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000 |\n| background-color | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 导航条背景颜色值，有效值为十六进制颜色 |\n| color-animation-duration | number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 改变导航栏颜色时的动画时长，默认为 0 （即没有动画效果） |\n| color-animation-timing-func | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 改变导航栏颜色时的动画方式，支持 linear 、 easeIn 、 easeOut 和 easeInOut |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.page-meta.navigation-bar)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/navigation-bar.html)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/navigation-bar.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=navigation-bar&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=navigation-bar&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=navigation-bar&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=navigation-bar&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=navigation-bar)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=navigation-bar&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"custom-tab-bar":{"name":"::: sourceCode\n## custom-tab-bar\n:::","originName":"## custom-tab-bar","description":"自定义tabBar","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.24 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- | :-: | :- |\n| direction | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 选项的排列方向 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| horizontal | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"NOT_SUPPORTED\"}' /> | 选项的排列方向水平 |\n@| vertical | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"NOT_SUPPORTED\"}' /> | 选项的排列方向垂直 |\n| show-icon | boolean | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否显示icon |\n| selected | number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 选中的tabBar选项索引值 |\n| @onTabItemTap | (event: [OnTabItemTapOption](#ontabitemtapoption)) => void | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 点击自定义 tabBar 触发事件，detail = {index, pagePath, text} |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.page-meta.custom-tab-bar)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/component/custom-tab-bar.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=custom-tab-bar&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=custom-tab-bar&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=custom-tab-bar&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=custom-tab-bar&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=custom-tab-bar&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=custom-tab-bar)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=custom-tab-bar&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"unicloud-db":{"name":"::: sourceCode\n## unicloud-db\n:::","originName":"## unicloud-db","description":"> 组件类型：[UniCloudDBElement](#uniclouddbelement) \n\n 是一个数据库查询组件，它将clientDB的API封装为组件，进一步减少开发者使用所需的代码量。","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | 3.93 | 4.11 | 4.61 |\n","attribute":"### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- | :-: | :- |\n| id | string([string.IDString](/uts/data-type.md#ide-string)) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"-\",\"-\",\"-\",\"-\",\"-\",\"-\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 唯一标识 |\n| v-slot:default | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | {data, loading, hasMore, pagination, error} |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| data | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 查询结果，类型为Array\\<UTSJSONObject> |\n@| loading | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 查询中的状态。可根据此状态，在template中通过v-if显示等待内容 |\n@| hasMore | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 是否有更多数据。可根据此状态，在template中通过v-if显示没有更多数据了 |\n@| error | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 查询错误。可根据此状态，在template中通过v-if显示等待内容 |\n@| pagination | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 分页属性 |\n@@| 合法值 | 描述 |\n@@| :- | :- |\n@@| current | 当前页号 |\n@@| size | 分页大小 |\n@@| count | 数据库的总数据量, 设置 :getcount=true 时有效 |\n| collection | string([string.DBCollectionString](/uts/data-type.md#ide-string)) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 表名 |\n| field | string([string.DBFieldString](/uts/data-type.md#ide-string)) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 查询字段，多个字段用 `,` 分割 |\n| where | string([string.JQLString](/uts/data-type.md#ide-string)) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 查询条件 |\n| orderby | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 排序字段及正序倒序设置 |\n| groupby | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 对数据进行分组 |\n| group-field | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 对数据进行分组统计 |\n| distinct | boolean | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.93\",\"4.11\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否对数据查询结果中重复的记录进行去重 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| true | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"-\",\"4.41\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 去重 |\n@| false | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS 系统版本\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"-\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\",\"-\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 不去重 |\n| page-data | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | add 多次查询的集合, replace 当前查询的集合 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| add | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"-\",\"4.41\",\"-\",\"-\",\"-\",\"-\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 多次查询的集合 |\n@| replace | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android 系统版本\"},{\"title\":\"Android\"},{\"title\":\"iOS 系统版本\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"-\",\"-\",\"-\",\"-\",\"-\",\"-\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 当前查询的集合 |\n| page-current | number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 当前页 |\n| page-size | number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 每页数据数量 |\n| getone | boolean | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 指定查询结果是否返回数组第一条数据，默认 false。在false情况下返回的是数组，即便只有一条结果，也需要\\[0]的方式获取。在true下，直接返回结果数据，少一层数组 |\n| getcount | boolean | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 是否查询总数量 |\n| gettree | boolean | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 是否查询树状结构数据 |\n| startwith | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | gettree的第一层级条件，此初始条件可以省略，不传startWith时默认从最顶级开始查询 |\n| limitlevel | number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | gettree查询返回的树的最大层级。超过设定层级的节点不会返回。默认10级，最大15，最小1 |\n| manual | boolean | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 是否手动加载数据，默认为 false，页面onLoad时自动联网加载数据 |\n| loadtime | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 加载数据时机，默认auto，可选值 auto\\|onready\\|manual |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| auto | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 页面就绪后或属性变化后加载数据，默认为auto |\n@| onready | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 页面就绪后不自动加载数据，属性变化后加载。适合在onLoad中接收上个页面的参数作为where条件时 |\n@| manual | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 手动模式，不自动加载数据。如果涉及到分页，需要先手动修改当前页，在调用加载数据 |\n| ~~action~~ | string([string.ClientDBActionString](/uts/data-type.md#ide-string)) | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 云端执行数据库查询的前或后，触发某个action函数操作，进行预处理或后处理(推荐改用JQL触发器) |\n| @load | (data : Array\\<UTSJSONObject>, ended : boolean, pagination : [UTSJSONObject](/uts/buildin-object-api/utsjsonobject.md)) => void | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 成功回调。如联网返回结果后，想修改下数据再渲染界面，则在本方法里对data进行修改 |\n| @error | (event: [UniEvent](/component/common.md#unievent)) => void | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.93\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 失败回调 |","event":"","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/unicloud-db/unicloud-db.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/unicloud-db/unicloud-db.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/unicloud-db/unicloud-db\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/unicloud-db/unicloud-db\n\n>示例\n```vue\n<template>\r\n <view class=\"content\">\r\n <page-intro content=\"本页演示 unicloud-db 云数据库组件：集合查询、分页与 loadtime manual，列表展示与 Add/Get 操作，可跳转通讯录等 mixin-datacom 示例。\"></page-intro>\r\n <unicloud-db ref=\"udbRef\" v-slot:default=\"{data, pagination, loading, error}\" :collection=\"collection\" :getcount=\"true\"\r\n loadtime=\"manual\">\r\n <list-view v-if=\"data.length>0\" ref=\"listViewRef\" class=\"list\" :scroll-y=\"true\" @scrolltolower=\"loadMore()\">\r\n <list-item class=\"list-item\" v-for=\"(item, _) in data\" :key=\"item.getString('_id')\">\r\n <view class=\"list-item-fill\">\r\n <text>{{item}}</text>\r\n </view>\r\n <view>\r\n <text class=\"list-item-remove\" @click=\"remove(item.getString('_id')!)\">❌</text>\r\n </view>\r\n </list-item>\r\n </list-view>\r\n <text class=\"loading\" v-if=\"loading\">Loading...</text>\r\n <view v-if=\"error!=null\">{{error.errMsg}}</view>\r\n <view class=\"pagination\" v-if=\"data.length>0\">\r\n <text class=\"pagination-item\">{{data.length}} / {{pagination.count}}</text>\r\n </view>\r\n </unicloud-db>\r\n <view class=\"btn-group\">\r\n <button class=\"btn\" @click=\"add()\">Add</button>\r\n <button class=\"btn\" @click=\"get()\">Get</button>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n\r\nconst db = uniCloud.databaseForJQL()\r\n\r\n// Template refs\r\nconst udbRef = ref<UniCloudDBElement | null>(null)\r\nconst listViewRef = ref<UniListViewElement | null>(null)\r\n\r\n// Data\r\nconst collection = ref('unicloud-db-test')\r\nconst collectionList = ref([\r\n db.collection('book').where('name == \"水浒传\"').getTemp(),\r\n] as UTSJSONObject[])\r\nconst isTesting = ref(false)\r\nconst addResult = ref({})\r\nconst updateResult = ref({})\r\nconst removeResult = ref({})\r\n\r\n// Methods\r\nfunction loadMore() {\r\n udbRef.value!.loadMore()\r\n}\r\n\r\nfunction get() {\r\n udbRef.value!.loadData({\r\n clear: true\r\n })\r\n}\r\n\r\nfunction showError(err : any | null) {\r\n const error = err as UniCloudError\r\n uni.showModal({\r\n content: error.errMsg,\r\n showCancel: false\r\n })\r\n}\r\n\r\nfunction add() {\r\n const value = {\r\n title: \"title-\" + Date.now(),\r\n comment: \"comment\" + Date.now()\r\n }\r\n udbRef.value!.add(value, {\r\n showToast: false,\r\n success: (res : UniCloudDBAddResult) => {\r\n addResult.value = {\r\n id: res.id\r\n }\r\n get()\r\n },\r\n fail: (err : any | null) => {\r\n showError(err)\r\n }\r\n })\r\n}\r\n\r\nfunction update(id : string) {\r\n const value = {\r\n title: \"title-\" + Date.now(),\r\n comment: \"comment\" + Date.now()\r\n }\r\n udbRef.value!.update(id, value, {\r\n showToast: false,\r\n needLoading: true,\r\n needConfirm: false,\r\n loadingTitle: \"正在更新...\",\r\n success: (res : UniCloudDBUpdateResult) => {\r\n updateResult.value = {\r\n updated: res.updated\r\n }\r\n },\r\n fail: (err : any | null) => {\r\n showError(err)\r\n }\r\n })\r\n}\r\n\r\nfunction remove(id : string) {\r\n udbRef.value!.remove(id, {\r\n showToast: false,\r\n needConfirm: false,\r\n needLoading: false,\r\n success: (res : UniCloudDBRemoveResult) => {\r\n removeResult.value = {\r\n deleted: res.deleted\r\n }\n get()\r\n },\r\n fail: (err : any | null) => {\r\n showError(err)\r\n }\r\n })\r\n}\r\n\r\nfunction onQueryLoad(data : Array<UTSJSONObject>, ended : boolean, pagination : UTSJSONObject) {\r\n console.log(data, ended, pagination)\r\n}\r\n\r\n// Lifecycle\r\nonReady(() => {\r\n get()\r\n})\r\n\r\nonPullDownRefresh(() => {\r\n udbRef.value!.loadData({\r\n clear: true,\r\n success: (_ : UniCloudDBGetResult) => {\r\n uni.stopPullDownRefresh()\r\n }\r\n })\r\n})\n\n// #ifdef VUE3-VAPOR\nlet checkMethods = false\n\nfunction checkUdbRefMethods() : boolean {\n const udb = udbRef.value\n if (udb == null) {\n checkMethods = false\n return checkMethods\n }\n\n const hasLoadData = udb.loadData != null\n const hasLoadMore = udb.loadMore != null\n const hasAdd = udb.add != null\n const hasRemove = udb.remove != null\n const hasUpdate = udb.update != null\n\n checkMethods = hasLoadData && hasLoadMore && hasAdd && hasRemove && hasUpdate\n return checkMethods\n}\n\ndefineExpose({\n checkUdbRefMethods\n})\n\n// #endif\n\r\n</script>\r\n\r\n<style>\r\n .content {\r\n flex: 1;\r\n flex-direction: column;\r\n }\r\n\r\n .list {\r\n flex: 1;\r\n flex-direction: column;\r\n }\r\n\r\n .list-item {\r\n flex-direction: row;\r\n padding: 10px;\r\n }\r\n\r\n .list-item-fill {\r\n flex: 1;\r\n }\r\n\r\n .list-item-remove {\r\n padding: 10px;\r\n }\r\n\r\n .loading {\r\n padding: 10px;\r\n text-align: center;\r\n }\r\n\r\n .pagination {\r\n flex-direction: row;\r\n background-color: #f2f2f2;\r\n }\r\n\r\n .pagination-item {\r\n margin: auto;\r\n padding: 5px 10px;\r\n }\r\n\r\n .btn-group {\r\n flex-direction: row;\r\n }\r\n\r\n .btn {\r\n flex: 1;\r\n margin: 10px;\r\n }\r\n</style>\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.unicloud.unicloud-db)\n- [unicloud-db组件教程](https://doc.dcloud.net.cn/uniCloud/unicloud-db.html)\n- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=unicloud-db&doc_type=miniprogram)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=unicloud-db&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=unicloud-db&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=unicloud-db&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=unicloud-db&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=unicloud-db)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=unicloud-db&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)","component_type":"### UniCloudDBElement\n\n#### UniCloudDBElement 的属性值\n| 名称 | 类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| dataList | Array\\<UTSJSONObject> | 是 | 已加载的数据 |\n#### UniCloudDBElement 的方法\n##### loadData(options?: UTSJSONObject): void @loaddata\n加载数据\n当 \\<unicloud-db> 组件的 manual 属性设为 true 或者 loadtime 属性设置为 manual 时，不会在页面初始化时联网查询数据，此时需要通过本方法在需要的时候手动加载数据。\n\n##### 参数 \n\n| 名称 | 类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| options | **UniCloudDBComponentLoadDataOptions** | 否 | 可选参数 |\n@| 名称 | 类型 | 必备 | 默认值 | 描述 |\n@| :- | :- | :- | :- | :- |\n@| clear | boolean | 否 | false | 是否清空数据 |\n@| current | number | 否 | | 当前第几页 |\n@| success | (res?: [UniCloudDBGetResult](#uniclouddbgetresult-values)) => void | 否 | | 成功回调 |\n@| fail | (err?: any) => void | 否 | | 失败回调 |\n@| complete | () => void | 否 | | 完成回调 | \n\n###### UniCloudDBGetResult 的属性值 @uniclouddbgetresult-values \n\n| 名称 | 类型 | 必备 | 描述 |\n| :- | :- | :- | :- |\n| data | Array<[UTSJSONObject](/uts/buildin-object-api/utsjsonobject.md)> | 是 | 添加的记录的id列表 |\n| count | number | 否 | 匹配到的数据总量 |\n| requestId | string | 否 | 请求id |\n\n\n\n\n##### loadMore(): void @loadmore\n加载更多数据\n在列表的加载下一页场景下，使用ref方式访问组件方法，加载更多数据，每加载成功一次，当前页 +1\n\n\n\n\n\n##### add(value: UTSJSONObject, options?: UTSJSONObject): void @add\n新增数据\n\n##### 参数 \n\n| 名称 | 类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| value | [UTSJSONObject](/uts/buildin-object-api/utsjsonobject.md) | 是 | 新增数据. |\n| options | **UniCloudDBComponentAddOptions** | 否 | 可选参数 |\n@| 名称 | 类型 | 必备 | 默认值 | 描述 |\n@| :- | :- | :- | :- | :- |\n@| showToast | boolean | 否 | true | 是否显示 Toast |\n@| toastTitle | string | 否 | | Toast 标题 |\n@| needLoading | boolean | 否 | true | 是否需要 Loading |\n@| loadingTitle | string | 否 | | Loading 标题 |\n@| success | (res?: [UniCloudDBAddResult](#uniclouddbaddresult-values)) => void | 否 | | 成功回调 |\n@| fail | (err?: any) => void | 否 | | 失败回调 |\n@| complete | () => void | 否 | | 完成回调 | \n\n###### UniCloudDBAddResult 的属性值 @uniclouddbaddresult-values \n\n| 名称 | 类型 | 必备 | 描述 |\n| :- | :- | :- | :- |\n| id | string | 是 | 添加的记录的id |\n| requestId | string | 否 | 请求id |\n\n\n\n\n##### remove(): void @remove\n移除数据\n\n\n\n\n\n##### remove(id?: any, options?: UTSJSONObject): void @remove\n\n\n##### 参数 \n\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| id | any | 否 |\n| options | [UTSJSONObject](/uts/buildin-object-api/utsjsonobject.md) | 否 | \n\n\n\n\n##### update(id: string, value: UTSJSONObject, options?: UTSJSONObject): void @update\n更新数据\n\n##### 参数 \n\n| 名称 | 类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| id | string | 是 | 数据库字段的唯一标识. |\n| value | [UTSJSONObject](/uts/buildin-object-api/utsjsonobject.md) | 是 | 需要修改的新数据. |\n| options | **UniCloudDBComponentUpdateOptions** | 否 | 可选参数 |\n@| 名称 | 类型 | 必备 | 默认值 | 描述 |\n@| :- | :- | :- | :- | :- |\n@| showToast | boolean | 否 | true | 是否显示更新后 Toast |\n@| toastTitle | string | 否 | \"\" | 更新成功后 Toast 标题 |\n@| confirmTitle | string | 否 | | 确认框标题 |\n@| confirmContent | string | 否 | | 确认框内容 |\n@| needConfirm | boolean | 否 | true | 是否显示更新确认框 |\n@| needLoading | boolean | 否 | true | 是否需要 Loading |\n@| loadingTitle | string | 否 | | Loading 标题 |\n@| success | (res?: [UniCloudDBUpdateResult](#uniclouddbupdateresult-values)) => void | 否 | | 成功回调 |\n@| fail | (err?: any) => void | 否 | | 失败回调 |\n@| complete | () => void | 否 | | 完成回调 | \n\n###### UniCloudDBUpdateResult 的属性值 @uniclouddbupdateresult-values \n\n| 名称 | 类型 | 必备 | 描述 |\n| :- | :- | :- | :- |\n| updated | number | 是 | 更新成功的记录数 |\n| requestId | string | 否 | 请求id |\n\n\n\n"},"double-tap-gesture-handler":{"name":"::: sourceCode\n## double-tap-gesture-handler\n:::","originName":"## double-tap-gesture-handler","description":"","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.41 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- | :-: | :- |\n| tag | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>声明手势协商时的组件标识 |\n| worklet:ongesture | eventhandler | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandler)*<br/>手势识别成功的回调 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| state | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 手势状态 |\n@| absoluteX | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 相对于全局的 X 坐标 |\n@| absoluteY | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 相对于全局的 Y 坐标 |\n| worklet:should-response-on-move | callback | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(callback)*<br/>手指移动过程中手势是否响应 |\n| worklet:should-accept-gesture | callback | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(callback)*<br/>手势是否应该被识别 |\n| simultaneous-handlers | Array.<string> | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(Array.<string>)*<br/>声明可同时触发的手势节点 |\n| native-view | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>代理的原生节点类型 |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.skyline.double-tap-gesture-handler)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/double-tap-gesture-handler.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=double-tap-gesture-handler&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=double-tap-gesture-handler&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=double-tap-gesture-handler&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=double-tap-gesture-handler&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=double-tap-gesture-handler)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=double-tap-gesture-handler&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"force-press-gesture-handler":{"name":"::: sourceCode\n## force-press-gesture-handler\n:::","originName":"## force-press-gesture-handler","description":"","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.41 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- | :-: | :- |\n| tag | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>声明手势协商时的组件标识 |\n| worklet:ongesture | eventhandler | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandler)*<br/>手势识别成功的回调 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| state | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 手势状态 |\n@| absoluteX | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 相对于全局的 X 坐标 |\n@| absoluteY | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 相对于全局的 Y 坐标 |\n@| pressure | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 压力大小 |\n| worklet:should-accept-gesture | callback | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(callback)*<br/>手势是否应该被识别 |\n| simultaneous-handlers | Array.<string> | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(Array.<string>)*<br/>声明可同时触发的手势节点 |\n| native-view | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>代理的原生节点类型 |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.skyline.force-press-gesture-handler)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/force-press-gesture-handler.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=force-press-gesture-handler&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=force-press-gesture-handler&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=force-press-gesture-handler&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=force-press-gesture-handler&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=force-press-gesture-handler)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=force-press-gesture-handler&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"horizontal-drag-gesture-handler":{"name":"::: sourceCode\n## horizontal-drag-gesture-handler\n:::","originName":"## horizontal-drag-gesture-handler","description":"","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.41 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- | :-: | :- |\n| tag | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>声明手势协商时的组件标识 |\n| worklet:ongesture | eventhandler | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandler)*<br/>手势识别成功的回调 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| state | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 手势状态 |\n@| absoluteX | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 相对于全局的 X 坐标 |\n@| absoluteY | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 相对于全局的 Y 坐标 |\n@| deltaX | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 相对上一次，X 轴方向移动的坐标 |\n@| deltaY | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 相对上一次，Y 轴方向移动的坐标 |\n@| velocityX | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 手指离开屏幕时的横向速度（pixel per second) |\n@| velocityY | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 手指离开屏幕时的纵向速度（pixel per second) |\n| worklet:should-response-on-move | callback | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(callback)*<br/>手指移动过程中手势是否响应 |\n| worklet:should-accept-gesture | callback | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(callback)*<br/>手势是否应该被识别 |\n| simultaneous-handlers | Array.<string> | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(Array.<string>)*<br/>声明可同时触发的手势节点 |\n| native-view | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>代理的原生节点类型 |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.skyline.horizontal-drag-gesture-handler)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/horizontal-drag-gesture-handler.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=horizontal-drag-gesture-handler&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=horizontal-drag-gesture-handler&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=horizontal-drag-gesture-handler&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=horizontal-drag-gesture-handler&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=horizontal-drag-gesture-handler)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=horizontal-drag-gesture-handler&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"long-press-gesture-handler":{"name":"::: sourceCode\n## long-press-gesture-handler\n:::","originName":"## long-press-gesture-handler","description":"","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.41 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- | :-: | :- |\n| tag | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>声明手势协商时的组件标识 |\n| worklet:ongesture | eventhandler | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandler)*<br/>手势识别成功的回调 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| state | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 手势状态 |\n@| absoluteX | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 相对于全局的 X 坐标 |\n@| absoluteY | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 相对于全局的 Y 坐标 |\n@| translationX | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 相对于初始触摸点的 X 轴偏移量 |\n@| translationY | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 相对于初始触摸点的 Y 轴偏移量 |\n@| velocityX | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 手指离开屏幕时的横向速度（pixel per second) |\n@| velocityY | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 手指离开屏幕时的纵向速度（pixel per second) |\n| worklet:should-response-on-move | callback | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(callback)*<br/>手指移动过程中手势是否响应 |\n| worklet:should-accept-gesture | callback | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(callback)*<br/>手势是否应该被识别 |\n| simultaneous-handlers | Array.<string> | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(Array.<string>)*<br/>声明可同时触发的手势节点 |\n| native-view | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>代理的原生节点类型 |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.skyline.long-press-gesture-handler)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/long-press-gesture-handler.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=long-press-gesture-handler&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=long-press-gesture-handler&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=long-press-gesture-handler&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=long-press-gesture-handler&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=long-press-gesture-handler)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=long-press-gesture-handler&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"pan-gesture-handler":{"name":"::: sourceCode\n## pan-gesture-handler\n:::","originName":"## pan-gesture-handler","description":"","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.41 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- | :-: | :- |\n| tag | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>声明手势协商时的组件标识 |\n| worklet:ongesture | eventhandler | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandler)*<br/>手势识别成功的回调 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| state | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 手势状态 |\n@| absoluteX | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 相对于全局的 X 坐标 |\n@| absoluteY | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 相对于全局的 Y 坐标 |\n@| deltaX | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 相对上一次，X 轴方向移动的坐标 |\n@| deltaY | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 相对上一次，Y 轴方向移动的坐标 |\n@| velocityX | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 手指离开屏幕时的横向速度（pixel per second) |\n@| velocityY | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 手指离开屏幕时的纵向速度（pixel per second) |\n| worklet:should-response-on-move | callback | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(callback)*<br/>手指移动过程中手势是否响应 |\n| worklet:should-accept-gesture | callback | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(callback)*<br/>手势是否应该被识别 |\n| simultaneous-handlers | Array.<string> | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(Array.<string>)*<br/>声明可同时触发的手势节点 |\n| native-view | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>代理的原生节点类型 |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.skyline.pan-gesture-handler)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/pan-gesture-handler.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=pan-gesture-handler&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=pan-gesture-handler&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=pan-gesture-handler&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=pan-gesture-handler&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=pan-gesture-handler)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=pan-gesture-handler&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"scale-gesture-handler":{"name":"::: sourceCode\n## scale-gesture-handler\n:::","originName":"## scale-gesture-handler","description":"","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.41 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- | :-: | :- |\n| tag | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>声明手势协商时的组件标识 |\n| worklet:ongesture | eventhandler | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandler)*<br/>手势识别成功的回调 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| state | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 手势状态 |\n@| focalX | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 中心点相对于全局的X坐标 |\n@| focalY | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 中心点相对于全局的Y坐标 |\n@| focalDeltaX | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 相对上一次，中心点在X轴方向移动的坐标 |\n@| focalDeltaY | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 相对上一次，中心点在Y轴方向移动的坐标 |\n@| scale | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 放大或缩小的比例 |\n@| horizontalScale | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | scale的横向分量 |\n@| verticalScale | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | scale的纵向分量 |\n@| rotation | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 旋转角（单位：弧度） |\n@| velocityX | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 手指离开屏幕时的横向速度（pixel per second) |\n@| velocityY | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 手指离开屏幕时的纵向速度（pixel per second) |\n@| pointerCount | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 跟踪的手指数 |\n| worklet:should-response-on-move | callback | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(callback)*<br/>手指移动过程中手势是否响应 |\n| worklet:should-accept-gesture | callback | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(callback)*<br/>手势是否应该被识别 |\n| simultaneous-handlers | Array.<string> | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(Array.<string>)*<br/>声明可同时触发的手势节点 |\n| native-view | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>代理的原生节点类型 |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.skyline.scale-gesture-handler)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/scale-gesture-handler.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=scale-gesture-handler&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=scale-gesture-handler&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=scale-gesture-handler&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=scale-gesture-handler&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=scale-gesture-handler)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=scale-gesture-handler&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"tap-gesture-handler":{"name":"::: sourceCode\n## tap-gesture-handler\n:::","originName":"## tap-gesture-handler","description":"","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.41 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- | :-: | :- |\n| tag | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>声明手势协商时的组件标识 |\n| worklet:ongesture | eventhandler | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandler)*<br/>手势识别成功的回调 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| state | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 手势状态 |\n@| absoluteX | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 相对于全局的 X 坐标 |\n@| absoluteY | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 相对于全局的 Y 坐标 |\n| worklet:should-response-on-move | callback | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(callback)*<br/>手指移动过程中手势是否响应 |\n| worklet:should-accept-gesture | callback | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(callback)*<br/>手势是否应该被识别 |\n| simultaneous-handlers | Array.<string> | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(Array.<string>)*<br/>声明可同时触发的手势节点 |\n| native-view | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>代理的原生节点类型 |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.skyline.tap-gesture-handler)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/tap-gesture-handler.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=tap-gesture-handler&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=tap-gesture-handler&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=tap-gesture-handler&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=tap-gesture-handler&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=tap-gesture-handler)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=tap-gesture-handler&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"vertical-drag-gesture-handler":{"name":"::: sourceCode\n## vertical-drag-gesture-handler\n:::","originName":"## vertical-drag-gesture-handler","description":"","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.41 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- | :-: | :- |\n| tag | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>声明手势协商时的组件标识 |\n| worklet:ongesture | eventhandler | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandler)*<br/>手势识别成功的回调 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| state | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 手势状态 |\n@| absoluteX | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 相对于全局的 X 坐标 |\n@| absoluteY | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 相对于全局的 Y 坐标 |\n@| deltaX | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 相对上一次，X 轴方向移动的坐标 |\n@| deltaY | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 相对上一次，Y 轴方向移动的坐标 |\n@| velocityX | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 手指离开屏幕时的横向速度（pixel per second) |\n@| velocityY | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 手指离开屏幕时的纵向速度（pixel per second) |\n| worklet:should-response-on-move | callback | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(callback)*<br/>手指移动过程中手势是否响应 |\n| worklet:should-accept-gesture | callback | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(callback)*<br/>手势是否应该被识别 |\n| simultaneous-handlers | Array.<string> | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(Array.<string>)*<br/>声明可同时触发的手势节点 |\n| native-view | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>代理的原生节点类型 |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.skyline.vertical-drag-gesture-handler)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/vertical-drag-gesture-handler.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=vertical-drag-gesture-handler&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=vertical-drag-gesture-handler&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=vertical-drag-gesture-handler&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=vertical-drag-gesture-handler&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=vertical-drag-gesture-handler)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=vertical-drag-gesture-handler&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"draggable-sheet":{"name":"::: sourceCode\n## draggable-sheet\n:::","originName":"## draggable-sheet","description":"","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.41 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- | :-: | :- |\n| initial-child-size | number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(number)*<br/>初始时占父容器的比例 |\n| min-child-size | number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(number)*<br/>最小时占父容器的比例 |\n| max-child-size | number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(number)*<br/>最大时占父容器的比例 |\n| snap | boolean | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(boolean)*<br/>拖拽后是否自动对齐关键点 |\n| snap-sizes | Array.<number> | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(Array.<number>)*<br/>拖拽后对齐的关键点，无需包含最小和最大值 |\n| worklet:onsizeupdate | worklet | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(worklet)*<br/>尺寸发生变化时触发，仅支持 worklet 作为回调。event = {pixels, size} |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.skyline.draggable-sheet)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/draggable-sheet.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=draggable-sheet&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=draggable-sheet&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=draggable-sheet&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=draggable-sheet&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=draggable-sheet)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=draggable-sheet&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"grid-builder":{"name":"::: sourceCode\n## grid-builder\n:::","originName":"## grid-builder","description":"","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.41 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- | :-: | :- |\n| padding | Array | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(Array)*<br/>长度为 4 的数组，按 top、right、bottom、left 顺序指定内边距 |\n| list | Array | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(Array)*<br/>需要用于渲染的列表 |\n| child-count | Array | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(Array)*<br/>完整列表的长度，如果不传则取 list 的长度作为其值 |\n| type | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>布局方式 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| aligned | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 每行高度由同一行中最大高度子节点决定 |\n@| masonry | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 瀑布流，根据子元素高度自动布局 |\n| cross-axis-count | number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(number)*<br/>交叉轴元素数量 |\n| max-cross-axis-extent | number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(number)*<br/>交叉轴元素最大范围 |\n| main-axis-gap | number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(number)*<br/>主轴方向间隔 |\n| cross-axis-gap | number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(number)*<br/>交叉轴方向间隔 |\n| @itembuild | eventhandle | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandle)*<br/>列表项创建时触发，event.detail = {index}，index 即被创建的列表项序号 |\n| @itemdispose | eventhandle | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandle)*<br/>列表项回收时触发，event.detail = {index}，index 即被回收的列表项序号 |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.skyline.grid-builder)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/grid-builder.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=grid-builder&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=grid-builder&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=grid-builder&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=grid-builder&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=grid-builder)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=grid-builder&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"grid-view":{"name":"::: sourceCode\n## grid-view\n:::","originName":"## grid-view","description":"","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.41 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- | :-: | :- |\n| type | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>布局方式 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| aligned | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 每行高度由同一行中最大高度子节点决定 |\n@| masonry | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 瀑布流，根据子元素高度自动布局 |\n| cross-axis-count | number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(number)*<br/>交叉轴元素数量 |\n| max-cross-axis-extent | number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(number)*<br/>交叉轴元素最大范围 |\n| main-axis-gap | number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(number)*<br/>主轴方向间隔 |\n| cross-axis-gap | number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(number)*<br/>交叉轴方向间隔 |\n| padding | Array | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(Array)*<br/>长度为 4 的数组，按 top、right、bottom、left 顺序指定内边距 |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.skyline.grid-view)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/grid-view.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=grid-view&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=grid-view&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=grid-view&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=grid-view&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=grid-view)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=grid-view&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"list-builder":{"name":"::: sourceCode\n## list-builder\n:::","originName":"## list-builder","description":"","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.41 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- | :-: | :- |\n| padding | Array | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(Array)*<br/>长度为 4 的数组，按 top、right、bottom、left 顺序指定内边距 |\n| type | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>类型，默认为定高模式 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| static | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 定高模式，所有列表项等高，需要传入 child-height |\n@| dynamic | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 不定高模式 |\n| list | Array | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(Array)*<br/>需要用于渲染的列表 |\n| child-count | Array | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(Array)*<br/>完整列表的长度，如果不传则取 list 的长度作为其值 |\n| child-height | Array | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(Array)*<br/>列表项的高度，当 type 为 static 时必须传入 |\n| @itembuild | eventhandle | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandle)*<br/>列表项创建时触发，event.detail = {index}，index 即被创建的列表项序号 |\n| @itemdispose | eventhandle | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandle)*<br/>列表项回收时触发，event.detail = {index}，index 即被回收的列表项序号 |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.skyline.list-builder)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/list-builder.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=list-builder&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=list-builder&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=list-builder&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=list-builder&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=list-builder)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=list-builder&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"open-container":{"name":"::: sourceCode\n## open-container\n:::","originName":"## open-container","description":"","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.41 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- | :-: | :- |\n| closed-color | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>初始容器背景色 |\n| closed-elevation | number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(number)*<br/>初始容器影深大小 |\n| closed-border-radius | number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(number)*<br/>初始容器圆角大小 |\n| middle-color | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>`fadeThrough` 模式下的过渡背景色 |\n| open-color | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>打开状态下容器背景色 |\n| open-elevation | number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(number)*<br/>打开状态下容器影深大小 |\n| open-border-radius | number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(number)*<br/>打开状态下容器圆角大小 |\n| transition-duration | number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(number)*<br/>动画时长 |\n| transition-type | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>动画类型 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| fade | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 将传入元素淡入传出元素之上 |\n@| fadeThrough | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 首先淡出传出元素，并在传出元素完全淡出后开始淡入传入元素 |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.skyline.open-container)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/open-container.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=open-container&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=open-container&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=open-container&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=open-container&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=open-container)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=open-container&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"snapshot":{"name":"::: sourceCode\n## snapshot\n:::","originName":"## snapshot","description":"","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.41 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- | :-: | :- |\n| mode | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>渲染模式 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| view | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 以真实节点渲染。 |\n@| picture | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 对子节点生成的内容截图渲染。 |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.skyline.snapshot)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/snapshot.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=snapshot&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=snapshot&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=snapshot&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=snapshot&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=snapshot)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=snapshot&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"span":{"name":"::: sourceCode\n## span\n:::","originName":"## span","description":"","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.41 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.skyline.span)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/span.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=span&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=span&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=span&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=span&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=span)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=span&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"ad-custom":{"name":"::: sourceCode\n## ad-custom\n:::","originName":"## ad-custom","description":"","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.41 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- | :-: | :- |\n| unit-id | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>广告单元id，可在[小程序管理后台](https://mp.weixin.qq.com)的流量主模块新建 |\n| ad-intervals | number | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(number)*<br/>广告自动刷新的间隔时间，单位为秒，参数值必须大于等于30（该参数不传入时模板广告不会自动刷新） |\n| @load | eventhandle | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandle)*<br/>广告加载成功的回调 |\n| @error | eventhandle | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandle)*<br/>广告加载失败的回调，event.detail = {errCode: 1002} |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.open-ability.ad-custom)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/ad-custom.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=ad-custom&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=ad-custom&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=ad-custom&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=ad-custom&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=ad-custom)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=ad-custom&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"official-account":{"name":"::: sourceCode\n## official-account\n:::","originName":"## official-account","description":"","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.41 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.open-ability.official-account)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/official-account.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=official-account&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=official-account&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=official-account&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=official-account&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=official-account)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=official-account&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"store-home":{"name":"::: sourceCode\n## store-home\n:::","originName":"## store-home","description":"","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.41 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- | :-: | :- |\n| appid | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>小店appid。获取方式：[小店后台](https://store.weixin.qq.com/shop/setting/home) - 店铺管理 - 基础信息 - 账号信息 - 微信小店ID。 |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.open-ability.store-home)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/store-home.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=store-home&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=store-home&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=store-home&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=store-home&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=store-home)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=store-home&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"store-product":{"name":"::: sourceCode\n## store-product\n:::","originName":"## store-product","description":"","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.41 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- | :-: | :- |\n| appid | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>小店appid。获取方式：[小店后台](https://store.weixin.qq.com/shop/setting/home) - 店铺管理 - 基础信息 - 账号信息 - 微信小店ID。 |\n| product-id | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>商品id。获取小店商品id，可以通过API获取([参考链接](https://developers.weixin.qq.com/doc/store/API/product/get.html))或通过[小店后台](https://store.weixin.qq.com/shop/goods/list) - 商品管理 - 商品列表 - 规格/编码获取。 |\n| product-promotion-link | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>带货商品跟佣信息。若需要商品售卖时使用小店优选联盟带货跟佣功能，可以通过API获取带货商品跟佣信息([参考链接](https://developers.weixin.qq.com/doc/channels/API/windowproduct/get.html))。 |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.open-ability.store-product)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/store-product.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=store-product&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=store-product&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=store-product&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=store-product&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=store-product)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=store-product&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"block":{"name":"::: sourceCode\n## block\n:::","originName":"## block","description":"block节点","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.11 | 4.61 |\n","attribute":"","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.other.block)\n- [参见uni-app相关文档](https://uniapp.dcloud.io/tutorial/page.html#template-block)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/conditional.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=block&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=block&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=block&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=block&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=block)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=block&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"aria-component":{"name":"::: sourceCode\n## aria-component\n:::","originName":"## aria-component","description":"","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.41 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.other.aria-component)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/aria-component.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=aria-component&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=aria-component&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=aria-component&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=aria-component&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=aria-component)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=aria-component&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"native-component":{"name":"::: sourceCode\n## native-component\n:::","originName":"## native-component","description":"","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.41 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.other.native-component)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=native-component&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=native-component&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=native-component&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=native-component&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=native-component)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=native-component&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"channel-live":{"name":"::: sourceCode\n## channel-live\n:::","originName":"## channel-live","description":"","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.41 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- | :-: | :- |\n| feed-id | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>视频 feedId |\n| finder-user-name | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>视频号 id，以“sph”开头的id，可在视频号助手获取。视频号必须与当前小程序相同主体。 |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.other.channel-live)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/channel-live.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=channel-live&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=channel-live&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=channel-live&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=channel-live&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=channel-live)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=channel-live&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"channel-video":{"name":"::: sourceCode\n## channel-video\n:::","originName":"## channel-video","description":"","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.41 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- | :-: | :- |\n| feed-id | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>仅视频号视频与小程序同主体时生效。若内嵌非同主体视频，请使用 feed-token。 |\n| finder-user-name | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>视频号 id，以“sph”开头的id，可在视频号助手获取。视频号必须与当前小程序相同主体。 |\n| feed-token | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>仅内嵌小程序非同主体视频号视频时使用，获取方式参考[本指引](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/channels-activity#feed-token)。 |\n| autoplay | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>是否自动播放。仅视频号视频与小程序同主体时支持设置为 true。 |\n| loop | boolean | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(boolean)*<br/>是否循环播放 |\n| muted | boolean | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(boolean)*<br/>是否静音播放 |\n| object-fit | boolean | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(boolean)*<br/>当视频大小与 video 容器大小不一致时，视频的表现形式 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| contain | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 包含 |\n@| fill | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 填充 |\n@| cover | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 覆盖 |\n| @error | eventhandle | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandle)*<br/>视频播放出错时触发 |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.other.channel-video)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/channel-video.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=channel-video&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=channel-video&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=channel-video&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=channel-video&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=channel-video)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=channel-video&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"voip-room":{"name":"::: sourceCode\n## voip-room\n:::","originName":"## voip-room","description":"","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.41 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- | :-: | :- |\n| openid | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>进入房间用户的 openid |\n| mode | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>对话窗口类型 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| camera | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 自身传入 camera |\n@| video | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 其他用户传入 video |\n| device-position | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>摄像头方向，仅在 mode 为 camera 时有效 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| front | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 前置 |\n@| back | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 后置 |\n| object-fit | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>画面与容器比例不一致时，画面的表现形式 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| fill | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 填充 |\n@| contain | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 包含 |\n@| cover | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 覆盖，安卓暂未支持，iOS 生效 |\n| @error | eventhandle | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandle)*<br/>创建对话窗口失败时触发 |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.other.voip-room)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/voip-room.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=voip-room&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=voip-room&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=voip-room&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=voip-room&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=voip-room)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=voip-room&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"keyboard-accessory":{"name":"::: sourceCode\n## keyboard-accessory\n:::","originName":"## keyboard-accessory","description":"","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.41 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.other.keyboard-accessory)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/keyboard-accessory.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=keyboard-accessory&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=keyboard-accessory&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=keyboard-accessory&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=keyboard-accessory&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=keyboard-accessory)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=keyboard-accessory&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"root-portal":{"name":"::: sourceCode\n## root-portal\n:::","originName":"## root-portal","description":"","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.41 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- | :-: | :- |\n| enable | boolean | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(boolean)*<br/>是否从页面中脱离出来 |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.other.root-portal)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/root-portal.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=root-portal&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=root-portal&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=root-portal&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=root-portal&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=root-portal)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=root-portal&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"functional-page-navigator":{"name":"::: sourceCode\n## functional-page-navigator\n:::","originName":"## functional-page-navigator","description":"","readme":"","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.41 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- | :-: | :- |\n| version | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>跳转到的小程序版本，**线上版本必须设置为 release** |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| develop | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 开发版 |\n@| trial | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 体验版 |\n@| release | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 正式版 |\n| name | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(string)*<br/>要跳转到的功能页 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| loginAndGetUserInfo | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | [用户信息功能页](https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/functional-pages/user-info.html) |\n@| requestPayment | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | [支付功能页](https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/functional-pages/request-payment.html) |\n@| chooseAddress | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | [收货地址功能页](https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/functional-pages/choose-address.html) |\n@| chooseInvoice | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | [获取发票功能页](https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/functional-pages/choose-invoice.html) |\n@| chooseInvoiceTitle | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | [获取发票抬头功能页](https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/functional-pages/choose-invoice-title.html) |\n| args | object | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(object)*<br/>功能页参数，参数格式与具体功能页相关 |\n| @success | eventhandler | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandler)*<br/>功能页返回，且操作成功时触发， detail 格式与具体功能页相关 |\n| @fail | eventhandler | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandler)*<br/>功能页返回，且操作失败时触发， detail 格式与具体功能页相关 |\n| @cancel | eventhandler | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | *(eventhandler)*<br/>因用户操作从功能页返回时触发 |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.other.functional-page-navigator)\n- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/functional-page-navigator.html)\n- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=functional-page-navigator&pageIndex=1&pageSize=10&source=doc_top&type=all)\n- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=functional-page-navigator&scope=devdocs&source=docs)\n- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=functional-page-navigator&secondType=all&type=1)\n- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=functional-page-navigator&topicFilter=)\n- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=functional-page-navigator)\n- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)\n- [快手小程序文档](https://developers.kuaishou.com/page?keyword=functional-page-navigator&from=docs)\n- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)\n- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)\n- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)"},"uni-badge-view":{"name":"::: sourceCode\n## uni-badge-view\n:::","originName":"## uni-badge-view","description":"数字角标（徽章）组件\n\n> 本 Component 是 uni ext component，需下载插件：[uni-badge-view](https://ext.dcloud.net.cn/plugin?id=27844)\n","readme":"badge角标，可以用于显示红点、被红圈或其他颜色圈包裹的数字、文字。提醒用户此时有需要注意的新信息。\n\n### 文件路径\n项目下有一个 /pages/uni-ui/badge/badge.uvue 页面，里面演示了badge组件的各种用法。\n\n### 设计\n#### badge组件有多种用法：\n1. 独立显示\n\t如果没有slot内容，视为要显示独立的红点和数字，此时不是角标，就是普通的红点和圆背景数字。\n\t在按钮或列表项的右侧，独立显示数字。也可以显示红点，但这种场景数字更多一些。\n\n2. 作为一个容器组件，包含一个slot，在包裹内容的右上角显示一个角标view。\n\tbadge组件包裹一个目标view时，badge组件内部的角标view的中心点位于目标view的右上角顶点。\n\t此时角标view是通过transform位移到右上角的，实际内容已经超出了容器本身。\n\t所以需要注意容器的父级的设置，留出超出容器的尺寸（即top和right边距需要留出角标view的高度和宽度的一半），避免被父级裁剪。\n\n#### badge的text属性的用法：\n在badge作为容器组件时，text属性的不同设置，可以代表不同的效果。具体见属性章节。\n\n#### 样式自定义\nbadge组件的badge-class和badge-style属性，直接作用在角标view上，可以修改角标view的样式。\n\n角标view本质是一个text组件，可以覆盖前景、背景、位置等各种样式。\n\n#### badge组件有如下属性：\n- text\n\t类型为 string|null\n\t* 值为\"0\"时，不显示角标；所以永远不会显示一个为0的角标。此时直接显示slot子内容，不包裹外层，减少层级，提高性能；\n\t* 值为null或\"\"时，代表一个长宽为8px的红色圆点；\n\t* 否则显示为该文字内容的圆角红底圈套文字。\n- badge-class\n\t直接作用于角标view的class\n- badge-style\n\t直接作用于角标view的style\n","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 5.07 | 5.08 | 5.07 | 5.07 | 5.07 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| text | string | \"\" | badge 的内容。为 \"0\" 时不显示 badge；为空字符串时显示圆点；有文字则显示文字 |\n| badgeStyle | string | \"\" | badge 的内联样式，用于覆盖内置 style |\n| badgeClass | string([string.ClassString](/uts/data-type.md#ide-string)) | \"\" | badge 的样式类，用于覆盖内置 class |\n| alwaysWrapWithContent | boolean | false | 当有 slot 内容时，即使 text 为 \"0\" 也保留包裹层（badge-wrap），避免多个子 slot 时 flex 方向错乱 |","event":"","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/uni-ui/badge-view/badge-view.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/uni-ui/badge-view/badge-view.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/uni-ui/badge-view/badge-view\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/uni-ui/badge-view/badge-view\n\n>示例\n```vue\n<template>\n\t\n\t<scroll-view style=\"flex: 1;padding: 20px 5px 5px;\">\n\t\n\t\n\t<view style=\"padding: 20px 5px 5px;\">\n\t\n\t<uni-badge-view text=\"99+\" >\n\t\t<view style=\"width: 50px; height: 20px; background-color: green;\"></view>\n\t</uni-badge-view>\n\t\n\t\t<text class=\"page-title\">Badge 组件演示</text>\n\t\t\n\t\t<view style=\"margin-bottom: 20px;\">\n\t\t\t<text class=\"label\">badge动态设置text属性：</text>\n\t\t\t<text class=\"label\" style=\"margin-bottom: 10px;\">输入0不显示badge，空字符串显示红点，输入其他显示文字</text>\n\t\t\t<input\n\t\t\t\tv-model=\"data.dynamicBadgeText\"\n\t\t\t\tplaceholder=\"输入badge text属性\"\n\t\t\t\tclass=\"demo-input\"\n\t\t\t/>\n\t\t\t<uni-badge-view :text=\"data.dynamicBadgeText\" >\n\t\t\t\t<view style=\"width: 20px;height: 20px;background-color: green;\"></view>\n\t\t\t</uni-badge-view>\n\t\t</view>\n\n\t\t\n\t\t<view style=\"margin-bottom: 10px;\">\n\t\t\t<text class=\"label\" style=\"margin-bottom: 10px;\">不显示badge：</text>\n\t\t\t<uni-badge-view text=\"0\">\n\t\t\t\t<view style=\"width: 20px;height: 16px;background-color: green;\"></view>\n\t\t\t</uni-badge-view>\n\t\t</view>\n\t\t\n\t\t\n\t\t<view style=\"margin-bottom: 10px;\">\n\t\t\t<text class=\"label\" style=\"margin-bottom: 10px;\">不包裹内容的圆点：</text>\n\t\t\t<uni-badge-view text=\"\">\n\t\t\t</uni-badge-view>\n\t\t</view>\n\t\t\n\t\t<view style=\"margin-bottom: 10px;\">\n\t\t\t<text class=\"label\" style=\"margin-bottom: 10px;\">不包裹内容的文字：</text>\n\t\t\t<uni-badge-view text=\"1\" badge-style=\"align-self:flex-start;\"/> \n\t\t</view>\n\n\t\t\n\t\t<view style=\"margin-bottom: 10px;\">\n\t\t\t<text class=\"label\" style=\"margin-bottom: 10px;\">文字样式：</text>\n\t\t\t<uni-badge-view text=\"3\" >\n\t\t\t\t<view style=\"width: 80px;\">\n\t\t\t\t\t<text class=\"label\">20px区域</text>\n\t\t\t\t</view>\n\t\t\t</uni-badge-view>\n\t\t</view>\n\n\t\t\n\t\t<view style=\"margin-bottom: 10px;overflow: visible;\"> \n\t\t\t<text class=\"label\" style=\"margin-bottom: 10px;\">99+是自己写的，不会自动计算max</text>\n\t\t\t<uni-badge-view text=\"99+\" >\n\t\t\t\t<view style=\"width: 80px; background-color: #6c757d; \">\n\t\t\t\t\t<text style=\"color: white;\">50px区域</text>\n\t\t\t\t</view>\n\t\t\t</uni-badge-view>\n\t\t</view>\n\t\t\n\t\t<uni-badge-view text=\"99+\" >\n\t\t\t<view style=\"width: 10px; height: 20px; background-color: green;\"></view>\n\t\t</uni-badge-view>\n\n\t\t\n\t\t<view style=\"margin-bottom: 10px;\">\n\t\t\t<text class=\"label\" style=\"margin-bottom: 10px;\">自定义badge-class（绿色badge）：</text>\n\t\t\t<uni-badge-view text=\"NEW\" badge-class=\"custom-badge-text\">\n\t\t\t\t<view style=\"height: 20px; background-color: #ffc107; \">\n\t\t\t\t\t<text>20px区域</text>\n\t\t\t\t</view>\n\t\t\t</uni-badge-view>\n\t\t</view>\n\n\t\t\n\t\t<view style=\"margin-bottom: 10px;\">\n\t\t\t<text class=\"label\" style=\"margin-bottom: 10px;\">自定义样式badge-style（紫色badge）：</text>\n\t\t\t<uni-badge-view text=\"HOT\" badge-style=\"background-color: #6f42c1; color: yellow;\">\n\t\t\t\t<view style=\"height: 20px; background-color: #dc3545; \">\n\t\t\t\t\t<text style=\"color: white;\">20px区域</text>\n\t\t\t\t</view>\n\t\t\t</uni-badge-view>\n\t\t</view>\n\n\t\t\n\t\t<view style=\"margin-bottom: 10px;\">\n\t\t\t<text class=\"label\" style=\"margin-bottom: 10px;\">红点默认样式：</text>\n\t\t\t<uni-badge-view>\n\t\t\t\t<button size=\"mini\">按钮</button>\n\t\t\t</uni-badge-view>\n\t\t</view>\n\n\t\t\n\t\t<view style=\"margin-bottom: 10px;\">\n\t\t\t<text class=\"label\" style=\"margin-bottom: 10px;\">空文字（红点模式）：</text>\n\t\t\t<uni-badge-view text=\"\">\n\t\t\t\t<view style=\"height: 20px; background-color: #17a2b8; border-radius: 4px; \">\n\t\t\t\t\t<text style=\"color: white;\">20px区域</text>\n\t\t\t\t</view>\n\t\t\t</uni-badge-view>\n\t\t</view>\n\n\n\t\t\n\t\t<view style=\"margin-bottom: 10px;\">\n\t\t\t<text class=\"label\" style=\"margin-bottom: 10px;\">dot自定义badge-class（绿色badge）：</text>\n\t\t\t<uni-badge-view badge-class=\"custom-badge-dot\">\n\t\t\t\t<view style=\"height: 20px; background-color: #ffc107; \">\n\t\t\t\t\t<text>20px区域</text>\n\t\t\t\t</view>\n\t\t\t</uni-badge-view>\n\t\t</view>\n\n\t\t\n\t\t<view style=\"margin-bottom: 10px;\">\n\t\t\t<text class=\"label\" style=\"margin-bottom: 10px;\">dot自定义badge-style（紫色badge）：</text>\n\t\t\t<uni-badge-view badge-style=\"background-color: #6f42c1;\">\n\t\t\t\t<view style=\"height: 20px; background-color: #dc3545; \">\n\t\t\t\t\t<text style=\"color: white;\">20px区域</text>\n\t\t\t\t</view>\n\t\t\t</uni-badge-view>\n\t\t</view>\n\t\t\n\t\t<view style=\"margin-bottom: 10px;\">\n\t\t\t<text class=\"label\" style=\"margin-bottom: 10px;\">按钮中badge文字：</text>\n\t\t\t\n\t\t\t\n\t\t\t<view\tstyle=\"width: 150px; height: 30px; background-color: lightgray; border-radius: 4px; align-items: center; justify-content: center;flex-direction: row;\">\n\t\t\t\t<text>按钮 </text>\n\t\t\t\t<uni-badge-view text=\"9\"/>\n\t\t\t\t\n\t\t\t</view>\n\t\t</view>\n\t\t\n\t\t<view style=\"margin-bottom: 10px;\">\n\t\t\t<text class=\"label\" style=\"margin-bottom: 10px;\">按钮中badge红点：</text>\n\t\t\t<view\tstyle=\"width: 150px; height: 30px; background-color: lightgray; border-radius: 4px; align-items: center; justify-content: center;flex-direction: row;\">\n\t\t\t\t<text>按钮 </text>\n\t\t\t\t<uni-badge-view/>\n\t\t\t</view>\n\t\t</view>\n\n\t\n\t</scroll-view>\n\t\n\t\n\t</view>\n\t\n</template>\n\n<script setup lang=\"uts\">\ntype Data = {\n\tdynamicBadgeText: string\n}\n\nconst data = reactive<Data>({\n\tdynamicBadgeText: \"0\"\n})\n\n/* onReady(() => {\n\tconsole.log((getCurrentInstance()!.proxy!.$page as BasePage).$nativePage!.getDomJson());\n}) */\n\ndefineExpose({\n\tdata\n})\n</script>\n\n<style>\n\t.page-title {\n\t\tfont-size: 18px;\n\t\tfont-weight: bold;\n\t\tcolor: var(--text-color, #333333);\n\t\tmargin-bottom: 20px;\n\t}\n\n\t.label {\n\t\tcolor: var(--text-color, #333333);\n\t}\n\n\t.demo-input {\n\t\tborder-width: 1px;\n\t\tborder-style: solid;\n\t\tborder-color: var(--border-color, rgba(0, 0, 0, 0.06));\n\t\tborder-radius: 4px;\n\t\twidth: 200px;\n\t\theight: 24px;\n\t\tpadding-left: 2px;\n\t\tcolor: var(--text-color, #333333);\n\t}\n\n\t.custom-badge-text {\n\t\tbackground-color: #28a745;\n\t\tcolor: black;\n\t}\n\t\n\t.custom-badge-dot {\n\t\tbackground-color: #28a745;\n\t\twidth: 16px;\n\t\theight: 16px;\n\t\tborder-radius: 16px;\n\t}\n</style>\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=uni-ui-x.uni-badge-view)"},"uni-collapse":{"name":"::: sourceCode\n## uni-collapse\n:::","originName":"## uni-collapse","description":"折叠面板组件\n\n> 本 Component 是 uni ext component，需下载插件：[uni-collapse](https://ext.dcloud.net.cn/plugin?id=27899)\n","readme":"折叠面板组件，包含：\n\n- `uni-collapse`：父容器\n- `uni-collapse-item`：子面板\n\n一个折叠面板组件可以包含若干uni-collapse-item。每个uni-collapse-item包括顶部标题栏和通过slot传入的内容区。\n\n### 基本用法\n\n```html\n<uni-collapse :accordion=\"true\">\n <uni-collapse-item title=\"标题 1\" :open=\"true\">\n <view><text>内容 1</text></view>\n </uni-collapse-item>\n <uni-collapse-item title=\"标题 2\">\n <view><text>内容 2</text></view>\n </uni-collapse-item>\n</uni-collapse>\n```\n\nuni-collapse-item的标题栏的自定义：\n- 标题栏容器可通过 `title-wrap-class` 自定义背景等容器样式。\n- 标题栏支持title属性，可通过title-class自定义文字样式。\n- 标题展开态可通过 `title-open-class` 自定义激活文字样式。组件默认使用透明度区分状态，便于外部继续覆盖文字颜色。\n- 标题禁用态可通过 `title-disabled-class` 自定义禁用文字样式。若同时存在展开态和禁用态，以禁用态为最终状态。\n- 内容外层容器可通过 `content-wrap-class` 自定义背景等容器样式。\n- 标题栏右边默认带有箭头，可通过arrow-class自定义箭头样式。该箭头为一个view包括2个直角边的边框，然后旋转而成。\n- 箭头展开态和禁用态可分别通过 `arrow-open-class`、`arrow-disabled-class` 覆盖。组件默认也使用透明度区分状态，便于外部继续覆盖箭头颜色。\n- 如果完全不想要默认包含的title和arrow，也可以传入一个名为title的具名插槽来替换。\n\n### 具名插槽标题\n\n```html\n<uni-collapse-item>\n <template #title=\"{ open, disabled }\">\n <view class=\"custom-title\">\n <view class=\"custom-title-icon\"></view>\n <text class=\"custom-title-text\">{{ open ? '已展开' : '未展开' }}</text>\n </view>\n </template>\n <view><text>自定义标题内容</text></view>\n</uni-collapse-item>\n```\n\n### externalClass\n\n```html\n<uni-collapse-item\n title=\"自定义样式\"\n title-wrap-class=\"my-title-wrap-class\"\n title-class=\"my-title-class\"\n title-open-class=\"my-title-open-class\"\n content-wrap-class=\"my-content-wrap-class\"\n arrow-class=\"my-arrow-class\"\n arrow-open-class=\"my-arrow-open-class\"\n>\n <view><text>内容区域</text></view>\n</uni-collapse-item>\n```\n\n### Slots\n\n#### uni-collapse-item\n\n| 插槽名 | 说明 | 插槽参数 |\n| --- | --- | --- |\n| default | 面板内容 | - |\n| title | 自定义标题区域 | `open: boolean`、`disabled: boolean` |\n\n### Events\n\n#### uni-collapse-item\n\n| 事件名 | 说明 | 回调参数 |\n| --- | --- | --- |\n| change | 面板展开状态变化时触发 | `open: boolean` |\n\n### Expose\n\n#### uni-collapse-item\n\n| 方法名 | 说明 |\n| --- | --- |\n| openCollapse(open: boolean) | 执行展开/收起，会遵循 `disabled` 和手风琴逻辑 |\n| openOrClose(open: boolean) | 直接切换内容显示状态 |\n\n### 暗黑模式适配\n\n建议通过组件 `class` 和 externalClass 组合传入暗色样式：\n\n- 用组件 `class` 统一控制根节点和内容区等外层视觉。\n- 用 `title-wrap-class`、`title-class`、`title-open-class`、`content-wrap-class`、`arrow-class`、`arrow-open-class` 等 externalClass 覆盖标题区、内容外层和箭头样式。\n- 默认展开态和禁用态主要通过透明度表达，减少颜色覆盖时的交叉冲突。\n\n### 注意\n- 本组件在Android上需HBuilderX 5.09+。在低版本上箭头变颜色+旋转时，在Android上会消失\n","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 5.07 | 5.07 | 5.07 | 5.07 | 5.07 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| accordion | boolean | true | 是否开启手风琴模式，开启后同一时间仅允许一个子项展开 |","event":"","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/uni-ui/collapse/collapse.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/uni-ui/collapse/collapse.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/uni-ui/collapse/collapse\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/uni-ui/collapse/collapse\n\n>示例\n```vue\n<template>\n <scroll-view class=\"page uni-theme-root\">\n <view class=\"section\">\n <text class=\"section-title\">手风琴模式</text>\n <uni-collapse :accordion=\"true\">\n <uni-collapse-item class=\"theme-collapse-item\" title=\"面板 A（默认展开）\" :open=\"data.enableOpen\" @change=\"onPanelAChange\" title-wrap-class=\"theme-collapse-title-wrap\" title-class=\"theme-collapse-title\" content-wrap-class=\"theme-collapse-content-wrap\" arrow-class=\"theme-collapse-arrow\">\n <view class=\"content-box\" @click=\"onPanelAClick\">\n <text class=\"content-text\">手风琴模式下，同时只会保持一个面板展开。点击当前标题会自动收起其他面板。</text>\n </view>\n </uni-collapse-item>\n <uni-collapse-item class=\"theme-collapse-item\" title=\"面板 B\" @change=\"onPanelBChange\" title-wrap-class=\"theme-collapse-title-wrap\" title-class=\"theme-collapse-title\" content-wrap-class=\"theme-collapse-content-wrap\" arrow-class=\"theme-collapse-arrow\">\n <view id=\"panel-b\" class=\"content-box\">\n <text class=\"content-text\">当前项展开时，其他已展开的项会自动收起。这里用于验证切换动画和事件回调。</text>\n </view>\n </uni-collapse-item>\n <uni-collapse-item class=\"theme-collapse-item\" title=\"禁用项\" :disabled=\"true\" title-wrap-class=\"theme-collapse-title-wrap\" title-class=\"theme-collapse-title\" content-wrap-class=\"theme-collapse-content-wrap\" arrow-class=\"theme-collapse-arrow\">\n <view class=\"content-box\">\n <text class=\"content-text\">禁用状态下不会响应点击，也不会触发展开或收起。</text>\n </view>\n </uni-collapse-item>\n </uni-collapse>\n </view>\n\n <view class=\"section\">\n <text class=\"section-title\">普通模式-可同时展开的分组折叠列表</text>\n <uni-collapse :accordion=\"false\">\n <uni-collapse-item v-for=\"(group, index) in categoryGroups\" :key=\"group.title\" class=\"theme-collapse-item\" :title=\"group.title\" @change=\"onCategoryChange(group.title, $event as boolean)\" title-wrap-class=\"theme-collapse-title-wrap\" title-class=\"theme-collapse-title\" content-wrap-class=\"theme-collapse-content-wrap\" arrow-class=\"theme-collapse-arrow\">\n <view class=\"category-list\">\n <view v-for=\"(item, itemIndex) in group.items\" :key=\"item.title\" class=\"category-list-item\"\n :class=\"{'category-list-item--last': itemIndex == group.items.length - 1}\">\n <text class=\"category-list-text\">{{ item.title }}</text>\n <view class=\"category-list-arrow\"></view>\n </view>\n </view>\n </uni-collapse-item>\n </uni-collapse>\n </view>\n\n <view class=\"section\">\n <text class=\"section-title\">externalClass 示例</text>\n <uni-collapse :accordion=\"false\">\n <uni-collapse-item class=\"theme-collapse-item\" title=\"自定义标题文字\" title-wrap-class=\"theme-collapse-title-wrap\" title-class=\"theme-collapse-title demo-title-emphasis\" content-wrap-class=\"theme-collapse-content-wrap\" arrow-class=\"theme-collapse-arrow\">\n <view class=\"content-box\">\n <text class=\"content-text\">通过 title-class 可以覆盖 title 属性对应 text 组件的样式。</text>\n </view>\n </uni-collapse-item>\n <uni-collapse-item class=\"theme-collapse-item\" title=\"自定义箭头样式\" title-wrap-class=\"theme-collapse-title-wrap\" title-class=\"theme-collapse-title\" content-wrap-class=\"theme-collapse-content-wrap\" arrow-class=\"theme-collapse-arrow demo-arrow-large\">\n <view class=\"content-box\">\n <text class=\"content-text\">通过 arrow-class 可以覆盖默认箭头 view 的尺寸、边框粗细和颜色。</text>\n </view>\n </uni-collapse-item>\n <uni-collapse-item class=\"theme-collapse-item\" title=\"同时自定义标题和箭头\" title-wrap-class=\"theme-collapse-title-wrap\" title-class=\"theme-collapse-title demo-title-accent\" content-wrap-class=\"theme-collapse-content-wrap\" arrow-class=\"theme-collapse-arrow demo-arrow-accent\">\n <view class=\"content-box\">\n <text class=\"content-text\">title-class 和 arrow-class 可以组合使用。</text>\n </view>\n </uni-collapse-item>\n </uni-collapse>\n </view>\n\n <view class=\"section\">\n <text class=\"section-title\">具名插槽标题</text>\n <uni-collapse :accordion=\"false\">\n <uni-collapse-item class=\"theme-collapse-item\" title-wrap-class=\"theme-collapse-title-wrap\" content-wrap-class=\"theme-collapse-content-wrap\" arrow-class=\"theme-collapse-arrow\">\n <template #title=\"{ open, disabled }\">\n <view class=\"slot-title-wrap\">\n <view class=\"slot-title-icon\" :class=\"{'slot-title-icon--open': open, 'slot-title-icon--disabled': disabled}\"></view>\n <text class=\"slot-title-text\" :class=\"{'slot-title-text--open': open, 'slot-title-text--disabled': disabled}\">消息中心</text>\n <text class=\"slot-title-badge\" :class=\"{'slot-title-badge--open': open}\">{{ open ? 'OPEN' : 'CLOSE' }}</text>\n </view>\n </template>\n <view class=\"content-box\">\n <text class=\"content-text\">通过 #title 可以自定义标题区域结构，例如在文字前增加图标、状态徽标和辅助说明。</text>\n </view>\n </uni-collapse-item>\n <uni-collapse-item class=\"theme-collapse-item\" title-wrap-class=\"theme-collapse-title-wrap\" content-wrap-class=\"theme-collapse-content-wrap\" arrow-class=\"theme-collapse-arrow\">\n <template #title=\"{ open }\">\n <view class=\"slot-title-wrap\">\n <view class=\"slot-title-icon slot-title-icon--secondary\" :class=\"{'slot-title-icon--open': open}\"></view>\n <text class=\"slot-title-text\" :class=\"{'slot-title-text--open': open}\">设置中心</text>\n <text class=\"slot-title-note\">{{ open ? '当前已展开' : '点击展开配置项' }}</text>\n </view>\n </template>\n <view class=\"content-box\">\n <text class=\"content-text\">具名插槽会透出 open 和 disabled 状态，方便你在标题区域里联动样式。</text>\n </view>\n </uni-collapse-item>\n </uni-collapse>\n </view>\n\n <view class=\"section section-dark\">\n <text class=\"section-title section-title-dark\">暗黑模式 externalClass 示例</text>\n <view class=\"dark-tip\">\n <text class=\"dark-tip-text\">这个示例通过给 uni-collapse-item 传入 class 和 externalClass，分别定制内容区和标题区样式。</text>\n </view>\n <uni-collapse :accordion=\"false\">\n <uni-collapse-item class=\"dark-collapse-item\" title=\"暗色标题 A\" :open=\"true\" title-wrap-class=\"dark-title-wrap\" title-class=\"dark-title-text\" title-open-class=\"dark-title-text-open\" content-wrap-class=\"dark-content-wrap\" arrow-class=\"dark-arrow\" arrow-open-class=\"dark-arrow-open\">\n <view class=\"content-box dark-content-box\">\n <text class=\"content-text dark-content-text\">组件根节点通过 class 统一接入暗色卡片样式，标题背景、默认文字、展开态文字和箭头颜色通过 externalClass 传入。</text>\n </view>\n </uni-collapse-item>\n <uni-collapse-item class=\"dark-collapse-item dark-collapse-item-strong\" title=\"暗色标题 B\" title-wrap-class=\"dark-title-wrap-strong\" title-class=\"dark-title-text-strong\" title-open-class=\"dark-title-text-open\" content-wrap-class=\"dark-content-wrap\" arrow-class=\"dark-arrow-strong\" arrow-open-class=\"dark-arrow-open\">\n <view class=\"content-box dark-content-box\">\n <text class=\"content-text dark-content-text\">你也可以继续组合不同的根容器 class、标题字重、箭头粗细和激活色样式。</text>\n </view>\n </uni-collapse-item>\n <uni-collapse-item class=\"dark-collapse-item dark-collapse-item-muted\" title=\"暗色禁用项\" :disabled=\"true\" title-wrap-class=\"dark-title-wrap-muted\" title-class=\"dark-title-text\" title-disabled-class=\"dark-title-text-disabled\" content-wrap-class=\"dark-content-wrap-muted\" arrow-class=\"dark-arrow\" arrow-disabled-class=\"dark-arrow-disabled\">\n <view class=\"content-box dark-content-box dark-content-box-muted\">\n <text class=\"content-text dark-content-text\">禁用态默认通过透明度表达状态，外部依然可以继续指定禁用态文字和箭头颜色。</text>\n </view>\n </uni-collapse-item>\n </uni-collapse>\n </view>\n\n <view class=\"log-section\">\n <text class=\"log-title\">最近事件</text>\n <text class=\"log-text\">{{ data.lastEvent }}</text>\n </view>\n </scroll-view>\n</template>\n\n<script setup lang=\"uts\">\n type CategoryItem = {\n title : string\n }\n\n type CategoryGroup = {\n title : string,\n items : CategoryItem[]\n }\n\n const categoryGroups : CategoryGroup[] = [\n {\n title: '分类1',\n items: [\n { title: '分类1-item1' },\n { title: '分类1-item2' },\n { title: '分类1-item3' }\n ]\n },\n {\n title: '分类2',\n items: [\n { title: '分类2-item1' },\n { title: '分类2-item2' },\n { title: '分类2-item3' }\n ]\n },\n {\n title: '分类3',\n items: [\n { title: '分类3-item1' },\n { title: '分类3-item2' },\n { title: '分类3-item3' }\n ]\n }\n ]\n\n type Data = {\n lastEvent: string,\n enableOpen: boolean\n }\n\n const data = reactive<Data>({\n lastEvent: '暂无交互',\n enableOpen: true\n })\n\n function updateEvent(panel : string, open : boolean) {\n const stateText = open ? '展开' : '收起'\n const message = `${panel}${stateText}`\n data.lastEvent = message\n console.log(`[collapse] ${message}`)\n }\n\n function onPanelAChange(open : boolean) {\n updateEvent('面板 A ', open)\n }\n\n function onPanelBChange(open : boolean) {\n updateEvent('面板 B ', open)\n }\n\n function onCategoryChange(title : string, open : boolean) {\n updateEvent(`${title} `, open)\n }\n\n const onPanelAClick = () => {\n console.log('onPanelAClick')\n }\n\n defineExpose({\n data,\n onPanelAClick\n })\n</script>\n\n<style>\n .page {\n flex: 1;\n padding: 12px;\n }\n\n .theme-collapse-item,\n .theme-collapse-title-wrap,\n .theme-collapse-content-wrap {\n background-color: #ffffff;\n }\n\n .theme-collapse-title {\n color: #333333;\n }\n\n .theme-collapse-arrow {\n border-right-color: #999999;\n border-bottom-color: #999999;\n }\n\n .section {\n margin-bottom: 12px;\n border-radius: 8px;\n overflow: hidden;\n background-color: var(--list-background-color, #ffffff);\n }\n\n .section-title {\n padding: 12px;\n font-size: 14px;\n color: var(--text-color, #333333);\n font-weight: 500;\n }\n\n .content-box {\n padding: 12px;\n background-color: var(--active-background-color, #f8fafc);\n }\n\n .content-text {\n font-size: 13px;\n color: var(--text-color, #475569);\n opacity: 0.78;\n line-height: 20px;\n }\n\n .category-list {\n background-color: var(--active-background-color, #f8fafc);\n }\n\n .category-list-item {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding: 12px 18px;\n border-bottom-width: 1px;\n border-bottom-style: solid;\n border-bottom-color: var(--border-color, #e2e8f0);\n }\n\n .category-list-item--last {\n border-bottom-width: 0px;\n }\n\n .category-list-text {\n flex: 1;\n font-size: 13px;\n color: var(--text-color, #334155);\n line-height: 20px;\n }\n\n .category-list-arrow {\n width: 8px;\n height: 8px;\n margin-left: 12px;\n transform: rotate(-45deg);\n border-right-width: 1px;\n border-right-style: solid;\n border-right-color: var(--arrow-color, #94a3b8);\n border-bottom-width: 1px;\n border-bottom-style: solid;\n border-bottom-color: var(--arrow-color, #94a3b8);\n }\n\n .demo-title-emphasis {\n font-size: 16px;\n font-weight: 700;\n }\n\n .demo-title-accent {\n font-size: 15px;\n font-weight: 700;\n color: #0f766e;\n }\n\n .demo-arrow-large {\n width: 12px;\n height: 12px;\n border-right-width: 2px;\n border-bottom-width: 2px;\n }\n\n .demo-arrow-accent {\n border-right-color: #0f766e;\n border-bottom-color: #0f766e;\n border-right-width: 2px;\n border-bottom-width: 2px;\n }\n\n .slot-title-wrap {\n flex: 1;\n flex-direction: row;\n align-items: center;\n }\n\n .slot-title-icon {\n width: 10px;\n height: 10px;\n border-radius: 5px;\n margin-right: 10px;\n background-color: #94a3b8;\n }\n\n .slot-title-icon--secondary {\n background-color: #c084fc;\n }\n\n .slot-title-icon--open {\n background-color: #2563eb;\n }\n\n .slot-title-icon--disabled {\n background-color: #cbd5e1;\n }\n\n .slot-title-text {\n flex: 1;\n font-size: 14px;\n color: var(--text-color, #1f2937);\n font-weight: 600;\n }\n\n .slot-title-text--open {\n color: #2563eb;\n }\n\n .slot-title-text--disabled {\n color: #94a3b8;\n }\n\n .slot-title-badge {\n padding: 4px 8px;\n border-radius: 10px;\n background-color: #e2e8f0;\n font-size: 11px;\n color: #475569;\n }\n\n .slot-title-badge--open {\n background-color: #dbeafe;\n color: #1d4ed8;\n }\n\n .slot-title-note {\n font-size: 12px;\n color: #64748b;\n }\n\n .section-dark {\n background-color: #111827;\n }\n\n .section-title-dark {\n color: #e5e7eb;\n }\n\n .dark-collapse-item {\n background-color: #111827;\n }\n\n .dark-collapse-item-strong {\n background-color: #0f172a;\n }\n\n .dark-collapse-item-muted {\n background-color: #101826;\n }\n\n .dark-tip {\n padding: 0px 12px 12px 12px;\n }\n\n .dark-tip-text {\n font-size: 12px;\n color: #9ca3af;\n line-height: 18px;\n }\n\n .dark-content-box {\n background-color: #1f2937;\n }\n\n .dark-content-wrap {\n background-color: #1f2937;\n }\n\n .dark-content-text {\n color: #cbd5e1;\n }\n\n .dark-content-box-muted {\n background-color: #182333;\n }\n\n .dark-content-wrap-muted {\n background-color: #182333;\n }\n\n .dark-title-wrap {\n background-color: #111827;\n }\n\n .dark-title-wrap-strong {\n background-color: #0f172a;\n }\n\n .dark-title-wrap-muted {\n background-color: #101826;\n }\n\n .dark-title-text {\n color: #f8fafc;\n }\n\n .dark-title-text-strong {\n font-size: 15px;\n font-weight: 700;\n color: #e2e8f0;\n }\n\n .dark-title-text-open {\n color: #60a5fa;\n }\n\n .dark-title-text-disabled {\n color: #94a3b8;\n }\n\n .dark-arrow {\n border-right-color: #cbd5e1;\n border-bottom-color: #cbd5e1;\n }\n\n .dark-arrow-strong {\n border-right-color: #cbd5e1;\n border-bottom-color: #cbd5e1;\n border-right-width: 2px;\n border-bottom-width: 2px;\n }\n\n .dark-arrow-open {\n border-right-color: #60a5fa;\n border-bottom-color: #60a5fa;\n }\n\n .dark-arrow-disabled {\n border-right-color: #94a3b8;\n border-bottom-color: #94a3b8;\n }\n\n .log-section {\n padding: 12px;\n border-radius: 8px;\n background-color: var(--list-background-color, #ffffff);\n }\n\n .log-title {\n font-size: 13px;\n color: var(--text-color, #333333);\n font-weight: 500;\n margin-bottom: 8px;\n }\n\n .log-text {\n font-size: 13px;\n color: #2563eb;\n }\n\n @media (prefers-color-scheme: dark) {\n .theme-collapse-item,\n .theme-collapse-title-wrap,\n .theme-collapse-content-wrap {\n background-color: #2d2d2d;\n }\n\n .theme-collapse-title {\n color: #ffffff;\n }\n\n .theme-collapse-arrow {\n border-right-color: #ffffff;\n border-bottom-color: #ffffff;\n }\n\n .demo-title-accent {\n color: #5eead4;\n }\n\n .demo-arrow-accent {\n border-right-color: #5eead4;\n border-bottom-color: #5eead4;\n }\n\n .slot-title-note {\n color: #cbd5e1;\n }\n }\n</style>\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=uni-ui-x.uni-collapse)"},"uni-collapse-item":{"name":"::: sourceCode\n## uni-collapse-item\n:::","originName":"## uni-collapse-item","description":"折叠面板子项组件\n\n> 本 Component 是 uni ext component，需下载插件：[uni-collapse-item](https://ext.dcloud.net.cn/plugin?id=27899)\n","readme":"折叠面板组件，包含：\n\n- `uni-collapse`：父容器\n- `uni-collapse-item`：子面板\n\n一个折叠面板组件可以包含若干uni-collapse-item。每个uni-collapse-item包括顶部标题栏和通过slot传入的内容区。\n\n### 基本用法\n\n```html\n<uni-collapse :accordion=\"true\">\n <uni-collapse-item title=\"标题 1\" :open=\"true\">\n <view><text>内容 1</text></view>\n </uni-collapse-item>\n <uni-collapse-item title=\"标题 2\">\n <view><text>内容 2</text></view>\n </uni-collapse-item>\n</uni-collapse>\n```\n\nuni-collapse-item的标题栏的自定义：\n- 标题栏容器可通过 `title-wrap-class` 自定义背景等容器样式。\n- 标题栏支持title属性，可通过title-class自定义文字样式。\n- 标题展开态可通过 `title-open-class` 自定义激活文字样式。组件默认使用透明度区分状态，便于外部继续覆盖文字颜色。\n- 标题禁用态可通过 `title-disabled-class` 自定义禁用文字样式。若同时存在展开态和禁用态，以禁用态为最终状态。\n- 内容外层容器可通过 `content-wrap-class` 自定义背景等容器样式。\n- 标题栏右边默认带有箭头，可通过arrow-class自定义箭头样式。该箭头为一个view包括2个直角边的边框，然后旋转而成。\n- 箭头展开态和禁用态可分别通过 `arrow-open-class`、`arrow-disabled-class` 覆盖。组件默认也使用透明度区分状态，便于外部继续覆盖箭头颜色。\n- 如果完全不想要默认包含的title和arrow，也可以传入一个名为title的具名插槽来替换。\n\n### 具名插槽标题\n\n```html\n<uni-collapse-item>\n <template #title=\"{ open, disabled }\">\n <view class=\"custom-title\">\n <view class=\"custom-title-icon\"></view>\n <text class=\"custom-title-text\">{{ open ? '已展开' : '未展开' }}</text>\n </view>\n </template>\n <view><text>自定义标题内容</text></view>\n</uni-collapse-item>\n```\n\n### externalClass\n\n```html\n<uni-collapse-item\n title=\"自定义样式\"\n title-wrap-class=\"my-title-wrap-class\"\n title-class=\"my-title-class\"\n title-open-class=\"my-title-open-class\"\n content-wrap-class=\"my-content-wrap-class\"\n arrow-class=\"my-arrow-class\"\n arrow-open-class=\"my-arrow-open-class\"\n>\n <view><text>内容区域</text></view>\n</uni-collapse-item>\n```\n\n### Slots\n\n#### uni-collapse-item\n\n| 插槽名 | 说明 | 插槽参数 |\n| --- | --- | --- |\n| default | 面板内容 | - |\n| title | 自定义标题区域 | `open: boolean`、`disabled: boolean` |\n\n### Events\n\n#### uni-collapse-item\n\n| 事件名 | 说明 | 回调参数 |\n| --- | --- | --- |\n| change | 面板展开状态变化时触发 | `open: boolean` |\n\n### Expose\n\n#### uni-collapse-item\n\n| 方法名 | 说明 |\n| --- | --- |\n| openCollapse(open: boolean) | 执行展开/收起，会遵循 `disabled` 和手风琴逻辑 |\n| openOrClose(open: boolean) | 直接切换内容显示状态 |\n\n### 暗黑模式适配\n\n建议通过组件 `class` 和 externalClass 组合传入暗色样式：\n\n- 用组件 `class` 统一控制根节点和内容区等外层视觉。\n- 用 `title-wrap-class`、`title-class`、`title-open-class`、`content-wrap-class`、`arrow-class`、`arrow-open-class` 等 externalClass 覆盖标题区、内容外层和箭头样式。\n- 默认展开态和禁用态主要通过透明度表达，减少颜色覆盖时的交叉冲突。\n\n### 注意\n- 本组件在Android上需HBuilderX 5.09+。在低版本上箭头变颜色+旋转时，在Android上会消失\n","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 5.07 | 5.07 | 5.07 | 5.07 | 5.07 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| title | string | \"\" | 折叠项标题文字 |\n| open | boolean | false | 是否默认展开 |\n| disabled | boolean | false | 是否禁用，禁用后点击标题不会展开或收起 |\n| titleWrapClass | string([string.ClassString](/uts/data-type.md#ide-string)) | \"\" | 标题行（整行容器）的样式类 |\n| titleClass | string([string.ClassString](/uts/data-type.md#ide-string)) | \"\" | 标题文字的基础样式类 |\n| titleOpenClass | string([string.ClassString](/uts/data-type.md#ide-string)) | \"\" | 展开状态下叠加到标题文字的样式类 |\n| titleDisabledClass | string([string.ClassString](/uts/data-type.md#ide-string)) | \"\" | 禁用状态下叠加到标题文字的样式类 |\n| contentWrapClass | string([string.ClassString](/uts/data-type.md#ide-string)) | \"\" | 内容外层容器的样式类 |\n| arrowClass | string([string.ClassString](/uts/data-type.md#ide-string)) | \"\" | 箭头图标的基础样式类 |\n| arrowOpenClass | string([string.ClassString](/uts/data-type.md#ide-string)) | \"\" | 展开状态下叠加到箭头图标的样式类 |\n| arrowDisabledClass | string([string.ClassString](/uts/data-type.md#ide-string)) | \"\" | 禁用状态下叠加到箭头图标的样式类 |\n| @change | Event | | |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=uni-ui-x.uni-collapse-item)"},"uni-combox":{"name":"::: sourceCode\n## uni-combox\n:::","originName":"## uni-combox","description":"默认是单选选择框，通过 input 具名插槽切换为可输入、可选择的组合框。\n\n> 本 Component 是 uni ext component，需下载插件：[uni-combox](https://ext.dcloud.net.cn/plugin?id=29441)\n","readme":"uni-combox 组合框组件。\n\n默认为单选模式，类似 select 组件，只能选择不能输入。通过具名插槽 `input` 传入 input 组件后，切换为可输入、可选择的组合模式。\n\n### 基本用法\n\n```html\n<uni-combox :options=\"options\" placeholder=\"请选择\" v-model=\"value\" />\n```\n\n### options\n\n```html\n<uni-combox :options=\"gradeOptions\" placeholder=\"请选择年级\" v-model=\"grade\" />\n```\n\n### modelValue / v-model\n\n```html\n<uni-combox :options=\"cityOptions\" v-model=\"city\" placeholder=\"请选择城市\" />\n```\n\n### placeholder\n\n```html\n<uni-combox :options=\"cityOptions\" placeholder=\"这里展示 placeholder\" v-model=\"value\" />\n```\n\n### 组合模式\n\n```html\n<uni-combox :options=\"options\" v-model=\"city\">\n <template #input=\"{ value, input }\">\n <input\n :value=\"value\"\n placeholder=\"选择或输入城市\"\n @input=\"input\"\n />\n </template>\n</uni-combox>\n```\n\n输入时会打开候选浮层，并按 startsWith 规则过滤候选项。点击右侧箭头打开时展示完整候选列表，并高亮当前输入匹配项。\n\n### 自定义样式\n\n```html\n<uni-combox\n :options=\"options\"\n v-model=\"value\"\n arrow-class=\"demo-arrow\"\n options-view-class=\"demo-options-view\"\n option-text-class=\"demo-option-text\"\n option-text-highlight-class=\"demo-option-highlight\"\n result-text-class=\"demo-result-text\"\n/>\n```\n\n也可以单独传入任意一个样式类属性。\n\n```html\n<uni-combox :options=\"options\" v-model=\"value\" arrow-class=\"demo-arrow\" />\n<uni-combox :options=\"options\" v-model=\"value\" options-view-class=\"demo-options-view\" />\n<uni-combox :options=\"options\" v-model=\"value\" option-text-class=\"demo-option-text\" />\n<uni-combox :options=\"options\" v-model=\"value\" option-text-highlight-class=\"demo-option-highlight\" />\n<uni-combox :options=\"options\" v-model=\"value\" result-text-class=\"demo-result-text\" />\n```\n\n### 事件\n\n```html\n<uni-combox\n :options=\"options\"\n v-model=\"value\"\n @update:modelValue=\"onUpdateModelValue\"\n @selectchange=\"onSelectChange\"\n/>\n```\n\n### 浮层\n\n候选浮层通过 `teleport` 渲染到页面层，不受组件自身尺寸裁剪。下方空间不足且上方空间更充足时，会自动向上展开。默认最大高度为 200px。\n\n候选浮层内部使用 `scroll-view`。\n\n### External Classes\n\n| 类名 | 说明 |\n| --- | --- |\n| arrow-class | 右侧箭头样式 |\n| options-view-class | 候选浮层外层样式 |\n| option-text-class | 候选项文字样式 |\n| option-text-highlight-class | 候选项高亮样式 |\n| result-text-class | 单选模式结果文字样式 |\n\n### Props\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| options | Array\\<String\\> | [] | 候选字符串数组 |\n| modelValue | String | '' | 当前值，支持 v-model |\n| placeholder | String | '' | 占位文字 |\n| arrowClass | String | '' | 右侧箭头自定义样式类 |\n| optionsViewClass | String | '' | 候选浮层外层自定义样式类 |\n| optionTextClass | String | '' | 候选项文字自定义样式类 |\n| optionTextHighlightClass | String | '' | 候选项高亮自定义样式类 |\n| resultTextClass | String | '' | 单选模式结果文字自定义样式类 |\n\n### Events\n\n| 事件名 | 说明 | 回调参数 |\n| --- | --- | --- |\n| update:modelValue | 值更新时触发 | value: string |\n| selectchange | 从候选项选中时触发 | value: string |\n\n### Expose\n\n| 方法名 | 说明 |\n| --- | --- |\n| setInputValue(value: string) | 设置当前值并打开过滤候选 |\n| openOptions() | 打开候选浮层 |\n| closeOptions() | 关闭候选浮层 |\n","fileFormats":"","compatibility":"","attribute":"### 属性 \n| 名称 | 类型 | 描述 |\n| :- | :- | :- |\n| options | string\\[\\] | |\n| modelValue | string | |\n| placeholder | string | |\n| arrowClass | string([string.ClassString](/uts/data-type.md#ide-string)) | |\n| optionsViewClass | string([string.ClassString](/uts/data-type.md#ide-string)) | |\n| optionTextClass | string([string.ClassString](/uts/data-type.md#ide-string)) | |\n| optionTextHighlightClass | string([string.ClassString](/uts/data-type.md#ide-string)) | |\n| resultTextClass | string([string.ClassString](/uts/data-type.md#ide-string)) | |\n| @selectchange | Function | 从候选项选中时触发 |\n| @update:modelValue | Event | |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=uni-ui-x.uni-combox)"},"uni-drag-cell":{"name":"::: sourceCode\n## uni-drag-cell\n:::","originName":"## uni-drag-cell","description":"可拖拽单元格组件\n\n> 本 Component 是 uni ext component，需下载插件：[uni-drag-cell](https://ext.dcloud.net.cn/plugin?id=27845)\n","readme":"`uni-drag-cell` 是一个基于 `uni-app x + uvue + UTS` 实现的可拖拽排序组件。\n\n它适合这些场景：\n- 标签排序\n- 宫格排序\n- 单列列表排序\n- 带删除能力的拖拽\n- 尾部追加“+”入口\n- 手柄拖拽排序\n- 九宫格图片选择和排序\n- 支付方式排序\n\n组件通过 v-model 绑定了一个数组，通过插槽渲染绑定数组的内容，通过拖拽调整数组项的顺序。\n\n组件还提供了show-close属性，显示底部删除条，拖到删除条即可删除。\n\n组件还提供了show-append属性，显示尾部的添加插槽。该插槽不参与拖拽排序，始终在最后一个。（添加数组项的逻辑需自行实现）\n\n通过这些能力，本组件具备对数组数据排序、添加、删除的能力。\n\n但本组件不适合超长虚拟列表。不具备拖动到顶部或底部后自动滚动列表的功能。\n\n### 设计目标\n\n这个组件的设计不是“拖一下就立刻改数组”，而是分成两个阶段：\n\n1. **拖拽预览阶段**\n - 拖动过程中，通过 `transform` 动态调整视觉顺序\n - 其他 item 会根据碰撞结果做位移动画\n - 此时外部 `v-model` 还不会被正式改写\n\n2. **拖拽提交阶段**\n - 松手后，才正式修改内部数组顺序\n - 然后通过 `update:modelValue` 和 `change` 把最终结果抛给外部\n\n这样做的好处是：\n- 拖动过程更平滑\n- 外部响应式更新次数更少\n- 更容易支持删除条、追加入口、手柄拖拽等扩展能力\n\n### 交互模式\n\n组件目前支持两种进入拖拽态的方式：长按拖拽和手柄拖拽。\n\n#### 1. 长按拖拽\n\n默认模式。\n\n- 长按某个 item 后进入拖拽态\n- 当前长按触发时间为 `350ms`\n- 进入拖拽态后，item 会跟随手指/鼠标移动，并且会scale放大1.12倍。\n- 拖动过程中持续做碰撞检测，并实时预览排序结果\n\n补充：\n- 如果按下后移动距离超过组件内部阈值，会取消本次长按判定，避免页面滚动时误触发拖拽\n\n适合：\n- 标签排序\n- 宫格排序\n- 图片排序\n\n#### 2. 手柄拖拽\n\n当 `handleMode` 为 `true`，且同时提供 `handle` 插槽时，会启用手柄模式。\n\n- 不再需要长按\n- 只有拖动手柄才会开始排序\n- 内容区本身可以继续点击、滚动、预览\n\n适合：\n- 设置项排序\n- 表单项排序\n- 内容区本身还有点击行为的列表\n\n### 插槽\n\n| 插槽名 | 插槽参数 | 说明 |\n| --- | --- | --- |\n| `default` | `{ item, index }` | 默认内容插槽，用于渲染每一个可排序项。组件不限制 item 的视觉形式，可以自由渲染标签、卡片、宫格、图片等内容。 |\n| `append` | - | 列表末尾的固定入口。不参与拖拽排序，不会写入 `v-model`，不会被删除，适合放“新增按钮”“上传入口”“更多入口”等内容。 |\n| `handle` | `{ item, index }` | 拖拽手柄插槽，仅在 `handleMode` 开启时生效。手柄由组件放在每个 item 的右上角，建议给内容区预留右侧空间，避免手柄遮挡正文。 |\n\n### 事件\n\n| 事件名 | 回调参数 | 触发时机 | 说明 |\n| --- | --- | --- | --- |\n| `change` | 最新数组 | 排序完成后、删除完成后 | 最终结果事件。拖动中的视觉预览不会频繁触发 `change`。 |\n\n### 使用方式\n\n#### 1. 基础标签排序\n\n```vue\n<uni-drag-cell v-model=\"tagList\">\n <template #default=\"{ item, index }\">\n <view class=\"tag-item\" @click=\"onClickTag(item, index)\">\n <text>{{ item }}</text>\n </view>\n </template>\n</uni-drag-cell>\n```\n\n适合：\n- 标签拖拽\n- 轻量横向流式布局\n\n说明：\n- 默认使用长按触发拖拽\n- 当前长按触发时间为 `350ms`\n\n#### 2. 宫格排序\n\n```vue\n<uni-drag-cell v-model=\"gridList\" :column=\"3\">\n <template #default=\"{ item }\">\n <view class=\"grid-item\">\n <text>{{ item.name }}</text>\n </view>\n </template>\n</uni-drag-cell>\n```\n\n适合：\n- 应用图标\n- 功能入口宫格\n- 九宫格类布局\n\n#### 3. 带删除条的拖拽\n\n```vue\n<uni-drag-cell v-model=\"list\" :show-close=\"true\">\n <template #default=\"{ item }\">\n <view class=\"cell-item\">\n <text>{{ item }}</text>\n </view>\n </template>\n</uni-drag-cell>\n```\n\n交互：\n- 长按进入拖拽\n- 拖到屏幕底部删除条\n- 删除条高亮后松手即删除\n\n#### 4. 尾部追加一个固定入口\n\n```vue\n<uni-drag-cell v-model=\"tagList\" :show-append=\"true\">\n <template #default=\"{ item }\">\n <view class=\"tag-item\">\n <text>{{ item }}</text>\n </view>\n </template>\n <template #append>\n <view class=\"tag-add\" @click=\"addTag\">\n <text>+</text>\n </view>\n </template>\n</uni-drag-cell>\n```\n\n说明：\n- `append` 是通用设计，不局限于图片场景\n- 拖拽排序时，`append` 不参与位置计算\n\n#### 5. 九宫格图片选择\n\n```vue\n<uni-drag-cell\n v-model=\"imageList\"\n :column=\"3\"\n :show-close=\"true\"\n :show-append=\"imageList.length < 9\">\n <template #default=\"{ item, index }\">\n <view class=\"image-item\" @click=\"previewImage(index)\">\n <image :src=\"item\" mode=\"aspectFill\"></image>\n </view>\n </template>\n <template #append>\n <view class=\"image-add\" @click=\"chooseImages\">\n <text>+</text>\n </view>\n </template>\n</uni-drag-cell>\n```\n\n设计说明：\n- 图片数组本身就是 `v-model`\n- `append` 用来放“添加图片”入口\n- 当达到上限时，把 `showAppend` 设为 `false`\n\n#### 6. 手柄拖拽排序\n\n```vue\n<uni-drag-cell v-model=\"list\" :column=\"1\" :handle-mode=\"true\">\n <template #default=\"{ item }\">\n <view class=\"cell-item\">\n <text>{{ item }}</text>\n </view>\n </template>\n <template #handle>\n <view class=\"cell-handle\">\n <text>≡</text>\n </view>\n </template>\n</uni-drag-cell>\n```\n\n说明：\n- 手柄模式下，不需要长按\n- 当前实现中，手柄模式不会再把整个 item 放大\n- 这样可以避免单列场景下被父容器裁剪\n\n### 组件内部设计说明\n\n#### 1. 排序预览不是直接改数组\n\n拖动过程中，组件内部维护的是“预览顺序”。\n\n实现方式：\n- 记录每个 item 的稳定 id\n- 根据碰撞结果生成一份预览顺序\n- 通过 `transform` 让其他项移动到目标位置\n- 松手后再正式更新数组和 id 顺序\n\n这样可以避免：\n- 拖动中频繁改外部数组\n- 频繁触发父组件重渲染\n- item 身份丢失导致动画错乱\n\n#### 2. 删除判定基于拖动内容区域\n\n删除命中不是简单按手指坐标判断，而是优先按“拖动内容的真实边界”和“删除条边界”是否接触来判断。\n\n这样做是为了避免：\n- item 外层有 padding 时提前触发删除\n- 不同高度 item 在删除区表现不一致\n- web 与 app 坐标系不一致时出现明显偏移\n\n#### 3. 追加项与删除条互不干扰\n\n`append` 项的设计目标是“固定入口”，因此：\n- 不参与碰撞排序\n- 不参与删除\n- 不写入绑定数组\n\n#### 4. 手柄模式与长按模式共用同一套拖拽链路\n\n也就是说：\n- 排序逻辑相同\n- 删除逻辑相同\n- 只是“进入拖拽态”的入口不同\n\n这样可以减少两套逻辑分叉导致的维护成本。\n\n### 性能注意\n\n拖拽时耗费性能的点主要有两个：\n\n#### 1. 拖动中的碰撞检测\n\n每次 move 都会更新：\n- 当前拖动偏移\n- 删除条命中状态\n- 目标悬停位置\n\n这是拖拽组件的必要开销，当前实现已经把重测布局的频率控制在较低水平，只在必要时重新测量。\n\n#### 2. 删除条命中时的实时矩形读取\n\n当启用 `showClose` 时，拖动中会优先读取当前拖动内容的实时矩形，以保证删除命中准确。\n\n这部分是“精度优先”的设计，开销可接受，但不建议把它用于超大数量、超复杂 item 的高频拖拽场景。\n\n### 使用注意事项\n\n#### 1. 建议 item 尺寸稳定\n\n尤其是宫格模式下，建议每个 item 的宽高尽量稳定。\n\n否则可能带来：\n- 拖动命中感不一致\n- 排序预览观感不稳定\n\n#### 2. 手柄模式下给内容区预留右侧空间\n\n因为手柄是覆盖在 item 右上角的。\n\n建议：\n- 内容区右侧留白\n- 或者把手柄区域设计成视觉上独立的一块\n\n#### 3. `append` 只是入口，不是数据项\n\n这点非常重要。\n\n不要指望：\n- `append` 参与排序\n- `append` 进入 `v-model`\n- `append` 被删除\n\n如果你需要“真正的数据项”，请直接写进 `modelValue`。\n\n#### 4. 外部不要在拖拽过程中频繁整体替换列表\n\n建议：\n- 由组件在松手后统一回传结果\n- 父组件收到结果后再更新自己的数据源\n\n不建议：\n- 拖动过程中再由父组件持续重建整个数组\n\n#### 5. 不建议用于超大列表或虚拟列表场景\n\n这个组件当前更适合：\n- 小中型标签列表\n- 宫格\n- 表单排序\n- 九宫格图片选择\n\n如果是超长列表、虚拟滚动列表，应该使用专门为大数据量设计的方案。\n\n### 平台说明\n\n#### Web\n\n- 支持 pointer / touch 交互\n\n#### Android\n\n- 支持触摸拖拽\n","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 5.07 | 5.07 | 5.08 | 5.07 | 5.07 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| modelValue | Array | | 可拖拽排序的数据源，支持 v-model 双向绑定，内部会在拖拽结束后更新顺序 |\n| column | number | 0 | 网格列数。大于 0 时按网格排布，等于 0 时按一行流式排布 |\n| showClose | boolean | false | 是否显示拖拽到底部删除栏，开启后可将 item 拖入底部删除 |\n| showAppend | boolean | true | 是否显示末尾的 append 插槽（非拖拽状态下） |\n| handleMode | boolean | false | 是否启用拖拽手柄模式，仅点击 handle 插槽才能触发拖拽 |\n| @update:modelValue | Event | | v-model 绑定值变化事件，参数为最新数组，类型为数组 |\n| @change | Event | | 排序完成后、删除完成后触发，参数为最新数组，类型为数组 |","event":"","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/uni-ui/drag-cell/drag-cell.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/uni-ui/drag-cell/drag-cell.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/uni-ui/drag-cell/drag-cell\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/uni-ui/drag-cell/drag-cell\n\n>示例\n```vue\n<template>\r\n\t\r\n\t<scroll-view class=\"page uni-theme-root\" style=\"padding: 15px;\">\r\n\t\r\n\t\t\r\n\t\t<view class=\"uni-theme-root\" style=\"padding: 15px;\">\r\n\t\t\r\n\t\t\t<text class=\"page-title\">drag-cell 拖拽排序组件</text>\r\n\r\n\t\t\t<view class=\"section\">\r\n\t\t\t\t<text class=\"section-title\">示例 1：标签拖拽排序</text>\r\n\t\t\t\t<text class=\"section-desc\">长按标签后可拖拽排序，点击标签可拿到 item 和 index</text>\r\n\t\t\t\t<uni-drag-cell v-model=\"data.tagList\" @change=\"onTagChange\">\r\n\t\t\t\t\t<template #default=\"{ item, index }\">\r\n\t\t\t\t\t\t<view class=\"tag-slot\">\r\n\t\t\t\t\t\t\t<view class=\"tag-item\" @click=\"clickItem(item as string, index as number)\">\r\n\t\t\t\t\t\t\t\t<text class=\"tag-text\">{{ item as string }}</text>\r\n\t\t\t\t\t\t\t</view>\r\n\t\t\t\t\t\t</view>\r\n\t\t\t\t\t</template>\r\n\t\t\t\t</uni-drag-cell>\r\n\t\t\t\t<text class=\"result-text\">当前顺序：{{ data.tagList.join(', ') }}</text>\r\n\t\t\t</view>\r\n\r\n\t\t\t<view class=\"section\">\r\n\t\t\t\t<text class=\"section-title\">示例 2：宫格拖拽排序（3 列）</text>\r\n\t\t\t\t<text class=\"section-desc\">长按宫格项后可拖拽排序</text>\r\n\t\t\t\t<uni-drag-cell v-model=\"data.gridList3\" :column=\"3\" @change=\"onGridChange\">\r\n\t\t\t\t\t<template #default=\"{ item }\">\r\n\t\t\t\t\t\t<view class=\"grid-slot\">\r\n\t\t\t\t\t\t\t<view class=\"grid-item\">\r\n\t\t\t\t\t\t\t\t<text class=\"grid-text\">{{ (item as UTSJSONObject)['name'] }}</text>\r\n\t\t\t\t\t\t\t</view>\r\n\t\t\t\t\t\t</view>\r\n\t\t\t\t\t</template>\r\n\t\t\t\t</uni-drag-cell>\r\n\t\t\t\t<text class=\"result-text\">当前顺序：{{ getGridNames(data.gridList3) }}</text>\r\n\t\t\t</view>\r\n\r\n\t\t\t<view class=\"section\">\r\n\t\t\t\t<text class=\"section-title\">示例 3：列表拖拽排序（1 列）</text>\r\n\t\t\t\t<text class=\"section-desc\">长按列表项后可拖拽排序</text>\r\n\t\t\t\t<uni-drag-cell v-model=\"data.gridList4\" :column=\"1\" @change=\"onGridChange\">\r\n\t\t\t\t\t<template #default=\"{ item }\">\r\n\t\t\t\t\t\t<view class=\"grid-slot-small\">\r\n\t\t\t\t\t\t\t<view class=\"grid-item-small\">\r\n\t\t\t\t\t\t\t\t<text class=\"grid-text-small\">{{ (item as UTSJSONObject)['name'] }}</text>\r\n\t\t\t\t\t\t\t</view>\r\n\t\t\t\t\t\t</view>\r\n\t\t\t\t\t</template>\r\n\t\t\t\t</uni-drag-cell>\r\n\t\t\t\t<text class=\"result-text\">当前顺序：{{ getGridNames(data.gridList4) }}</text>\r\n\t\t\t</view>\r\n\r\n\t\t\t<view class=\"section\">\r\n\t\t\t\t<text class=\"section-title\">示例 4：可新增并删除的标签</text>\r\n\t\t\t\t<text class=\"section-desc\">长按标签可排序，拖到底部可删除，点击 + 可输入并新增标签</text>\r\n\t\t\t\t<uni-drag-cell v-model=\"data.deleteList\" :show-close=\"true\" :show-append=\"true\" @change=\"onDeleteChange\">\r\n\t\t\t\t\t<template #default=\"{ item }\">\r\n\t\t\t\t\t\t<view class=\"tag-slot\">\r\n\t\t\t\t\t\t\t<view class=\"tag-item-delete\">\r\n\t\t\t\t\t\t\t\t<text class=\"tag-text\">{{ item as string }}</text>\r\n\t\t\t\t\t\t\t</view>\r\n\t\t\t\t\t\t</view>\r\n\t\t\t\t\t</template>\r\n\t\t\t\t\t<template #append>\r\n\t\t\t\t\t\t<view class=\"tag-slot\">\r\n\t\t\t\t\t\t\t<view class=\"tag-item-add\" @click=\"promptAddDeleteTag\">\r\n\t\t\t\t\t\t\t\t<text class=\"tag-plus-text\">+</text>\r\n\t\t\t\t\t\t\t</view>\r\n\t\t\t\t\t\t</view>\r\n\t\t\t\t\t</template>\r\n\t\t\t\t</uni-drag-cell>\r\n\t\t\t\t<text class=\"result-text\">当前顺序：{{ data.deleteList.join(', ') }}</text>\r\n\t\t\t\t<text class=\"result-text\">剩余：{{ data.deleteList.length }} 项</text>\r\n\t\t\t</view>\r\n\r\n\t\t\t<view class=\"section\">\r\n\t\t\t\t<text class=\"section-title\">示例 5：带删除功能的图标宫格</text>\r\n\t\t\t\t<text class=\"section-desc\">长按后可拖动图标宫格项，并支持拖到底部删除</text>\r\n\t\t\t\t<uni-drag-cell v-model=\"data.iconGridList\" :column=\"3\" :show-close=\"true\" @change=\"onIconGridChange\">\r\n\t\t\t\t\t<template #default=\"{ item }\">\r\n\t\t\t\t\t\t<view class=\"icon-grid-slot\">\r\n\t\t\t\t\t\t\t<view class=\"icon-grid-item\">\r\n\t\t\t\t\t\t\t\t<view class=\"icon-box\">\r\n\t\t\t\t\t\t\t\t\t<text class=\"icon-emoji\">{{ (item as UTSJSONObject)['icon'] }}</text>\r\n\t\t\t\t\t\t\t\t</view>\r\n\t\t\t\t\t\t\t\t<text class=\"icon-label\">{{ (item as UTSJSONObject)['label'] }}</text>\r\n\t\t\t\t\t\t\t</view>\r\n\t\t\t\t\t\t</view>\r\n\t\t\t\t\t</template>\r\n\t\t\t\t</uni-drag-cell>\r\n\t\t\t\t<text class=\"result-text\">当前顺序：{{ getIconNames(data.iconGridList) }}</text>\r\n\t\t\t</view>\r\n\r\n\t\t\t<view class=\"section\">\r\n\t\t\t\t<text class=\"section-title\">示例 6：九宫格图片选择</text>\r\n\t\t\t\t<text class=\"section-desc\">点击 + 选择图片，支持拖拽排序，也支持拖到底部删除</text>\r\n\t\t\t\t<uni-drag-cell v-model=\"data.imageList\" :column=\"3\" :show-close=\"true\"\r\n\t\t\t\t\t:show-append=\"data.imageList.length < maxImageCount\" @change=\"onImageChange\">\r\n\t\t\t\t\t<template #default=\"{ item, index }\">\r\n\t\t\t\t\t\t<view class=\"image-grid-slot\">\r\n\t\t\t\t\t\t\t<view class=\"image-grid-item\" @click=\"previewImages(index as number)\">\r\n\t\t\t\t\t\t\t\t<image class=\"image-grid-img\" :src=\"item\" mode=\"aspectFill\"></image>\r\n\t\t\t\t\t\t\t</view>\r\n\t\t\t\t\t\t</view>\r\n\t\t\t\t\t</template>\r\n\t\t\t\t\t<template #append>\r\n\t\t\t\t\t\t<view class=\"image-grid-slot\">\r\n\t\t\t\t\t\t\t<view class=\"image-grid-plus\" @click=\"chooseImages\">\r\n\t\t\t\t\t\t\t\t<text class=\"image-grid-plus-icon\">+</text>\r\n\t\t\t\t\t\t\t</view>\r\n\t\t\t\t\t\t</view>\r\n\t\t\t\t\t</template>\r\n\t\t\t\t</uni-drag-cell>\r\n\t\t\t\t<text class=\"result-text\">已选择：{{ data.imageList.length }}/{{ maxImageCount }}</text>\r\n\t\t\t</view>\r\n\r\n\t\t\t<view class=\"section\">\r\n\t\t\t\t<text class=\"section-title\">示例 7：手柄拖拽排序</text>\r\n\t\t\t\t<text class=\"section-desc\">开启手柄模式后，不需要长按，只能拖动右侧手柄进行排序</text>\r\n\t\t\t\t<uni-drag-cell v-model=\"data.handleList\" :column=\"1\" :handle-mode=\"true\" @change=\"onHandleListChange\">\r\n\t\t\t\t\t<template #default=\"{ item, index }\">\r\n\t\t\t\t\t\t<view class=\"handle-demo-slot\">\r\n\t\t\t\t\t\t\t<view class=\"handle-demo-item\">\r\n\t\t\t\t\t\t\t\t<text class=\"handle-demo-index\">{{ (index as number) + 1 }}</text>\r\n\t\t\t\t\t\t\t\t<text class=\"handle-demo-text\">{{ item as string }}</text>\r\n\t\t\t\t\t\t\t</view>\r\n\t\t\t\t\t\t</view>\r\n\t\t\t\t\t</template>\r\n\t\t\t\t\t<template #handle=\"{ item }\">\r\n\t\t\t\t\t\t<view class=\"handle-demo-grip\">\r\n\t\t\t\t\t\t\t<text class=\"handle-demo-grip-text\">≡</text>\r\n\t\t\t\t\t\t</view>\r\n\t\t\t\t\t</template>\r\n\t\t\t\t</uni-drag-cell>\r\n\t\t\t\t<text class=\"result-text\">当前顺序：{{ data.handleList.join(', ') }}</text>\r\n\t\t\t</view>\r\n\r\n\t\t\t<view style=\"height: 50px;\"></view>\r\n\t\r\n\t</scroll-view>\r\n\t\r\n\t\r\n\t</view>\r\n\t\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n\tconst maxImageCount = 9\r\n\r\n\ttype Data = {\r\n\t\ttagList: string[],\r\n\t\tgridList3: UTSJSONObject[],\r\n\t\tgridList4: UTSJSONObject[],\r\n\t\tdeleteList: string[],\r\n\t\ticonGridList: UTSJSONObject[],\r\n\t\timageList: string[],\r\n\t\thandleList: string[]\r\n\t}\r\n\r\n\tconst data = reactive<Data>({\r\n\t\ttagList: ['标签1', '标签2', '标签3', '标签4'],\r\n\t\tgridList3: [\r\n\t\t\t{ name: '宫格1' },\r\n\t\t\t{ name: '宫格2' },\r\n\t\t\t{ name: '宫格3' },\r\n\t\t\t{ name: '宫格4' },\r\n\t\t\t{ name: '宫格5' },\r\n\t\t\t{ name: '宫格6' },\r\n\t\t\t{ name: '宫格7' },\r\n\t\t\t{ name: '宫格8' },\r\n\t\t\t{ name: '宫格9' }\r\n\t\t],\r\n\t\tgridList4: [\r\n\t\t\t{ name: '1' },\r\n\t\t\t{ name: '2' },\r\n\t\t\t{ name: '3' },\r\n\t\t\t{ name: '4' },\r\n\t\t\t{ name: '5' }\r\n\t\t],\r\n\t\tdeleteList: ['标签A', '标签B', '标签C', '标签D', '标签E'],\r\n\t\ticonGridList: [\r\n\t\t\t{ icon: 'H', label: '首页' },\r\n\t\t\t{ icon: 'M', label: '消息' },\r\n\t\t\t{ icon: 'P', label: '我的' },\r\n\t\t\t{ icon: 'S', label: '设置' },\r\n\t\t\t{ icon: 'A', label: '相册' },\r\n\t\t\t{ icon: 'Y', label: '音乐' }\r\n\t\t],\r\n\t\timageList: [],\r\n\t\thandleList: ['微信支付', '支付宝', 'Apple Pay']\r\n\t})\r\n\r\n\tconst clickItem = (item : string, index : number) => {\r\n\t\tuni.showToast({\r\n\t\t\ttitle: '点击了第 ' + (index + 1) + ' 项：' + item,\r\n\t\t\ticon: 'none'\r\n\t\t})\r\n\t}\r\n\r\n\tconst onTagChange = (list : string[]) => {\r\n\t\tconsole.log('tag list changed:', list)\r\n\t}\r\n\r\n\tconst onGridChange = (list : UTSJSONObject[]) => {\r\n\t\tconsole.log('grid list changed:', list)\r\n\t}\r\n\r\n\tconst onDeleteChange = (list : string[]) => {\r\n\t\tconsole.log('delete list changed:', list)\r\n\t}\r\n\r\n\tconst onIconGridChange = (list : UTSJSONObject[]) => {\r\n\t\tconsole.log('icon grid list changed:', list)\r\n\t}\r\n\r\n\tconst onImageChange = (list : string[]) => {\r\n\t\tconsole.log('image list changed:', list)\r\n\t}\r\n\r\n\tconst onHandleListChange = (list : string[]) => {\r\n\t\tconsole.log('handle list changed:', list)\r\n\t}\r\n\r\n\tconst promptAddDeleteTag = () => {\r\n\t\tuni.showModal({\r\n\t\t\ttitle: '新增标签',\r\n\t\t\teditable: true,\r\n\t\t\tplaceholderText: '请输入标签内容',\r\n\t\t\tconfirmText: '确定',\r\n\t\t\tcancelText: '取消',\r\n\t\t\tsuccess: (res) => {\r\n\t\t\t\tif (res.confirm != true) {\r\n\t\t\t\t\treturn\r\n\t\t\t\t}\r\n\t\t\t\tconst value = res.content != null ? res.content.trim() : ''\r\n\t\t\t\tif (value.length == 0) {\r\n\t\t\t\t\tuni.showToast({\r\n\t\t\t\t\t\ttitle: '标签内容不能为空',\r\n\t\t\t\t\t\ticon: 'none'\r\n\t\t\t\t\t})\r\n\t\t\t\t\treturn\r\n\t\t\t\t}\r\n\t\t\t\tconst nextList = data.deleteList.slice()\r\n\t\t\t\tnextList.push(value)\r\n\t\t\t\tdata.deleteList = nextList\r\n\t\t\t\tonDeleteChange(data.deleteList)\r\n\t\t\t}\r\n\t\t})\r\n\t}\r\n\r\n\tconst extractChooseImagePaths = (res : ChooseImageSuccess) : string[] => {\r\n\t\tconst paths : string[] = []\r\n\t\tfor (let i = 0; i < res.tempFilePaths.length; i++) {\r\n\t\t\tconst path = res.tempFilePaths[i]\r\n\t\t\tif (path.length > 0) {\r\n\t\t\t\tpaths.push(path)\r\n\t\t\t}\r\n\t\t}\r\n\t\tif (paths.length > 0) {\r\n\t\t\treturn paths\r\n\t\t}\r\n\t\tfor (let i = 0; i < res.tempFiles.length; i++) {\r\n\t\t\tconst path = res.tempFiles[i].path\r\n\t\t\tif (path.length > 0) {\r\n\t\t\t\tpaths.push(path)\r\n\t\t\t}\r\n\t\t}\r\n\t\treturn paths\r\n\t}\r\n\r\n\tconst chooseImages = () => {\r\n\t\tconst remainCount = maxImageCount - data.imageList.length\r\n\t\tif (remainCount <= 0) {\r\n\t\t\treturn\r\n\t\t}\r\n\t\tuni.chooseImage({\r\n\t\t\tcount: remainCount,\r\n\t\t\tsuccess: (res : ChooseImageSuccess) => {\r\n\t\t\t\tconst selectedPaths = extractChooseImagePaths(res)\r\n\t\t\t\tif (selectedPaths.length == 0) {\r\n\t\t\t\t\treturn\r\n\t\t\t\t}\r\n\t\t\t\tconst nextList = data.imageList.slice()\r\n\t\t\t\tfor (let i = 0; i < selectedPaths.length; i++) {\r\n\t\t\t\t\tif (nextList.length >= maxImageCount) {\r\n\t\t\t\t\t\tbreak\r\n\t\t\t\t\t}\r\n\t\t\t\t\tnextList.push(selectedPaths[i])\r\n\t\t\t\t}\r\n\t\t\t\tdata.imageList = nextList\r\n\t\t\t\tonImageChange(data.imageList)\r\n\t\t\t}\r\n\t\t})\r\n\t}\r\n\r\n\tconst previewImages = (index : number) => {\r\n\t\tif (index < 0 || index >= data.imageList.length) {\r\n\t\t\treturn\r\n\t\t}\r\n\t\tuni.previewImage({\r\n\t\t\turls: data.imageList,\r\n\t\t\tcurrent: data.imageList[index]\r\n\t\t})\r\n\t}\r\n\r\n\tconst getGridNames = (list : UTSJSONObject[]) : string => {\r\n\t\tconst names : string[] = []\r\n\t\tfor (let i = 0; i < list.length; i++) {\r\n\t\t\tconst value = list[i]['name']\r\n\t\t\tif (value != null) {\r\n\t\t\t\tnames.push(value as string)\r\n\t\t\t}\r\n\t\t}\r\n\t\treturn names.join(', ')\r\n\t}\r\n\r\n\tconst getIconNames = (list : UTSJSONObject[]) : string => {\r\n\t\tconst names : string[] = []\r\n\t\tfor (let i = 0; i < list.length; i++) {\r\n\t\t\tconst value = list[i]['label']\r\n\t\t\tif (value != null) {\r\n\t\t\t\tnames.push(value as string)\r\n\t\t\t}\r\n\t\t}\r\n\t\treturn names.join(', ')\r\n\t}\r\n\r\n\tdefineExpose({\r\n\t\tdata,\r\n\t\tclickItem,\r\n\t\tpromptAddDeleteTag,\r\n\t\tchooseImages,\r\n\t\tpreviewImages\r\n\t})\r\n</script>\r\n\r\n<style>\r\n\t.page {\r\n\t\tflex: 1;\r\n\t}\r\n\r\n\t.page-title {\r\n\t\tfont-size: 24px;\r\n\t\tfont-weight: bold;\r\n\t\tcolor: var(--text-color, #333333);\r\n\t\tmargin-bottom: 20px;\r\n\t\ttext-align: center;\r\n\t}\r\n\r\n\t.section {\r\n\t\tmargin-bottom: 30px;\r\n\t\tbackground-color: var(--list-background-color, #ffffff);\r\n\t\tborder-radius: 8px;\r\n\t\tpadding: 15px;\r\n\t}\r\n\r\n\t.section-title {\r\n\t\tfont-size: 16px;\r\n\t\tfont-weight: bold;\r\n\t\tcolor: #007aff;\r\n\t\tmargin-bottom: 5px;\r\n\t}\r\n\r\n\t.section-desc {\r\n\t\tfont-size: 12px;\r\n\t\tcolor: var(--text-color, #333333);\r\n\t\topacity: 0.7;\r\n\t\tmargin-bottom: 15px;\r\n\t}\r\n\r\n\t.tag-slot {\r\n\t\tpadding-right: 10px;\r\n\t\tpadding-bottom: 10px;\r\n\t}\r\n\r\n\t.tag-item {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\tbackground-color: #007aff;\r\n\t\tborder-radius: 4px;\r\n\t\tpadding: 8px 16px;\r\n\t}\r\n\r\n\t.tag-text {\r\n\t\tcolor: #ffffff;\r\n\t\tfont-size: 14px;\r\n\t}\r\n\r\n\t.tag-item-delete {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\tbackground-color: #ff6b6b;\r\n\t\tborder-radius: 4px;\r\n\t\tpadding: 4px 16px;\r\n\t\theight: 32px;\r\n\t}\r\n\r\n\t.tag-item-add {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\talign-items: center;\r\n\t\tjustify-content: center;\r\n\t\tbackground-color: #fff5f5;\r\n\t\tborder-width: 1px;\r\n\t\tborder-style: dashed;\r\n\t\tborder-color: #ff6b6b;\r\n\t\tborder-radius: 4px;\r\n\t\tpadding: 4px 16px;\r\n\t\theight: 32px;\r\n\t}\r\n\r\n\t.tag-plus-text {\r\n\t\tcolor: #ff6b6b;\r\n\t\tfont-size: 16px;\r\n\t\tfont-weight: bold;\r\n\t}\r\n\r\n\t.grid-slot {\r\n\t\twidth: 100%;\r\n\t\tpadding: 5px;\r\n\t}\r\n\r\n\t.grid-item {\r\n\t\twidth: 100%;\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\talign-items: center;\r\n\t\tjustify-content: center;\r\n\t\tbackground-color: #28a745;\r\n\t\tborder-radius: 8px;\r\n\t\theight: 80px;\r\n\t}\r\n\r\n\t.grid-text {\r\n\t\tcolor: #ffffff;\r\n\t\tfont-size: 14px;\r\n\t\tfont-weight: bold;\r\n\t}\r\n\r\n\t.grid-slot-small {\r\n\t\twidth: 90%;\r\n\t\t/* 避免scale放大1.12倍时被裁剪*/\r\n\t\tpadding: 3px;\r\n\t\talign-self: center;\r\n\t}\r\n\r\n\t.grid-item-small {\r\n\t\twidth: 100%;\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\talign-items: center;\r\n\t\tjustify-content: center;\r\n\t\tbackground-color: #ffc107;\r\n\t\tborder-radius: 8px;\r\n\t\theight: 60px;\r\n\t}\r\n\r\n\t.grid-text-small {\r\n\t\tcolor: #333333;\r\n\t\tfont-size: 16px;\r\n\t\tfont-weight: bold;\r\n\t}\r\n\r\n\t.icon-grid-slot {\r\n\t\twidth: 100%;\r\n\t\tpadding: 5px;\r\n\t}\r\n\r\n\t.icon-grid-item {\r\n\t\twidth: 100%;\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\talign-items: center;\r\n\t\tjustify-content: center;\r\n\t\tbackground-color: var(--active-background-color, #f8f9fa);\r\n\t\tborder-radius: 8px;\r\n\t\tpadding: 10px;\r\n\t}\r\n\r\n\t.icon-box {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\talign-items: center;\r\n\t\tjustify-content: center;\r\n\t\twidth: 50px;\r\n\t\theight: 50px;\r\n\t\tbackground-color: var(--list-background-color, #e9ecef);\r\n\t\tborder-radius: 25px;\r\n\t\tmargin-bottom: 5px;\r\n\t}\r\n\r\n\t.icon-emoji {\r\n\t\tfont-size: 24px;\r\n\t\tfont-weight: bold;\r\n\t\tcolor: var(--text-color, #333333);\r\n\t}\r\n\r\n\t.icon-label {\r\n\t\tfont-size: 12px;\r\n\t\tcolor: var(--text-color, #333333);\r\n\t}\r\n\r\n\t.image-grid-slot {\r\n\t\twidth: 100%;\r\n\t\tpadding: 5px;\r\n\t}\r\n\r\n\t.image-grid-item {\r\n\t\twidth: 100%;\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\talign-items: center;\r\n\t\tjustify-content: center;\r\n\t\theight: 104px;\r\n\t\tbackground-color: var(--active-background-color, #f5f5f5);\r\n\t\tborder-radius: 12px;\r\n\t\toverflow: hidden;\r\n\t}\r\n\r\n\t.image-grid-img {\r\n\t\twidth: 100%;\r\n\t\theight: 100%;\r\n\t\tborder-radius: 12px;\r\n\t}\r\n\r\n\t.image-grid-plus {\r\n\t\twidth: 100%;\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\talign-items: center;\r\n\t\tjustify-content: center;\r\n\t\theight: 104px;\r\n\t\tbackground-color: var(--active-background-color, #fafafa);\r\n\t\tborder-width: 1px;\r\n\t\tborder-style: dashed;\r\n\t\tborder-color: var(--border-color, #d9d9d9);\r\n\t\tborder-radius: 12px;\r\n\t}\r\n\r\n\t.image-grid-plus-icon {\r\n\t\tfont-size: 36px;\r\n\t\tfont-weight: bold;\r\n\t\tcolor: var(--arrow-color, #999999);\r\n\t}\r\n\r\n\t.handle-demo-slot {\r\n\t\twidth: 100%;\r\n\t\tpadding: 4px 0;\r\n\t}\r\n\r\n\t.handle-demo-item {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: row;\r\n\t\talign-items: center;\r\n\t\tbackground-color: var(--active-background-color, #f7f8fa);\r\n\t\tborder-width: 1px;\r\n\t\tborder-style: solid;\r\n\t\tborder-color: var(--border-color, #e5e6eb);\r\n\t\tborder-radius: 10px;\r\n\t\tpadding: 16px 52px 16px 14px;\r\n\t}\r\n\r\n\t.handle-demo-index {\r\n\t\twidth: 24px;\r\n\t\tmargin-right: 12px;\r\n\t\tcolor: #007aff;\r\n\t\tfont-size: 15px;\r\n\t\tfont-weight: bold;\r\n\t\ttext-align: center;\r\n\t}\r\n\r\n\t.handle-demo-text {\r\n\t\tcolor: var(--text-color, #333333);\r\n\t\tfont-size: 14px;\r\n\t}\r\n\r\n\t.handle-demo-grip {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\talign-items: center;\r\n\t\tjustify-content: center;\r\n\t\twidth: 40px;\r\n\t\theight: 56px;\r\n\t}\r\n\r\n\t.handle-demo-grip-text {\r\n\t\tcolor: var(--arrow-color, #999999);\r\n\t\tfont-size: 24px;\r\n\t\tfont-weight: bold;\r\n\t}\r\n\r\n\t.result-text {\r\n\t\tfont-size: 12px;\r\n\t\tcolor: var(--text-color, #333333);\r\n\t\topacity: 0.7;\r\n\t\tmargin-top: 10px;\r\n\t}\r\n</style>\r\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=uni-ui-x.uni-drag-cell)"},"uni-fab-button":{"name":"::: sourceCode\n## uni-fab-button\n:::","originName":"## uni-fab-button","description":"悬浮加号按钮组件\n\n> 本 Component 是 uni ext component，需下载插件：[uni-fab-button](https://ext.dcloud.net.cn/plugin?id=27846)\n","readme":"悬浮加号按钮\n\n本组件常用于页面中右下角悬浮的、里面有一个加号的圆形按钮。\n\n组件的根view默认是一个圆形，蓝色背景（#007AFF），并带有阴影。使用组件时注意组件的父容器要留出阴影的空间，避免被裁剪。\n\n组件的二级view是2个view交叉组成的加号。其中垂直的view是通过transform变换方向实现的。\n\n组件的属性为 plus-class，它是一个externalClass，用于外部修改组件内部的、组成加号的2个view的样式。\n\n组件中加号的默认样式为背景白色、粗细为2px、尺寸为40%。\n\n### 注意\n- 鸿蒙平台按下fab-button不缩写的问题，需升级到HBuilderX 5.09+解决\n","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 5.07 | 5.07 | 5.07 | 5.07 | 5.07 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| plusClass | string([string.ClassString](/uts/data-type.md#ide-string)) | \"\" | 加号图标的自定义样式类，用于调整加号颜色、尺寸等样式 |\n| @click | Event | | 点击事件，参数为事件对象，类型为 UniPointerEvent |","event":"","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/uni-ui/fab-button/fab-button.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/uni-ui/fab-button/fab-button.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/uni-ui/fab-button/fab-button\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/uni-ui/fab-button/fab-button\n\n>示例\n```vue\n<template>\n\t<view style=\"flex: 1;position: relative;padding: 15px 15px 0 15px;\">\n\t\t<text class=\"label first-label\">标准uni-fab-button</text>\n\t\t<uni-fab-button></uni-fab-button>\n\t\t<text class=\"label\">自定义fab样式</text>\n\t\t<uni-fab-button class=\"custom-class\"></uni-fab-button>\n\t\t<text class=\"label\">自定义plus样式</text>\n\t\t<uni-fab-button plus-class=\"custom-plus-class\"></uni-fab-button>\n\t\t<text class=\"label\">自定义fab和plus样式，变成一个16px的纯+</text>\n\t\t<uni-fab-button class=\"transparent\" plus-class=\"black-plus\"></uni-fab-button>\n\t\t<text class=\"label\">可移动uni-fab-button</text>\n\t\t<view class=\"move-fab-placeholder\">\n\t\t\t<view id=\"move-fab\" class=\"move-fab\" @touchstart=\"onTouchStart\" @touchmove=\"onTouchMove\" @touchend=\"updateMoveData\" @touchcancel=\"updateMoveData\">\n\t\t\t\t<uni-fab-button></uni-fab-button>\n\t\t\t</view>\n\t\t</view>\n\t\t<view\n\t\t\tclass=\"right-bottom\"\n\t\t\t:class=\"rightBottomFabPressed ? 'fab-pressed' : ''\"\n\t\t\t@touchstart=\"rightBottomFabPressed = true\"\n\t\t\t@touchend=\"rightBottomFabPressed = false\"\n\t\t\t@touchcancel=\"rightBottomFabPressed = false\">\n\t\t\t<uni-fab-button @click=\"handleClick\"></uni-fab-button>\n\t\t</view>\n\t</view>\n</template>\n\n<script setup lang=\"uts\">\n\ttype Data = {\n\t\tdx : number\n\t\tdy : number\n\t\tleft : number\n\t\ttop : number\n\t}\n\n\tconst data = reactive<Data>({\n\t\tdx: 0,\n\t\tdy: 0,\n\t\tleft: 15,\n\t\ttop: 47\n\t})\n\tlet sx = 0\n\tlet sy = 0\n\tlet mx = 0\n\tlet my = 0\n\tlet baseLeft = 15\n\tlet baseTop = 47\n\tconst rightBottomFabPressed = ref(false)\n\n\tfunction handleClick() {\n\t\tuni.showToast({\n\t\t\ttitle: '点击了右下角的fab',\n\t\t\ticon: 'none'\n\t\t})\n\t}\n\n\tfunction updateMoveData() {\n\t\tdata.left = baseLeft + mx\n\t\tdata.top = baseTop + my\n\t\tdata.dx = mx\n\t\tdata.dy = my\n\t}\n\n\tfunction updateMovePos(element : UniElement) {\n\t\telement.style.setProperty('position', 'fixed')\n\t\telement.style.setProperty('left', baseLeft + 'px')\n\t\telement.style.setProperty('top', baseTop + 'px')\n\t\telement.style.setProperty('transform', 'translate(' + mx + 'px,' + my + 'px)')\n\t}\n\n\tfunction onTouchStart(e : UniTouchEvent) {\n\t\tsx = e.touches[0].clientX\n\t\tsy = e.touches[0].clientY\n\t\tupdateMovePos(e.currentTarget as UniElement)\n\t}\n\n\tfunction onTouchMove(e : UniTouchEvent) {\n\t\tmx = e.touches[0].clientX - sx + mx\n\t\tmy = e.touches[0].clientY - sy + my\n\t\tsx = e.touches[0].clientX\n\t\tsy = e.touches[0].clientY\n\t\tupdateMovePos(e.currentTarget as UniElement)\n\t}\n\n\tonReady(() => {\n\t\tuni.createSelectorQuery()\n\t\t\t.select('.move-fab-placeholder')\n\t\t\t.boundingClientRect((rect) => {\n\t\t\t\tif (rect != null) {\n\t\t\t\t\tconst nodeInfo = rect as NodeInfo\n\t\t\t\t\tbaseLeft = nodeInfo.left != null ? nodeInfo.left : baseLeft\n\t\t\t\t\tbaseTop = nodeInfo.top != null ? nodeInfo.top : baseTop\n\t\t\t\t\tdata.left = baseLeft\n\t\t\t\t\tdata.top = baseTop\n\t\t\t\t}\n\t\t\t})\n\t\t\t.exec()\n\t})\n\n\tdefineExpose({\n\t\tdata\n\t})\n</script>\n\n<style>\n\t.label {\n\t\tcolor: var(--text-color, #333333);\n\t\tmargin-top: 24px;\n\t\tmargin-bottom: 12px;\n\t}\n\t.first-label {\n\t\tmargin-top: 0;\n\t}\n\t.custom-class{\n\t\tbackground-color: green;\n\t\twidth: 20px;\n\t\theight: 20px;\n\t}\n\t.custom-plus-class {\n\t\tbackground-color: brown;\n\t\twidth: 80%;\n\t\theight: 5px;\n\t\tborder-radius: 0px;\n\t}\n\t.transparent {\n\t\twidth: 16px;\n\t\theight: 16px;\n\t\tbackground-color: transparent;\n\t\tbox-shadow: none;\n\t}\n\t.black-plus {\n\t\tbackground-color: black;\n\t\twidth: 100%;\n\t\theight: 2px;\n\t\tborder-radius: 0px;\n\t}\n\t.move-fab-placeholder {\n\t\twidth: 56px;\n\t\theight: 56px;\n\t}\n\t.move-fab {\n\t\twidth: 56px;\n\t\theight: 56px;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t}\n\t.right-bottom {\n\t\tposition: absolute;\n\t\tright: 38px;\n\t\tbottom: 38px;\n\t\twidth: 56px;\n\t\theight: 56px;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\topacity: 1;\n\t\ttransform: scale(1);\n\t\ttransform-origin: center center;\n\t\ttransition-property: transform, opacity;\n\t\ttransition-duration: 140ms;\n\t\ttransition-timing-function: cubic-bezier(0.2, 0, 0.2, 1);\n\t}\n\t.fab-pressed {\n\t\topacity: 0.9;\n\t\ttransform: scale(0.95);\n\t}\n</style>\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=uni-ui-x.uni-fab-button)"},"uni-index-bar":{"name":"::: sourceCode\n## uni-index-bar\n:::","originName":"## uni-index-bar","description":"索引列表组件\n\n> 本 Component 是 uni ext component，需下载插件：[uni-index-bar](https://ext.dcloud.net.cn/plugin?id=27847)\n","readme":"### 介绍\n\n本组件以竖排方式显示字母索引，常悬浮或固定于列表右侧，用户通过点击或滑动索引条上的字母索引，触发 `select` 事件。在该事件中通过代码驱动指定的列表滚动到该字母索引所在的位置。\n\n本组件为绝对定位，默认垂直居中于父容器右侧。\n\n本组件不包括 list-view 组件，需要配合 list-view 使用。list-view 中需要有对应索引的 list-item，且这些 list-item 需要有 id 属性，可以通过 `scroll-into-view` 属性或 `scrollTop` 属性跳转。\n\n本组件包括一个指示器（indicator）子组件。当用户手指触摸在索引条上的某个字母时，在触摸的字母左边悬浮显示一个水滴形气泡，箭头指向当前触摸的字母。\n\n### 基本用法\n\n```html\n<view style=\"flex: 1; position: relative;\">\n <list-view ref=\"listRef\" style=\"flex: 1;\">\n \n </list-view>\n <uni-index-bar @select=\"onSelect\"></uni-index-bar>\n</view>\n```\n\n```uts\nconst onSelect = (index: string) => {\n // 处理索引选择，滚动列表到对应位置\n}\n```\n\n### 事件\n\n| 事件名 | 说明 | 回调参数 |\n|--------|------|----------|\n| select | 选择索引时触发 | index: string - 当前选择的索引字符 |\n\n### 外部样式类\n\n| 类名 | 说明 |\n|------|------|\n| indicator-view-class | 指示器容器样式，可自定义气泡背景色等 |\n| indicator-text-class | 指示器文字样式，可自定义文字颜色等 |\n\n### 示例\n\n#### 自定义索引\n\n```html\n<uni-index-bar :indexs=\"'☆\\nA\\nB\\nC\\n#'\" @select=\"onSelect\"></uni-index-bar>\n```\n\n#### 自定义样式\n\n```html\n<uni-index-bar\n indicator-view-class=\"custom-indicator\"\n indicator-text-class=\"custom-indicator-text\"\n style=\"color: aqua;\"\n @select=\"onSelect\">\n</uni-index-bar>\n```\n\n```css\n.custom-indicator {\n background-color: #007aff;\n}\n.custom-indicator-text {\n color: #ffff00;\n}\n```\n\n#### 配合 list-view 使用\n\n```html\n<view style=\"flex: 1; position: relative;\">\n <list-view ref=\"listRef\" style=\"flex: 1;\" :scroll-into-view=\"indexViewID\">\n <template v-for=\"group in cityGroups\" :key=\"group.index\">\n <list-item :id=\"'idx-' + group.index\" type=\"header\">\n <view class=\"group-header\">\n <text>{{ group.index }}</text>\n </view>\n </list-item>\n <list-item v-for=\"city in group.cities\" :key=\"city.id\" type=\"city\">\n <view class=\"city-item\">\n <text>{{ city.name }}</text>\n </view>\n </list-item>\n </template>\n </list-view>\n <uni-index-bar :indexs=\"indexList\" @select=\"onSelect\"></uni-index-bar>\n</view>\n```\n\n```uts\nconst indexList = cityGroups.map((g): string => g.index).join('\\n')\nconst indexViewID = ref(\"\")\n\nconst onSelect = (index: string) => {\n indexViewID.value = 'idx-' + index\n}\n```\n","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 5.07 | 5.08 | 5.07 | 5.07 | 5.07 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| indexs | string | \"A\\nB\\nC\\nD\\nE\\nF\\nG\\nH\\nI\\nJ\\nK\\nL\\nM\\nN\\nO\\nP\\nQ\\nR\\nS\\nT\\nU\\nV\\nW\\nX\\nY\\nZ\" | 索引字符列表，使用换行符 \\n 分隔，每行作为一个索引项 |\n| indicatorViewClass | string([string.ClassString](/uts/data-type.md#ide-string)) | \"\" | 指示器容器的自定义样式类，触摸时显示当前索引的气泡 |\n| indicatorTextClass | string([string.ClassString](/uts/data-type.md#ide-string)) | \"\" | 指示器内文字的自定义样式类 |\n| @select | Event | | 选择索引时触发，参数为当前选择的索引字符，类型为 string |","event":"","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/uni-ui/index-bar/index-bar.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/uni-ui/index-bar/index-bar.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/uni-ui/index-bar/index-bar\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/uni-ui/index-bar/index-bar\n\n>示例\n```vue\n<template>\n\t<view style=\"flex: 1; flex-direction: column; position: relative;\">\n\t\t\n\t\t\t<view class=\"control-bar\">\n\t\t\t\t<button class=\"control-btn\" @click=\"toggleStyle\">{{ data.useCustomStyle ? '默认样式' : '自定义样式' }}</button>\n\t\t\t\t<button class=\"control-btn\" @click=\"toggleIndexs\">{{ data.useCustomIndexs ? '根据数据设索引' : '自定义索引' }}</button>\n\t\t\t</view>\n\t\t\t<list-view ref=\"listRef\" style=\"flex: 1;\" class=\"city-list\" :scroll-into-view=\"data.indexViewID\" :scroll-with-animation=\"data.scrollWithAnimation\">\n\t\t\t<sticky-section v-for=\"group in cityGroups\" :key=\"group.index\" :id=\"'idx-' + group.index\"\n\t\t\t\n\t\t\t:preload=\"true\"\n\t\t\t\n\t\t\t>\n\t\t\t\t<sticky-header>\n\t\t\t\t\t<view class=\"group-header\">\n\t\t\t\t\t\t<text class=\"group-header-text\">{{ group.index }}</text>\n\t\t\t\t\t</view>\n\t\t\t\t</sticky-header>\n\t\t\t\t\n\t\t\t\t<list-item v-for=\"city in group.cities\" :key=\"city.pinyin\" type=\"city\">\n\t\t\t\t\t<view class=\"city-item\">\n\t\t\t\t\t\t<text class=\"city-name\">{{ city.name }}</text>\n\t\t\t\t\t</view>\n\t\t\t\t</list-item>\n\t\t\t</sticky-section>\n\t\t</list-view>\n\t\t\t<uni-index-bar\n\t\t\t\t:indexs=\"currentIndexs\"\n\t\t\t\t:indicator-view-class=\"data.useCustomStyle ? 'custom-indicator' : ''\"\n\t\t\t\t:indicator-text-class=\"data.useCustomStyle ? 'custom-indicator-text' : ''\"\n\t\t\t\t:style=\"data.useCustomStyle ? 'color: aqua;' : ''\"\n\t\t\t\t@select=\"onSelect\">\n\t\t\t</uni-index-bar>\n\t</view>\n</template>\n\n<script lang=\"uts\" setup>\n\timport { cityGroups } from './cities.uts'\n\n\t// 默认索引列表\n\tconst defaultIndexs = cityGroups.map((g) : string => g.index).join('\\n')\n\t// 自定义索引列表\n\tconst customIndexs = '☆\\nA\\nB\\nC\\nD\\nE\\nF\\nG\\nH\\nI\\nJ\\nK\\nL\\nM\\nN\\nO\\nP\\nQ\\nR\\nS\\nT\\nU\\nV\\nW\\nX\\nY\\nZ\\n#'\n\n\ttype Data = {\n\t\tuseCustomStyle: boolean\n\t\tuseCustomIndexs: boolean\n\t\tindexViewID: string\n\t\tscrollWithAnimation: boolean\n\t}\n\n\tconst data = reactive<Data>({\n\t\tuseCustomStyle: false,\n\t\tuseCustomIndexs: false,\n\t\tindexViewID: \"\",\n\t\tscrollWithAnimation: false\n\t})\n\n\t// 当前使用的索引\n\tconst currentIndexs = computed(() : string => data.useCustomIndexs ? customIndexs : defaultIndexs)\n\n\tconst listRef = ref<UniListViewElement | null>(null)\n\n\tconst toggleStyle = () => {\n\t\tdata.useCustomStyle = !data.useCustomStyle\n\t}\n\n\tconst toggleIndexs = () => {\n\t\tdata.useCustomIndexs = !data.useCustomIndexs\n\t}\n\n\tconst onSelect = (index : string) => {\n\t\tconst list = listRef.value\n\t\tif (list == null) {\n\t\t\treturn\n\t\t}\n\t\t// console.log('选择了索引：', index)\n\t\tdata.scrollWithAnimation = false\n\t\tconst childId = 'idx-' + index\n\t\tdata.indexViewID = childId\n\t}\n\n\tdefineExpose({\n\t\tdata,\n\t\tcurrentIndexs,\n\t\ttoggleStyle,\n\t\ttoggleIndexs,\n\t\tonSelect\n\t})\n</script>\n\n<style>\n\t.control-bar {\n\t\tflex-direction: row;\n\t\tpadding: 10px;\n\t\tbackground-color: var(--background-color, #f5f5f5);\n\t}\n\n\t.control-btn {\n\t\tflex: 1;\n\t\tmargin: 0 5px;\n\t\tfont-size: 14px;\n\t}\n\n\t.group-header {\n\t\tbackground-color: var(--background-color, #f5f5f5);\n\t\tpadding-left: 16px;\n\t\tpadding-top: 8px;\n\t\tpadding-bottom: 8px;\n\t}\n\n\t.group-header-text {\n\t\tfont-size: 14px;\n\t\tcolor: var(--text-color, #333333);\n\t\topacity: 0.7;\n\t\tfont-weight: bold;\n\t}\n\n\t.city-list {\n\t\tbackground-color: var(--list-background-color, #ffffff);\n\t}\n\n\t.city-item {\n\t\tpadding-left: 16px;\n\t\tpadding-top: 14px;\n\t\tpadding-bottom: 14px;\n\t\tbackground-color: var(--list-background-color, #ffffff);\n\t\tborder-bottom-width: 1px;\n\t\tborder-bottom-color: var(--border-color, #eeeeee);\n\t\tborder-bottom-style: solid;\n\t}\n\n\t.city-name {\n\t\tfont-size: 16px;\n\t\tcolor: var(--text-color, #333333);\n\t}\n\n\t.custom-indicator {\n\t\tbackground-color: #007aff;\n\t}\n\n\t.custom-indicator-text {\n\t\tcolor: #ffff00;\n\t}\n</style>\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=uni-ui-x.uni-index-bar)"},"uni-link":{"name":"::: sourceCode\n## uni-link\n:::","originName":"## uni-link","description":"链接组件\n\n> 本 Component 是 uni ext component，需下载插件：[uni-link](https://ext.dcloud.net.cn/plugin?id=27898)\n","readme":"打开web链接组件。点击后通过内置或外部浏览器打开链接，加载 `href` 属性中配置的 URL。\n\n- `target=\"_self\"` 时，使用 `uni_modules/uni-link-x/pages/link-webview` 页面内的 `web-view` 打开链接。\n * 注意小程序需要将域名加入应用的域名白名单。\n- `target=\"_blank\"` 时，\n * APP平台调用手机浏览器打开链接\n * Web调用 `window.open(url, '_blank')`\n * 小程序平台无法打开手机浏览器，此时会走到失败回退逻辑中\n\n `target=\"_blank\"`失败时，可以通过组件属性`blank-fallback`来控制失败后的回退处理策略，`blank-fallback`属性有3个值：\n\n 1. turn-self ：使用_self方式打开。此值为默认值。也就是 `target=\"_blank\"` 时，小程序下默认转到内置浏览器打开。\n 2. copy-link-modal ：复制链接并弹框提醒。会复制URL到剪贴板中，并弹框提示用户在外部浏览器中打开。\n 3. none ：不回退。会触发组件的error事件。\n\n- 开发者也可以通过条件编译组合使用，比如APP平台使用`_black`，小程序平台使用`_self`\n\n常见失败原因：\n- 安装本组件时未在项目的pages.json中注册组件的内置页面。（HBuilderX导入本组件到项目下时会弹框提醒注册内置页面）\n- 小程序平台未将域名加入应用的域名白名单。\n- iOS运行基座未包括openSchema插件，仅在无xcode时运行会触发。打包其实不会发生此错误。\n- app平台，有些手机系统会弹框询问用户是否允许app打开浏览器，如果用户点了拒绝，这种情况没有失败回调。但有种判断方式是app的onHide生命周期是否触发，如果没有触发，那么意味着并没有启动系统浏览器。\n\n### 基本用法\n\n```html\n<uni-link href=\"https://uniapp.dcloud.net.cn\">uni-app x 文档\n</uni-link>\n```\n\n### Events\n\n| 事件名 | 说明 | 回调参数 |\n| --- | --- | --- |\n| error | 打开失败时触发 | `message: string` |\n\n### 依赖\n\n`APP` 平台依赖 `uts-openSchema`。`uni-link` 已在 `uni_modules/uni-link-x/package.json` 中声明该依赖。\n\n组件目录下有 `pages_init.json`，会向应用的 pages.json 中注册组件中自带的内置浏览器页面。如在HBuilderX中弹框询问是否将组件中的页面注册到项目pages.json中时，请选择同意。\n\n### 示例页面\n\n`/pages/uni-ui/link/link`\n","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 5.07 | 5.07 | 5.07 | 5.07 | 5.07 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| href | string | \"\" | 链接地址，点击组件时要打开的 URL |\n| target | _blank \\| _self | \"_self\" | 打开方式。\"_self\" 在当前应用内置 webview 中打开；\"_blank\" 在外部浏览器中打开（小程序端会复制链接提示用户外部打开） |\n@| 合法值 |\n@| :- |\n@| _blank |\n@| _self |\n| blankFallback | turn-self \\| copy-link-modal \\| none | \"turn-self\" | `target=\"_blank\"`失败时，可以通过本属性控制失败回退策略。\"turn-self\"使用_self方式打开；\"copy-link-modal\"复制链接并弹框提醒；\"none\"不回退，触发失败回调 |\n@| 合法值 |\n@| :- |\n@| turn-self |\n@| copy-link-modal |\n@| none |\n| @error | Event | | |","event":"","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/uni-ui/link/link.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/uni-ui/link/link.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/uni-ui/link/link\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/uni-ui/link/link\n\n>示例\n```vue\n<template>\n <scroll-view class=\"page\">\n <view class=\"section\">\n <text class=\"section-title\">基础用法</text>\n <view class=\"link-block\">\n <uni-link href=\"https://uniapp.dcloud.net.cn\" @error=\"onError\">https://uniapp.dcloud.net.cn</uni-link>\n </view>\n </view>\n\n <view class=\"section\">\n <text class=\"section-title\">自定义样式</text>\n <view class=\"link-block\">\n <uni-link href=\"https://doc.dcloud.net.cn/uni-app-x/\" class=\"custom-link\" @error=\"onError\" >\n 查看 uni-app x 文档\n </uni-link>\n </view>\n </view>\n\n <view class=\"section\">\n <text class=\"section-title\">target=\"_self\" (默认)</text>\n <view class=\"link-block\">\n <uni-link href=\"https://uniapp.dcloud.net.cn\" target=\"_self\" @error=\"onError\" >\n 在内置 webview 中打开\n </uni-link>\n </view>\n </view>\n\n <view class=\"section\">\n <text class=\"section-title\">target=\"_blank\"</text>\n <view class=\"link-block\">\n <uni-link href=\"https://uniapp.dcloud.net.cn\" target=\"_blank\" @error=\"onError\" >\n 使用外部浏览器打开\n </uni-link>\n </view>\n <text class=\"tip-text\">APP 使用 openSchema 插件，小程序回退到内置 webview 打开，Web 打开新页签</text>\n </view>\n\n <view class=\"section\">\n <text class=\"section-title\">target=\"_blank\" 且失败回退策略为复制URL</text>\n <view class=\"link-block\">\n <uni-link href=\"https://uniapp.dcloud.net.cn\" target=\"_blank\" blankFallback=\"copy-link-modal\" @error=\"onError\" >\n 使用外部浏览器打开\n </uni-link>\n </view>\n <text class=\"tip-text\">使用外部浏览器打开失败时，回退为复制URL到剪贴板且弹框提示用户手动粘贴URL到浏览器</text>\n </view>\n\n <view class=\"section\">\n <text class=\"section-title\">失败示例</text>\n <view class=\"link-block\">\n <uni-link href=\"\" @error=\"onError\" >\n 空链接（触发 error）\n </uni-link>\n </view>\n </view>\n\n <view class=\"section\">\n <text class=\"section-title\">最近事件</text>\n <text class=\"log-text\">{{ data.lastEvent }}</text>\n </view>\n </scroll-view>\n</template>\n\n<script setup lang=\"uts\">\n type Data = {\n lastEvent: string\n }\n\n const data = reactive<Data>({\n lastEvent: '暂无事件'\n })\n\n function onError(message : string) {\n data.lastEvent = `error: ${message}`\n console.error(`[link] error: ${message}`)\n }\n\n defineExpose({\n data,\n onError\n })\n</script>\n\n<style>\n .page {\n flex: 1;\n padding: 12px;\n }\n\n .section {\n margin-bottom: 20px;\n }\n\n .section-title {\n font-size: 16px;\n color: var(--text-color, #333333);\n }\n\n .link-block {\n margin-top: 8px;\n }\n\n .tip-text {\n margin-top: 4px;\n font-size: 12px;\n color: var(--text-color, #333333);\n opacity: 0.6;\n }\n\n .custom-link {\n color: #007aff;\n font-size: 20px;\n }\n\n .log-text {\n margin-top: 8px;\n font-size: 13px;\n color: #007aff;\n }\n</style>\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=uni-ui-x.uni-link)"},"uni-nav-bar":{"name":"::: sourceCode\n## uni-nav-bar\n:::","originName":"## uni-nav-bar","description":"自定义导航栏组件\n\n> 本 Component 是 uni ext component，需下载插件：[uni-nav-bar](https://ext.dcloud.net.cn/plugin?id=27897)\n","readme":"自定义导航栏组件\n\n在页面pages.json中关闭原生导航栏后，即使用`\"style\": {\"navigationStyle\": \"custom\"}`，可以使用本组件实现自定义导航栏。\n\n同时注意在pages.json中配置页面style增加属性`disableScroll:true`，即禁止页面滚动。此时只有uni-nav-bar组件的下方才可以滚动。否则页面的回弹bounce效果会把自定义导航栏也拉下来。\n\n本组件自动适配顶部安全区。用padding-top让出顶部状态栏的高度。除去状态栏高度后，本组件的高度为44px。\n\n本组件左右两边默认各让出了6px的边距。也可以在left-class和right-class中自定义边距。\n\n本组件分为left、mid、right 3个区域。\n\n- left区域默认显示一个返回箭头，大小为44*44px。可以通过属性hideDefaultBack来隐藏，也可以传入一个slot name='left'来替代。可以通过left-class来修饰样式。\n- mid区域默认显示title属性设置的标题。也可以传入一个slot name='mid'来替代。其默认宽度为屏幕宽度-两边默认边距-left区域默认宽度-right区域默认宽度。可以通过mid-class来修饰样式。\n- right区域默认不显示内容，可以传入一个slot name='right'来显示自定义内容。right区域默认width也是44px，可以通过right-class来修饰样式。\n\n支持属性：\n- hideDefaultBack: 隐藏返回箭头\n- title: 通过属性方便设置标题。如果传入mid slot，则不生效\n- navigationBarTextStyle: 返回箭头和属性设置的标题，它们的颜色均由该属性控制，可选 white|black\n\n本组件默认没有背景色，即透明，会透显页面的背景色。开发者可通过组件的class自行设置背景色\n\n在小程序端，如果需要规避右上角胶囊按钮，可以参考下方代码设置 margin-right 让出胶囊按钮的宽度和右侧间距。\n\n```html\n<template>\n\t<uni-nav-bar title=\"标题\" right-class=\"nav-right\">\n\t\t<template #right>\n\t\t\t<view :style=\"{ transform: 'translateX(-' + rightMargin + 'px)' }\">\n\t\t\t\t<text class=\"txt-button\">right</text>\n\t\t\t</view>\n\t\t</template>\n\t</uni-nav-bar>\n</template>\n\n<script setup lang=\"uts\">\n\tconst rightMargin = ref(0)\n\tonMounted(() => {\n\t\t// #ifdef MP-WEIXIN\n\t\tconst menuButtonInfo = uni.getMenuButtonBoundingClientRect()\n\t\tconst windowInfo = uni.getWindowInfo()\n\t\t// 预留胶囊按钮宽度和右侧间距，让右侧插槽显示在胶囊按钮左边\n\t\trightMargin.value = windowInfo.windowWidth - menuButtonInfo.right + menuButtonInfo.width\n\t\t// #endif\n\t})\n</script>\n\n<style>\n\t.nav-right {\n\t\toverflow: visible;\n\t}\n\n\t.txt-button {\n\t\twidth: 44px;\n\t\theight: 44px;\n\t\tline-height: 44px;\n\t\ttext-align: center;\n\t}\n</style>\n```\n","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 5.07 | 5.07 | 5.07 | 5.07 | 5.07 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| hideDefaultBack | boolean | false | 是否隐藏默认的返回箭头。为 true 时需要通过 left 插槽自定义返回按钮 |\n| title | string | \"\" | 导航栏中间显示的标题文字，若使用 mid 插槽则该属性无效 |\n| navigationBarTextStyle | String as PropType\\<\"white\" \\| \"black\" \\| \"\"> | \"\" | 导航栏前景色（文字和返回箭头颜色）。非小程序端未传入时会自动读取 pageStyle 的 navigationBarTextStyle |\n| leftClass | string([string.ClassString](/uts/data-type.md#ide-string)) | \"\" | 左侧区域的自定义样式类 |\n| midClass | string([string.ClassString](/uts/data-type.md#ide-string)) | \"\" | 中间区域的自定义样式类 |\n| rightClass | string([string.ClassString](/uts/data-type.md#ide-string)) | \"\" | 右侧区域的自定义样式类 |","event":"","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/uni-ui/nav-bar/nav-bar.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/uni-ui/nav-bar/nav-bar.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/uni-ui/nav-bar/nav-bar\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/uni-ui/nav-bar/nav-bar\n\n>示例\n```vue\n<template>\n\t<uni-nav-bar class=\"uni-theme-root\"></uni-nav-bar>\n\t<scroll-view class=\"page uni-theme-root\" style=\"padding-bottom: var(--uni-safe-area-inset-bottom);\">\n\t\t\n\t\t<uni-nav-bar navigationBarTextStyle=\"black\" title=\"黑色标题\"></uni-nav-bar>\n\t\t<uni-nav-bar navigationBarTextStyle=\"white\" title=\"青色背景白色标题\" style=\"background-color: cyan;\"></uni-nav-bar>\n\t\t<uni-nav-bar title=\"下边带灰线\" style=\"border-bottom: 0.5px #ccc solid;\"></uni-nav-bar>\n\t\t<uni-nav-bar hideDefaultBack title=\"隐藏左侧返回箭头\"></uni-nav-bar>\n\t\t<uni-nav-bar title=\"标题居左\" mid-class=\"left-title\"></uni-nav-bar>\n\t\t<uni-nav-bar title=\"右边有按钮\">\n\t\t\t<template #right>\n\t\t\t\t<text class=\"txt-button\" @click=\"clickButton\">⋯</text>\n\t\t\t</template>\n\t\t</uni-nav-bar>\n\t\t<uni-nav-bar title=\"右边有2个按钮\" right-class=\"two-buttons\">\n\t\t\t<template #right>\n\t\t\t\t<text class=\"txt-button\" @click=\"clickButton\">+</text>\n\t\t\t\t<text class=\"txt-button\" @click=\"clickButton\">⋯</text>\n\t\t\t</template>\n\t\t</uni-nav-bar>\n\t\t<uni-nav-bar title=\"左边有按钮\">\n\t\t\t<template #left>\n\t\t\t\t<text class=\"txt-button\" @click=\"clickButton\">+</text>\n\t\t\t</template>\n\t\t</uni-nav-bar>\n\t\t<uni-nav-bar title=\"左右各1个按钮\">\n\t\t\t<template #left>\n\t\t\t\t<text class=\"txt-button\" @click=\"clickButton\">+</text>\n\t\t\t</template>\n\t\t\t<template #right>\n\t\t\t\t<text class=\"txt-button\" @click=\"clickButton\">⋯</text>\n\t\t\t</template>\n\t\t</uni-nav-bar>\n\t\t<uni-nav-bar>\n\t\t\t<template #mid>\n\t\t\t\t<text class=\"uni-theme-text\">插槽右箭头可以点</text>\n\t\t\t\t<text style=\"padding: 3px;font-size: 10px;\" class=\"uni-theme-text\" @click=\"clickButton\">▼</text>\n\t\t\t</template>\n\t\t</uni-nav-bar>\n\t\t<uni-nav-bar>\n\t\t\t<template #left>\n\t\t\t\t<text class=\"txt-button\" @click=\"clickButton\">+</text>\n\t\t\t</template>\n\t\t\t<template #mid>\n\t\t\t\t<input class=\"slot-input\" placeholder=\"左中右都是插槽，中间是input\"/>\n\t\t\t</template>\n\t\t\t<template #right>\n\t\t\t\t<text class=\"txt-button\" @click=\"clickButton\">⋯</text>\n\t\t\t</template>\n\t\t</uni-nav-bar>\n\t</scroll-view>\n</template>\n\n<script setup>\n\tfunction clickButton() {\n\t\tuni.showToast({\n\t\t\ttitle: '点击了按钮'\n\t\t});\n\t}\n</script>\n\n<style>\n.page {\n\tflex: 1;\n}\n.left-title{\n\tjustify-content: flex-start;\n}\n.two-buttons{\n\twidth: 88px;\n}\n.txt-button{\n\tfont-weight: bold;\n\twidth: 44px;\n\theight: 44px;\n\tline-height: 44px;\n\ttext-align: center;\n\tcolor: var(--text-color);\n}\n.slot-input {\n\tcolor: #333333;\n\tbackground-color: #ffffff;\n\tborder-width: 0.5px;\n\tborder-style: solid;\n\tborder-color: #cccccc;\n}\n@media (prefers-color-scheme: dark) {\n\t.slot-input {\n\t\tcolor: #ffffff;\n\t\tbackground-color: #2d2d2d;\n\t\tborder-color: rgba(255, 255, 255, 0.2);\n\t}\n}\n</style>\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=uni-ui-x.uni-nav-bar)"},"uni-number-box":{"name":"::: sourceCode\n## uni-number-box\n:::","originName":"## uni-number-box","description":"带加减按钮的数字输入框，常见于购物车商品数量选择\n\n> 本 Component 是 uni ext component，需下载插件：[uni-number-box](https://ext.dcloud.net.cn/plugin?id=27896)\n","readme":"带加减按钮的数字输入框，常见于购物车商品数量选择。\n\n### 基本用法\n\n```html\n<uni-number-box v-model=\"value\" />\n```\n\n### 设置范围\n\n```html\n<uni-number-box v-model=\"value\" :min=\"5\" :max=\"20\" />\n```\n\n### 设置步长\n\n```html\n\n<uni-number-box v-model=\"value\" :step=\"5\" />\n\n\n<uni-number-box v-model=\"value\" :step=\"0.1\" />\n```\n\n### 禁用状态\n\n```html\n<uni-number-box :value=\"5\" :disabled=\"true\" />\n```\n\n### 自定义样式\n\n通过 `btn-class`、`input-class`、`icon-class` 自定义组件样式：\n\n```html\n<uni-number-box v-model=\"value\" btn-class=\"custom-btn\" input-class=\"custom-input\" icon-class=\"custom-icon\" />\n```\n\n```css\n.custom-btn {\n background-color: #007aff;\n}\n.custom-input {\n background-color: #e8f4ff;\n color: #007aff;\n}\n.custom-icon {\n background-color: #fff;\n}\n```\n\n### Events\n\n| 事件名 | 说明 | 回调参数 |\n| --- | --- | --- |\n| change | 值改变时触发 | value: number |\n| focus | 输入框聚焦时触发 | event: UniInputFocusEvent |\n| blur | 输入框失焦时触发 | event: UniInputBlurEvent |\n","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 5.07 | 5.07 | 5.07 | 5.07 | 5.07 |\n","attribute":"### 属性 \n| 名称 | 类型 | 描述 |\n| :- | :- | :- |\n| value | number | 输入框当前值，不使用 v-model 时通过该属性传入初始值 |\n| modelValue | number | v-model 绑定值，支持双向绑定 |\n| min | number | 允许输入的最小值 |\n| max | number | 允许输入的最大值 |\n| step | number | 每次点击加/减按钮改变的步长，支持小数 |\n| disabled | boolean | 是否禁用组件，禁用时输入框和加减按钮都不可操作 |\n| btnClass | string([string.ClassString](/uts/data-type.md#ide-string)) | 加减按钮的自定义样式类 |\n| inputClass | string([string.ClassString](/uts/data-type.md#ide-string)) | 输入框的自定义样式类 |\n| iconClass | string([string.ClassString](/uts/data-type.md#ide-string)) | 加减按钮内部图标的自定义样式类 |\n| @change | Function | 值改变时触发，参数为当前值，类型为 number |\n| @focus | Function | 输入框聚焦时触发，参数为事件对象，类型为 UniInputFocusEvent |\n| @blur | Function | 输入框失焦时触发，参数为事件对象，类型为 UniInputBlurEvent |\n| @update:modelValue | Event | v-model 绑定值变化事件，参数为当前值，类型为 number |","event":"","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/uni-ui/number-box/number-box.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/uni-ui/number-box/number-box.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/uni-ui/number-box/number-box\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/uni-ui/number-box/number-box\n\n>示例\n```vue\n<template>\n\t\n\t<scroll-view style=\"flex: 1; padding: 15px;\">\n\t\n\t\n\t<view style=\"padding: 15px;\">\n\t\n\t\t<text class=\"page-title\">NumberBox 数字输入框</text>\n\n\t\t\n\t\t<view style=\"margin-bottom: 20px;\">\n\t\t\t<text class=\"label\">基础用法：</text>\n\t\t\t<uni-number-box v-model=\"data.value1\" @change=\"onChange\" />\n\t\t\t<text class=\"hint\">当前值：{{ data.value1 }}</text>\n\t\t</view>\n\n\t\t\n\t\t<view style=\"margin-bottom: 20px;\">\n\t\t\t<text class=\"label\">设置范围 (min=5, max=20)：</text>\n\t\t\t<uni-number-box v-model=\"data.value2\" :min=\"5\" :max=\"20\" />\n\t\t\t<text class=\"hint\">当前值：{{ data.value2 }}</text>\n\t\t</view>\n\n\t\t\n\t\t<view style=\"margin-bottom: 20px;\">\n\t\t\t<text class=\"label\">步长为5 (step=5)：</text>\n\t\t\t<uni-number-box v-model=\"data.value3\" :step=\"5\" />\n\t\t\t<text class=\"hint\">当前值：{{ data.value3 }}</text>\n\t\t</view>\n\n\t\t\n\t\t<view style=\"margin-bottom: 20px;\">\n\t\t\t<text class=\"label\">小数步长 (step=0.1)：</text>\n\t\t\t<uni-number-box v-model=\"data.value4\" :step=\"0.1\" :min=\"0\" :max=\"10\" />\n\t\t\t<text class=\"hint\">当前值：{{ data.value4 }}</text>\n\t\t</view>\n\n\t\t\n\t\t<view style=\"margin-bottom: 20px;\">\n\t\t\t<text class=\"label\">禁用状态：</text>\n\t\t\t<uni-number-box :value=\"5\" :disabled=\"true\" />\n\t\t</view>\n\n\t\t\n\t\t<view style=\"margin-bottom: 20px;\">\n\t\t\t<text class=\"label\">自定义按钮样式 (btn-class)：</text>\n\t\t\t<uni-number-box v-model=\"data.value5\" btn-class=\"custom-btn\" />\n\t\t</view>\n\n\t\t\n\t\t<view style=\"margin-bottom: 20px;\">\n\t\t\t<text class=\"label\">自定义输入框样式 (input-class)：</text>\n\t\t\t<uni-number-box v-model=\"data.value6\" input-class=\"custom-input\" />\n\t\t</view>\n\n\t\t\n\t\t<view style=\"margin-bottom: 20px;\">\n\t\t\t<text class=\"label\">自定义样式组合 (蓝色主题)：</text>\n\t\t\t<uni-number-box v-model=\"data.value7\" btn-class=\"blue-btn\" input-class=\"blue-input\" icon-class=\"blue-icon\" />\n\t\t</view>\n\n\t\t\n\t\t<view style=\"margin-bottom: 20px; background-color: #1a1a1a; padding: 15px; border-radius: 8px;\">\n\t\t\t<text style=\"color: #fff; margin-bottom: 10px;\">暗黑模式：</text>\n\t\t\t<uni-number-box v-model=\"data.value8\" btn-class=\"dark-btn\" input-class=\"dark-input\" icon-class=\"dark-icon\" />\n\t\t\t<text style=\"color: #999; margin-top: 5px;\">当前值：{{ data.value8 }}</text>\n\t\t</view>\n\n\t\n\t</scroll-view>\n\t\n\t\n\t</view>\n\t\n</template>\n\n<script setup lang=\"uts\">\ntype Data = {\n\tvalue1 : number\n\tvalue2 : number\n\tvalue3 : number\n\tvalue4 : number\n\tvalue5 : number\n\tvalue6 : number\n\tvalue7 : number\n\tvalue8 : number\n}\n\nconst data = reactive<Data>({\n\tvalue1: 1,\n\tvalue2: 10,\n\tvalue3: 0,\n\tvalue4: 0.5,\n\tvalue5: 1,\n\tvalue6: 1,\n\tvalue7: 1,\n\tvalue8: 1\n})\n\nconst onChange = (value : number) : void => {\n\tconsole.log('number-box change:', value)\n}\n\ndefineExpose({\n\tdata\n})\n</script>\n\n<style>\n.page-title {\n\tfont-size: 18px;\n\tfont-weight: bold;\n\tcolor: var(--text-color, #333333);\n\tmargin-bottom: 20px;\n}\n\n.label {\n\tcolor: var(--text-color, #333333);\n\topacity: 0.75;\n\tmargin-bottom: 10px;\n}\n\n.hint {\n\tcolor: var(--text-color, #333333);\n\topacity: 0.6;\n\tmargin-top: 5px;\n}\n\n.custom-btn {\n\tbackground-color: #28a745;\n}\n\n.custom-input {\n\tbackground-color: #fff3cd;\n\tcolor: #856404;\n\twidth: 80px;\n}\n\n.dark-btn {\n\tbackground-color: #333;\n}\n\n.dark-input {\n\tbackground-color: #333;\n\tcolor: #fff;\n}\n\n.dark-icon {\n\tbackground-color: #fff;\n}\n\n.blue-btn {\n\tbackground-color: #007aff;\n}\n\n.blue-input {\n\tbackground-color: #e8f4ff;\n\tcolor: #007aff;\n}\n\n.blue-icon {\n\tbackground-color: #fff;\n}\n</style>\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=uni-ui-x.uni-number-box)"},"uni-rate":{"name":"::: sourceCode\n## uni-rate\n:::","originName":"## uni-rate","description":"评分组件\n\n> 本 Component 是 uni ext component，需下载插件：[uni-rate](https://ext.dcloud.net.cn/plugin?id=27900)\n","readme":"评分组件，多用于购买商品后，对商品进行评价等场景\n\n### 文件路径\n项目下有一个 /pages/uni-ui/rate/rate.uvue 页面，里面演示了rate组件的各种用法。\n\n### 设计\n\nrate组件是投票评分使用的组件。它使用unicode字符实现，通过修改字体的样式，实现各种效果。\n\n它分2个版本，一个版本是高性能版本，只有一层，不显示灰星，仅显示亮星，亮星不支持小数点，不能点击。适于长列表中显示。\n另一个版本是普通版本，由背景灰星和前景亮星叠加而成，支持小数点，支持点击。\n这2个版本通过属性full来切换。\n\n本组件支持v-model绑定响应式数据。\n\nrate组件有如下属性：\n- full\n\t是否显示全部5颗星。当黄色不够5星时，是否填充灰星以达到5星的固定长度。不填充灰星性能更高\n- readonly\n\t是否响应点击变化。full属性为false时不生效，即无灰星时一定只读\n- plain\n\t灰星是否镂空\n- star-class\n\t星星的样式\n- star-style\n\t星星的样式\n- star-active-class\n\t选中的星星的样式\n- star-active-style\n\t选中的星星的样式\n\nrate组件有onChange事件，事件回调中会给出点击触发的新评分值。\n","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 5.07 | 5.07 | 5.07 | 5.07 | 5.07 |\n","attribute":"### 属性 \n| 名称 | 类型 | 描述 |\n| :- | :- | :- |\n| value | number | 当前评分，取值范围 0~5 的数字 |\n| modelValue | number | v-model 绑定值，支持双向绑定，优先级高于 value |\n| full | boolean | 是否显示完整 5 颗星。为 true 时用灰星填充未选中位置；为 false 时仅显示亮星，性能更高但不支持点击交互 |\n| readonly | boolean | 是否只读，为 true 时不响应点击评分（full 为 false 时始终只读） |\n| plain | boolean | 灰星是否使用镂空样式（☆），为 false 时使用实心灰星（★） |\n| starClass | string([string.ClassString](/uts/data-type.md#ide-string)) | 灰星（未选中）的自定义样式类 |\n| starStyle | string | 灰星（未选中）的内联样式 |\n| starActiveClass | string([string.ClassString](/uts/data-type.md#ide-string)) | 亮星（选中）的自定义样式类 |\n| starActiveStyle | string | 亮星（选中）的内联样式 |\n| @change | Event | 评分变化事件，参数为评分值，类型为 number |\n| @update:modelValue | Event | v-model 绑定值变化事件，参数为评分值，类型为 number |","event":"","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/uni-ui/rate/rate.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/uni-ui/rate/rate.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/uni-ui/rate/rate\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/uni-ui/rate/rate\n\n>示例\n```vue\n<template>\n\t\n\t<scroll-view style=\"flex: 1;padding: 15px 15px 30px 15px;\">\n\t\n\t\n\t<view style=\"padding: 15px 15px 30px 15px;\">\n\t\n\t\t<text class=\"desc\">评分组件用于商品评价打分、服务态度评价、用户满意度等场景。\\n\n\t\t高性能模式仅有一个text组件，不可修改评分，适合长列表中显示的场景。\\n\n\t\t普通模式可以通过点击星星进行评分，且专门调大字号、调宽间距以适合点击。\n\t\t</text>\n\t\t\n\t\t<text class=\"title\">只读评分文字</text>\n\t\t<text style=\"color: #ffca3e;\">★★★★</text>\n\t\t\n\t\t<text class=\"title\">高性能：只读，不显示灰星，不支持小数</text>\n\t\t\t<uni-rate :value=\"3.6\"/>\n\t\t<text class=\"title\">只读，显示灰星</text>\n\t\t\t<uni-rate full readonly/>\n\t\t<text class=\"title\">只读，小数4.3</text>\n\t\t\t<uni-rate full readonly :value=\"4.3\"/>\n\t\t<text class=\"title\">只读，value大于5超限测试</text>\n\t\t\t<uni-rate full readonly :value=\"100\"/>\n\t\t<text class=\"title\">只读，value小于0超限测试</text>\n\t\t\t<uni-rate full readonly :value=\"-1\"/>\n\t\t<text class=\"title\">未选中的星星为镂空状态\" </text>\n\t\t\t<uni-rate full :value=\"3.5\" :plain=\"true\" star-class=\"tap-rate-star\" star-active-class=\"tap-rate-star\" />\n\t\t<text class=\"title\">未选中的星星为实心且响应change事件</text>\n\t\t\t<uni-rate full star-class=\"tap-rate-star\" star-active-class=\"tap-rate-star\" @change=\"onRateChange\" />\n\t\t<text class=\"title\">响应点击并双向绑定响应式变量</text>\n\t\t\t<uni-rate full v-model=\"data.vModelRateValue\" star-class=\"tap-rate-star\" star-active-class=\"tap-rate-star\" />\n\t\t\t<text>{{data.vModelRateValue}}</text>\n\t\t<text class=\"title\">只读，不触发change\" </text>\n\t\t\t<uni-rate readonly :value=\"5\" @change=\"onRateChange\" />\n\t\t<text class=\"title\">高性能只读，自定义大小和颜色（style方式）</text>\n\t\t\t<uni-rate style=\"font-size: 32px\" star-active-style=\"color:red\" :value=\"4.6\" />\n\t\t\t\n\t\t<text class=\"title\">高性能只读，自定义间隔letter-space（class方式）\" </text>\n\t\t\t<uni-rate :value=\"4\" star-active-class=\"star-active-class\"/>\n\t\t<text class=\"title\">自定义默认颜色和选中颜色 class方式</text>\n\t\t\t<uni-rate :value=\"3\" full star-class=\"custom-default tap-rate-star\" star-active-class=\"custom-selected tap-rate-star\"/>\n\t\t<text class=\"title\">自定义默认颜色和选中颜色 style方式</text>\n\t\t\t<uni-rate :value=\"3\" full star-style=\"color:lightgreen;letter-spacing:8px\" star-active-style=\"color:green\"/>\n\t\t<text class=\"title\">只读，程序动态赋值，不触发change</text>\n\t\t\t<uni-rate :value=\"data.rateValue\" @change=\"onRateChange\"/>\n\t\n\t</scroll-view>\n\t\n\t\n\t</view>\n\t\n</template>\n<script setup lang=\"uts\">\n\ttype Data = {\n\t\tvModelRateValue: number\n\t\trateValue: number\n\t}\n\n\tconst data = reactive<Data>({\n\t\tvModelRateValue: 0,\n\t\trateValue: 0\n\t})\n\tlet interval = 0\n\t\n\t/* onReady(() => {\n\t\tconsole.log(getCurrentInstance()!.proxy!.$page.$nativePage);\n\t}) */\n\n\tfunction onRateChange(value: number) {\n\t\tconsole.log('onRateChange received value:', value, 'type:', typeof value)\n\t\t\n\t\t// 检查值是否有效\n\t\tif (isNaN(value)) {\n\t\t\tconsole.error('Invalid value received:', value)\n\t\t\tuni.showToast({\n\t\t\t\ttitle: '无效值: ' + value,\n\t\t\t\tposition: \"bottom\"\n\t\t\t})\n\t\t\treturn\n\t\t}\n\t\t\n\t\tuni.showToast({\n\t\t\ttitle: 'rate改变:' + value,\n\t\t\tposition: \"bottom\"\n\t\t})\n\t}\n\n\t// 动态赋值示例\n\tonMounted(() => {\n\t\t// 每2秒改变一次评分值\n\t\tinterval = setInterval(() => {\n\t\t\tdata.rateValue = Math.floor(Math.random() * 6) // 0-5之间的随机整数\n\t\t}, 2000)\n\t})\n\n\tonUnmounted(() => {\n\t\tif (interval != 0) {\n\t\t\tclearInterval(interval)\n\t\t}\n\t})\n\n\tdefineExpose({\n\t\tdata,\n\t\tonRateChange\n\t})\n</script>\n<style>\n.desc {\n\tcolor: var(--text-color, #333333);\n}\n.custom-default{\n\tcolor:black\n}\n.custom-selected{\n\tcolor:red\n}\n.title{\n\tfont-weight: bold;\n\tmargin-top: 10px;\n\tcolor: var(--text-color, #333333);\n}\n.star-active-class{\n\tletter-spacing: 5px;\n}\n.tap-rate-star{\n\tfont-size: 32px;\n\tletter-spacing: 8px;\n}\n</style>\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=uni-ui-x.uni-rate)"},"uni-refresh-box":{"name":"::: sourceCode\n## uni-refresh-box\n:::","originName":"## uni-refresh-box","description":"自定义下拉刷新组件\n\n> 本 Component 是 uni ext component，需下载插件：[uni-refresh-box](https://ext.dcloud.net.cn/plugin?id=27848)\n","readme":"自定义下拉刷新组件。\n\n本组件封装了 scroll-view/list-view等滚动容器的下拉刷新功能，使用者只需在滚动容器中加入本组件，设置组件的属性和样式，即可实现自定义下拉刷新功能。\n\n本组件自带一个全平台通用的下拉刷新样式，即左边一个 loading 圈，右边为下拉刷新相关的文字。也提供了各种自定义方法，包括文字、样式，甚至通过插槽传入完全不同的自定义下拉效果。\n\n### 基本用法\n\n```vue\n<template>\n <scroll-view\n style=\"flex: 1;\"\n :refresher-enabled=\"true\"\n :refresher-triggered=\"refreshing1\"\n refresher-default-style=\"none\"\n :refresher-threshold=\"45\"\n refresher-max-drag-distance=\"200px\"\n @refresherpulling=\"onRefresherpulling1\"\n @refresherrefresh=\"onRefresherrefresh1\"\n @refresherrestore=\"onRefresherrestore1\"\n @refresherabort=\"onRefresherabort1\"\n>\n \n <view v-for=\"i in listCount1\" :key=\"i\" class=\"content-item\">\n <text class=\"text\">item-{{ i }}</text>\n </view>\n\n \n <uni-refresh-box\n slot=\"refresher\"\n :pulling-distance=\"pullingDistance1\"\n :refreshing=\"refreshing1\"\n ></uni-refresh-box>\n</scroll-view>\n</template>\n\n<script setup lang=\"uts\">\nconst listCount1 = ref(3)\nconst refreshing1 = ref(false)\nconst pullingDistance1 = ref(0)\n\nfunction onRefresherpulling1(e: RefresherEvent) {\n pullingDistance1.value = e.detail.dy\n}\n\nfunction onRefresherrefresh1() {\n refreshing1.value = true\n console.log('列表1 触发刷新')\n setTimeout(() => {\n listCount1.value += 5\n refreshing1.value = false\n console.log('列表1 刷新完成')\n }, 1500)\n}\n\nfunction onRefresherrestore1() {\n pullingDistance1.value = 0\n}\n\nfunction onRefresherabort1() {\n pullingDistance1.value = 0\n}\n</script>\n```\n\n#### state 状态说明\n\n| 值 | 说明 |\n| :-- | :-- |\n| 0 | 下拉中（未达到阈值） |\n| 1 | 松手可刷新（已达到阈值） |\n| 2 | 刷新中 |\n| 3 | 刷新完成 |\n| 4 | 归位中（不显示文字） |\n\n### Slots\n\n| 名称 | 说明 | 插槽参数 |\n| :-- | :-- | :-- |\n| loading | 自定义图标 | - |\n","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 5.07 | 5.07 | 5.07 | 5.07 | 5.07 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| pullingDistance | number | 0 | 当前下拉距离（px），通常由外部 scroll-view 的 refresher 状态传入 |\n| refreshing | boolean | false | 是否正在刷新中，外部控制；为 true 时显示 loading 动画 |\n| threshold | number | 45 | 触发刷新的下拉阈值（px），下拉距离超过该值时进入“松手刷新”状态 |\n| pullingText | string | \"下拉刷新\" | 下拉过程中（未达到阈值）显示的提示文字 |\n| loosingText | string | \"松手刷新\" | 下拉超过阈值后显示的提示文字 |\n| loadingText | string | \"正在刷新\" | 刷新中显示的提示文字 |\n| completeText | string | \"\" | 刷新完成瞬间显示的提示文字，为空则不展示 |\n| textClass | string([string.ClassString](/uts/data-type.md#ide-string)) | \"\" | 提示文字的自定义样式类 |\n| loadingClass | string([string.ClassString](/uts/data-type.md#ide-string)) | \"\" | loading 图标的自定义样式类 |","event":"","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/uni-ui/refresh-box/refresh-box.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/uni-ui/refresh-box/refresh-box.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/uni-ui/refresh-box/refresh-box\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/uni-ui/refresh-box/refresh-box\n\n>示例\n```vue\n<template>\n <view style=\"flex: 1;\">\n <scroll-view\n style=\"flex: 1;\"\n :refresher-enabled=\"true\"\n :refresher-triggered=\"data.refreshing1\"\n refresher-default-style=\"none\"\n :refresher-threshold=\"45\"\n refresher-max-drag-distance=\"200px\"\n @refresherpulling=\"onRefresherpulling1\"\n @refresherrefresh=\"onRefresherrefresh1\"\n @refresherrestore=\"onRefresherrestore1\"\n @refresherabort=\"onRefresherabort1\"\n > \n \n <view v-for=\"i in data.listCount1\" :key=\"i\" class=\"content-item\">\n <text class=\"text\">item-{{ i }}</text>\n </view>\n\n \n <uni-refresh-box\n slot=\"refresher\"\n :pulling-distance=\"data.pullingDistance1\"\n :refreshing=\"data.refreshing1\"\n ></uni-refresh-box> \n </scroll-view>\n\t\t<text class=\"section-label\">竖排暗黑自定义文字的下拉设置</text>\n\t\t<scroll-view\n\t\t style=\"flex: 1;background-color: black;\"\n\t\t :refresher-enabled=\"true\"\n\t\t :refresher-triggered=\"data.refreshing2\"\n\t\t refresher-default-style=\"none\"\n\t\t :refresher-threshold=\"45\"\n\t\t refresher-max-drag-distance=\"200px\"\n\t\t @refresherpulling=\"onRefresherpulling2\"\n\t\t @refresherrefresh=\"onRefresherrefresh2\"\n\t\t @refresherrestore=\"onRefresherrestore2\"\n\t\t @refresherabort=\"onRefresherabort2\"\n\t\t> \n\t\t \n\t\t <view v-for=\"i in data.listCount2\" :key=\"i\" class=\"content-item\">\n\t\t <text class=\"text\">item-{{ i }}</text>\n\t\t </view>\n\n\t\t \n\t\t <uni-refresh-box\n\t\t slot=\"refresher\"\n\t\t :pulling-distance=\"data.pullingDistance2\"\n\t\t :refreshing=\"data.refreshing2\"\n\t\t\t\tloading-class=\"loading-dark\"\n\t\t\t\ttext-class=\"text-dark\"\n\t\t\t\tstyle=\"flex-direction: column;height: 46px;padding-top: 6px;\"\n\t\t\t\tpulling-text=\"继续下拉可刷新\"\n\t\t\t\tloosing-text=\"释放后会刷新\"\n\t\t\t\tloading-text=\"奋力加载中...\"\n\t\t\t></uni-refresh-box> \n\t\t</scroll-view>\n\t\t<text class=\"section-label\">slot自定义下拉图标</text>\n\t\t<scroll-view\n\t\t style=\"flex: 1;\"\n\t\t :refresher-enabled=\"true\"\n\t\t :refresher-triggered=\"data.refreshing3\"\n\t\t refresher-default-style=\"none\"\n\t\t :refresher-threshold=\"45\"\n\t\t refresher-max-drag-distance=\"200px\"\n\t\t @refresherpulling=\"onRefresherpulling3\"\n\t\t @refresherrefresh=\"onRefresherrefresh3\"\n\t\t @refresherrestore=\"onRefresherrestore3\"\n\t\t @refresherabort=\"onRefresherabort3\"\n\t\t> \n\t\t \n\t\t <view v-for=\"i in data.listCount3\" :key=\"i\" class=\"content-item\">\n\t\t <text class=\"text\">item-{{ i }}</text>\n\t\t </view>\n\n\t\t \n\t\t <uni-refresh-box\n\t\t slot=\"refresher\"\n\t\t :pulling-distance=\"data.pullingDistance3\"\n\t\t :refreshing=\"data.refreshing3\"\n\t\t >\n\t\t\t\t<template #loading=\"{ state }\">\n\t\t\t\t <image\n\t\t\t\t v-if=\"state == 2\"\n\t\t\t\t src=\"https://web-ext-storage.dcloud.net.cn/hello-uni-app-x/refresh-box-run.gif\"\n\t\t\t\t style=\"width: 20px; height: 20px;\"\n\t\t\t\t /> \n\t\t\t\t <image\n\t\t\t\t v-else\n\t\t\t\t src=\"https://web-ext-storage.dcloud.net.cn/hello-uni-app-x/refresh-box-run.gif\"\n\t\t\t\t style=\"width: 20px; height: 20px;\"\n\t\t\t\t /> \n\t\t\t\t</template>\n\t\t\t\t\n\t\t\t</uni-refresh-box> \n\t\t</scroll-view>\n\t\t<text class=\"section-label\">无文字，纯loading</text>\n\t\t<scroll-view\n\t\t style=\"flex: 1;\"\n\t\t :refresher-enabled=\"true\"\n\t\t :refresher-triggered=\"data.refreshing4\"\n\t\t refresher-default-style=\"none\"\n\t\t :refresher-threshold=\"45\"\n\t\t refresher-max-drag-distance=\"200px\"\n\t\t @refresherpulling=\"onRefresherpulling4\"\n\t\t @refresherrefresh=\"onRefresherrefresh4\"\n\t\t @refresherrestore=\"onRefresherrestore4\"\n\t\t @refresherabort=\"onRefresherabort4\"\n\t\t> \n\t\t \n\t\t <view v-for=\"i in data.listCount4\" :key=\"i\" class=\"content-item\">\n\t\t <text class=\"text\">item-{{ i }}</text>\n\t\t </view>\n\n\t\t \n\t\t <uni-refresh-box\n\t\t slot=\"refresher\"\n\t\t :pulling-distance=\"data.pullingDistance4\"\n\t\t :refreshing=\"data.refreshing4\"\n\t\t\t\tpulling-text=\"\"\n\t\t\t\tloosing-text=\"\"\n\t\t\t\tloading-text=\"\"\n\t\t\t\tloading-class=\"loading-big-font\"\n\t\t ></uni-refresh-box> \n\t\t</scroll-view>\n </view>\n</template>\n\n<script setup lang=\"uts\">\ntype Data = {\n listCount1: number\n refreshing1: boolean\n pullingDistance1: number\n listCount2: number\n refreshing2: boolean\n pullingDistance2: number\n listCount3: number\n refreshing3: boolean\n pullingDistance3: number\n listCount4: number\n refreshing4: boolean\n pullingDistance4: number\n}\n\nconst data = reactive<Data>({\n listCount1: 3,\n refreshing1: false,\n pullingDistance1: 0,\n listCount2: 3,\n refreshing2: false,\n pullingDistance2: 0,\n listCount3: 3,\n refreshing3: false,\n pullingDistance3: 0,\n listCount4: 3,\n refreshing4: false,\n pullingDistance4: 0\n})\n\nfunction onRefresherpulling1(e: RefresherEvent) {\n data.pullingDistance1 = e.detail.dy\n}\n\nfunction onRefresherrefresh1() {\n data.refreshing1 = true\n console.log('列表1 触发刷新')\n setTimeout(() => {\n data.listCount1 += 5\n data.refreshing1 = false\n console.log('列表1 刷新完成')\n }, 1500)\n}\n\nfunction onRefresherrestore1() {\n data.pullingDistance1 = 0\n}\n\nfunction onRefresherabort1() {\n data.pullingDistance1 = 0\n}\n\nfunction onRefresherpulling2(e: RefresherEvent) {\n data.pullingDistance2 = e.detail.dy\n}\n\nfunction onRefresherrefresh2() {\n data.refreshing2 = true\n console.log('列表2 触发刷新')\n setTimeout(() => {\n data.listCount2 += 5\n data.refreshing2 = false\n console.log('列表2 刷新完成')\n }, 1500)\n}\n\nfunction onRefresherrestore2() {\n data.pullingDistance2 = 0\n}\n\nfunction onRefresherabort2() {\n data.pullingDistance2 = 0\n}\n\nfunction onRefresherpulling3(e: RefresherEvent) {\n data.pullingDistance3 = e.detail.dy\n}\n\nfunction onRefresherrefresh3() {\n data.refreshing3 = true\n console.log('列表3 触发刷新')\n setTimeout(() => {\n data.listCount3 += 5\n data.refreshing3 = false\n console.log('列表3 刷新完成')\n }, 1500)\n}\n\nfunction onRefresherrestore3() {\n data.pullingDistance3 = 0\n}\n\nfunction onRefresherabort3() {\n data.pullingDistance3 = 0\n}\n\nfunction onRefresherpulling4(e: RefresherEvent) {\n data.pullingDistance4 = e.detail.dy\n}\n\nfunction onRefresherrefresh4() {\n data.refreshing4 = true\n console.log('列表4 触发刷新')\n setTimeout(() => {\n data.listCount4 += 5\n data.refreshing4 = false\n console.log('列表4 刷新完成')\n }, 1500)\n}\n\nfunction onRefresherrestore4() {\n data.pullingDistance4 = 0\n}\n\nfunction onRefresherabort4() {\n data.pullingDistance4 = 0\n}\n\ndefineExpose({\n data\n})\n</script>\n\n<style>\n.section-label {\n margin: 5px;\n color: var(--text-color, #333333);\n}\n.content-item {\n margin: 5px 10px;\n}\n.text {\n color: var(--text-color, #333333);\n font-size: 14px;\n}\n\n.loading-dark{\n\tborder-color:white;\n\twidth: 20px;\n\theight: 20px;\n}\n.text-dark{\n\tcolor: white;\n\tmargin-top: 5px;\n}\n\n.loading-big-font{\n\twidth: 24px;\n\theight: 24px;\n}\n</style>\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=uni-ui-x.uni-refresh-box)"},"uni-tab":{"name":"::: sourceCode\n## uni-tab\n:::","originName":"## uni-tab","description":"选项卡容器组件\n\n> 本 Component 是 uni ext component，需下载插件：[uni-tab](https://ext.dcloud.net.cn/plugin?id=27849)\n","readme":"自定义tab-bar组件，包括一组前端组件：\n\n- `uni-tab`：最外层容器，负责激活索引、内容区高度和切换事件\n- `uni-tab-bar`：底部 tab 容器，负责底栏布局、安全区和中间按钮占位\n- `uni-tab-item`：普通 tab 项，负责插槽展示和 badge\n- `uni-tab-midbutton`：中间悬浮按钮占位容器\n- `uni-tab-content`：上方内容区域容器，负责内容注册、懒渲染和显示切换\n\n每个选项卡内容，不再是页面，而变成了uni-tab-content组件的子组件。\n\n自定义tab-bar组件的使用方式是纯前端的、也是跨平台的。这与pages.json中的tabBar完全不同：\n1. pages.json中的tabBar相关的api无法应用于自定义tab-bar，比如uni.switchTab、uni.showTabBar、uni.hideTabBar、uni.showTabBarRedDot、uni.hideTabBarRedDot、uni.setTabBarBadge、uni.removeTabBarBadge、uni.setTabBarStyle、uni.setTabBarItem。\n2. pages.json中的tabBar页面，生命周期仍然是页面生命周期。但自定义tab-bar的uni-tab-content内容不触发页面生命周期，只触发组件生命周期。\n\n当然，自定义tab-bar组件拥有更强的功能、更灵活的控制方式。比如下凹式midbutton。在uni-app x的非小程序平台中，性能并不会比pages.json中的tabBar差。\n\n\n### 基础用法\n\n```vue\n<template>\n\t<uni-tab style=\"flex: 1\" :active-index=\"activeIndex\" @change=\"handleChange\">\n\t\t<uni-tab-content>\n\t\t\t<scroll-view style=\"flex: 1\">\n\t\t\t\t<view>\n\t\t\t\t\t<text>内容一</text>\n\t\t\t\t</view>\n\t\t\t</scroll-view>\n\t\t</uni-tab-content>\n\t\t<uni-tab-content>\n\t\t\t<view>\n\t\t\t\t<text>内容二</text>\n\t\t\t</view>\n\t\t</uni-tab-content>\n\n\t\t<uni-tab-bar>\n\t\t\t<uni-tab-item>\n\t\t\t\t<text>首页</text>\n\t\t\t</uni-tab-item>\n\t\t\t<uni-tab-item badge-text=\"8\">\n\t\t\t\t<text>消息</text>\n\t\t\t</uni-tab-item>\n\t\t</uni-tab-bar>\n\t</uni-tab>\n</template>\n```\n\n如果需要自定义底栏主体高度，请在 `uni-tab` 上使用 `tab-bar-height` 属性。使用该属性可以更快的计算布局，而不必在页面onReady后通过getBoundRect来计算布局：\n\n```vue\n<uni-tab style=\"flex: 1\" :active-index=\"activeIndex\" :tab-bar-height=\"40\" @change=\"handleChange\">\n\t...\n</uni-tab>\n```\n\n### 组件 API\n\n#### uni-tab\n\n##### 事件\n\n| 事件名 | 返回参数 | 说明 |\n| --- | --- | --- |\n| `change` | `index: number` | 点击普通 tab 项切换后触发，返回新的激活索引 |\n\n#### uni-tab-bar\n\n无专用属性和API，可直接通过 `class` / `style` 自定义底栏外观。\n\n#### uni-tab-content\n\n无专用属性和API，可直接通过 `class` / `style` 自定义外观。\n\n多个选项卡内容揉在一个uni-tab中比较乱，一般推荐uni-tab-content下放一个子组件，子组件作为独立uvue文件。\n\n各个uni-tab-content的子组件，在显示和隐藏的没有生命周期。\n如需监听显示/隐藏需要通过provide/inject方式从外层传入响应式变量activeIndex，然后在子组件中watch这个activeIndex。\n\n### 使用注意事项\n\n1. `uni-tab` 所在的页面不应该滚动，应该在pages.json中配置页面style为`disableScroll:true`。\n2. 屏幕变化适配，Android需HBuilderX 5.09+支持。之前版本组件里无法监听页面的onResize。\n3. `uni-tab-content` 与 `uni-tab-item` 的数量必须一致，顺序也必须一一对应，否则切换后的内容会错位。\n4. `uni-tab` 默认占满页面的宽度和高度，即 `style=\"flex: 1\"`\n5. 自定义底栏高度时，不要只改样式高度，要同步通过 `tab-bar-height` 传入 `uni-tab`，这样内容区底部留白和安全区计算才会一起更新。\n6. 如果底栏存在镂空、下凹或透明边缘，需要让底部内容透出来，请在 `uni-tab` 上开启 `tab-content-height-full`，此时内容区会延伸到 `uni-tab-bar` 下方。\n7. `uni-tab-content` 采用“首次激活再渲染”的策略；第一次切入前不会创建实例，切走后只隐藏不销毁，适合保留 tab 内部状态。\n8. `uni-tab-item` 只负责普通 tab 项注册与展示，不提供单独点击事件；请统一监听 `uni-tab` 的 `change`。\n9. 使用 `uni-tab-midbutton` 时，中间按钮左右两侧的普通 `uni-tab-item` 数量需要相等，也就是普通项总数必须为偶数，才能保持居中均分布局。\n10. `uni-tab-midbutton` 只负责预留中间按钮位置，不参与激活索引计算；中间按钮点击行为需要在插槽内部自行处理。\n11. `badge-text` 传空字符串时显示红点，传 `'0'` 时不显示；如果需要自定义 badge 外观，请使用 `badge-class` 覆盖样式。\n12. `uni-tab-bar`、`uni-tab-item`、`uni-tab-content` 的根节点都支持直接挂 `class` / `style`，推荐把视觉差异放在页面侧处理，不要改组件内部逻辑。\n13. 微信小程序提供了一种webview方式渲染的底部tabBar方式，来进行tabBar自定义。这种方式仅微信小程序支持，与本组件无关。","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 5.07 | 5.07 | 5.07 | 5.07 | 5.07 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| activeIndex | number | | 当前激活的选项卡索引 |\n| tabBarHeight | number | 50 | tab-bar 的高度 |\n| tabContentHeightFull | boolean | false | tab-content 的高度是否通到tab-bar下面 |\n| @change | Event | | 选项卡变化时触发，参数为当前激活的选项卡索引，类型为 number |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=uni-ui-x.uni-tab)"},"uni-tab-bar":{"name":"::: sourceCode\n## uni-tab-bar\n:::","originName":"## uni-tab-bar","description":"底部选项卡栏组件\n\n> 本 Component 是 uni ext component，需下载插件：[uni-tab-bar](https://ext.dcloud.net.cn/plugin?id=27849)\n","readme":"自定义tab-bar组件，包括一组前端组件：\n\n- `uni-tab`：最外层容器，负责激活索引、内容区高度和切换事件\n- `uni-tab-bar`：底部 tab 容器，负责底栏布局、安全区和中间按钮占位\n- `uni-tab-item`：普通 tab 项，负责插槽展示和 badge\n- `uni-tab-midbutton`：中间悬浮按钮占位容器\n- `uni-tab-content`：上方内容区域容器，负责内容注册、懒渲染和显示切换\n\n每个选项卡内容，不再是页面，而变成了uni-tab-content组件的子组件。\n\n自定义tab-bar组件的使用方式是纯前端的、也是跨平台的。这与pages.json中的tabBar完全不同：\n1. pages.json中的tabBar相关的api无法应用于自定义tab-bar，比如uni.switchTab、uni.showTabBar、uni.hideTabBar、uni.showTabBarRedDot、uni.hideTabBarRedDot、uni.setTabBarBadge、uni.removeTabBarBadge、uni.setTabBarStyle、uni.setTabBarItem。\n2. pages.json中的tabBar页面，生命周期仍然是页面生命周期。但自定义tab-bar的uni-tab-content内容不触发页面生命周期，只触发组件生命周期。\n\n当然，自定义tab-bar组件拥有更强的功能、更灵活的控制方式。比如下凹式midbutton。在uni-app x的非小程序平台中，性能并不会比pages.json中的tabBar差。\n\n\n### 基础用法\n\n```vue\n<template>\n\t<uni-tab style=\"flex: 1\" :active-index=\"activeIndex\" @change=\"handleChange\">\n\t\t<uni-tab-content>\n\t\t\t<scroll-view style=\"flex: 1\">\n\t\t\t\t<view>\n\t\t\t\t\t<text>内容一</text>\n\t\t\t\t</view>\n\t\t\t</scroll-view>\n\t\t</uni-tab-content>\n\t\t<uni-tab-content>\n\t\t\t<view>\n\t\t\t\t<text>内容二</text>\n\t\t\t</view>\n\t\t</uni-tab-content>\n\n\t\t<uni-tab-bar>\n\t\t\t<uni-tab-item>\n\t\t\t\t<text>首页</text>\n\t\t\t</uni-tab-item>\n\t\t\t<uni-tab-item badge-text=\"8\">\n\t\t\t\t<text>消息</text>\n\t\t\t</uni-tab-item>\n\t\t</uni-tab-bar>\n\t</uni-tab>\n</template>\n```\n\n如果需要自定义底栏主体高度，请在 `uni-tab` 上使用 `tab-bar-height` 属性。使用该属性可以更快的计算布局，而不必在页面onReady后通过getBoundRect来计算布局：\n\n```vue\n<uni-tab style=\"flex: 1\" :active-index=\"activeIndex\" :tab-bar-height=\"40\" @change=\"handleChange\">\n\t...\n</uni-tab>\n```\n\n### 组件 API\n\n#### uni-tab\n\n##### 事件\n\n| 事件名 | 返回参数 | 说明 |\n| --- | --- | --- |\n| `change` | `index: number` | 点击普通 tab 项切换后触发，返回新的激活索引 |\n\n#### uni-tab-bar\n\n无专用属性和API，可直接通过 `class` / `style` 自定义底栏外观。\n\n#### uni-tab-content\n\n无专用属性和API，可直接通过 `class` / `style` 自定义外观。\n\n多个选项卡内容揉在一个uni-tab中比较乱，一般推荐uni-tab-content下放一个子组件，子组件作为独立uvue文件。\n\n各个uni-tab-content的子组件，在显示和隐藏的没有生命周期。\n如需监听显示/隐藏需要通过provide/inject方式从外层传入响应式变量activeIndex，然后在子组件中watch这个activeIndex。\n\n### 使用注意事项\n\n1. `uni-tab` 所在的页面不应该滚动，应该在pages.json中配置页面style为`disableScroll:true`。\n2. 屏幕变化适配，Android需HBuilderX 5.09+支持。之前版本组件里无法监听页面的onResize。\n3. `uni-tab-content` 与 `uni-tab-item` 的数量必须一致，顺序也必须一一对应，否则切换后的内容会错位。\n4. `uni-tab` 默认占满页面的宽度和高度，即 `style=\"flex: 1\"`\n5. 自定义底栏高度时，不要只改样式高度，要同步通过 `tab-bar-height` 传入 `uni-tab`，这样内容区底部留白和安全区计算才会一起更新。\n6. 如果底栏存在镂空、下凹或透明边缘，需要让底部内容透出来，请在 `uni-tab` 上开启 `tab-content-height-full`，此时内容区会延伸到 `uni-tab-bar` 下方。\n7. `uni-tab-content` 采用“首次激活再渲染”的策略；第一次切入前不会创建实例，切走后只隐藏不销毁，适合保留 tab 内部状态。\n8. `uni-tab-item` 只负责普通 tab 项注册与展示，不提供单独点击事件；请统一监听 `uni-tab` 的 `change`。\n9. 使用 `uni-tab-midbutton` 时，中间按钮左右两侧的普通 `uni-tab-item` 数量需要相等，也就是普通项总数必须为偶数，才能保持居中均分布局。\n10. `uni-tab-midbutton` 只负责预留中间按钮位置，不参与激活索引计算；中间按钮点击行为需要在插槽内部自行处理。\n11. `badge-text` 传空字符串时显示红点，传 `'0'` 时不显示；如果需要自定义 badge 外观，请使用 `badge-class` 覆盖样式。\n12. `uni-tab-bar`、`uni-tab-item`、`uni-tab-content` 的根节点都支持直接挂 `class` / `style`，推荐把视觉差异放在页面侧处理，不要改组件内部逻辑。\n13. 微信小程序提供了一种webview方式渲染的底部tabBar方式，来进行tabBar自定义。这种方式仅微信小程序支持，与本组件无关。","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 5.07 | 5.07 | 5.07 | 5.07 | 5.07 |\n","attribute":"","event":"","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/uni-ui/tab-bar/tab-bar.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/uni-ui/tab-bar/tab-bar.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/uni-ui/tab-bar/tab-bar\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/uni-ui/tab-bar/tab-bar\n\n>示例\n```vue\n<template>\n\t<uni-tab style=\"flex: 1\" :active-index=\"activeIndex\" :tab-content-height-full=\"tabContentHeightFull\" @change=\"handleChange\">\n\t\t\n\t\t<uni-tab-content :style=\"tabContentStyle\">\n\t\t\t<tabContent1 ref=\"tabContent1Ref\" @contentscroll=\"handleTabContent1Scroll\" />\n\t\t</uni-tab-content>\n\t\t<uni-tab-content :style=\"tabContentStyle\">\n\t\t\t<tabContent2 />\n\t\t</uni-tab-content>\n\t\t<uni-tab-content :style=\"tabContentStyle\">\n\t\t\t<tabContent3 />\n\t\t</uni-tab-content>\n\t\t<uni-tab-content :style=\"tabContentStyle\">\n\t\t\t<tabContent4 />\n\t\t</uni-tab-content>\n\n\t\t\n\t\t<uni-tab-bar>\n\t\t\t\n\t\t\t<uni-tab-item>\n\t\t\t\t<view class=\"first-tab-button\" @click=\"handleFirstTabClick\">\n\t\t\t\t\t<view class=\"first-tab-animator\">\n\t\t\t\t\t\t<view class=\"first-tab-face\"\n\t\t\t\t\t\t\t:class=\"showBackToTop ? 'first-tab-default-hidden' : 'first-tab-default-visible'\">\n\t\t\t\t\t\t\t<image :src=\"activeIndex == 0 ? '/static/componentHL.png' : '/static/component.png'\" class=\"tab-icon-image\"></image>\n\t\t\t\t\t\t\t<text class=\"tab-label\" :class=\"activeIndex == 0 ? 'tab-label-active' : ''\">首页</text>\n\t\t\t\t\t\t</view>\n\t\t\t\t\t\t<view class=\"first-tab-face\"\n\t\t\t\t\t\t\t:class=\"showBackToTop ? 'first-tab-backtop-visible' : 'first-tab-backtop-hidden'\">\n\t\t\t\t\t\t\t<text class=\"tab-arrow-icon\" :class=\"activeIndex == 0 ? 'tab-arrow-icon-active' : ''\">↑</text>\n\t\t\t\t\t\t\t<text class=\"tab-label\" :class=\"activeIndex == 0 ? 'tab-label-active' : ''\">回到顶部</text>\n\t\t\t\t\t\t</view>\n\t\t\t\t\t</view>\n\t\t\t\t</view>\n\t\t\t</uni-tab-item>\n\t\t\t<uni-tab-item :badge-text=\"apiTabBadgeText\" :badge-class=\"apiTabBadgeClass\"> \n\t\t\t\t<image :src=\"activeIndex == 1 ? '/static/apiHL.png' : '/static/api.png'\" class=\"tab-icon-image\"></image>\n\t\t\t\t<text class=\"tab-label\" :class=\"activeIndex == 1 ? 'tab-label-active' : ''\">API</text>\n\t\t\t</uni-tab-item>\n\t\t\t<uni-tab-item>\n\t\t\t\t<image :src=\"activeIndex == 2 ? '/static/cssHL.png' : '/static/css.png'\" class=\"tab-icon-image\"></image>\n\t\t\t\t<text class=\"tab-label\" :class=\"activeIndex == 2 ? 'tab-label-active' : ''\">CSS</text>\n\t\t\t</uni-tab-item>\n\t\t\t<uni-tab-item badge-text=\"\">\n\t\t\t\t<image :src=\"activeIndex == 3 ? '/static/templateHL.png' : '/static/template.png'\" class=\"tab-icon-image\"></image>\n\t\t\t\t<text class=\"tab-label\" :class=\"activeIndex == 3 ? 'tab-label-active' : ''\">模板</text>\n\t\t\t</uni-tab-item>\n\n\t\t</uni-tab-bar>\n\t</uni-tab>\n</template>\n\n<script setup lang=\"uts\">\n\timport tabContent1 from './tab-content1.uvue'\n\timport tabContent2 from './tab-content-api.uvue'\n\t// import tabContent2 from './tab-content2.uvue'\n\timport tabContent3 from './tab-content3.uvue'\n\timport tabContent4 from './tab-content4.uvue'\n\tconst TAB_CONTENT1_SWITCH_OFFSET = 100 // 当 tab-content1 滚动超过这个距离（单位px）时显示回到顶部按钮，如需调节请自行定义\n\tconst TAB_CONTENT2_INDEX = 1\n\tconst tabContent1Ref = ref<ComponentPublicInstance | null>(null)\n\tlet tabContentHeightFull = false\n\t// #ifdef MP-WEIXIN\n\ttabContentHeightFull = true\n\t// #endif\n\tlet tabContentStyle = ''\n\t// #ifdef MP-ALIPAY\n\ttabContentStyle = 'flex: 1; min-height: 0px;'\n\t// #endif\n\n\t // 当前激活的索引\n\tconst activeIndex = ref<number>(0)\n\tconst showBackToTop = ref<boolean>(false)\n\tconst apiTabBadgeText = ref<string>('99+')\n\tconst apiTabBadgeClass = ref<string.ClassString>('')\n\tlet lastTabContent1ScrollTop = 0\n\n\tfunction updateTabContent2Badge(text : string, badgeClass : string.ClassString) : void {\n\t\tapiTabBadgeText.value = text\n\t\tapiTabBadgeClass.value = badgeClass\n\t}\n\n\tfunction setTabContent2BadgeNumber() : void {\n\t\tupdateTabContent2Badge('8', '')\n\t}\n\n\tfunction setTabContent2BadgeDot() : void {\n\t\tupdateTabContent2Badge('', '')\n\t}\n\n\tfunction clearTabContent2Badge() : void {\n\t\tupdateTabContent2Badge('0', '')\n\t}\n\n\tfunction setTabContent2BadgeClass() : void {\n\t\tupdateTabContent2Badge('NEW', 'api-tab-badge-custom')\n\t}\n\n\tfunction handleTabContent1Scroll(scrollTop : number) : void {\n\t\tlastTabContent1ScrollTop = scrollTop\n\t\tif (activeIndex.value == 0) {\n\t\t\tshowBackToTop.value = scrollTop > TAB_CONTENT1_SWITCH_OFFSET\n\t\t}\n\t}\n\n\tfunction handleFirstTabClick() : void {\n\t\tif (activeIndex.value == 0 && showBackToTop.value) {\n\t\t\tconst tabContent1Instance = tabContent1Ref.value\n\t\t\tif (tabContent1Instance != null) {\n\t\t\t\ttabContent1Instance.$callMethod('scrollToTop')\n\t\t\t}\n\t\t}\n\t}\n\n\t// 处理 tab 的切换\n\tfunction handleChange(index : number) : void {\n\t\tactiveIndex.value = index\n\t\tif (index == 0) {\n\t\t\tshowBackToTop.value = lastTabContent1ScrollTop > TAB_CONTENT1_SWITCH_OFFSET\n\t\t} else {\n\t\t\tshowBackToTop.value = false\n\t\t}\n\t\tswitch (index) {\n\t\t\tcase 0:\n\t\t\t\tuni.setNavigationBarTitle({ title: '组件' })\n\t\t\t\tbreak\n\t\t\tcase 1:\n\t\t\t\tuni.setNavigationBarTitle({ title: 'API' })\n\t\t\t\tbreak\n\t\t\tcase 2:\n\t\t\t\tuni.setNavigationBarTitle({ title: 'CSS' })\n\t\t\t\tbreak\n\t\t\tcase 3:\n\t\t\t\tuni.setNavigationBarTitle({ title: '模板' })\n\t\t\t\tbreak\n\t\t}\n\t}\n\n\tprovide('tabContent2Index', TAB_CONTENT2_INDEX)\n\tprovide('tabContent2SetBadgeNumber', setTabContent2BadgeNumber)\n\tprovide('tabContent2SetBadgeDot', setTabContent2BadgeDot)\n\tprovide('tabContent2ClearBadge', clearTabContent2Badge)\n\tprovide('tabContent2SetBadgeClass', setTabContent2BadgeClass)\n</script>\n\n<style>\n\t.api-tab-badge-custom {\n\t\tbackground-color: #1f6feb;\n\t\tcolor: #ffffff;\n\t}\n\n\t.first-tab-button {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\n\t.first-tab-animator {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tposition: relative;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\n\t.first-tab-face {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\ttransition-property: opacity, transform;\n\t\ttransition-duration: 220ms;\n\t\ttransition-timing-function: ease;\n\t}\n\n\t.first-tab-default-visible {\n\t\topacity: 1;\n\t\ttransform: translateY(0px);\n\t}\n\n\t.first-tab-default-hidden {\n\t\topacity: 0;\n\t\ttransform: translateY(8px);\n\t}\n\n\t.first-tab-backtop-visible {\n\t\topacity: 1;\n\t\ttransform: translateY(0px);\n\t}\n\n\t.first-tab-backtop-hidden {\n\t\topacity: 0;\n\t\ttransform: translateY(-8px);\n\t}\n\n\t.tab-icon-image {\n\t\theight: 24px;\n\t\twidth: 24px;\n\t}\n\n\t.tab-arrow-icon {\n\t\tline-height: 20px;\n\t\tmargin-bottom: 2px;\n\t}\n\n\t.tab-arrow-icon-active {\n\t\tcolor: #007aff;\n\t}\n\n\t.tab-label {\n\t\tfont-size: 10px;\n\t\tcolor: rgb(122, 126, 131);\n\t}\n\n\t.tab-label-active {\n\t\tcolor: #007aff;\n\t}\n\n\t.blue-dot{\n\t\tbackground-color: #1f6feb;\n\t}\n</style>\n\n```\n\n:::\n#### tab-bar-dark\n暗色风格\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/uni-ui/tab-bar/tab-bar-dark.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/uni-ui/tab-bar/tab-bar-dark.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/uni-ui/tab-bar/tab-bar-dark\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/uni-ui/tab-bar/tab-bar-dark\n\n>示例\n```vue\n<template>\n\t<uni-tab style=\"flex: 1\" :active-index=\"activeIndex\" :tab-content-height-full=\"tabContentHeightFull\" @change=\"handleChange\">\n\t\t\n\t\t<uni-tab-content :style=\"tabContentStyle\">\n\t\t\t\n\t\t\t<tabContent1 ref=\"tabContent1Ref\" class=\"dark-tab-content dark-tab-content-home\" @contentscroll=\"handleTabContent1Scroll\" />\n\t\t</uni-tab-content>\n\t\t<uni-tab-content :style=\"tabContentStyle\">\n\t\t\t<tabContent2 class=\"dark-tab-content dark-tab-content-api\" />\n\t\t</uni-tab-content>\n\t\t<uni-tab-content :style=\"tabContentStyle\">\n\t\t\t<tabContent3 class=\"dark-tab-content dark-tab-content-css\" />\n\t\t</uni-tab-content>\n\t\t<uni-tab-content :style=\"tabContentStyle\">\n\t\t\t<tabContent4 class=\"dark-tab-content dark-tab-content-template\" />\n\t\t</uni-tab-content>\n\n\t\t\n\t\t<uni-tab-bar class=\"dark-tab-list\">\n\t\t\t\n\t\t\t<uni-tab-item>\n\t\t\t\t<view class=\"first-tab-button\" @click=\"handleFirstTabClick\">\n\t\t\t\t\t<view class=\"first-tab-animator\">\n\t\t\t\t\t\t<view class=\"first-tab-face\"\n\t\t\t\t\t\t\t:class=\"showBackToTop ? 'first-tab-default-hidden' : 'first-tab-default-visible'\">\n\t\t\t\t\t\t\t<image :src=\"activeIndex == 0 ? '/static/componentHL.png' : '/static/component.png'\" class=\"tab-icon-image\"></image>\n\t\t\t\t\t\t\t<text class=\"tab-label\" :class=\"activeIndex == 0 ? 'tab-label-active' : ''\">首页</text>\n\t\t\t\t\t\t</view>\n\t\t\t\t\t\t<view class=\"first-tab-face\"\n\t\t\t\t\t\t\t:class=\"showBackToTop ? 'first-tab-backtop-visible' : 'first-tab-backtop-hidden'\">\n\t\t\t\t\t\t\t<text class=\"tab-arrow-icon\" :class=\"activeIndex == 0 ? 'tab-arrow-icon-active' : ''\">↑</text>\n\t\t\t\t\t\t\t<text class=\"tab-label\" :class=\"activeIndex == 0 ? 'tab-label-active' : ''\">回到顶部</text>\n\t\t\t\t\t\t</view>\n\t\t\t\t\t</view>\n\t\t\t\t</view>\n\t\t\t</uni-tab-item>\n\t\t\t<uni-tab-item badge-text=\"99+\">\n\t\t\t\t<image :src=\"activeIndex == 1 ? '/static/apiHL.png' : '/static/api.png'\" class=\"tab-icon-image\"></image>\n\t\t\t\t<text class=\"tab-label\" :class=\"activeIndex == 1 ? 'tab-label-active' : ''\">API</text>\n\t\t\t</uni-tab-item>\n\t\t\t<uni-tab-item>\n\t\t\t\t<image :src=\"activeIndex == 2 ? '/static/cssHL.png' : '/static/css.png'\" class=\"tab-icon-image\"></image>\n\t\t\t\t<text class=\"tab-label\" :class=\"activeIndex == 2 ? 'tab-label-active' : ''\">CSS</text>\n\t\t\t</uni-tab-item>\n\t\t\t<uni-tab-item badge-text=\"\">\n\t\t\t\t<image :src=\"activeIndex == 3 ? '/static/templateHL.png' : '/static/template.png'\" class=\"tab-icon-image\"></image>\n\t\t\t\t<text class=\"tab-label\" :class=\"activeIndex == 3 ? 'tab-label-active' : ''\">模板</text>\n\t\t\t</uni-tab-item>\n\t\t</uni-tab-bar>\n\t</uni-tab>\n</template>\n\n<script setup lang=\"uts\">\n\timport tabContent1 from './tab-content1.uvue'\n\timport tabContent2 from './tab-content2.uvue'\n\timport tabContent3 from './tab-content3.uvue'\n\timport tabContent4 from './tab-content4.uvue'\n\tconst TAB_CONTENT1_SWITCH_OFFSET = 100\n\tconst tabContent1Ref = ref<ComponentPublicInstance | null>(null)\n\tlet tabContentHeightFull = false\n\t// #ifdef MP-WEIXIN\n\ttabContentHeightFull = true\n\t// #endif\n\tlet tabContentStyle = ''\n\t// #ifdef MP-ALIPAY\n\ttabContentStyle = 'flex: 1; min-height: 0px;'\n\t// #endif\n\n\tconst activeIndex = ref<number>(0)\n\tconst showBackToTop = ref<boolean>(false)\n\tlet lastTabContent1ScrollTop = 0\n\n\tfunction handleTabContent1Scroll(scrollTop : number) : void {\n\t\tlastTabContent1ScrollTop = scrollTop\n\t\tif (activeIndex.value == 0) {\n\t\t\tshowBackToTop.value = scrollTop > TAB_CONTENT1_SWITCH_OFFSET\n\t\t}\n\t}\n\n\tfunction handleFirstTabClick() : void {\n\t\tif (activeIndex.value == 0 && showBackToTop.value) {\n\t\t\tconst tabContent1Instance = tabContent1Ref.value\n\t\t\tif (tabContent1Instance != null) {\n\t\t\t\ttabContent1Instance.$callMethod('scrollToTop')\n\t\t\t}\n\t\t}\n\t}\n\n\tfunction handleChange(index : number) : void {\n\t\tactiveIndex.value = index\n\t\tif (index == 0) {\n\t\t\tshowBackToTop.value = lastTabContent1ScrollTop > TAB_CONTENT1_SWITCH_OFFSET\n\t\t} else {\n\t\t\tshowBackToTop.value = false\n\t\t}\n\t\tswitch (index) {\n\t\t\tcase 0:\n\t\t\t\tuni.setNavigationBarTitle({ title: '组件' })\n\t\t\t\tbreak\n\t\t\tcase 1:\n\t\t\t\tuni.setNavigationBarTitle({ title: 'API' })\n\t\t\t\tbreak\n\t\t\tcase 2:\n\t\t\t\tuni.setNavigationBarTitle({ title: 'CSS' })\n\t\t\t\tbreak\n\t\t\tcase 3:\n\t\t\t\tuni.setNavigationBarTitle({ title: '模板' })\n\t\t\t\tbreak\n\t\t}\n\t}\n</script>\n\n<style>\n\t.first-tab-button {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\n\t.first-tab-animator {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tposition: relative;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\n\t.first-tab-face {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\ttransition-property: opacity, transform;\n\t\ttransition-duration: 220ms;\n\t\ttransition-timing-function: ease;\n\t}\n\n\t.first-tab-default-visible {\n\t\topacity: 1;\n\t\ttransform: translateY(0px);\n\t}\n\n\t.first-tab-default-hidden {\n\t\topacity: 0;\n\t\ttransform: translateY(8px);\n\t}\n\n\t.first-tab-backtop-visible {\n\t\topacity: 1;\n\t\ttransform: translateY(0px);\n\t}\n\n\t.first-tab-backtop-hidden {\n\t\topacity: 0;\n\t\ttransform: translateY(-8px);\n\t}\n\n\t.dark-tab-list {\n\t\tbackground-color: #0f172a;\n\t\tborder-top-color: rgba(255,255,255,0.33);\n\t}\n\n\t.dark-tab-content {\n\t\tbackground-color: #111827;\n\t}\n\n\t.dark-tab-content-home {\n\t\tbackground-color: #111827;\n\t}\n\n\t.dark-tab-content-api {\n\t\tbackground-color: #141c2f;\n\t}\n\n\t.dark-tab-content-css {\n\t\tbackground-color: #102126;\n\t}\n\n\t.dark-tab-content-template {\n\t\tbackground-color: #161a31;\n\t}\n\n\t.tab-icon-image {\n\t\theight: 24px;\n\t\twidth: 24px;\n\t}\n\n\t.tab-arrow-icon {\n\t\tline-height: 20px;\n\t\tmargin-bottom: 2px;\n\t\tcolor: rgba(255,255,255,0.68);\n\t}\n\n\t.tab-arrow-icon-active {\n\t\tcolor: #7ce0b8;\n\t}\n\n\t.tab-label {\n\t\tfont-size: 10px;\n\t\tcolor: rgba(255,255,255,0.62);\n\t}\n\n\t.tab-label-active {\n\t\tcolor: #f3f7fb;\n\t}\n</style>\n\n```\n\n:::\n#### tab-bar-custom\n自定义样式\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/uni-ui/tab-bar/tab-bar-custom.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/uni-ui/tab-bar/tab-bar-custom.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/uni-ui/tab-bar/tab-bar-custom\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/uni-ui/tab-bar/tab-bar-custom\n\n>示例\n```vue\n<template>\n\t<uni-tab style=\"flex: 1\" :active-index=\"activeIndex\" :tab-bar-height=\"40\" @change=\"handleChange\">\n\t\t<uni-tab-content>\n\t\t\t<view class=\"custom-panel custom-panel-emerald\">\n\t\t\t\t<text class=\"custom-panel-kicker\">自定义 tab-bar</text>\n\t\t\t\t<text class=\"custom-panel-title\">精选</text>\n\t\t\t\t<text class=\"custom-panel-desc\">uni-tab-bar 使用 externalClass 覆盖了渐变背景和更低的高度，整体更像一条轻量导航条。</text>\n\t\t\t</view>\n\t\t</uni-tab-content>\n\t\t<uni-tab-content>\n\t\t\t<view class=\"custom-panel custom-panel-sand\">\n\t\t\t\t<text class=\"custom-panel-kicker\">自定义 tab-bar</text>\n\t\t\t\t<text class=\"custom-panel-title\">趋势</text>\n\t\t\t\t<text class=\"custom-panel-desc\">这里只有一行文字，没有图标，适合内容频道或资讯场景里的轻型底部切换。</text>\n\t\t\t</view>\n\t\t</uni-tab-content>\n\t\t<uni-tab-content>\n\t\t\t<view class=\"custom-panel custom-panel-ink\">\n\t\t\t\t<text class=\"custom-panel-kicker\">自定义 tab-bar</text>\n\t\t\t\t<text class=\"custom-panel-title\">我的</text>\n\t\t\t\t<text class=\"custom-panel-desc\">激活文字色改成绿色，同时每个 uni-tab-item 只有一行文本，更紧凑也更聚焦。</text>\n\t\t\t</view>\n\t\t</uni-tab-content>\n\n\t\t<uni-tab-bar class=\"custom-tab-list-shell custom-tab-list-root\">\n\t\t\t<uni-tab-item>\n\t\t\t\t<view class=\"custom-tab-cell\">\n\t\t\t\t\t<text class=\"custom-tab-label\" :class=\"activeIndex == 0 ? 'custom-tab-label-active' : ''\">精选</text>\n\t\t\t\t</view>\n\t\t\t</uni-tab-item>\n\t\t\t<uni-tab-item>\n\t\t\t\t<view class=\"custom-tab-cell\">\n\t\t\t\t\t<text class=\"custom-tab-label\" :class=\"activeIndex == 1 ? 'custom-tab-label-active' : ''\">趋势</text>\n\t\t\t\t</view>\n\t\t\t</uni-tab-item>\n\t\t\t<uni-tab-item>\n\t\t\t\t<view class=\"custom-tab-cell\">\n\t\t\t\t\t<text class=\"custom-tab-label\" :class=\"activeIndex == 2 ? 'custom-tab-label-active' : ''\">我的</text>\n\t\t\t\t</view>\n\t\t\t</uni-tab-item>\n\t\t</uni-tab-bar>\n\t</uni-tab>\n</template>\n\n<script setup lang=\"uts\">\n\tconst activeIndex = ref<number>(0)\n\n\tfunction syncNavigationBar(index : number) : void {\n\t\tswitch (index) {\n\t\t\tcase 0:\n\t\t\t\tuni.setNavigationBarTitle({ title: '精选' })\n\t\t\t\tuni.setNavigationBarColor({\n\t\t\t\t\tfrontColor: '#000000',\n\t\t\t\t\tbackgroundColor: '#dff3e8'\n\t\t\t\t})\n\t\t\t\tbreak\n\t\t\tcase 1:\n\t\t\t\tuni.setNavigationBarTitle({ title: '趋势' })\n\t\t\t\tuni.setNavigationBarColor({\n\t\t\t\t\tfrontColor: '#000000',\n\t\t\t\t\tbackgroundColor: '#f6ddbf'\n\t\t\t\t})\n\t\t\t\tbreak\n\t\t\tcase 2:\n\t\t\t\tuni.setNavigationBarTitle({ title: '我的' })\n\t\t\t\tuni.setNavigationBarColor({\n\t\t\t\t\tfrontColor: '#000000',\n\t\t\t\t\tbackgroundColor: '#dde7ea'\n\t\t\t\t})\n\t\t\t\tbreak\n\t\t}\n\t}\n\n\tfunction handleChange(index : number) : void {\n\t\tactiveIndex.value = index\n\t\tsyncNavigationBar(index)\n\t}\n\n\tonLoad(() => {\n\t\tsyncNavigationBar(activeIndex.value)\n\t})\n</script>\n\n<style>\n\t.custom-panel {\n\t\tflex: 1;\n\t\tpadding-top: 28px;\n\t\tpadding-right: 24px;\n\t\tpadding-bottom: 24px;\n\t\tpadding-left: 24px;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t}\n\n\t.custom-panel-emerald {\n\t\tbackground-color: #dff3e8;\n\t}\n\n\t.custom-panel-sand {\n\t\tbackground-color: #f6ddbf;\n\t}\n\n\t.custom-panel-ink {\n\t\tbackground-color: #dde7ea;\n\t}\n\n\t.custom-panel-kicker {\n\t\tfont-size: 12px;\n\t\tcolor: rgba(34,51,59,0.56);\n\t}\n\n\t.custom-panel-title {\n\t\tmargin-top: 10px;\n\t\tfont-size: 30px;\n\t\tcolor: #22333b;\n\t}\n\n\t.custom-panel-desc {\n\t\tmargin-top: 10px;\n\t\tfont-size: 15px;\n\t\tline-height: 22px;\n\t\tcolor: rgba(34,51,59,0.74);\n\t}\n\n\t.custom-tab-list-shell {\n\t\tbackground-color: #f4efe6;\n\t}\n\n\t.custom-tab-list-root {\n\t\tbackground: linear-gradient(to right, #f7d9a8, #c6ece3);\n\t\theight: 40px;\n\t\tborder-top-width: 0px;\n\t}\n\n\t.custom-tab-cell {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tflex-direction: row;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\n\t.custom-tab-label {\n\t\tfont-size: 14px;\n\t\tcolor: rgba(34,51,59,0.58);\n\t}\n\n\t.custom-tab-label-active {\n\t\tcolor: #1d9f5f;\n\t}\n</style>\n\n```\n\n:::\n#### tab-bar-blur\n半透明毛玻璃\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/uni-ui/tab-bar/tab-bar-blur.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/uni-ui/tab-bar/tab-bar-blur.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/uni-ui/tab-bar/tab-bar-blur\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/uni-ui/tab-bar/tab-bar-blur\n\n>示例\n```vue\n<template>\n\t<uni-tab style=\"flex: 1\" :active-index=\"activeIndex\" :tab-bar-height=\"TAB_BAR_HEIGHT\" :tab-content-height-full=\"tabContentHeightFull\" @change=\"handleChange\">\n\t\t<uni-tab-content :style=\"tabContentStyle\">\n\t\t\t<scroll-view class=\"blur-scroll blur-scene-morning\" direction=\"vertical\">\n\t\t\t\t<view class=\"blur-content-inner\">\n\t\t\t\t\t<text class=\"blur-title\">精选</text>\n\t\t\t\t\t<text class=\"blur-desc\">uni-tab-bar 使用半透明背景和 backdrop-filter，让底部内容自然透出并形成毛玻璃效果。</text>\n\t\t\t\t\t<view class=\"blur-card-list\">\n\t\t\t\t\t\t<view class=\"blur-card blur-card-blue\">\n\t\t\t\t\t\t\t<text class=\"blur-card-title\">轻量导航</text>\n\t\t\t\t\t\t\t<text class=\"blur-card-desc\">半透明底栏覆盖在内容上方，背景仍然保持可见。</text>\n\t\t\t\t\t\t</view>\n\t\t\t\t\t\t<view class=\"blur-card blur-card-green\">\n\t\t\t\t\t\t\t<text class=\"blur-card-title\">内容延伸</text>\n\t\t\t\t\t\t\t<text class=\"blur-card-desc\">开启 tab-content-height-full 后，列表会铺到 tab-bar 下方。</text>\n\t\t\t\t\t\t</view>\n\t\t\t\t\t\t<view class=\"blur-card blur-card-yellow\">\n\t\t\t\t\t\t\t<text class=\"blur-card-title\">毛玻璃层</text>\n\t\t\t\t\t\t\t<text class=\"blur-card-desc\">卡片边缘和文字经过底栏时，可以看到背景模糊。</text>\n\t\t\t\t\t\t</view>\n\t\t\t\t\t\t<view class=\"blur-card blur-card-coral\">\n\t\t\t\t\t\t\t<text class=\"blur-card-title\">浮层边界</text>\n\t\t\t\t\t\t\t<text class=\"blur-card-desc\">圆角底栏遮住列表内容时，能看出清晰内容和模糊内容的差异。</text>\n\t\t\t\t\t\t</view>\n\t\t\t\t\t\t<view class=\"blur-card blur-card-blue\">\n\t\t\t\t\t\t\t<text class=\"blur-card-title\">列表底部</text>\n\t\t\t\t\t\t\t<text class=\"blur-card-desc\">更多内容让页面底部始终有卡片进入 tab-bar 背景区域。</text>\n\t\t\t\t\t\t</view>\n\t\t\t\t\t\t<view class=\"blur-card blur-card-green\">\n\t\t\t\t\t\t\t<text class=\"blur-card-title\">轻量展示</text>\n\t\t\t\t\t\t\t<text class=\"blur-card-desc\">不需要额外图片，普通 view 和 text 就能提供可模糊的背景细节。</text>\n\t\t\t\t\t\t</view>\n\t\t\t\t\t\t<view class=\"blur-card blur-card-yellow\">\n\t\t\t\t\t\t\t<text class=\"blur-card-title\">全屏滚动</text>\n\t\t\t\t\t\t\t<text class=\"blur-card-desc\">scroll-view 占满内容区，列表可以持续滚动到悬浮底栏下面。</text>\n\t\t\t\t\t\t</view>\n\t\t\t\t\t\t<view class=\"blur-card blur-card-coral\">\n\t\t\t\t\t\t\t<text class=\"blur-card-title\">底部内容</text>\n\t\t\t\t\t\t\t<text class=\"blur-card-desc\">最后几项会经过 tab-bar 背后，让 Web 端也能观察到模糊效果。</text>\n\t\t\t\t\t\t</view>\n\t\t\t\t\t</view>\n\t\t\t\t</view>\n\t\t\t</scroll-view>\n\t\t</uni-tab-content>\n\t\t<uni-tab-content :style=\"tabContentStyle\">\n\t\t\t<scroll-view class=\"blur-scroll blur-scene-coral\" direction=\"vertical\">\n\t\t\t\t<view class=\"blur-content-inner\">\n\t\t\t\t\t<text class=\"blur-title\">趋势</text>\n\t\t\t\t\t<text class=\"blur-desc\">悬浮 tab-bar 距离页面左右和底部留出间距，配合圆角让底栏更像独立的浮层。</text>\n\t\t\t\t\t<view class=\"blur-card-list\">\n\t\t\t\t\t\t<view class=\"blur-card blur-card-coral\">\n\t\t\t\t\t\t\t<text class=\"blur-card-title\">圆角浮层</text>\n\t\t\t\t\t\t\t<text class=\"blur-card-desc\">左右和底部留白让底栏脱离页面边缘，视觉更轻。</text>\n\t\t\t\t\t\t</view>\n\t\t\t\t\t\t<view class=\"blur-card blur-card-yellow\">\n\t\t\t\t\t\t\t<text class=\"blur-card-title\">透明叠色</text>\n\t\t\t\t\t\t\t<text class=\"blur-card-desc\">不同卡片颜色经过底栏时，会产生自然的半透明叠加。</text>\n\t\t\t\t\t\t</view>\n\t\t\t\t\t\t<view class=\"blur-card blur-card-blue\">\n\t\t\t\t\t\t\t<text class=\"blur-card-title\">固定高度</text>\n\t\t\t\t\t\t\t<text class=\"blur-card-desc\">示例显式设置高度和 padding，避免不同端底部安全区差异。</text>\n\t\t\t\t\t\t</view>\n\t\t\t\t\t\t<view class=\"blur-card blur-card-green\">\n\t\t\t\t\t\t\t<text class=\"blur-card-title\">内容穿透</text>\n\t\t\t\t\t\t\t<text class=\"blur-card-desc\">列表向下铺开后，底栏下方会持续出现真实内容。</text>\n\t\t\t\t\t\t</view>\n\t\t\t\t\t\t<view class=\"blur-card blur-card-coral\">\n\t\t\t\t\t\t\t<text class=\"blur-card-title\">视觉层次</text>\n\t\t\t\t\t\t\t<text class=\"blur-card-desc\">半透明背景和阴影一起区分底栏与页面内容。</text>\n\t\t\t\t\t\t</view>\n\t\t\t\t\t\t<view class=\"blur-card blur-card-yellow\">\n\t\t\t\t\t\t\t<text class=\"blur-card-title\">底部观察</text>\n\t\t\t\t\t\t\t<text class=\"blur-card-desc\">靠近页面底部的卡片会成为毛玻璃效果的主要背景。</text>\n\t\t\t\t\t\t</view>\n\t\t\t\t\t\t<view class=\"blur-card blur-card-green\">\n\t\t\t\t\t\t\t<text class=\"blur-card-title\">滚动区域</text>\n\t\t\t\t\t\t\t<text class=\"blur-card-desc\">外层 scroll-view 负责全屏滚动，内层内容只处理布局。</text>\n\t\t\t\t\t\t</view>\n\t\t\t\t\t\t<view class=\"blur-card blur-card-blue\">\n\t\t\t\t\t\t\t<text class=\"blur-card-title\">背后采样</text>\n\t\t\t\t\t\t\t<text class=\"blur-card-desc\">滚动到列表底部时，卡片会进入 backdrop-filter 的采样范围。</text>\n\t\t\t\t\t\t</view>\n\t\t\t\t\t</view>\n\t\t\t\t</view>\n\t\t\t</scroll-view>\n\t\t</uni-tab-content>\n\t\t<uni-tab-content :style=\"tabContentStyle\">\n\t\t\t<scroll-view class=\"blur-scroll blur-scene-ink\" direction=\"vertical\">\n\t\t\t\t<view class=\"blur-content-inner\">\n\t\t\t\t\t<text class=\"blur-title\">我的</text>\n\t\t\t\t\t<text class=\"blur-desc\">内容区延伸到 tab-bar 下方，不同背景色可以更直观看到半透明叠加后的层次。</text>\n\t\t\t\t\t<view class=\"blur-card-list\">\n\t\t\t\t\t\t<view class=\"blur-card blur-card-green\">\n\t\t\t\t\t\t\t<text class=\"blur-card-title\">跨端样式</text>\n\t\t\t\t\t\t\t<text class=\"blur-card-desc\">使用 rgba 写法，避免部分端不识别现代 rgb 透明语法。</text>\n\t\t\t\t\t\t</view>\n\t\t\t\t\t\t<view class=\"blur-card blur-card-blue\">\n\t\t\t\t\t\t\t<text class=\"blur-card-title\">动态宽度</text>\n\t\t\t\t\t\t\t<text class=\"blur-card-desc\">通过窗口宽度计算 px，避免在鸿蒙端依赖 calc。</text>\n\t\t\t\t\t\t</view>\n\t\t\t\t\t\t<view class=\"blur-card blur-card-coral\">\n\t\t\t\t\t\t\t<text class=\"blur-card-title\">真实内容</text>\n\t\t\t\t\t\t\t<text class=\"blur-card-desc\">列表内容比装饰线条更适合作为毛玻璃背景。</text>\n\t\t\t\t\t\t</view>\n\t\t\t\t\t\t<view class=\"blur-card blur-card-yellow\">\n\t\t\t\t\t\t\t<text class=\"blur-card-title\">背景采样</text>\n\t\t\t\t\t\t\t<text class=\"blur-card-desc\">backdrop-filter 会采样底栏背后的卡片颜色和文字轮廓。</text>\n\t\t\t\t\t\t</view>\n\t\t\t\t\t\t<view class=\"blur-card blur-card-green\">\n\t\t\t\t\t\t\t<text class=\"blur-card-title\">跨端预览</text>\n\t\t\t\t\t\t\t<text class=\"blur-card-desc\">Web 端和 App 端都需要保证底栏背后有实际内容。</text>\n\t\t\t\t\t\t</view>\n\t\t\t\t\t\t<view class=\"blur-card blur-card-blue\">\n\t\t\t\t\t\t\t<text class=\"blur-card-title\">页面留白</text>\n\t\t\t\t\t\t\t<text class=\"blur-card-desc\">底部 padding 给悬浮 tab-bar 留出空间，同时允许内容透到下方。</text>\n\t\t\t\t\t\t</view>\n\t\t\t\t\t\t<view class=\"blur-card blur-card-coral\">\n\t\t\t\t\t\t\t<text class=\"blur-card-title\">列表延展</text>\n\t\t\t\t\t\t\t<text class=\"blur-card-desc\">更多列表项可以保证大屏 Web 下也有足够滚动距离。</text>\n\t\t\t\t\t\t</view>\n\t\t\t\t\t\t<view class=\"blur-card blur-card-yellow\">\n\t\t\t\t\t\t\t<text class=\"blur-card-title\">底栏覆盖</text>\n\t\t\t\t\t\t\t<text class=\"blur-card-desc\">滚动到底部时，卡片内容会从悬浮底栏下方经过。</text>\n\t\t\t\t\t\t</view>\n\t\t\t\t\t</view>\n\t\t\t\t</view>\n\t\t\t</scroll-view>\n\t\t</uni-tab-content>\n\n\t\t<uni-tab-bar class=\"blur-tab-list\" :style=\"tabBarStyle\">\n\t\t\t<uni-tab-item class=\"blur-tab-item\">\n\t\t\t\t<text class=\"blur-tab-label\" :class=\"activeIndex == 0 ? 'blur-tab-label-active' : ''\">精选</text>\n\t\t\t</uni-tab-item>\n\t\t\t<uni-tab-item class=\"blur-tab-item\">\n\t\t\t\t<text class=\"blur-tab-label\" :class=\"activeIndex == 1 ? 'blur-tab-label-active' : ''\">趋势</text>\n\t\t\t</uni-tab-item>\n\t\t\t<uni-tab-item class=\"blur-tab-item\">\n\t\t\t\t<text class=\"blur-tab-label\" :class=\"activeIndex == 2 ? 'blur-tab-label-active' : ''\">我的</text>\n\t\t\t</uni-tab-item>\n\t\t</uni-tab-bar>\n\t</uni-tab>\n</template>\n\n<script setup lang=\"uts\">\n\tconst TAB_BAR_MARGIN = 24\n\tconst TAB_BAR_BOTTOM = 40\n\tconst TAB_BAR_HEIGHT = 64\n\n\tfunction buildTabBarStyle() : string {\n\t\tconst windowInfo = uni.getWindowInfo()\n\t\tconst tabBarWidth = Math.max(0, windowInfo.windowWidth - TAB_BAR_MARGIN * 2)\n\t\treturn 'left: ' + TAB_BAR_MARGIN + 'px; bottom: ' + TAB_BAR_BOTTOM + 'px; width: ' + tabBarWidth + 'px; height: ' + TAB_BAR_HEIGHT + 'px; padding-bottom: 0px; align-items: center; border-radius: 22px; overflow: hidden; border-top-width: 0px; background-color: rgba(255, 255, 255, 0.12);'\n\t}\n\n\tconst activeIndex = ref<number>(0)\n\tconst tabBarStyle = ref<string>(buildTabBarStyle())\n\tlet tabContentHeightFull = true\n\tlet tabContentStyle = ''\n\t// #ifdef MP-ALIPAY\n\ttabContentHeightFull = false\n\ttabContentStyle = 'flex: 1; min-height: 0px;'\n\t// #endif\n\n\tfunction syncTabBarStyle() : void {\n\t\ttabBarStyle.value = buildTabBarStyle()\n\t}\n\n\tfunction syncNavigationBar(index : number) : void {\n\t\tswitch (index) {\n\t\t\tcase 0:\n\t\t\t\tuni.setNavigationBarTitle({ title: '精选' })\n\t\t\t\tuni.setNavigationBarColor({\n\t\t\t\t\tfrontColor: '#000000',\n\t\t\t\t\tbackgroundColor: '#f2f7fb'\n\t\t\t\t})\n\t\t\t\tbreak\n\t\t\tcase 1:\n\t\t\t\tuni.setNavigationBarTitle({ title: '趋势' })\n\t\t\t\tuni.setNavigationBarColor({\n\t\t\t\t\tfrontColor: '#000000',\n\t\t\t\t\tbackgroundColor: '#fbf5eb'\n\t\t\t\t})\n\t\t\t\tbreak\n\t\t\tcase 2:\n\t\t\t\tuni.setNavigationBarTitle({ title: '我的' })\n\t\t\t\tuni.setNavigationBarColor({\n\t\t\t\t\tfrontColor: '#000000',\n\t\t\t\t\tbackgroundColor: '#f1f8f3'\n\t\t\t\t})\n\t\t\t\tbreak\n\t\t}\n\t}\n\n\tfunction handleChange(index : number) : void {\n\t\tactiveIndex.value = index\n\t\tsyncNavigationBar(index)\n\t}\n\n\tonLoad(() => {\n\t\tsyncTabBarStyle()\n\t\tsyncNavigationBar(activeIndex.value)\n\t})\n\n\tonReady(() => {\n\t\tsyncTabBarStyle()\n\t})\n</script>\n\n<style>\n\t.blur-scroll {\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tmin-height: 0px;\n\t\tflex: 1;\n\t}\n\n\t.blur-content-inner {\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n\t\tpadding-top: 36px;\n\t\tpadding-right: 20px;\n\t\tpadding-bottom: 170px;\n\t\tpadding-left: 20px;\n\t\tflex-direction: column;\n\t}\n\n\t.blur-scene-morning {\n\t\tbackground-color: #f2f7fb;\n\t}\n\n\t.blur-scene-coral {\n\t\tbackground-color: #fbf5eb;\n\t}\n\n\t.blur-scene-ink {\n\t\tbackground-color: #f1f8f3;\n\t}\n\n\t.blur-title {\n\t\tposition: relative;\n\t\tfont-size: 32px;\n\t\tfont-weight: bold;\n\t\tcolor: #1f2937;\n\t}\n\n\t.blur-desc {\n\t\tposition: relative;\n\t\tmargin-top: 10px;\n\t\tfont-size: 15px;\n\t\tline-height: 22px;\n\t\tcolor: rgba(31, 41, 55, 0.72);\n\t}\n\n\t.blur-card-list {\n\t\tmargin-top: 24px;\n\t\tflex-direction: column;\n\t}\n\n\t.blur-card {\n\t\tmargin-top: 14px;\n\t\tpadding: 16px;\n\t\tmin-height: 100px;\n\t\tborder-radius: 8px;\n\t\tflex-direction: column;\n\t}\n\n\t.blur-card-blue {\n\t\tbackground-color: #9cc9ff;\n\t}\n\n\t.blur-card-green {\n\t\tbackground-color: #9fd8bd;\n\t}\n\n\t.blur-card-yellow {\n\t\tbackground-color: #f7d88a;\n\t}\n\n\t.blur-card-coral {\n\t\tbackground-color: #f4b2a6;\n\t}\n\n\t.blur-card-title {\n\t\tfont-size: 17px;\n\t\tfont-weight: bold;\n\t\tcolor: #1f2937;\n\t}\n\n\t.blur-card-desc {\n\t\tmargin-top: 8px;\n\t\tfont-size: 13px;\n\t\tline-height: 20px;\n\t\tcolor: rgba(31, 41, 55, 0.66);\n\t}\n\n\t.blur-tab-list {\n\t\tbackdrop-filter: blur(5px);\n\t\tbox-shadow: 0px 8px 24px rgba(31, 41, 55, 0.10);\n\t}\n\n\t/* #ifdef WEB */\n\t.blur-tab-list {\n\t\t-webkit-backdrop-filter: blur(5px);\n\t}\n\t/* #endif */\n\n\t.blur-tab-item {\n\t\tposition: relative;\n\t\tz-index: 1;\n\t\ttransform: scaleX(1.005);\n\t}\n\n\t.blur-tab-label {\n\t\tfont-size: 15px;\n\t\tcolor: rgba(31, 41, 55, 0.72);\n\t}\n\n\t.blur-tab-label-active {\n\t\tcolor: #0f766e;\n\t}\n</style>\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=uni-ui-x.uni-tab-bar)"},"uni-tab-content":{"name":"::: sourceCode\n## uni-tab-content\n:::","originName":"## uni-tab-content","description":"选项卡内容组件\n\n> 本 Component 是 uni ext component，需下载插件：[uni-tab-content](https://ext.dcloud.net.cn/plugin?id=27849)\n","readme":"自定义tab-bar组件，包括一组前端组件：\n\n- `uni-tab`：最外层容器，负责激活索引、内容区高度和切换事件\n- `uni-tab-bar`：底部 tab 容器，负责底栏布局、安全区和中间按钮占位\n- `uni-tab-item`：普通 tab 项，负责插槽展示和 badge\n- `uni-tab-midbutton`：中间悬浮按钮占位容器\n- `uni-tab-content`：上方内容区域容器，负责内容注册、懒渲染和显示切换\n\n每个选项卡内容，不再是页面，而变成了uni-tab-content组件的子组件。\n\n自定义tab-bar组件的使用方式是纯前端的、也是跨平台的。这与pages.json中的tabBar完全不同：\n1. pages.json中的tabBar相关的api无法应用于自定义tab-bar，比如uni.switchTab、uni.showTabBar、uni.hideTabBar、uni.showTabBarRedDot、uni.hideTabBarRedDot、uni.setTabBarBadge、uni.removeTabBarBadge、uni.setTabBarStyle、uni.setTabBarItem。\n2. pages.json中的tabBar页面，生命周期仍然是页面生命周期。但自定义tab-bar的uni-tab-content内容不触发页面生命周期，只触发组件生命周期。\n\n当然，自定义tab-bar组件拥有更强的功能、更灵活的控制方式。比如下凹式midbutton。在uni-app x的非小程序平台中，性能并不会比pages.json中的tabBar差。\n\n\n### 基础用法\n\n```vue\n<template>\n\t<uni-tab style=\"flex: 1\" :active-index=\"activeIndex\" @change=\"handleChange\">\n\t\t<uni-tab-content>\n\t\t\t<scroll-view style=\"flex: 1\">\n\t\t\t\t<view>\n\t\t\t\t\t<text>内容一</text>\n\t\t\t\t</view>\n\t\t\t</scroll-view>\n\t\t</uni-tab-content>\n\t\t<uni-tab-content>\n\t\t\t<view>\n\t\t\t\t<text>内容二</text>\n\t\t\t</view>\n\t\t</uni-tab-content>\n\n\t\t<uni-tab-bar>\n\t\t\t<uni-tab-item>\n\t\t\t\t<text>首页</text>\n\t\t\t</uni-tab-item>\n\t\t\t<uni-tab-item badge-text=\"8\">\n\t\t\t\t<text>消息</text>\n\t\t\t</uni-tab-item>\n\t\t</uni-tab-bar>\n\t</uni-tab>\n</template>\n```\n\n如果需要自定义底栏主体高度，请在 `uni-tab` 上使用 `tab-bar-height` 属性。使用该属性可以更快的计算布局，而不必在页面onReady后通过getBoundRect来计算布局：\n\n```vue\n<uni-tab style=\"flex: 1\" :active-index=\"activeIndex\" :tab-bar-height=\"40\" @change=\"handleChange\">\n\t...\n</uni-tab>\n```\n\n### 组件 API\n\n#### uni-tab\n\n##### 事件\n\n| 事件名 | 返回参数 | 说明 |\n| --- | --- | --- |\n| `change` | `index: number` | 点击普通 tab 项切换后触发，返回新的激活索引 |\n\n#### uni-tab-bar\n\n无专用属性和API，可直接通过 `class` / `style` 自定义底栏外观。\n\n#### uni-tab-content\n\n无专用属性和API，可直接通过 `class` / `style` 自定义外观。\n\n多个选项卡内容揉在一个uni-tab中比较乱，一般推荐uni-tab-content下放一个子组件，子组件作为独立uvue文件。\n\n各个uni-tab-content的子组件，在显示和隐藏的没有生命周期。\n如需监听显示/隐藏需要通过provide/inject方式从外层传入响应式变量activeIndex，然后在子组件中watch这个activeIndex。\n\n### 使用注意事项\n\n1. `uni-tab` 所在的页面不应该滚动，应该在pages.json中配置页面style为`disableScroll:true`。\n2. 屏幕变化适配，Android需HBuilderX 5.09+支持。之前版本组件里无法监听页面的onResize。\n3. `uni-tab-content` 与 `uni-tab-item` 的数量必须一致，顺序也必须一一对应，否则切换后的内容会错位。\n4. `uni-tab` 默认占满页面的宽度和高度，即 `style=\"flex: 1\"`\n5. 自定义底栏高度时，不要只改样式高度，要同步通过 `tab-bar-height` 传入 `uni-tab`，这样内容区底部留白和安全区计算才会一起更新。\n6. 如果底栏存在镂空、下凹或透明边缘，需要让底部内容透出来，请在 `uni-tab` 上开启 `tab-content-height-full`，此时内容区会延伸到 `uni-tab-bar` 下方。\n7. `uni-tab-content` 采用“首次激活再渲染”的策略；第一次切入前不会创建实例，切走后只隐藏不销毁，适合保留 tab 内部状态。\n8. `uni-tab-item` 只负责普通 tab 项注册与展示，不提供单独点击事件；请统一监听 `uni-tab` 的 `change`。\n9. 使用 `uni-tab-midbutton` 时，中间按钮左右两侧的普通 `uni-tab-item` 数量需要相等，也就是普通项总数必须为偶数，才能保持居中均分布局。\n10. `uni-tab-midbutton` 只负责预留中间按钮位置，不参与激活索引计算；中间按钮点击行为需要在插槽内部自行处理。\n11. `badge-text` 传空字符串时显示红点，传 `'0'` 时不显示；如果需要自定义 badge 外观，请使用 `badge-class` 覆盖样式。\n12. `uni-tab-bar`、`uni-tab-item`、`uni-tab-content` 的根节点都支持直接挂 `class` / `style`，推荐把视觉差异放在页面侧处理，不要改组件内部逻辑。\n13. 微信小程序提供了一种webview方式渲染的底部tabBar方式，来进行tabBar自定义。这种方式仅微信小程序支持，与本组件无关。","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 5.07 | 5.07 | 5.07 | 5.07 | 5.07 |\n","attribute":"","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=uni-ui-x.uni-tab-content)"},"uni-tab-item":{"name":"::: sourceCode\n## uni-tab-item\n:::","originName":"## uni-tab-item","description":"选项卡项组件\n\n> 本 Component 是 uni ext component，需下载插件：[uni-tab-item](https://ext.dcloud.net.cn/plugin?id=27849)\n","readme":"自定义tab-bar组件，包括一组前端组件：\n\n- `uni-tab`：最外层容器，负责激活索引、内容区高度和切换事件\n- `uni-tab-bar`：底部 tab 容器，负责底栏布局、安全区和中间按钮占位\n- `uni-tab-item`：普通 tab 项，负责插槽展示和 badge\n- `uni-tab-midbutton`：中间悬浮按钮占位容器\n- `uni-tab-content`：上方内容区域容器，负责内容注册、懒渲染和显示切换\n\n每个选项卡内容，不再是页面，而变成了uni-tab-content组件的子组件。\n\n自定义tab-bar组件的使用方式是纯前端的、也是跨平台的。这与pages.json中的tabBar完全不同：\n1. pages.json中的tabBar相关的api无法应用于自定义tab-bar，比如uni.switchTab、uni.showTabBar、uni.hideTabBar、uni.showTabBarRedDot、uni.hideTabBarRedDot、uni.setTabBarBadge、uni.removeTabBarBadge、uni.setTabBarStyle、uni.setTabBarItem。\n2. pages.json中的tabBar页面，生命周期仍然是页面生命周期。但自定义tab-bar的uni-tab-content内容不触发页面生命周期，只触发组件生命周期。\n\n当然，自定义tab-bar组件拥有更强的功能、更灵活的控制方式。比如下凹式midbutton。在uni-app x的非小程序平台中，性能并不会比pages.json中的tabBar差。\n\n\n### 基础用法\n\n```vue\n<template>\n\t<uni-tab style=\"flex: 1\" :active-index=\"activeIndex\" @change=\"handleChange\">\n\t\t<uni-tab-content>\n\t\t\t<scroll-view style=\"flex: 1\">\n\t\t\t\t<view>\n\t\t\t\t\t<text>内容一</text>\n\t\t\t\t</view>\n\t\t\t</scroll-view>\n\t\t</uni-tab-content>\n\t\t<uni-tab-content>\n\t\t\t<view>\n\t\t\t\t<text>内容二</text>\n\t\t\t</view>\n\t\t</uni-tab-content>\n\n\t\t<uni-tab-bar>\n\t\t\t<uni-tab-item>\n\t\t\t\t<text>首页</text>\n\t\t\t</uni-tab-item>\n\t\t\t<uni-tab-item badge-text=\"8\">\n\t\t\t\t<text>消息</text>\n\t\t\t</uni-tab-item>\n\t\t</uni-tab-bar>\n\t</uni-tab>\n</template>\n```\n\n如果需要自定义底栏主体高度，请在 `uni-tab` 上使用 `tab-bar-height` 属性。使用该属性可以更快的计算布局，而不必在页面onReady后通过getBoundRect来计算布局：\n\n```vue\n<uni-tab style=\"flex: 1\" :active-index=\"activeIndex\" :tab-bar-height=\"40\" @change=\"handleChange\">\n\t...\n</uni-tab>\n```\n\n### 组件 API\n\n#### uni-tab\n\n##### 事件\n\n| 事件名 | 返回参数 | 说明 |\n| --- | --- | --- |\n| `change` | `index: number` | 点击普通 tab 项切换后触发，返回新的激活索引 |\n\n#### uni-tab-bar\n\n无专用属性和API，可直接通过 `class` / `style` 自定义底栏外观。\n\n#### uni-tab-content\n\n无专用属性和API，可直接通过 `class` / `style` 自定义外观。\n\n多个选项卡内容揉在一个uni-tab中比较乱，一般推荐uni-tab-content下放一个子组件，子组件作为独立uvue文件。\n\n各个uni-tab-content的子组件，在显示和隐藏的没有生命周期。\n如需监听显示/隐藏需要通过provide/inject方式从外层传入响应式变量activeIndex，然后在子组件中watch这个activeIndex。\n\n### 使用注意事项\n\n1. `uni-tab` 所在的页面不应该滚动，应该在pages.json中配置页面style为`disableScroll:true`。\n2. 屏幕变化适配，Android需HBuilderX 5.09+支持。之前版本组件里无法监听页面的onResize。\n3. `uni-tab-content` 与 `uni-tab-item` 的数量必须一致，顺序也必须一一对应，否则切换后的内容会错位。\n4. `uni-tab` 默认占满页面的宽度和高度，即 `style=\"flex: 1\"`\n5. 自定义底栏高度时，不要只改样式高度，要同步通过 `tab-bar-height` 传入 `uni-tab`，这样内容区底部留白和安全区计算才会一起更新。\n6. 如果底栏存在镂空、下凹或透明边缘，需要让底部内容透出来，请在 `uni-tab` 上开启 `tab-content-height-full`，此时内容区会延伸到 `uni-tab-bar` 下方。\n7. `uni-tab-content` 采用“首次激活再渲染”的策略；第一次切入前不会创建实例，切走后只隐藏不销毁，适合保留 tab 内部状态。\n8. `uni-tab-item` 只负责普通 tab 项注册与展示，不提供单独点击事件；请统一监听 `uni-tab` 的 `change`。\n9. 使用 `uni-tab-midbutton` 时，中间按钮左右两侧的普通 `uni-tab-item` 数量需要相等，也就是普通项总数必须为偶数，才能保持居中均分布局。\n10. `uni-tab-midbutton` 只负责预留中间按钮位置，不参与激活索引计算；中间按钮点击行为需要在插槽内部自行处理。\n11. `badge-text` 传空字符串时显示红点，传 `'0'` 时不显示；如果需要自定义 badge 外观，请使用 `badge-class` 覆盖样式。\n12. `uni-tab-bar`、`uni-tab-item`、`uni-tab-content` 的根节点都支持直接挂 `class` / `style`，推荐把视觉差异放在页面侧处理，不要改组件内部逻辑。\n13. 微信小程序提供了一种webview方式渲染的底部tabBar方式，来进行tabBar自定义。这种方式仅微信小程序支持，与本组件无关。","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 5.07 | 5.07 | 5.07 | 5.07 | 5.07 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| badgeText | string | | badge 的内容 |\n| badgeClass | string([string.ClassString](/uts/data-type.md#ide-string)) | \"\" | badge 的样式类 |","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=uni-ui-x.uni-tab-item)"},"uni-tab-midbutton":{"name":"::: sourceCode\n## uni-tab-midbutton\n:::","originName":"## uni-tab-midbutton","description":"选项卡中间悬浮按钮组件\n\n> 本 Component 是 uni ext component，需下载插件：[uni-tab-midbutton](https://ext.dcloud.net.cn/plugin?id=27849)\n","readme":"自定义tab-bar组件，包括一组前端组件：\n\n- `uni-tab`：最外层容器，负责激活索引、内容区高度和切换事件\n- `uni-tab-bar`：底部 tab 容器，负责底栏布局、安全区和中间按钮占位\n- `uni-tab-item`：普通 tab 项，负责插槽展示和 badge\n- `uni-tab-midbutton`：中间悬浮按钮占位容器\n- `uni-tab-content`：上方内容区域容器，负责内容注册、懒渲染和显示切换\n\n每个选项卡内容，不再是页面，而变成了uni-tab-content组件的子组件。\n\n自定义tab-bar组件的使用方式是纯前端的、也是跨平台的。这与pages.json中的tabBar完全不同：\n1. pages.json中的tabBar相关的api无法应用于自定义tab-bar，比如uni.switchTab、uni.showTabBar、uni.hideTabBar、uni.showTabBarRedDot、uni.hideTabBarRedDot、uni.setTabBarBadge、uni.removeTabBarBadge、uni.setTabBarStyle、uni.setTabBarItem。\n2. pages.json中的tabBar页面，生命周期仍然是页面生命周期。但自定义tab-bar的uni-tab-content内容不触发页面生命周期，只触发组件生命周期。\n\n当然，自定义tab-bar组件拥有更强的功能、更灵活的控制方式。比如下凹式midbutton。在uni-app x的非小程序平台中，性能并不会比pages.json中的tabBar差。\n\n\n### 基础用法\n\n```vue\n<template>\n\t<uni-tab style=\"flex: 1\" :active-index=\"activeIndex\" @change=\"handleChange\">\n\t\t<uni-tab-content>\n\t\t\t<scroll-view style=\"flex: 1\">\n\t\t\t\t<view>\n\t\t\t\t\t<text>内容一</text>\n\t\t\t\t</view>\n\t\t\t</scroll-view>\n\t\t</uni-tab-content>\n\t\t<uni-tab-content>\n\t\t\t<view>\n\t\t\t\t<text>内容二</text>\n\t\t\t</view>\n\t\t</uni-tab-content>\n\n\t\t<uni-tab-bar>\n\t\t\t<uni-tab-item>\n\t\t\t\t<text>首页</text>\n\t\t\t</uni-tab-item>\n\t\t\t<uni-tab-item badge-text=\"8\">\n\t\t\t\t<text>消息</text>\n\t\t\t</uni-tab-item>\n\t\t</uni-tab-bar>\n\t</uni-tab>\n</template>\n```\n\n如果需要自定义底栏主体高度，请在 `uni-tab` 上使用 `tab-bar-height` 属性。使用该属性可以更快的计算布局，而不必在页面onReady后通过getBoundRect来计算布局：\n\n```vue\n<uni-tab style=\"flex: 1\" :active-index=\"activeIndex\" :tab-bar-height=\"40\" @change=\"handleChange\">\n\t...\n</uni-tab>\n```\n\n### 组件 API\n\n#### uni-tab\n\n##### 事件\n\n| 事件名 | 返回参数 | 说明 |\n| --- | --- | --- |\n| `change` | `index: number` | 点击普通 tab 项切换后触发，返回新的激活索引 |\n\n#### uni-tab-bar\n\n无专用属性和API，可直接通过 `class` / `style` 自定义底栏外观。\n\n#### uni-tab-content\n\n无专用属性和API，可直接通过 `class` / `style` 自定义外观。\n\n多个选项卡内容揉在一个uni-tab中比较乱，一般推荐uni-tab-content下放一个子组件，子组件作为独立uvue文件。\n\n各个uni-tab-content的子组件，在显示和隐藏的没有生命周期。\n如需监听显示/隐藏需要通过provide/inject方式从外层传入响应式变量activeIndex，然后在子组件中watch这个activeIndex。\n\n### 使用注意事项\n\n1. `uni-tab` 所在的页面不应该滚动，应该在pages.json中配置页面style为`disableScroll:true`。\n2. 屏幕变化适配，Android需HBuilderX 5.09+支持。之前版本组件里无法监听页面的onResize。\n3. `uni-tab-content` 与 `uni-tab-item` 的数量必须一致，顺序也必须一一对应，否则切换后的内容会错位。\n4. `uni-tab` 默认占满页面的宽度和高度，即 `style=\"flex: 1\"`\n5. 自定义底栏高度时，不要只改样式高度，要同步通过 `tab-bar-height` 传入 `uni-tab`，这样内容区底部留白和安全区计算才会一起更新。\n6. 如果底栏存在镂空、下凹或透明边缘，需要让底部内容透出来，请在 `uni-tab` 上开启 `tab-content-height-full`，此时内容区会延伸到 `uni-tab-bar` 下方。\n7. `uni-tab-content` 采用“首次激活再渲染”的策略；第一次切入前不会创建实例，切走后只隐藏不销毁，适合保留 tab 内部状态。\n8. `uni-tab-item` 只负责普通 tab 项注册与展示，不提供单独点击事件；请统一监听 `uni-tab` 的 `change`。\n9. 使用 `uni-tab-midbutton` 时，中间按钮左右两侧的普通 `uni-tab-item` 数量需要相等，也就是普通项总数必须为偶数，才能保持居中均分布局。\n10. `uni-tab-midbutton` 只负责预留中间按钮位置，不参与激活索引计算；中间按钮点击行为需要在插槽内部自行处理。\n11. `badge-text` 传空字符串时显示红点，传 `'0'` 时不显示；如果需要自定义 badge 外观，请使用 `badge-class` 覆盖样式。\n12. `uni-tab-bar`、`uni-tab-item`、`uni-tab-content` 的根节点都支持直接挂 `class` / `style`，推荐把视觉差异放在页面侧处理，不要改组件内部逻辑。\n13. 微信小程序提供了一种webview方式渲染的底部tabBar方式，来进行tabBar自定义。这种方式仅微信小程序支持，与本组件无关。","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 5.07 | 5.07 | 5.07 | 5.07 | 5.07 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| width | number | 90 | 中间按钮宽度，单位 px |\n| height | number | 90 | 中间按钮高度，单位 px |","event":"","example":"### 示例\n#### tab-bar-midbutton\n中间按钮\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/uni-ui/tab-bar/tab-bar-midbutton.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/uni-ui/tab-bar/tab-bar-midbutton.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/uni-ui/tab-bar/tab-bar-midbutton\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/uni-ui/tab-bar/tab-bar-midbutton\n\n>示例\n```vue\n<template>\n\t<uni-tab style=\"flex: 1\" :active-index=\"activeIndex\" :tab-content-height-full=\"tabContentHeightFull\" @change=\"handleChange\">\n\t\t<uni-tab-content :style=\"tabContentStyle\">\n\t\t\t<tabContent1 />\n\t\t</uni-tab-content>\n\t\t<uni-tab-content :style=\"tabContentStyle\">\n\t\t\t<tabContent2 />\n\t\t</uni-tab-content>\n\t\t<uni-tab-content :style=\"tabContentStyle\">\n\t\t\t<tabContent3 />\n\t\t</uni-tab-content>\n\t\t<uni-tab-content :style=\"tabContentStyle\">\n\t\t\t<tabContent4 />\n\t\t</uni-tab-content>\n\n\t\t<uni-tab-bar style=\"border-top: 0px;\">\n\t\t\t<uni-tab-item>\n\t\t\t\t<image :src=\"activeIndex == 0 ? '/static/componentHL.png' : '/static/component.png'\" class=\"tab-icon-image\"></image>\n\t\t\t\t<text class=\"tab-label\" :class=\"activeIndex == 0 ? 'tab-label-active' : ''\">组件</text>\n\t\t\t</uni-tab-item>\n\t\t\t<uni-tab-item badge-text=\"99+\">\n\t\t\t\t<image :src=\"activeIndex == 1 ? '/static/apiHL.png' : '/static/api.png'\" class=\"tab-icon-image\"></image>\n\t\t\t\t<text class=\"tab-label\" :class=\"activeIndex == 1 ? 'tab-label-active' : ''\">API</text>\n\t\t\t</uni-tab-item>\n\t\t\t<uni-tab-midbutton :width=\"60\" :height=\"60\">\n\t\t\t\t<view class=\"mid-button-shell\">\n\t\t\t\t\t<view class=\"mid-button-core\" hover-class=\"mid-button-core-hover\" :hover-stop-propagation=\"true\"\n\t\t\t\t\t\t@click=\"handleMidButtonClick\">\n\t\t\t\t\t\t<text class=\"mid-button-plus\">+</text>\n\t\t\t\t\t\t<text class=\"mid-button-label\">发布</text>\n\t\t\t\t\t</view>\n\t\t\t\t</view>\n\t\t\t</uni-tab-midbutton>\n\t\t\t<uni-tab-item>\n\t\t\t\t<image :src=\"activeIndex == 2 ? '/static/cssHL.png' : '/static/css.png'\" class=\"tab-icon-image\"></image>\n\t\t\t\t<text class=\"tab-label\" :class=\"activeIndex == 2 ? 'tab-label-active' : ''\">CSS</text>\n\t\t\t</uni-tab-item>\n\t\t\t<uni-tab-item badge-text=\"\">\n\t\t\t\t<image :src=\"activeIndex == 3 ? '/static/templateHL.png' : '/static/template.png'\" class=\"tab-icon-image\"></image>\n\t\t\t\t<text class=\"tab-label\" :class=\"activeIndex == 3 ? 'tab-label-active' : ''\">模板</text>\n\t\t\t</uni-tab-item>\n\t\t</uni-tab-bar>\n\t</uni-tab>\n</template>\n\n<script setup lang=\"uts\">\n\timport tabContent1 from './tab-content1.uvue'\n\timport tabContent2 from './tab-content2.uvue'\n\timport tabContent3 from './tab-content3.uvue'\n\timport tabContent4 from './tab-content4.uvue'\n\n\tconst activeIndex = ref<number>(0)\n\tconst midButtonClickCount = ref<number>(0)\n\tlet tabContentHeightFull = false\n\t// #ifdef MP-WEIXIN\n\ttabContentHeightFull = true\n\t// #endif\n\tlet tabContentStyle = ''\n\t// #ifdef MP-ALIPAY\n\ttabContentStyle = 'flex: 1; min-height: 0px;'\n\t// #endif\n\n\tfunction handleChange(index : number) : void {\n\t\tactiveIndex.value = index\n\t\tswitch (index) {\n\t\t\tcase 0:\n\t\t\t\tuni.setNavigationBarTitle({ title: '组件' })\n\t\t\t\tbreak\n\t\t\tcase 1:\n\t\t\t\tuni.setNavigationBarTitle({ title: 'API' })\n\t\t\t\tbreak\n\t\t\tcase 2:\n\t\t\t\tuni.setNavigationBarTitle({ title: 'CSS' })\n\t\t\t\tbreak\n\t\t\tcase 3:\n\t\t\t\tuni.setNavigationBarTitle({ title: '模板' })\n\t\t\t\tbreak\n\t\t}\n\t}\n\n\tfunction handleMidButtonClick() : void {\n\t\tmidButtonClickCount.value = midButtonClickCount.value + 1\n\t\tuni.showToast({\n\t\t\ttitle: 'mid-button 点击 ' + midButtonClickCount.value + ' 次',\n\t\t\ticon: 'none'\n\t\t})\n\t}\n</script>\n\n<style>\n\t.tab-icon-image {\n\t\twidth: 24px;\n\t\theight: 24px;\n\t}\n\n\t.tab-label {\n\t\tfont-size: 10px;\n\t\tcolor: rgb(122, 126, 131);\n\t}\n\n\t.tab-label-active {\n\t\tcolor: #007aff;\n\t}\n\n\t.mid-button-shell {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tbackground-color: rgba(0, 0, 0, 0);\n\t}\n\n\t.mid-button-core {\n\t\twidth: 52px;\n\t\theight: 52px;\n\t\tborder-radius: 26px;\n\t\tbackground-color: #ff7a18;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\t/* box-shadow: 0px 6px 16px rgba(255, 122, 24, 0.22); */\n\t}\n\n\t.mid-button-core-hover {\n\t\ttransform: scale(0.96);\n\t\topacity: 0.92;\n\t}\n\n\t.mid-button-plus {\n\t\tfont-size: 22px;\n\t\tline-height: 22px;\n\t\tcolor: #ffffff;\n\t}\n\n\t.mid-button-label {\n\t\tmargin-top: 1px;\n\t\tfont-size: 9px;\n\t\tcolor: #ffffff;\n\t}\n</style>\n\n```\n\n:::\n#### tab-bar-midbutton-notch\n中间按钮镂空\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/uni-ui/tab-bar/tab-bar-midbutton-notch.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/uni-ui/tab-bar/tab-bar-midbutton-notch.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/uni-ui/tab-bar/tab-bar-midbutton-notch\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/uni-ui/tab-bar/tab-bar-midbutton-notch\n\n>示例\n```vue\n<template>\n\t<uni-tab style=\"flex: 1\" :active-index=\"activeIndex\" :tab-content-height-full=\"tabContentHeightFull\" @change=\"handleChange\">\n\t\t<uni-tab-content :style=\"tabContentStyle\">\n\t\t\t<tabContent1 />\n\t\t</uni-tab-content>\n\t\t<uni-tab-content :style=\"tabContentStyle\">\n\t\t\t<tabContent2 />\n\t\t</uni-tab-content>\n\t\t<uni-tab-content :style=\"tabContentStyle\">\n\t\t\t<tabContent3 />\n\t\t</uni-tab-content>\n\t\t<uni-tab-content :style=\"tabContentStyle\">\n\t\t\t<tabContent4 />\n\t\t</uni-tab-content>\n\n\t\t<uni-tab-bar style=\"border-top: 0px;background-color: rgba(0, 0, 0, 0);\">\n\t\t\t<uni-tab-item class=\"tab-bg\">\n\t\t\t\t\n\t\t\t\t<text :class=\"activeIndex == 0 ? 'tab-label-active' : ''\">🏠</text>\n\t\t\t\t<text class=\"tab-label\" :class=\"activeIndex == 0 ? 'tab-label-active' : ''\">首页</text>\n\t\t\t</uni-tab-item>\n\t\t\t<uni-tab-item class=\"tab-bg\">\n\t\t\t\t\n\t\t\t\t<text :class=\"activeIndex == 0 ? 'tab-label-active' : ''\">💬</text>\n\t\t\t\t<text class=\"tab-label\" :class=\"activeIndex == 1 ? 'tab-label-active' : ''\">消息</text>\n\t\t\t</uni-tab-item>\n\t\t\t<uni-tab-midbutton :width=\"106\" :height=\"94\">\n\t\t\t\t<view class=\"floating-ball\" hover-class=\"floating-ball-hover\" :hover-stop-propagation=\"true\" @click=\"handleMidButtonClick\">\n\t\t\t\t\t<view flatten class=\"floating-ball-plus\" style=\"position: absolute;\"></view>\n\t\t\t\t\t<view flatten class=\"floating-ball-plus\" style=\"position: absolute;transform: rotate(90deg);\"></view>\n\t\t\t\t</view>\n\t\t\t\t<image class=\"notch-svg\" src=\"/static/tab-bar-midbutton-notch.svg\" mode=\"scaleToFill\"></image>\n\t\t\t</uni-tab-midbutton>\n\t\t\t<uni-tab-item class=\"tab-bg\">\n\t\t\t\t\n\t\t\t\t<text :class=\"activeIndex == 0 ? 'tab-label-active' : ''\">🔔</text>\n\t\t\t\t<text class=\"tab-label\" :class=\"activeIndex == 2 ? 'tab-label-active' : ''\">通知</text>\n\t\t\t</uni-tab-item>\n\t\t\t<uni-tab-item class=\"tab-bg\" badge-text=\"8\">\n\t\t\t\t\n\t\t\t\t<text :class=\"activeIndex == 0 ? 'tab-label-active' : ''\">👤</text>\n\t\t\t\t<text class=\"tab-label\" :class=\"activeIndex == 3 ? 'tab-label-active' : ''\">我的</text>\n\t\t\t</uni-tab-item>\n\t\t</uni-tab-bar>\n\t\t<view class=\"tab-bg tab-safe-area-bg\"></view> \n\t</uni-tab>\n</template>\n\n<script setup lang=\"uts\">\n\timport tabContent1 from './tab-content1.uvue'\n\timport tabContent2 from './tab-content2.uvue'\n\timport tabContent3 from './tab-content3.uvue'\n\timport tabContent4 from './tab-content4.uvue'\n\n\tconst activeIndex = ref<number>(0)\n\tconst midButtonClickCount = ref<number>(0)\n\tlet tabContentHeightFull = true\n\tlet tabContentStyle = ''\n\t// #ifdef MP-ALIPAY\n\ttabContentHeightFull = false\n\ttabContentStyle = 'flex: 1; min-height: 0px;'\n\t// #endif\n\n\tfunction handleChange(index : number) : void {\n\t\tactiveIndex.value = index\n\t\tswitch (index) {\n\t\t\tcase 0:\n\t\t\t\tuni.setNavigationBarTitle({ title: '首页' })\n\t\t\t\tbreak\n\t\t\tcase 1:\n\t\t\t\tuni.setNavigationBarTitle({ title: '消息' })\n\t\t\t\tbreak\n\t\t\tcase 2:\n\t\t\t\tuni.setNavigationBarTitle({ title: '通知' })\n\t\t\t\tbreak\n\t\t\tcase 3:\n\t\t\t\tuni.setNavigationBarTitle({ title: '我的' })\n\t\t\t\tbreak\n\t\t}\n\t}\n\n\tfunction handleMidButtonClick() : void {\n\t\tmidButtonClickCount.value = midButtonClickCount.value + 1\n\t\tuni.showToast({\n\t\t\ttitle: '悬浮球点击 ' + midButtonClickCount.value + ' 次',\n\t\t\ticon: 'none'\n\t\t})\n\t}\n</script>\n\n<style>\n\t.tab-icon-image {\n\t\twidth: 24px;\n\t\theight: 24px;\n\t}\n\n\t.tab-label {\n\t\tfont-size: 10px;\n\t\tcolor: rgb(220, 220, 220);\n\t}\n\n\t.tab-label-active {\n\t\tcolor: #FFFFFF;\n\t}\n\n\t.tab-bg {\n\t\tbackground-color: #2196F3;\n\t\t/* 宽度用transform调宽1点，不然在某些屏幕上，item之间会出现半像素的间隙 */\n\t\ttransform: scaleX(1.005);\n\t\t/* margin-left: -1px; */\n\t\t/* margin-right: -1px; */\n\t}\n\n\t/* #ifdef MP-ALIPAY */\n\t.tab-bg {\n\t\ttransform: none;\n\t\tmargin-left: -1px;\n\t\tmargin-right: -1px;\n\t}\n\t/* #endif */\n\n\t.tab-safe-area-bg {\n\t\twidth: 100%;\n\t\theight: var(--uni-safe-area-inset-bottom);\n\t\tposition: absolute;\n\t\tbottom: 0;\n\t}\n\n\t/* #ifdef MP-ALIPAY */\n\t.tab-safe-area-bg {\n\t\theight: calc(var(--uni-safe-area-inset-bottom) + 1px);\n\t\tposition: fixed;\n\t\tleft: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tz-index: 9;\n\t}\n\t/* #endif */\n\n\t.notch-svg {\n\t\twidth: 108px;\n\t\theight: 50px;\n\t\tposition: absolute;\n\t\tmargin-left: -1px; /* 为了防止边线漏出半像素 */\n\t\tmargin-right: -1px; /* 为了防止边线漏出半像素 */\n\t\tbottom: 0;\n\t\tpointer-events: none; /* 不拦截点击。 TODO 鸿蒙上有bug，svg图仍然遮挡了点击区，导致加号的下半部分点不着*/\n\t}\n\n\t/* #ifdef MP-ALIPAY */\n\t.notch-svg {\n\t\twidth: 112px;\n\t\theight: 51px;\n\t\tmargin-left: -3px;\n\t\tmargin-right: -3px;\n\t\tbottom: -1px;\n\t}\n\t/* #endif */\n\n\t.floating-ball {\n\t\tposition: relative;\n\t\twidth: 70px;\n\t\theight: 70px;\n\t\tborder-radius: 50%;\n\t\tbackground-color: #ff5a24;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tborder-width: 1px;\n\t\tborder-style: solid;\n\t\tborder-color: #ffffff;\n\t\tbox-shadow: 0px 4px 10px rgba(28, 98, 183, 0.16);\n\t}\n\n\t.floating-ball-hover {\n\t\topacity: 0.92;\n\t\ttransform: scale(0.96);\n\t}\n\n\t.floating-ball-plus {\n\t\tbackground-color: #ffffff;\n\t\tborder-radius: 2px;\n\t\twidth: 40%;\n\t\theight: 2px;\n\t}\n</style>\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=uni-ui-x.uni-tab-midbutton)"},"uni-time-format":{"name":"::: sourceCode\n## uni-time-format\n:::","originName":"## uni-time-format","description":"时间格式化展示组件\n\n> 本 Component 是 uni ext component，需下载插件：[uni-time-format](https://ext.dcloud.net.cn/plugin?id=27851)\n","readme":"时间格式化展示组件，支持绝对时间与相对时间。\n\n### 基本用法\n\n```html\n<uni-time-format :timestamp=\"Date.now()\" format=\"datetime\"></uni-time-format>\n```\n\n### relative 规则\n\n`format=relative` 按自然日输出：\n- 今天内：\n`< 1 分钟` 输出“刚刚”\n`< 60 分钟` 输出“n分钟前”\n`>= 60 分钟` 输出“n小时前”\n- 昨天内：输出“昨天 HH:mm”\n- 超过昨天：输出“YYYY-MM-DD HH:mm”\n- 未来时间：直接输出“YYYY-MM-DD HH:mm”\n\n### 相对时间国际化\n\n根据 `uni.getAppBaseInfo().appLanguage` 自动匹配：\n- 简体中文（`zh`）\n- 繁体中文（`zh-hant` / `zh-tw` / `zh-hk` / `zh-mo`）\n- 英文（默认）\n- 法文（`fr`）\n- 拉丁文（`la`）\n\n法文、拉丁文使用短文案，避免长文本占位。\n\n### 非法时间\n\n当 `timestamp` 非法时，组件返回空字符串。\n\n### 示例页面\n\n`/pages/uni-ui/time-format/time-format`\n示例页面包含两组相对时间演示：\n- 输入框动态演示：输入 `yyyy-mm-dd hh:mm:ss`，实时展示对应相对时间\n- 固定分支演示：展示“刚刚 / 分钟前 / 小时前 / 昨天 HH:mm / 超过昨天”五种分支，且不随输入变化\n","fileFormats":"","compatibility":"\n### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 5.07 | 5.07 | 5.07 | 5.07 | 5.07 |\n","attribute":"### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| timestamp | number | | 需要格式化的时间戳，支持秒级（10 位）或毫秒级（13 位），秒级会自动换算成毫秒 |\n| format | string | \"datetime\" | 输出格式。\"datetime\" 输出 YYYY-MM-DD HH:mm；\"date\" 输出 YYYY-MM-DD；\"time\" 输出 HH:mm:ss；\"relative\" 输出相对时间（刚刚 / N 分钟前 / N 小时前 / 昨天 HH:mm / 完整日期） |","event":"","example":"### 示例\n示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/uni-ui/time-format/time-format.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/uni-ui/time-format/time-format.uvue) \n::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/uni-ui/time-format/time-format\n\n> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/uni-ui/time-format/time-format\n\n>示例\n```vue\n<template>\n <scroll-view class=\"page uni-theme-root\">\n <view class=\"section\">\n <text class=\"section-title\">当前时间不同格式</text>\n <view class=\"row\">\n <text class=\"row-label\">date</text>\n <uni-time-format :timestamp=\"data.currentTimestamp\" format=\"date\"></uni-time-format>\n </view>\n <view class=\"row\">\n <text class=\"row-label\">time</text>\n <uni-time-format :timestamp=\"data.currentTimestamp\" format=\"time\"></uni-time-format>\n </view>\n <view class=\"row\">\n <text class=\"row-label\">datetime</text>\n <uni-time-format :timestamp=\"data.currentTimestamp\" format=\"datetime\"></uni-time-format>\n </view>\n </view>\n\n <view class=\"section\">\n <text class=\"section-title\">输入时间动态计算相对时间</text>\n <view class=\"input-block\">\n <text class=\"row-label\">输入格式</text>\n <text class=\"tip-text\">yyyy-mm-dd hh:mm:ss</text>\n <input\n class=\"datetime-input\"\n v-model=\"data.relativeDateTimeText\"\n placeholder=\"yyyy-mm-dd hh:mm:ss\"\n />\n </view>\n <view class=\"row\">\n <text class=\"row-label\">输出相对时间</text>\n <uni-time-format :timestamp=\"inputRelativeTimestamp\" format=\"relative\"></uni-time-format>\n </view>\n </view>\n\n <view class=\"section\">\n <text class=\"section-title\">固定 5 分支示例（不随输入变化）</text>\n <view class=\"row\">\n <text class=\"row-label\">刚刚</text>\n <uni-time-format :timestamp=\"fixedJustNowTimestamp\" format=\"relative\"></uni-time-format>\n </view>\n <view class=\"row\">\n <text class=\"row-label\">分钟前</text>\n <uni-time-format :timestamp=\"fixedFiveMinutesAgoTimestamp\" format=\"relative\"></uni-time-format>\n </view>\n <view class=\"row\">\n <text class=\"row-label\">小时前</text>\n <uni-time-format :timestamp=\"fixedHourBranchTimestamp\" format=\"relative\"></uni-time-format>\n </view>\n <view class=\"row\">\n <text class=\"row-label\">昨天 HH:mm</text>\n <uni-time-format :timestamp=\"fixedYesterdayTimestamp\" format=\"relative\"></uni-time-format>\n </view>\n <view class=\"row\">\n <text class=\"row-label\">超过昨天</text>\n <uni-time-format :timestamp=\"fixedOlderThanYesterdayTimestamp\" format=\"relative\"></uni-time-format>\n </view>\n <text class=\"tip-text\">固定示例基于页面打开时刻计算，不随输入变化。</text>\n </view>\n\n <view class=\"section\">\n <text class=\"section-title\">秒级时间戳自动换算</text>\n <view class=\"row\">\n <text class=\"row-label\">timestamp(s)</text>\n <uni-time-format :timestamp=\"secondTimestamp\" format=\"datetime\"></uni-time-format>\n </view>\n </view>\n\n <view class=\"section\">\n <text class=\"section-title\">非法时间戳</text>\n <view class=\"row\">\n <uni-time-format :timestamp=\"data.invalidTimestamp\" format=\"datetime\"></uni-time-format>\n </view>\n <text class=\"tip-text\">非法时间会显示为空字符串。</text>\n </view>\n </scroll-view>\n</template>\n\n<script setup lang=\"uts\">\n type Data = {\n currentTimestamp: number\n invalidTimestamp: number\n relativeDateTimeText: string\n }\n\n const data = reactive<Data>({\n currentTimestamp: Date.now(),\n invalidTimestamp: NaN,\n relativeDateTimeText: ''\n })\n let timer : number | null = null\n\n const DAY_MS = 24 * 60 * 60 * 1000\n const pageOpenTimestamp = Date.now()\n const pageOpenDate = new Date(pageOpenTimestamp)\n\n function padZero(value : number) : string {\n return value < 10 ? `0${value}` : `${value}`\n }\n\n function formatDateTimeText(date : Date) : string {\n return `${date.getFullYear()}-${padZero(date.getMonth() + 1)}-${padZero(date.getDate())} ${padZero(date.getHours())}:${padZero(date.getMinutes())}:${padZero(date.getSeconds())}`\n }\n\n function toSafeInt(text : string) : number | null {\n const value = parseInt(text)\n if (isNaN(value)) {\n return null\n }\n return value\n }\n\n function parseDateTimeText(text : string) : number | null {\n if (text.length != 19) {\n return null\n }\n if (text.substring(4, 5) != '-' || text.substring(7, 8) != '-' || text.substring(10, 11) != ' ' || text.substring(13, 14) != ':' || text.substring(16, 17) != ':') {\n return null\n }\n\n const year = toSafeInt(text.substring(0, 4))\n const month = toSafeInt(text.substring(5, 7))\n const day = toSafeInt(text.substring(8, 10))\n const hours = toSafeInt(text.substring(11, 13))\n const minutes = toSafeInt(text.substring(14, 16))\n const seconds = toSafeInt(text.substring(17, 19))\n\n if (year == null || month == null || day == null || hours == null || minutes == null || seconds == null) {\n return null\n }\n\n const date = new Date(year, month - 1, day, hours, minutes, seconds)\n if (date.getFullYear() != year || date.getMonth() != month - 1 || date.getDate() != day || date.getHours() != hours || date.getMinutes() != minutes || date.getSeconds() != seconds) {\n return null\n }\n return date.getTime()\n }\n\n const pageOpenDateText = formatDateTimeText(pageOpenDate)\n data.relativeDateTimeText = pageOpenDateText\n\n const inputRelativeTimestamp = computed(() : number => {\n const parsed = parseDateTimeText(data.relativeDateTimeText)\n if (parsed != null) {\n return parsed\n }\n return NaN\n })\n\n const fixedDayStartTimestamp = new Date(\n pageOpenDate.getFullYear(),\n pageOpenDate.getMonth(),\n pageOpenDate.getDate()\n ).getTime()\n\n const fixedJustNowTimestamp = pageOpenTimestamp - 20 * 1000\n const fixedFiveMinutesAgoTimestamp = pageOpenTimestamp - 5 * 60 * 1000\n const fixedHourBranchTimestamp = (() : number => {\n const fiveHoursAgo = pageOpenTimestamp - 5 * 60 * 60 * 1000\n if (fiveHoursAgo >= fixedDayStartTimestamp) {\n return fiveHoursAgo\n }\n const oneHourAgo = pageOpenTimestamp - 60 * 60 * 1000\n if (oneHourAgo >= fixedDayStartTimestamp) {\n return oneHourAgo\n }\n return pageOpenTimestamp - 60 * 1000\n })()\n const fixedYesterdayTimestamp = fixedDayStartTimestamp - 50 * 60 * 1000\n const fixedOlderThanYesterdayTimestamp = fixedDayStartTimestamp - 2 * DAY_MS - 30 * 60 * 1000\n\n const secondTimestamp = computed(() : number => {\n return Math.floor(data.currentTimestamp / 1000)\n })\n\n onMounted(() => {\n timer = setInterval(() => {\n data.currentTimestamp = Date.now()\n }, 1000)\n })\n\n onUnmounted(() => {\n const currentTimer = timer\n if (currentTimer != null) {\n clearInterval(currentTimer)\n timer = null\n }\n })\n\n defineExpose({\n data,\n inputRelativeTimestamp,\n secondTimestamp\n })\n</script>\n\n<style>\n .page {\n flex: 1;\n padding: 12px;\n }\n\n .section {\n margin-bottom: 20px;\n }\n\n .section-title {\n font-size: 16px;\n color: var(--text-color, #333333);\n }\n\n .input-block {\n margin-top: 8px;\n margin-bottom: 8px;\n }\n\n .datetime-input {\n margin-top: 8px;\n margin-bottom: 6px;\n border-width: 1px;\n border-style: solid;\n border-color: #dddddd;\n height: 38px;\n padding-left: 10px;\n padding-right: 10px;\n color: #333333;\n background-color: #ffffff;\n }\n\n .row {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n margin-top: 8px;\n }\n\n .row-label {\n font-size: 14px;\n color: var(--text-color, #333333);\n opacity: 0.75;\n }\n\n .tip-text {\n margin-top: 4px;\n font-size: 12px;\n color: var(--text-color, #333333);\n opacity: 0.6;\n }\n\n @media (prefers-color-scheme: dark) {\n .datetime-input {\n border-color: rgba(255, 255, 255, 0.2);\n color: #ffffff;\n background-color: #2d2d2d;\n }\n }\n</style>\n\n```\n\n:::","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=uni-ui-x.uni-time-format)"},"uni-ui-x":{"name":"::: sourceCode\n## uni-ui-x\n:::","originName":"## uni-ui-x","description":"","readme":"# 项目介绍\n\nuni-ui x，是DCloud为 uni-app x 提供的扩展组件库。[开源库地址](https://gitcode.com/dcloud/uni-ui-x/tree/alpha)\n\nuni-ui x 是全新设计的，与为uni-app做的uni-ui不同。\n\nuni-ui x 有包括所有组件的[套装](https://ext.dcloud.net.cn/plugin?id=27852)，也可以单独下载每个组件（左侧每个组件文档中有该组件的下载地址）。\n\nuni-ui x 是伴随着HBuilderX 5.08发版的。5.07版本上有部分组件在部分平台有兼容性问题，详见组件文档的兼容性表格。5.07以前的HBuilderX版本未测试。\n\nuni-ui x 仅支持[样式隔离策略2.0](https://doc.dcloud.net.cn/uni-app-x/css/common/style-isolation.html)，需注意5.0以前创建的老项目需要在manifest.json中手动开启。\n\n# 特点\n\n- 性能\nuni-ui x 非常注重性能，在DOM层级控制、包体积、代码执行时间方面精益求精。\n\n它了解 uni-app x 蒸汽模式的最佳实践，尽可能利用模板和样式的预编译特性来提升性能。当然它也支持非蒸汽模式。\n\n- 合理的抽象\n\n一个组件的抽象能力非常重要，如何在自定义性、易用性、性能之间尽可能三全其美。\n\n很多组件为了满足使用者的需求，封装的属性越来越多，但组件使用者仍然在抱怨自定义性不足。\n\n尤其是把样式封装在组件属性上，造成用户需要自定义样式时无限封装属性，并且这些属性的控制无法使用css变量。\n\nuni-ui x 提供了完全的样式自定义能力，所有的样式定义都可以通过class设置，组件属性只控制功能逻辑。\n\n* 组件的根节点样式，可以在使用组件时的组件class或style上设置。\n* 组件的子节点样式，可以通过[externalClass](https://doc.dcloud.net.cn/uni-app-x/css/common/style-isolation.html#external-class)设置样式。子组件开放自己的样式出来，外部可通过externalClass进行子组件的样式自定义。\n\n组件使用者完全可以通过css自己控制所有样式。无需修改组件源码。加上css变量加持，灵活度远高于其他组件库。\n\n使用者可以通过css变量完全自定义自己的主题，而不会被组件属性上不能写css变量困扰。\n\n- 为AI设计\n\nuni-ui x 优先代码而不是二进制文件。目前没有引入字体文件。这处于性能考虑，也出于AI友好度考虑。\n\n以箭头为例，uni-ui x 中使用一个view配置左下边框并transform旋转来实现，这种设计性能比字体更好，且AI可以方便的理解这段代码的UI表现，可以在代码层面调整样式。\n\n如果是字体图片，AI很难理解、生成、修改。\n\n再举一个例子，uni-tab下沉midbutton，涉及一个贝塞尔曲线，此时没有使用图片，而是使用svg，同样是为了方便AI理解和修改。\n\n- 中性\n\nuni-ui x的风格是中性的，和uni内置组件、小程序内置组件一样，重视是开发者可以自定义成各种风格，而不是为开发者提供某套风格。\n\n开发者可以通过自定义css，形成自己的风格，或者交给AI完成类似工作。\n\n- 没有写死的颜色和文字\n\n* 没有写死的文字，不影响国际化。\n* 没有写死的颜色，不影响自定义主题。\n\n\n## uni-ui x 已支持的组件列表\n\n| 组件名 | 组件说明 |\n| --- | --- |\n| uni-badge-view | [数字角标](https://ext.dcloud.net.cn/plugin?name=uni-badge-view) |\n| uni-collapse | [折叠面板](https://ext.dcloud.net.cn/plugin?name=uni-collapse-x) |\n| uni-drag-cell | [可拖拽排序组件](https://ext.dcloud.net.cn/plugin?name=uni-drag-cell) |\n| uni-fab-button | [uni-fab-button](https://ext.dcloud.net.cn/plugin?name=uni-fab-button) |\n| uni-index-bar | [uni-index-bar](https://ext.dcloud.net.cn/plugin?name=uni-index-bar) |\n| uni-link | [链接](https://ext.dcloud.net.cn/plugin?name=uni-link-x) |\n| uni-nav-bar | [uni-nav-bar](https://ext.dcloud.net.cn/plugin?name=uni-nav-bar-x) |\n| uni-number-box | [数字输入框](https://ext.dcloud.net.cn/plugin?name=uni-number-box-x) |\n| uni-rate | [评分](https://ext.dcloud.net.cn/plugin?name=uni-rate-x) |\n| uni-refresh-box | [uni-refresh-box](https://ext.dcloud.net.cn/plugin?name=uni-refresh-box) |\n| uni-tab | [选项卡](https://ext.dcloud.net.cn/plugin?name=uni-tab-bar) |\n| uni-time-format | [时间格式化](https://ext.dcloud.net.cn/plugin?name=uni-time-format) |\n\n\n\n# uni-ui的升级建议@uniuiupgrade\n\n为 uni-app 提供的 uni-ui，为了兼容vue2，是选项式的。\n\n而 uni-app x 蒸汽模式只支持组合式，所以老的 uni ui 是无法在蒸汽模式下使用的。\n\nuni-app x 新提供了 uni-ui x，它是组合式的，且支持样式隔离策略2.0、支持无头理念。\n\nuni-ui 无法直接对照升级 uni-ui x，组件名称、用法都有变化。\n\n但升级时，老版 uni-ui 组件在 uni-app x 下的平替方案是什么，可以在这里说明功能映射关系：\n\n|uni-ui组件\t\t\t\t\t\t|中文名称\t\t\t\t\t\t\t\t|在uni-app x下的方案\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t|\n|--\t\t\t\t\t\t\t\t\t\t|--\t\t\t\t\t\t\t\t\t\t\t|--\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t|\n|uni-badge\t\t\t\t\t\t|数字角标\t\t\t\t\t\t\t\t|改用uni-ui x的uni-badge-view\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t|\n|uni-calendar\t\t\t\t\t|日历\t\t\t\t\t\t\t\t\t\t|见hello uni-app x里的模板中的日历页面\t\t\t\t\t\t\t\t\t\t\t\t\t|\n|uni-card\t\t\t\t\t\t\t|卡片\t\t\t\t\t\t\t\t\t\t|无。建议直接使用class，不用组件\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t|\n|uni-collapse\t\t\t\t\t|折叠面板\t\t\t\t\t\t\t\t|改用uni-ui x的uni-collapse\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t|\n|uni-combox\t\t\t\t\t\t|组合框\t\t\t\t\t\t\t\t\t|无\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t|\n|uni-countdown\t\t\t\t|倒计时\t\t\t\t\t\t\t\t\t|无\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t|\n|uni-data-checkbox\t\t|数据选择器\t\t\t\t\t\t\t|无\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t|\n|uni-data-picker\t\t\t|数据驱动的picker选择器\t|该组件支持uni-app x的VDOM模式，因为是选项式，无法支持蒸汽模式\t\t|\n|uni-dateformat\t\t\t\t|日期格式化\t\t\t\t\t\t\t|改用uni-ui x的uni-time-format\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t|\n|uni-datetime-picker\t|日期选择器\t\t\t\t\t\t\t|内置组件picker支持mode=date\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t|\n|uni-drawer\t\t\t\t\t\t|抽屉\t\t\t\t\t\t\t\t\t\t|改用内置组件page-container\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t|\n|uni-easyinput\t\t\t\t|增强输入框\t\t\t\t\t\t\t|无\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t|\n|uni-fab\t\t\t\t\t\t\t|悬浮按钮\t\t\t\t\t\t\t\t|改用uni-ui x的uni-fab-button\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t|\n|uni-fav\t\t\t\t\t\t\t|收藏按钮\t\t\t\t\t\t\t\t|无。建议直接使用class，不用组件\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t|\n|uni-file-picker\t\t\t|文件选择上传\t\t\t\t\t\t|无\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t|\n|uni-forms\t\t\t\t\t\t|表单\t\t\t\t\t\t\t\t\t\t|改用内置组件form\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t|\n|uni-goods-nav\t\t\t\t|商品导航\t\t\t\t\t\t\t\t|无\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t|\n|uni-grid\t\t\t\t\t\t\t|宫格\t\t\t\t\t\t\t\t\t\t|无。建议直接使用class，不用组件\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t|\n|uni-group\t\t\t\t\t\t|分组\t\t\t\t\t\t\t\t\t\t|无。建议直接使用class，不用组件\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t|\n|uni-icons\t\t\t\t\t\t|图标\t\t\t\t\t\t\t\t\t\t|改用uni-ui x的uni-icons-x的组合式组件\t\t\t\t\t\t\t\t\t\t\t\t\t|\n|uni-indexed-list\t\t\t|索引列表\t\t\t\t\t\t\t\t|改用uni-ui x的uni-index-bar\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t|\n|uni-link\t\t\t\t\t\t\t|超链接\t\t\t\t\t\t\t\t\t|改用uni-ui x的uni-link\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t|\n|uni-list\t\t\t\t\t\t\t|列表\t\t\t\t\t\t\t\t\t\t|使用内置组件list-view\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t|\n|uni-load-more\t\t\t\t|加载更多\t\t\t\t\t\t\t\t|使用内置组件loading\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t|\n|uni-nav-bar\t\t\t\t\t|自定义导航栏\t\t\t\t\t\t|改用uni-ui x的uni-nav-bar\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t|\n|uni-notice-bar\t\t\t\t|通告栏\t\t\t\t\t\t\t\t\t|无。非滚动建议直接使用class，不用组件\t\t\t\t\t\t\t\t\t\t\t\t\t|\n|uni-number-box\t\t\t\t|数字输入框\t\t\t\t\t\t\t|改用uni-ui x的uni-number-box\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t|\n|uni-pagination\t\t\t\t|分页器\t\t\t\t\t\t\t\t\t|无\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t|\n|uni-popup\t\t\t\t\t\t|弹出层\t\t\t\t\t\t\t\t\t|改用内置组件page-container\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t|\n|uni-rate\t\t\t\t\t\t\t|评分\t\t\t\t\t\t\t\t\t\t|改用uni-ui x的uni-rate\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t|\n|uni-row\t\t\t\t\t\t\t|布局-行\t\t\t\t\t\t\t\t\t|无。建议直接使用class，不用组件\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t|\n|uni-search-bar\t\t\t\t|搜索栏\t\t\t\t\t\t\t\t\t|无\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t|\n|uni-segmented-control|分段器\t\t\t\t\t\t\t\t\t|无\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t|\n|uni-steps\t\t\t\t\t\t|步骤条\t\t\t\t\t\t\t\t\t|无\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t|\n|uni-swipe-action\t\t\t|滑动操作\t\t\t\t\t\t\t\t|不推荐使用组件，请参考hello uni-app x模板中可左滑删除长列表示例\t|\n|uni-swiper-dot\t\t\t\t|轮播图指示点\t\t\t\t\t\t|改用内置组件swiper，通过externalClass控制指示点样式\t\t\t\t\t\t|\n|uni-table\t\t\t\t\t\t|表格\t\t\t\t\t\t\t\t\t\t|推荐使用rich-text或web-view中的table。\t\t\t\t\t\t\t\t\t\t\t\t|\n|uni-tag\t\t\t\t\t\t\t|标签\t\t\t\t\t\t\t\t\t\t|无。建议直接使用class，不用组件\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t|\n|uni-title\t\t\t\t\t\t|章节标题\t\t\t\t\t\t\t\t|无。建议直接使用class，不用组件\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t|\n|uni-transition\t\t\t\t|过渡动画\t\t\t\t\t\t\t\t|无。建议直接使用class，不用组件\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t|\n\n标记为`无`的，大多比较简单，有些其实没必要做成组件，使用class即可。有些可以交给AI快速写一个布局view组合，也没有必要封装为组件。\n\n在hello uni-app x示例中，全局css里有一些class，\n\n- uni-row组件，推荐改用使用全局class `uni-row`\n- uni-title组件，可以使用全局class `uni-h1`、`uni-h2`、`uni-h3`、`uni-h4`\n```css\n.uni-row {\n flex-direction: row;\n}\n.uni-h1 {\n font-size: 28px;\n font-weight: bold;\n border-bottom: 1px solid #ccc;\n margin: 8px 0;\n}\n.uni-h2 {\n font-size: 24px;\n font-weight: bold;\n border-bottom: 1px solid #ccc;\n margin: 8px 0;\n}\n.uni-h3 {\n font-size: 20px;\n font-weight: bold;\n margin: 8px 0;\n}\n.uni-h4 {\n font-weight: bold;\n margin: 8px 0;\n}\n```\n\n# 交流群\n\n有关 uni-ui-x 组件的任何意见或建议，欢迎通过 [uni-ui-x im 交流群](https://ext.dcloud.net.cn/publisher/start-session?pluginId=27852) 沟通交流。\n","fileFormats":"","compatibility":"","attribute":"","event":"","example":"","children":"","reference":"\n### 参见\n- [相关 Bug](https://issues.dcloud.net.cn/?mid=uni-ui-x.uni-ui-x)"}}