页面间交互

操作场景

页面间交互是指在不同页面中，进行的相互跳转动作。可跳转同一项目中的任一页面，或跳转外部页面。在跳转项目内部页面时，用户可设置跳转携带相关参数。

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

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

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

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

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

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

6. 在页面一中，选中基本饼图，单击组件上方的，设置基本花饼图和页面三之间的交互。
   图8 与页面三之间的交互
   

7. 单击，保存页面后单击，预览效果。
   图9 单击玫瑰花饼图弹出页面二
   
   图10 单击基本饼图弹出页面三
   

跳转外部页面

外部页面跳转和项目内部页面跳转类似，只是交互动作的选择项不同，同时需要填入外部页面的连接地址。

1. 参考创建大屏&PC端项目中操作，新建一个大屏项目，如页面间交互。
2. 参考使用空白画布新建页面中操作，新建一个空白页面，并拖入玫瑰花饼图。
3. 选中玫瑰花饼图，单击组件上方的，进入交互设置页面。
4. 设置本页面与外部页面之间的跳转。
   图11 设置与外部交付的页面
   
   

   • 外部页面由于同源策略限制，暂不支持弹窗打开。
   • 在填写外部页面地址时，需要将“http://”或“https://”请求头也一并填入。

5. 单击，保存页面后单击，预览效果。