交互设置-华为云

ASTRO轻应用 ASTROZERO-通过参数控制响应动作:操作步骤

操作步骤参考创建大屏&PC端项目中操作，新建一个大屏项目。参考使用空白画布新建页面中操作，新建一个空白页面，如页面一，并拖入实心圆饼图和下拉选择框。选中实心圆饼图，单击，进入交互设置页面。设置实心圆饼图和下拉选择框之间的交互动作。在作为触发器中，单击“+ 交互事件”，选择“当点击数据时”。在响应动作中，单击“+ 响应动作”，选择“组件响应”。在动作详情中，设置具体的响应动作。本示例中，通过选择事件参数，来控制组件值的变化，即单击实心圆饼图中某个数据系列时，下拉选择框中的值随之改变。图1 设置动作详情设置完成后，单击“确定”。单击，保存页面，单击，预览效果。

ASTRO轻应用 ASTROZERO 交互设置

ASTRO轻应用 ASTROZERO-页面间交互:跳转外部页面

跳转外部页面外部页面跳转和项目内部页面跳转类似，只是交互动作的选择项不同，同时需要填入外部页面的连接地址。参考创建大屏&PC端项目中操作，新建一个大屏项目，如页面间交互。参考使用空白画布新建页面中操作，新建一个空白页面，并拖入玫瑰花饼图。选中玫瑰花饼图，单击组件上方的，进入交互设置页面。设置本页面与外部页面之间的跳转。图11 设置与外部交付的页面外部页面由于同源策略限制，暂不支持弹窗打开。在填写外部页面地址时，需要将“http://”或“https://”请求头也一并填入。单击，保存页面后单击，预览效果。

ASTRO轻应用 ASTROZERO 交互设置

ASTRO轻应用 ASTROZERO-页面间交互:同项目不同页面之间的跳转

同项目不同页面之间的跳转当项目场景较多，一屏无法完全涵盖所有内容或需要额外查询时，为了性能考虑，通常会采取传递参数在另外的页面进行查询后，在当前页面展现，这时就需要在同项目中不同页面间来回跳转。例如，新建三个页面（页面一、页面二和页面三），向页面一（默认主页）中拖入玫瑰花饼图和基本饼图，向页面二中拖入多区域折线图并发布，向页面三中拖入基本柱图并发布。参考创建大屏&PC端项目中操作，新建一个大屏项目，如页面间交互。参考使用空白画布新建页面中操作，新建一个空白页面，如页面一，并拖入玫瑰花饼图和基本饼图。图1 页面一单击，保存页面后单击，发布页面。参考上述操作，新建页面二和页面三，分别拖入多区域折线图和基本柱图，并发布。图2 页面二图3 页面三在页面一中，选中玫瑰花饼图，单击组件上方的，设置玫瑰花饼图和页面二之间的交互。图4 与页面二之间的交互页面类型：选择待跳转页面的类型，支持选择本项目内页面或外部页面。内部页面：选择待跳转的具体页面。“页面类型”设置为“内部页面”时，才显示该配置。外部页面地址：选择待跳转的外部页面地址，可以直接输入地址，也可以设置为全局变量。“页面类型”设置为“外部页面”时，才显示该配置。页面打开方式：设置跳转页面的打开方式，如新窗口、当前窗口或弹窗。设置为弹窗时，可指定弹窗的高度和宽度。本示例设置为弹窗，并设置弹窗的高度和宽度为50%。设置页面参数：支持设置为“固定参数”和“变量参数”，设置为“变量参数”时，参数值可以设置为全局变量。设置后，跳转页面的地址中会带上此处设置的参数，格式为“跳转页面URL?参数名=参数值”。图5 设置为固定参数图6 设置为变量参数图7 跳转页面地址中会带上设置的参数在页面一中，选中基本饼图，单击组件上方的，设置基本花饼图和页面三之间的交互。图8 与页面三之间的交互单击，保存页面后单击，预览效果。图9 单击玫瑰花饼图弹出页面二图10 单击基本饼图弹出页面三

ASTRO轻应用 ASTROZERO 交互设置

APPCUBE-如何自定义动作:自定义动作参数说明

自定义动作参数说明在自定义动作中，可以获取到eventParam、data和$pageStore三个参数。 eventParam：组件传递出的参数。以日期选择器组件为例，介绍如何获取eventParam。在页面中，拖入一个日期选择器组件到画布中。图2 拖拽日期选择器到画布中选中日期选择器，单击，进入交互设置页面。按照下图，设置自定义动作。图3 设置自定义动作 /* * 可以像示例这样获取到组件对象，然后编写js代码 * 示例中表示，触发当前事件后，会隐藏组件widget16 * 帮助文档：https://support.huaweicloud.com/usermanualdmax-appcube/appcube_05_7025.html * 可以直接使用的参数 * eventParam: 组件传递出的参数 * data: 交互动作信息对象 * $pageStore: 保存页面中全局变量的对象 */// {widget16}.hideWidget()console.log(eventParam);console.log(data);console.log($pageStore); 单击页面上方的，保存页面。单击，在预览页面，设置日期选择器的开始时间和结束时间。设置完成后，按F12，在“Console”页签，即可获取eventParam（第一个Object中）。 data：保存最详细的动作信息对象。 “Console”页签中的第二个Object，即为data。 $pageStore：保存页面中全局变量的对象。如果在全局变量中，配置了一个field变量，并设置默认值为1。在自定义动作中，通过打印$pageStore（如图3），可以获取到全局变量。图4 定义全局变量field “Console”页签中的第三个Object，即为$pageStore。

APPCUBE 交互设置

云服务器内容精选

交互设置

7*24

备案

专业服务

退订

建议反馈

售前咨询热线