华为云首页用户手册

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

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

时间：2024-04-28 16:09:16

ASTRO轻应用 ASTROZERO 交互设置

同项目不同页面之间的跳转

当项目场景较多，一屏无法完全涵盖所有内容或需要额外查询时，为了性能考虑，通常会采取传递参数在另外的页面进行查询后，在当前页面展现，这时就需要在同项目中不同页面间来回跳转。

例如，新建三个页面（页面一、页面二和页面三），向页面一（默认主页）中拖入玫瑰花饼图和基本饼图，向页面二中拖入多区域折线图并发布，向页面三中拖入基本柱图并发布。

参考创建大屏&PC端项目中操作，新建一个大屏项目，如页面间交互。
参考使用空白画布新建页面中操作，新建一个空白页面，如页面一，并拖入玫瑰花饼图和基本饼图。

图1 页面一
单击，保存页面后单击，发布页面。
参考上述操作，新建页面二和页面三，分别拖入多区域折线图和基本柱图，并发布。

图2 页面二

图3 页面三
在页面一中，选中玫瑰花饼图，单击组件上方的，设置玫瑰花饼图和页面二之间的交互。

图4 与页面二之间的交互
- 页面类型：选择待跳转页面的类型，支持选择本项目内页面或外部页面。
- 内部页面：选择待跳转的具体页面。“页面类型”设置为“内部页面”时，才显示该配置。
- 外部页面地址：选择待跳转的外部页面地址，可以直接输入地址，也可以设置为全局变量。“页面类型”设置为“外部页面”时，才显示该配置。
- 页面打开方式：设置跳转页面的打开方式，如新窗口、当前窗口或弹窗。设置为弹窗时，可指定弹窗的高度和宽度。本示例设置为弹窗，并设置弹窗的高度和宽度为50%。
- 设置页面参数：支持设置为“固定参数”和“变量参数”，设置为“变量参数”时，参数值可以设置为全局变量。设置后，跳转页面的地址中会带上此处设置的参数，格式为“跳转页面URL?参数名=参数值”。
  图5 设置为固定参数
  
  图6 设置为变量参数
  
  图7 跳转页面地址中会带上设置的参数
在页面一中，选中基本饼图，单击组件上方的，设置基本花饼图和页面三之间的交互。

图8 与页面三之间的交互
单击，保存页面后单击，预览效果。

图9 单击玫瑰花饼图弹出页面二

图10 单击基本饼图弹出页面三

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

下一篇：ASTRO轻应用 ASTROZERO-如何通过全局变量，实现组件数据的动态变化:操作步骤

新客秒杀 2核2G 3M L实例

68元/年

普惠上云领千元上云礼券

立即前往

企业专享 X实例 4核8G 5M

888元/年

热门域名 1元随心购

1元/年起

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

意见反馈

0/200

提交成功！非常感谢您的反馈，我们会继续努力做到更好反馈提交失败！请稍后重试！

推荐文章

解决方案
相关专题